آموزش نمایش کد در سایت وردپرسی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

این روش مزیت‌های زیر را نسبت به بلاک کد پیش فرض دارد:

• به شما این امکان را می‌دهد که به راحتی هر کدی را در هر زبان برنامه نویسی نمایش دهید.
• این روش کد را با هایلایت کردن و شماره خطوط نمایش می‌دهد.
• کاربران شما می‌توانند به راحتی کد را مشاهده و آن را کپی کنند.

برای این کار، ابتدا باید افزونه SyntaxHighlighter Evolved را نصب و فعال کنید. (لینک در انتهای مطلب موجود است)

پس از فعال سازی، نوشته یا برگه مورد نظرتان را ویرایش کنید. در صفحه ویرایش پست، بلاک SyntaxHighlighter Code را اضافه کنید.

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

ابتدا زبان کد خود را انتخاب کنید، مانند PHP، CSS، Java و غیره. سپس می‌توانید شماره خطوط را غیرفعال کنید، شماره خط اول را تعیین کنید، هر خطی را که می‌خواهید هایلایت کنید و یا اینکه این ویژگی را غیرفعال نمائید تا لینک‌های قابل کلیک بسازید.

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

این افزونه با تعدادی فرمت رنگی ارائه شده است. برای تغییر فرمت رنگ، باید به صفحه تنظیمات » SyntaxHighlighter مراجعه کنید.

در صفحه تنظیمات افزونه، یک تم رنگی را انتخاب نموده و تنظیمات SyntaxHighlighter را به شکل دلخواه تغییر دهید.

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

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

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

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

ابتدا باید کد خود را از طریق یک ابزار HTML entities encoder آنلاین وارد کنید. این نشانه گذاری، کد شما را به موجودیت‌های HTML تغییر داده و به شما امکان می‌دهد کد مورد نظرتان را اضافه کنید و فیلترهای پاکسازی وردپرس را دور بزنید.

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

کد شما به شکل زیر خواهد بود:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;This is a sample link&lt;/a&gt;&lt;/p&gt;
</pre></code>

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

مرورگر شما موجودیت‌های HTML را تشخیص داده و کاربران می‌توانند کد صحیح را ببینند و کپی کنند.

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