نمایش کد در نوشته های وردپرس
آیا می‌خواهید در نوشته‌های وبسایت وردپرس خود کدی را به نمایش در بیاورید؟ اگر تلاش کرده‌اید که کدها را مانند متون عادی در نوشته‌های خود درج کنید، وردپرس آن‌ها را به درستی نمایش نخواهد داد.
هر بار که اقدام به ذخیره کردن یک نوشته می‌کنید، وردپرس محتوای آن را از فیلترهای پاک‌سازی مشخصی عبور می‌دهد. این فیلترها به منظور اطمینان از هک نشدن سایت شما با کدهای قرار داده شده در یک نوشته توسط یک ناشناس ، تعبیه شده‌اند.
در این مقاله ، ما به شما روش‌های مناسبی برای نمایش کد در وبسایت وردپرس‌تان را نشان خواهیم داد و شما می توانید روشی را انتخاب کنید که با نیازهایتان سازگارتر است.
روش اول : از ویرایشگر پیش فرض وردپرس برای نمایش کد استفاده کنید
برای تازه‌کاران و کاربرانی که استفاده‌ی زیادی از کد و نمایش آن در وبسایت‌شان ندارند ، استفاده از این روش پیشنهاد می‌شود.
به راحتی برگه یا نوشته‌ی وردپرسی را که می‌خواهید کد خود را در آن نمایش بدهید به صفحه‌ی ویرایش ببرید. در صفحه‌ی ویرایش نوشته ، یک بلاک جدید افزودن کد را به نوشته‌تان اضافه کنید.
حالا می‌توانید در جعبه‌ی متن این بلاک ، کد مورد نظر خود را وارد کنید.
سپس ، نوشته‌ی خود را ذخیره کرده و در پیش‌نمایش آن ، نمایش داده شدن کد خود را مشاهده کنید.
بسته به پوسته‌ای که در وردپرس خود استفاده می‌کنید ، کد می تواند نوع نمایش‌های مختلفی روی وبسایت‌تان داشته باشد.
روش دوم : با استفاده از یک افزونه، کد را نمایش دهید
در این روش ، ما از یک افزونه برای نمایش کد در نوشته‌های وردپرس شما استفاده خواهیم کرد. این روش برای کاربرانی مناسب است که به طور مکرر در حال استفاده از کد در نوشته‌های وبسایت‌شان هستند.
مزیت‌های این روش نسبت به استفاده از ویرایشگر پیش‌فرض ، به شرح زیر است:
- این روش به شما اجازه می‌دهد هر کدی را با هر زبان برنامه‌نویسی نمایش بدهید.
- در این روش ، سینتکس های کد شبرنگی شده و تعداد خطوط آن نمایش داده می‌شود.
- کاربرانتان به سادگی می‌توانند کد را دیده و آن را کپی کنند.
ابتدا ، باید افزونه‌ی SyntaxHighlighter Evolved را نصب کنید. برای جزئیات بیشتر به آموزش ما برای نصب و فعال‌سازی افزونه در وردپرس مراجعه کنید.
پس از فعال‌سازی ، می توانید نوشته‌ای که قصد نمایش دادن کد در آن را دارید را ویرایش کنید. در صفحه‌ی ویرایش نوشته ، بلوک ‘SyntaxHighlighter Code’ را به نوشته خود اضافه کنید.
حالا یک بخش جدید در ویرایشگر نوشته مشاهده می‌کنید که می‌توانید در آن کد خود را وارد کنید. پس از افزودن کد ، باید تنظیمات بلاک را از ستون راست انتخاب کنید.
ابتدا ، باید زبان کد خود را انتخاب کنید. سپس ، می‌توانید تنظیمات دلخواه خود را روی کد پیاده کنید. برای مثال ، نمایش شماره‌ی هر خط را غیرفعال کنید ، خط مورد نظر خود را شبرنگ کنید و یا امکان کلیک کردن روی لینک‌ها را از دسترسی خارج کنید.
پس از اتمام تنظیمات خود ، نوشته را ذخیره کرده و از پیش‌نمایش آن برای دیدن کد نمایش داده شده دیدن کنید.
این افزونه دارای پوسته‌ها و رنگ‌های زیادی است. برای تغییر دادن رنگ پوسته به مسیر تنظیمات » SyntaxHighlighter بروید.
در این صفحه ، شما می‌توانید رنگ پوسته این افزونه را تغییر داده و تنظیمات دلخواه خود را روی این افزونه اعمال کنید. با ذخیره کردن تنظیمات خود ، پیش‌نمایش بلاک کد را در پایین صفحه خواهید دید.
استفاده از SyntaxHighlighter با ویرایشگر کلاسیک
اگر همچنان در حال استفاده از ویرایشگر قدیمی کلاسیک وردپرس هستید ، با این روش می‌توانید از SyntaxHighlighter برای افزودن کد به نوشته‌های وردپرس خود استفاده کنید.
کد خود را در یک براکت قرار داده و نام زبان برنامه نویسی کد خود را نیز در آن جای دهید. برای مثال ، اگر قصد استفاده از یک کد PHP را دارید ، باید آن را این گونه بیفزائید :
[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]به طور مشابه ، اگر کد شما به زبان HTML است ، آن را با کد کوتاه HTML ، به گونه زیر شروع کرده و پایان دهید.
[html]
<a href="example.com">A sample link</a>
[/html]روش سوم : به صورت دستی – بدون بلوک یا افزونه
این روش مناسب کاربران حرفه‌ای وردپرس است. این راه به کار زیادی نیاز دارد و همیشه نیز به طور دلخواه پاسخ نمی‌دهد. همچنین ، مناسب کاربرانی است که هنوز از ویرایشگر کلاسیک وردپرس استفاده می‌کنند و قصد دارند بدون استفاده از افزونه کد خود را به نمایش دربیاورند.
ابتدا ، باید کد خود را از فیلتر ابزار کدگذار نهادی HTML (HTML entities encoder) عبور دهید. این کار نشانه‌گذاری‌های کد شما را به مبناهای HTML تغییر داده و باعث می‌شود بتوانید از فیلترهای وردپرس عبور کرده و کد خود را به نمایش دربیاورید.
حالا ، کد خود را کپی کرده و کدهای <pre> و <code> را در ابتدا و انتهای آن قرار دهید.
کد شما به صورت زیر درخواهد آمد:
<pre><code>
<p><a href="/home.html">This is a sample link</a></p>
</pre></code>حالا می‌توانید با ذخیره کردن نوشته‌ی خود ، نمایش کدتان را مشاهده کنید. مرورگر شما مبناهای HTML را تبدیل کرده و کاربر سایت‌تان قادر خواهد بود کد تصحیح شده را مشاهده کرده و کپی کند.
امیدواریم این مقاله به شما در نمایش دادن کد در نوشته‌های وبسایت خود یاری رسانده باشد. شاید مایل باشید از مطلب ما در زمینه‌ی افزونه نمایش کد در وردپرس نیز دیدن کنید.
