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

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

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

آیا می خواهید کد را در سایت وردپرس خود نمایش دهید؟

اگر سعی کردید که کد را مانند متن معمولی اضافه کنید، وردپرس آن را به درستی نمایش نمی دهد.

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

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

روش 1. نمایش کد با استفاده از ویرایشگر پیش فرض وردپرس

این روش برای مبتدیان و کاربران توصیه می شود که اغلب نیاز زیادی به نمایش کد ندارند.

برای این روش در صفحه ویرایش پست، بلوک کد جدید را به پست خود اضافه کنید.

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

پس از آن،می توانید پست خود را ذخیره کنید و پیش نمایش آن را برای دیدن بلوک کد مشاهده کنید.

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

روش 2.نمایش کد در وردپرس با استفاده از پلاگین

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

این روش برای کاربرانی توصیه می شود که اغلب کد را در مقالات خود نمایش می دهند.

مزیت های این روش:

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

در ابتدا،باید پلاگین SyntaxHighlighter Evolved را نصب و فعال کنید.

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

در صفحه ویرایش پست، کد بلوک SyntaxHighlighter را به پست خود اضافه کنید.

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

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

زبان کد موردنظر را انتخاب کنید و همچنین می توانید نمایش تعداد خطوط  و نمایش کد به صورت هایلایتر و دیگر تنظیمات را اعمال کنید.

در پایان کار، پست خود را ذخیره کنید و روی دکمه پیش نمایش کلیک کنید تا پست را مشاهده کنید.

افزونه همراه با تعدادی از طرح های رنگی و تم ها است.

برای تغییر تم رنگ،از صفحه Settings » SyntaxHighlighter بازدید کنید.

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

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

اگر هنوز از ویرایشگر قدیمی کلاسیک WordPress استفاده می کنید، در این قسمت نحوه استفاده از Plugin SyntaxHighlighter برای اضافه کردن کد به پست های سایت وردپرس نشان داده شده است.

به سادگی نام زبان کد مورد نظر خود را داخل براکت بنویسید.

برای مثال، اگر میخواهید کد php را اضافه کنید، آنگاه کد را مانند قسمت پایین اضافه کنید:

به طور مشابه، اگر شما می خواهید یک کد HTML اضافه کنید، آن را در براکت HTML قرار دهید مانند:

روش 3. کد نمایش در WordPress به صورت دستی (بدون پلاگین یا بلوک)

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

در ابتدا،شما باید کد خود را از طریق یک ابزار آنلاین HTML entities encoder منتقل کنید.

این نشانه گذاری کد شما را به اجزای HTML تغییر می دهد، که به شما این امکان را می دهد که کد را اضافه کنید و فیلتر های پاکسازی وردپرس را دور بزنید.

حالا کد خود را در ویرایشگر متن کپی کنید و آن را در داخل تگ های <pre> و <code> قرار دهید.

کد شما شبیه این خواهد شد:

هم اکنون می توانید پست خود را ذخیره کنید و کد نوشته شده را در پیش نمایش سایت مشاهده کنید.

مرورگر شما عناصر HTML را تبدیل می کند و کاربران می توانند کد درست را مشاهده و کپی کنند.

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

درباره شرکت فناوری اطلاعات مهرسانا

ارائه دهنده خدمات طراحی وب سایت ، گرافیک ، برنامه نویسی و تولید محتوای آموزشی

ارسال دیدگاه

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