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

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

در این آموزش از پایگاه دانش مجموعه ما قصد دارم تا به معرفی افزونه ای کاربردی بپردازم که با استفاده از اون میتونید تا کدهای برنامه نویسی با هر زبان برنامه نویسی اعم از php، css، html، جاوا اسکریپت و… را به صورت کد شده و مرتب در قالب یک باکس نمایش داده و به راحتی از آنها در نوشته‌های وردپرس استفاده کنید. پس اگر شما هم دنبال روشی هستید تا اقدام به نمایش کدهای برنامه نویسی در مطالب وردپرس کنید تا انتها همراه باشید.

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

افزونه‌ای که قصد معرفی اونو دارم با عنوان Crayon Syntax Highlighter در مخزن وردپرس به ثبت رسیده و تا حالا تونسته تا بیش از 50.000 نصب فعال و کسب امتیاز 4.7 را از بین بازخوردهای ارسال که کاربران داشتند را به خودش اختصاص بده که از اون میتونید به عنوان بهترین افزونه قرار دادن کد در وردپرس استفاده کنید. برای استفاده از این افزونه ابتدا روی دکمه زیر کلیک کنید تا وارد صفحه افزونه در مخزن وردپرس شده و اونو دانلود کنید و بعدش با استفاده از آموزش آموزش نحوه نصب و کار کردن با افزونه ها در وردپرس اقدام به نصب و فعال سازی افزونه در سایت خودتون بکنید.

دانلود افزونه Crayon Syntax Highlighter

بعد از نصب و فعال سازی این افزونه مشابه تصویر زیر به منوی تنظیمات> Crayon مراجعه کرده و همونطور که میبینید اقدام به سفارشی سازی تنظیمات افزونه بر اساس سلیقه خودتون برای نمایش کدهای برنامه نویسی در وردپرس بکنید.

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

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

معیار ها: با استفاده از این قسمت میتونید تا چینش باکس نمایش کد در مطالب وردپرس را تعیین کنید. برای این منظور هر قسمت را به دلخواه خودتون بر اساس توضیحات زیر تغییر دهید.

• با فعال کردن گزینه ارتفاع میتونید تا یک اندازه دلخواه برای ارتفاع تعیین کنید تا در صورتی که حجم کدها زیاد بود باکس مربوط به نمایش کد اگر از این مقدار بیشتر شدن اسکرول بخوره و محتوای طولانی در نوشته به وجود نیاد.
• با فعال کردن گزینه عرض هم میتونید تا همین کار را به صورت افقی اعمال کنید تا اگر یکی از خطور کدها طولانی بود محتوای صفحه زیاد اشغال نشه.
• با فعال کردن گزینه‌های فاصله از بالا، پایین، چپ و راست هم میتونید تا یک فاصله‌ای را به عنوان حاضیه در نظر بگیرید تا از هر طرف بر روی باکس نمایش کد در وردپرس اعمال بشه.
• با گزینه تراز افقی هم میتونید تا تراز باکس کد را به انتخاب خودتون در مرکز نوشته، سمت چپ و یا سمت راست قرار بدین تا ظاهر و جلوه منظم‌تری برای این باکس ایجاد کنید.

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

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

سایر تنظیمات افزونه هم نیاز به توضیحات خاصی نداره و کاملا گویا هستند. حالا تنظیمات را ذخیره کرده و به ویرایش یکی از مطالب خودتون مراجعه کنید. خواهید دید که مشابه تصویر زیر دکمه‌ای در ویرایشگر اضافه شده که برای اضافه کردن کدها میتونید از اون استفاده کنید.

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

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