توسعه وبسایت کدنویسی اصولی
راهکار نمایش کد در پست وردپرس

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

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

وردپرس به هنگام ذخیره نمودن داده ها چندین فیلتر روی داده ها اعمال میکند تا از تزریق کد مخرب به سیستم مدیریت محتوا جلوگیری نماید.

در این محتوا سعی داریم چند راهکار مناسب نمایش کد در پست وردپرس را ارائه دهیم. از آنجا که در اینجا چند متد ساده ارائه می دهیم شما میتوانید بسته به نیاز خود یک مورد را انتخاب کنید. تا در پست های خود استفاده نمایید.

متد 1. نمایش کد با استفاده از ویرایشگر پیش فرض (گوتنبرگ) در وردپرس

این روش برای کاربران مبتدی توصیه می شود که خیلی نیاز به نمایش کد در محتوای خود ندارند.

اینجا با استفاده از بلاک کد در گوتنبرگ میتوانید تکه کدی به ئست خود اضافه کنید.

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

بعد از افزودن تگ کد با استفاده از بلاک کد را در آن وارد نمایید.

راهکار نمایش کد در پست وردپرس 2
راهکار نمایش کد در پست وردپرس تصویر 2

بعد از تصویری مشابه تصویر زیر خواهید دید.

راهکار نمایش کد در پست وردپرس 3
راهکار نمایش کد در پست وردپرس تصویر 3

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

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

در این روش ، ما از یک افزونه وردپرس استفاده می کنیم تا به هدف نمایش کد در پست وردپرس دست یابیم. این روش برای کاربرانی که اغلب در پست های خود کد به نمایش میگذارند مفید خواهد بود. و برای آنها توصیه می گردد.

مزایای این روش نسبت به بلوک کد که در متد 1 مورد بررسی قرار گرفت:

  • به شما امکان می دهد تا هر کدی ، و از هر زبانی را ، به راحتی نمایش دهید.
  • در این روش کد را برجسته سازی و شماره گذاری کرده و با ظاهری جذاب نمایش میدهد.
  • خوانندگان پست های شما می توانند کد را به راحتی مطالعه کرده و از آن کپی کنند.

ابتدا باید پلاگین SyntaxHighlighter Evolution را نصب و فعال کنید. برای اطلاعات بیشتر ، به راهنمای گام به گام نحوه نصب افزونه وردپرس مراجعه کنید.

پس از فعال سازی ، می توانید پستی که می خواهید کد را در آن نمایش دهید، ویرایش کنید. در صفحه ویرایش پست ، بلوک “SyntaxHighlighter Code” را به پست خود اضافه کنید.

راهکار نمایش کد در پست وردپرس 4
راهکار نمایش کد در پست وردپرس 4

اکنون کد جدید به برنامه شما اضافه شده و در سمت راست صفحه یک بلوک تنظیمات مشاهده میکنید.

راهکار نمایش کد در پست وردپرس 5
راهکار نمایش کد در پست وردپرس 5

از بلوک تنظیمات زبان مورد نظر را انتخاب کنید. بعد از آن ، می توانید شماره گذاری خط ها را غیرفعال کنید ، شماره خط اول را مشخص کنید ، هر خطی را که می خواهید برجسته کنید و ویژگی قابل کلیک بودن را غیرفعال کنید.

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

راهکار نمایش کد در پست وردپرس 6
راهکار نمایش کد در پست وردپرس 6

این افزونه دارای تعدادی طرح و طرح زمینه رنگی است. برای تغییر طرح زمینه رنگ ، باید به صفحه تنظیمات  رفته و سپس SyntaxHighlighter بروید.

راهکار نمایش کد در پست وردپرس 7
راهکار نمایش کد در پست وردپرس 7

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

راهکار نمایش کد در پست وردپرس 8
راهکار نمایش کد در پست وردپرس 8

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

اگر هنوز از ویرایشگر قدیمی WordPress کلاسیک استفاده می کنید ، در اینجا نحوه استفاده از افزونه SyntaxHighlighter برای افزودن کد به پست های وبلاگ وردپرس را آورده ایم.

به سادگی کد خود را در داخل براکت با نام زبان قرار دهید. به عنوان مثال ، اگر می خواهید کد PHP را اضافه بنویسید ، آن را به صورت زیر اضافه می کنید:

راهکار نمایش کد در پست وردپرس 9
راهکار نمایش کد در پست وردپرس 9

 

متد 3. نمایش کد به صورت دستی (بدون پلاگین یا بلاک) در وردپرس

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

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

ابتدا باید کد خود را از طریق یک ابزار آنلاین رمزگذار کد HTML نمایید. این نشانه گذاری کد شمارا به کد Html نمایشی تبدیل میکند.

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

راهکار نمایش کد در پست وردپرس 10
راهکار نمایش کد در پست وردپرس 10

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

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

منابع‌

وب سایت wpbeginner

Author

خسرو نظری

دانش آموخته کارشناسی ارشد فناوری اطلاعات (گرایش طراحی و تولید نرم افزار)، توسعه دهنده وب، مدیرپروژه های نرم افزاری، مدیرسیستم (sysadmin) لینوکس، مشاور مانیتورینگ و مدیر مجموعه تحلیل یار

Leave a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *