افزونه های وردپرس

قرار دادن کد در نوشته های وردپرس با افزونه Prismatic

نوشتن قطعه کد در پست های وردپرسی و قرار دادن کد در نوشته های وردپرس یکی از نیازهای وب سایت های آموزشی در حوزه وب و برنامه نویسی مانند وردپرس نارنجی می باشد.

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

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

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

افزونه ای که در این آموزش برای نمایش بهتر و متمایزتر کدها در پست های وردپرسی معرفی می کنم، با عنوان Prismatic در مخزن وردپرس به ثبت رسیده است.

این افزونه تا کنون با بیش از 1.000 نصب فعال توانسته است امتیاز 4.5 را از کاربران خود به دست بیاورد.

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

دانلود افزونه Prismatic

پس از نصب و فعال سازی افزونه زیرمنویی با عنوان Prismatic در بخش تنظیمات پیشخوان وب سایت شما ظاهر می شود که با کلیک روی آن به صفحه تنظیمات افزونه هدایت خواهید شد.

این مطلب را از دست ندهید :
ایجاد محدودیت سنی در مشاهده محتوای سایت وردپرسی با افزونه Age Gate
تنظیمات عمومی Prismatic
تنظیمات افزونه

همانطور که مشاهده می کنید این افزونه در تنظیمات خود دارای چهار تب مختلف می باشد که در ادامه هر کدام را توضیح می دهم.

تب General

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

سپس با توجه به نوعی که برای نمایش متمایز کدها انتخاب کرده اید، در یکی از تب های Prism.js، Highlight.js و Plain Flavor نحوه نمایش را به دلخواه خود پیکربندی کنید.

تب Prism.js

چنانچه از بین انواع نمایش های کدهای خود در بخش تنظیمات عمومی Prism.js را انتخاب کرده اید، در این تب می توانید تنظیمات را برای نمایش کدهای خود پیکربندی کنید. تنظیمات برای Highlight.js و Plain Flavor نیز مشابه Prism.js می باشد.

تنظیمات Prism.js
تنظیمات افزونه بخش Prism.js

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

Line Highlight: با فعال سازی این گزینه از بین خطوط کد های خود، می توانید خطوط دلخواه را هایلایت کنید تا بیشتر به چشم بیایند.

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

Show Language: هنگام قرار دادن کد در نوشته های وردپرس، می توانید زبان نوشتاری کد را نیز تعیین کنید. با فعال سازی این گزینه زبان قطعه کد نیز نمایش داده می شود.

Limit to Post: با فعال سازی این گزینه استفاده از افزونه Prismatic تنها محدود به پست ها و برگه ها خواهد شد.

این مطلب را از دست ندهید :
اصلاح لینک های شکسته در وردپرس

 Code Escaping: در این بخش می توانید تعیین نمایید که پس از فعال سازی Prism.js، در کدام بخش ها از تنظیمات آن استفاده شود. این بخش ها شامل فرانت-اند و بک-اند، بخش های منتخب و نظرات می شوند که به دلخواه می توانید استفاده از افزونه را در آن فعال یا غیرفعال کنید.

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

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

در ویرایشگر گوتنبرگ برای قرار دادن کد به وسیله افزونه Prismatic، از بین بلوک های قالب بندی بلوک Prismatic را انتخاب کرده و قطعه کد خود را در آن قرار دهید.

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

در ویرایشگر کلاسیک نیز در نوار ابزار ویرایش گزینه ای با عنوان Add Highlight.js Code ظاهر شده است که با کلیک روی آن می توانید کد خود را در باکس ظاهر شده قرار دهید.

تعیین زبان قطعه کد
تعیین زبان قطعه کد

در این باکس همانطور که مشاهده می کنید، می توانید زبان کد را نیز تعیین کرده تا به کاربران نمایش داده شود.

پیش نمایش افزونه
پیش نمایش Prismatic

در نهایت مانند آنچه در تصویر بالا مشاهده می کنید، کدهای شما با ظاهری متفاوت در نوشته نمایش داده می شوند.

عاطفه نوربخش

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

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

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

وردپرس نارنجی در جشنواره وب و موبایل ایران شرکت کرده است.به این وب سایت رای دهید
+
بستن