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