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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

علی یزدان پرست

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

نوشته های مشابه

‫۸ نظرها

  1. خیلی خیلی دنبال این اموزش بودم واقعا
    ممنونننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننننن

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

  2. سلام، من این افزونه رو نصب کردم، منتها چون مدت زیادیه که آپدیت نشده، بعضی وقتا سایتم ارور 500 میده، ولی خب با یه رفرش کردن دوباره درست میشه؛ شما که از این افزونه دارین استفاده می کنین، آیا کار خاصی انجام دادین که با ارور 500 مواجه نمیشین؟ اگه امکانش هست راهنمایی بفرمایین.
    ممنون

پاسخی بگذارید

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

بستن