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

احتمالا می‌دانید که برای نمایش کد در وردپرس نمی‌توان آن را به صورت متن ساده در ویرایشگر وارد کرد.

هر بار که نوشته خود را ذخیره یا منتشر می‌کنید، وردپرس محتوای شما را از چند فیلتر رد می‌کند تا مطمئن شود که شخصی برای هک کردن وبسایت شما از طریق ویرایشگر کدی را تزریق نکرده باشد.

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

روش اول: نمایش کد در مطالب از طریق ویرایشگر گوتنبرگ

این روش را به افراد مبتدی و کسانی که زیاد نیاز ندارند که کد را در مطالب خود نمایش دهند توصیه می‌کنیم.

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

در این بلوک کد موردنظر خود را وارد کنید. مانند عکس زیر:

حالا مطلب خود را ذخیره کرده و آن را در سایت خود مشاهده کنید.

بسته به قالب وردپرس شما ممکن است ظاهر نمایش کد کمی تفاوت داشته باشد.

روش دوم: نمایش کد در وردپرس با افزونه SyntaxHighlighter

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

افزونه SyntaxHighlighter مزایای زیر را نسبت به بقیه روش‌ها دارد:

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

ابتدا به قسمت افزونه ‌ها >  افزودن بروید.

افزونه  SyntaxHighlighterرا نصب و فعال نمایید. برای اطلاعات بیشتر می‌توانید مقاله آموزش قدم به قدم نصب افزونه وردپرس را مطالعه نمایید.

پس از فعالسازی، به یک نوشته یا برگه بروید. سپس روی آیکون افزودن بلوک (علامت +) کلیک کنید و بلوک SyntaxHighlighter Code را جستجو نمایید.

سپس در بلوک کد خود را وارد کنید.

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

ابتدا در بخش Code Language زبان برنامه نویسی کد خود را مشخص نمایید.

در قسمت Show Line Numbers می‌توانید گزینه نمایش شماره خط‌ های کد را فعال یا غیرفعال کنید.

در فیلد Highlight Lines می‌توانید شماره خط هایی از کد را که می‌خواهید هایلایت شود را وارد نمایید.

و در آخر گزینه Make URLs Clickable هست که با فعال کردن آن URL های داخل کد قابلیت کلیک پیدا می‌کنند.

نتیجه تنظیمات بالا را در عکس زیر مشاهده می‌کنید:

افزونه SyntaxHighlighter برای نمایش کد پوسته و ظاهرهای مختلفی را ارائه می‌کند. برای تغییر پوسته کافی است از منوی مدیریت به قسمت تنظیمات > SyntaxHighlighter بروید.

در قسمت Color Theme شما می‌توانید از پوسته‌های موجود یکی را انتخاب کنید. بعد از انتخاب پوسته روی دکمه ذخیره تغییرات کلیک کنید.

برای مثال ما پوسته Django را انتخاب کردیم:

نمایش کد در مطالب با ویرایشگر کلاسیک

اگر هنوز از ویرایشگر کلاسیک وردپرس به جای گوتنبرگ استفاده می‌کنید، برای نمایش کد در مطالب خود باید روش زیر را انجام دهید.

شما باید کد خود را درون علامت براکت قرار دهید. همچنین داخل براکت باید نام زبان برنامه‌نویسی کد شما باشد. مثلا اگر می‌خواهیم کد 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 تغییر کند و در نتیجه از فیلترهای وردپرس عبور کند.

سپس باید کد خود را وارد کنید. البته فراموش نکنید کدها باید درون دو تگ <pre> و <code> قرار بگیرند.

حالا می‌توانید مطلب را ذخیره کنید و نتیجه آن را در سایت خود ببینید:

خب این آموزش وردپرس ما هم تمام شد.

امیدواریم توانسته نحوه نمایش کد در وردپرس را به خوبی آموزش داده باشیم.

 

موفق باشید.