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

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

صدای مارو دارین میشنوین سون هاستیا، سونیا، سون سونیا… ولش کنین متنو بخونین😆

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

اما در نهایت چه باید کرد؟ سئوالی که در صدد پاسخ به آن بر خواهیم آمد و روش مناسبی برای نمایش کد در سایت وردپرس به شما معرفی خواهیم کرد. البته راه های مختلفی وجود دارد که سعی شده به صورت کامل هر کدام را بیان کنیم، اما در پایان انتخاب با شماست که چه روشی را انتخاب کنید.

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

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

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

بعد از انتخاب بلوک دستور،کادری در مقابل شما قرار خواهد گرفت که با کمک وارد نمودن کدها در آن می توان به مقصود رسید:

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

توجه داشته باشید که بسته به نوع قالب سایت شما، بلوک کد ممکن است به صورت متفاوتی نمایش داده شود.

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

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

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

• به شما اجازه نمایش کد هر گونه زبان برنامه نویسی را می دهد.

• کد ها در خط های جداگانه و به صورت syntax نمایش داده می شوند.

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

اما برای اقدامات عملی ابتدا باید افزونه SyntaxHighlighter Evolved را نصب و فعال نمایید. برای اطلاع از جزییات بیشتر، به پست نحوه نصب افزونه وردپرس مراجعه نمایید.

پس از فعالسازی می توانید کار راهرچه سریعتر آغاز نمایید و پست مربوطه را مورد ویرایش قرار دهید. مطابق تصویر زیر به صفحه ویرایش پست بروید و بلوک SyntaxHighlighter را به پست خود اضافه کنید:

همانطور که مشاهده می کنید بلوکی جدید برایتان باز شده که می توانید کد خود را در آن قرار دهید. بعد از اضافه کردن کد، تنظیمات دلخواه خود را از ستون سمت راست سفارشی سازی کنید مطابق هر آنچه در تصویر زیر مشاهده می نمایید:

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

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

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

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

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

از اینجا یکم پیچیده میشه، منم طنز نغزم نمیاد خودتون بخندین این تیکشو بفهمین🤨

ابتدا باید نوع زبان کد نویسی خود را به وردپرس بفهمانید، بنابراین یک جفت براکت مکمل تایپ کنید و نام زبان برنامه نویسی خود را در دل آن دو قرار دهید. به طور مثال [php]. در صورتی که نیاز به استفاده از زبان دیگری دارید، فراموش نکنید که آن راحتما میان براکت ها قرار دهید. ضمنا باید همین براکت را با اضافه کردن / به محتویاتش بعد از اتمام کدها قرا دهید، به طور مثال [/php].

به طور مثال می توان کد دلخواه را اینگونه در سایت قرار داد:

[php]

<?php

function wpb_comment_count() {


$comments_count = wp_count_comments();


$message =  'There are <strong>'.  $comments_count->approved . '</strong> comments posted by our users.';


return $message;

}


add_shortcode('wpb_total_comments','wpb_comment_count');

?>

[/php]

 

به طور مثال اگر از کد HTML در پست خود استفاده می کنید، باید در اطراف HTML دو براکت قرار دهید. به کد های زیر توجه فرمایید:

 

[html] 

<a href="example.com">A sample link</a>

 [/html]

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

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

در ابتدا باید عرض کنیم که کدهای خود را توسط ابزار آنلاین رمزنگاری شده HTML تایید نمایید. یادتان که هست! الزامات وردپرس هرگونه کد به غیر از HTML را به عنوان عاملی مخرب در نظر می گیرد و آن را تغییر می دهد. اما برای اینکه کد شما به درستی نمایش داده شود، باید از ابزار انکودر HTML بدین منظور استفاده نمایید تا بتوان به نوعی وردپرس را دور زد.

حال باید کد پالایش شده خود را مطابق شکل زیر در ویرایشگر متن قرار دهید:

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

<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>

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

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

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

ما رو فراموش نکنید طاقت بی توجهیتونو نداریم…😍