آموزش نوشتن کد در نوشته های وردپرس با افزونه
درج باکس کدنویسی در نوشته های وردپرس یکی از نیازهای سایتهای آموزشی در زمینه برنامه نویسی میباشد تا اینگونه ساینها بتوانند کدهای مدنظر خود را بصورتی کاربرپسند و مرتب در مطالب جهت استفاده توسط کاربرانشان قرار دهند. بدین صورت کاربران سایت خیلی راحت میتوانند از کدهای درج شده توسط شما در مطالب سایت استفاده کرده و حتی هنگام کپی کردن کدها دچار سردرگمی نشوند.
در در این آموزش قصد دارم تا به معرفی افزونه کاربردی بپردازم که با استفاده از آن میتوانید کدهای برنامه نویسی با هر زبانی مانند PHP را به صورت مرتب در قالب یک باکس در بین مطالب سایتتان نمایش دهید.
آموزش قراردادن باکس کد در نوشته های وردپرس
افزونه ایی که قصد معرفی انرا دارم با عنوان CodeMirror Blocks در مخزن وردپرس وجود دارد و بیش از 3 هزار نصب فعال دارد . افزونه CodeMirror Blocks یکی از بهترین افزونه های درج کد در نوشته های وردپرس است چراکه مانند سایر پلاگین های قدیمی دارای باگ های مختلف نیست و به راحتی میتوان از آن بدون دردسر خاصی استفاده کرد. برای استفاده از این افزونه ابتدا روی باکس زیر کلیک کنید تا وارد صفحه افزونه در مخزن وردپرس شوید و سپس افزونه را دانلود کرده و سپس اقدام به نصب و فعال سازی افزونه در سایت خود کنید.
آموزش نوشتن کد در وردپرس
بعد از نصب و فعال سازی افزونه ایی که بهتون معرفی کردم ؛ مشابه تصویر یک گزینه با نام CodeMirror Blocks به پنل مدیریت وردپرس شما اضافه خواهد شد. پس از کلیک بر روی CodeMirror Blocks وارد تنظیمات افزونه خواهد شد. همانطور که مشاهده میکنید در این صفحه میتوانید اقدام به سفارشی سازی تنظیمات افزونه بر اساس سلیقه خودتان کنید. در ادامه به توضیح هر یک از گزینه ها خواهم پرداخت تا بنوانید به راحتی تنظیمات اولیه افزونه CodeMirror Blocks را انجام دهید.
Language / Mode : از این بخش میتوانید زبان برنامه نویسی پیشفرض مورد استفاده در سایت خود را انتخاب کنید. به یاد داشته باشید زمانیکه مایل هستید باکس کد را در نوشته های سایت خود درج کنید ؛ میتوانید این گزینه را به دلخواه انتخاب کنید.
Theme : از این بخش میتوانید تا از بین قالب های آماده که برای نمایش کدهای برنامه نویسی در مطالب وردپرس در افزونه وجود دارد یکی را انتخاب کنید.
Show Line Number : با استفاده از این گزینه میتوانید نمایش شماره برای هر خط در باکس کد را فعال سازی کنید.
Highlight Active Line : با استفاده از این قسمت میتوانید قابلیت هایلایت کردن لاین انتخاب شده را فعال سازی کنید. بدین صورت درصورتیکه لاینی از کدها انتخاب شود ؛ لاین انتخاب شده بصورت هایلایت شده نمایش داده میشود.
Wrap Long Line : با استفاده از این گزینه ؛ درصورتیکه خطوط کدها طولانی باشد ، کدها بصورت بسته بندی شده یا به اصطلاح دیگر جمع و جور تر نمایش داده میشود.
Editable on Frontend : با فعال سازی این آیتم قابلیت ادیت کدها به کاربران سایت داده میشود.
Enable Control Panel : با فعال کردن این قابلیت ؛ کنترل پنل در بالای باکس کد نمایش داده میشود.
Language Label : با استفاده از این قابلیت میتوانید انتخاب کنید که برچسب زبان برنامه نویسی در بالای باکس کدها نمایش داده شود یا مخفی بماند.
Enable Execute Button : با استفاده از این قابلیت یک دکمه به پنل بالای باکس اضافه میشود که به کاربر اجازه میدهد تا کدها را اجرا کند و خروجی کد را مشاهده کند.
Enable Full Screen Button : با استفاده از این قابلیت یک دکمه به پنل بالای باکس اضافه میشود که به کاربر اجازه میدهد تا کدها را بصورت فول اسکرین مشاهده کند.
Enable Copy Button : با استفاده از این قابلیت یک دکمه به پنل بالای باکس اضافه میشود که به کاربر اجازه میدهد کدها را کپی کند.
Enable Code Block on Home Page : با فعال سازی این گزینه بلوک های کد در صفحه اصلی سایتتون نیز بارگیری می شود. پیشنهاد میکنم این گزینه غیرفعال باقی بماند تا سرعت لود سایت شما دچار مشکل نشود مگر اینکه در صفحه اصلی سایت خود مایل باشید از باکس کد استفاده کنید.
پس از انجام مراحل بالا تنظیمات را ذخیره کرده و یکی از مطالب خود را ویرایش کنید. خواهید دید که مشابه تصویر زیر آیکونی در ویرایشگر وردپرس شما اضافه شده است که برای اضافه کردن کدها میتوانید از آن استفاده کنید.
با کلیک روی این آیکون پنجره جدیدی برای شما باز خواهد شد که مشابه تصویر زیر میتوانید انواع کدهای برنامه نویسی را در آن اضافه کنید. همانطور که در تصویر زیر مشاهده میکنید گزینه های مختلفی وجود دارد که میتوانید از انها استفاده کنید. در باکس بزرگی که وجود دارد بایستی کد خود را درج کنید. همچنین آیتم های دیگری نیز وجود دارد که در ادامه به توضیح هر یک حواهم پرداخت.
Language / Mode : از این بخش میتوانید زبان برنامه نویسی پیشفرض مورد استفاده در سایت خود را انتخاب کنید. به یاد داشته باشید زمانیکه مایل هستید باکس کد را در نوشته های سایت خود درج کنید ؛ میتوانید این گزینه را به دلخواه انتخاب کنید.
Theme : از این بخش میتوانید تا از بین قالب های آماده که برای نمایش کدهای برنامه نویسی در مطالب وردپرس در افزونه وجود دارد یکی را انتخاب کنید.
Show Line Number : با استفاده از این گزینه میتوانید نمایش شماره برای هر خط در باکس کد را فعال سازی کنید.
Highlight Active Line : با استفاده از این قسمت میتوانید قابلیت هایلایت کردن لاین انتخاب شده را فعال سازی کنید. بدین صورت درصورتیکه لاینی از کدها انتخاب شود ؛ لاین انتخاب شده بصورت هایلایت شده نمایش داده میشود.
Wrap Long Line : با استفاده از این گزینه ؛ درصورتیکه خطوط کدها طولانی باشد ، کدها بصورت بسته بندی شده یا به اصطلاح دیگر جمع و جور تر نمایش داده میشود.
on Frontend : با فعال سازی این آیتم قابلیت ادیت کدها به کاربران سایت داده میشود.
چیدمان : از این گزینه میتوانید انتخاب کنید که نوع چیدمان بصورت عریض یا نرمال باشد.
بعد از اینکه کد خودتان را در باکس مربوطه اضافه کردید بر روی گزینه باشه کلیک کنید تا تنظیمات ذخیره شود. سپس نوشته خود را منتشر کنید تا مشابه تصویر زیر کدها با ظاهری زیبا و منظم در نوشته سایت شما نمایش داده شود.
نتیجه گیری
در این آموزش سعی کردم یکی از بهترین و جدیدترین افزونه های موجود جهت درج باکس کد در نوشته های وردپرس رو بهتون معرفی کنم. این افزونه تست شده است و در سایت سلطان وب نیز از همین افزونه جهت درج کد در نوشته ها استفاده میشود و بدون هیچ مشکلی فعالیت میکند. پیشنهاد میکنم سایر مطالب در زمینه آموزش وردپرس را در وبلاگ من مشاهده کنید. اگر سوال یا ابهامی در رابطه با آموزش داشتید حتما در بخش دیدگاهها اعلام کنید تا در کمترین زمان ممکن پاسخگوی شما باشم. موفق باشید
