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

همینک دانلود و تماشا کنید

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

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

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

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

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

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

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

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

افزودن بلاک کد در ویرایشگر وردپرس

حالا می‌توانید در جعبه‌ی متن این بلاک ، کد مورد نظر خود را وارد کنید.

وارد کردن کد در بلوک نمایش کد

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

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

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

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

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

یک آموزش جذاب دیگه!  افزونه نمایش کد در نوشته وردپرس CodeColorer

مزیت‌های این روش نسبت به استفاده از ویرایشگر پیش‌فرض ، به شرح زیر است:

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

ابتدا ، باید افزونه‌ی SyntaxHighlighter Evolved را نصب کنید. برای جزئیات بیشتر به آموزش ما برای نصب و فعال‌سازی افزونه در وردپرس مراجعه کنید.

پس از فعال‌سازی ، می توانید نوشته‌ای که قصد نمایش دادن کد در آن را دارید را ویرایش کنید. در صفحه‌ی ویرایش نوشته ، بلوک ‘SyntaxHighlighter Code’ را به نوشته خود اضافه کنید.

افزودن بلوک SyntaxHighlighter Code در ویرایشگر وردپرس

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

افزودن کد با SyntaxHighlighter Code

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

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

پیش نمایش کد با SyntaxHighlighter Code

این افزونه دارای پوسته‌ها و رنگ‌های زیادی است. برای تغییر دادن رنگ پوسته به مسیر تنظیمات » SyntaxHighlighter بروید.

تنظیمات SyntaxHighlighter

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

پیش نمایش تغییرات رنگ بندی کدها در تنظیمات 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>

کد شما به صورت زیر درخواهد آمد:

<pre><code>
<p><a href="/home.html">This is a sample link</a></p>
</pre></code>

حالا می‌توانید با ذخیره کردن نوشته‌ی خود ، نمایش کدتان را مشاهده کنید. مرورگر شما مبناهای HTML را تبدیل کرده و کاربر سایت‌تان قادر خواهد بود کد تصحیح شده را مشاهده کرده و کپی کند.

پیش نمایش کار با برچسب های <pre> و <code>

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

ارسال دیدگاه

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

درباره ®WPTutorial

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

هنوز دنبال هاست خوب می‌گردید؟!

🥇 هاست حرفه‌ای همراه با؛ بسته های رایگان ویدیوهای آموزش وردپرس و طراحی سایت !
کد تخفیف 10 درصد : off10wt

خرید هاست و دامین ارزان

هاست فوق العاده