آموزش نمایش کد در وردپرس

آیا می‌خواهید کدی را در پست‌های وبلاگ خود نمایش دهید ؟ اگر شما تصمیم دارید که کدها را مانند متن معمولی در نوشته ی خود اضافه کنید , باید بدانید که وردپرس آن را به درستی نمایش نخواهد داد.

همچنین وردپرس , هر بار که شما یک نوشته را ذخیره می‌کنید آن را از چندین فیلتر عبور می‌دهد . این فیلترها در آنجا هستند تا مطمئن شوند که هیچ کدی از طریق ویرایشگر نوشته وارد نمی شود تا باعث هک شدن وب سایت شما بشود .

در این مقاله , ما راه‌های مناسبی را برای نمایش کد در سایت وردپرسی , به شما نشان خواهیم داد . هرچند که ما روش‌های مختلفی را توضیح می دهیم ولی شما می‌توانید هر کدام که متناسب با نیازهای شما باشد را انتخاب کنید .

روش ۱ . نمایش کد با استفاده از ویرایشگر پیش‌فرض وردپرس

هرچند این روش مبتدیانه است ولی برای کاربرانی که نیاز به نمایش کد دارند توصیه می‌شود . به سادگی یک نوشته ی جدید در وبلاگ سایت خود ایجاد و یا صفحه‌ای که می‌خواهید کد را در آن نمایش دهید ویرایش کنید . در صفحه ی ویرایش , یک بلوک کد جدید به نوشته ی خود اضافه کنید . برای این کار , مطابق تصویر زیر بر روی  +  کلیک کنید .

آموزش نمایش کد در وردپرس

سپس در قسمت جستجو برای یک بلوک , کلمه ی “دستور” را نوشته و بلوکی را که برای شما می آید , انتخاب کنید .

آموزش نمایش کد در وردپرس

پس از انتخاب بلوک مورد نظر , می بینید که قسمتی در نوشته برای شما ایجاد شده است که می توانید کد خود را برای نمایش درون آن بنویسید .

آموزش نمایش کد در وردپرس

حالا می‌توانید در قسمت متن آن بلوک , برای نمونه کد زیر را وارد کنید .

آموزش نمایش کد در وردپرس

پس از آن , شما می‌توانید این نوشته ی سایت خود را ذخیره کرده و پیش‌نمایش آن را به منظور مشاهده ی بلوک کد , در عمل ببینید .

آموزش نمایش کد در وردپرس

البته این تصویر با توجه به تم وردپرس شما ممکن است با آنچه در سایت شما نمایش داده می شود , متفاوت باشد .

روش ۲ . نمایش کد با استفاده از یک افزونه ی وردپرس

برای این روش , ما از یک افزونه ی وردپرس برای نمایش کد در نوشته های سایت استفاده خواهیم کرد . این روش برای کاربرانی که معمولا کد را در مقاله‌ها می‌نویسند توصیه می‌شود . مزایای این روش را می توانید در ادامه بخوانید :

  • به شما این امکان را می‌دهد که به راحتی هر کدی را در هر زبان برنامه‌نویسی نشان دهید .
  • کد را با برجسته کردن سینتکس ( syntax highlighting ) و شماره ی خط نشان می‌دهد .
  • کاربران شما می‌توانند به راحتی کدها را مطالعه کرده و هر کدام را کپی کنند .
مراحل انجام این روش :

ابتدا شما باید افزونه ی SyntaxHighlighter Evolved را نصب و فعال کنید . به محض فعال‌سازی , شما می‌توانید نوشته های وب سایت خود را در جایی که می‌خواهید کدی را نمایش دهید , ویرایش کنید . در صفحه ی ویرایش نوشته یا نوشته ای جدید , باید بلوک ” SyntaxHighlighter Code ” را به نوشته ی خود اضافه کنید . برای این کار , مطابق عکس زیر بر روی  +  کلیک کنید .

آموزش نمایش کد در وردپرس

سپس SyntaxHighlighter Code را درون قسمت جستجو برای یک بلوک بنویسید . بلوک SyntaxHighlighter Code که می آید را انتخاب کنید .

آموزش نمایش کد در وردپرس

در آخر می بینید مطابق عکس زیر برای شما یک بلوک کد جدید در ویرایشگر نوشته آورده شده است که در آن می‌توانید کد خود را وارد کنید .

