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

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

قرار دادن باکس کد در وردپرس

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

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

افزونه ای که قصد معرفی آن را دارم با عنوان Urvanov synatax Highlighter در مخزن وردپرس به ثبت رسیده و تا کنون توانسته است بیش از 50.000 نصب فعال و کسب امتیاز 6.6.1 را از سمت کاربران کسب کرده است ، بنابراین از آن میتوانید به عنوان بهترین افزونه قرار دادن کد در وردپرس استفاده کنید.

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

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

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

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

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

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

بعد از کلیک کردن بر روی علامت کد ، همچین تصویری به شما نمایش داده میشود که برای وارد کردن کد باید بر روی قسمت علامت گذاری شده کلیک کنید.

در پنجره باز شده، دراین باکس کد مورد نظر را در این باکس وارد کرده و سپس ب روی گزینه افزودن کلیک کنید.

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

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

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

سوالات متداول قرار دادن جعبه کد در وردپرس با استفاده از افزونه

جمع بندی

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