آموزش نمایش کد در وردپرس

پس از اضافه کردن کد باید تنظیمات مورد نظرتان برای بلوک را از ستون سمت چپ انتخاب کنید .

آموزش نمایش کد در وردپرس

ابتدا باید زبانی را برای کد خود انتخاب کنید . بعد از آن , شما می‌توانید شماره ی سطرها را خاموش کنید , شماره ی سطر اول را بدهید , هر سطر را که می‌خواهید هایلایت کنید و یا ویژگی ای که لینک را قابل کلیک کردن می سازد , خاموش کنید . هنگامی که این کارها را انجام دادید , نوشته ی خود را ذخیره کرده و روی دکمه ی پیش‌نمایش کلیک کنید تا آن را ببینید .

آموزش نمایش کد در وردپرس

افزونه ی نصب شده , با تعدادی طرح‌های رنگی و تم‌ها به وجود می‌آید . برای تغییر تم رنگی باید به تنظیمات و سپس SyntaxHighlighter بروید .

آموزش نمایش کد در وردپرس

از صفحه ی تنظیمات , می‌توانید یک تم رنگی انتخاب کرده و تنظیمات SyntaxHighlighter را تغییر دهید . شما باید تنظیمات خود را برای مشاهده ی پیش‌نمایش بلوک کد از پایین صفحه ذخیره کنید .

آموزش نمایش کد در وردپرس

استفاده از افزونه ی SyntaxHighlighter با ویرایشگر کلاسیک

در اینجا نحوه ی استفاده از افزونه ی SyntaxHighlighter برای اضافه کردن کد به نوشته های سایت وردپرسی , هنگامی که از ویرایشگر کلاسیک در وردپرس استفاده می کنید را خواهیم گفت .

به سادگی کد خود را با نام زبان موردنظر , درون [ ] قرار دهید . برای مثال اگر کدی با زبان PHP دارید , آن را به این شکل بنویسید :

[php]
php?>
 }  () private function get_time_tags
;('time = get_the_time('d M, Y$
;return $time
{
<?
[/php]
به طور مشابه , اگر می‌خواهید یک کد HTML را اضافه کنید , مطابق نمونه ی زیر انجام دهید :
[html]
<a href="example.com">A sample link</a>
[/html]

روش ۳ . نمایش کد در نوشته های وردپرس به صورت دستی ( بدون افزونه یا بلوک )

این روش برای کاربران پیشرفته تر است زیرا نیازمند کار بیشتری است . در ضمن همیشه آنطور که در نظر گرفته‌ شده است کار نمی‌کند . این روش برای کاربرانی است که هنوز از ویرایشگر کلاسیک استفاده می‌کنند . همچنین , مناسب افرادی است که می‌خواهند کد موردنظرشان را بدون استفاده از یک افزونه نمایش دهند .

برای این کار , شما باید کد خود را از طریق ابزاری مثل HTML entities encoder به صورت آنلاین تبدیل کنید . این کار با تبدیل کد به موجودیت‌های HTML , به شما این امکان را می‌دهد که کد را به نوشته ی خود اضافه کرده و فیلترهای پاک‌سازی وردپرس را دور بزنید .

حالا کد را در ویرایشگر متن کپی و پیست کرده , در قبل و بعد از آن برچسب‌های <pre> و <code> بگذارید .

آموزش نمایش کد در وردپرس

کد شما به این صورت است :

<pre><code>
;lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;This is a sample link&lt;/a&gt;&lt;/p&gt&
</pre></code>

حالا شما می‌توانید نوشته ی خود را ذخیره کرده و کد را در پیش‌ نمایش ببینید . مرورگر شما موجودیت‌های HTML را تبدیل کرده و کاربران قادر به دیدن و کپی کردن کد صحیح خواهند بود .

آموزش نمایش کد در وردپرس

اُمیدواریم این مقاله به شما کمک کند تا یاد بگیرید چگونه به راحتی یک کد را در سایت وردپرسی بدون به هم ریختگی نمایش دهید . اگر این مقاله را دوست داشتید , سایر مقاله های کاربردی ما در اورژانس وردپرس را نیز بخوانید و همچنین لطفا آن را به دوستان خود معرفی کنید . از همراهی شما دوستان وردپرسی ممنونیم .

بدون نظر

دیدگاهتان را بنویسید