no-img
اِمیلا

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

بروزرسانی؛
19 مارس 2020
وردپرس

شاید شما هم از آن دسته وبلاگ نویسانی هستید که با کد های برنامه نویسی بسیار سر و کار دارید؛ در این مطلب از emila روشی را معرفی خواهیم کرد تا بدون استفاده از هیچگونه افزونه ای در وردپرس کد هایی را که در نوشته های خود بکار می‌برید را به گونه ای دیگر نمایش دهید!

افزونه های بسیاری در این باره در مخزن وردپرس وجود دارد که بیشتر با مشکلاتی همراه هستند از جمه اینکه تنظیمات سختی دارند یا آن چنان پیچیده هستند که کار با آنها برای هر کسی آسان نیست!

از طرفی دیگر پیکربندی هر افزونه بروی سیستم مدیریت محتوای وردپرس هر چند سبک، باعث می‌شود تا تعداد پردازش ها بیشتر و بنابراین بارگذاری برگه مدیریت وردپرس هم بیشتر به درازا بکشد!

 برای این کار ابتدا به مسیر پوسته ای که هم اکنون از آن بروی وبسایت خود استفاده می‌کنید بروید و فایل Style.css و یا اگر چنین فایلی وجود نداشت فایل rtl.css را باز کنید.

کد های زیر را به انتهای فایلی که باز کرده اید اضافه کنید.

pre {
    margin-bottom: 22px;
    font-family: Consolas, Monaco, "Courier New", Courier, monospace;
    font-size: 12px;
    overflow: auto;
    background: #eee;
    padding: 10px;
    border: 1px solid #ddd;
    font-style: normal;
    font-weight: normal;
text-align:left;
direction:ltr;
}

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

با این کار شما از تگ pre که در زبان HTML یک تگ برای نمایش متن ها دقیقا به همان گونه ای هست، بهره می‌گیرید؛ ولی تفاوتی که هم اکنون بکار گیری این تگ با پیش از انجام گام های بالا دارد این است که هم اکنون متن های داخل این تگ با شیوه و Style مخصوصی که برای آن در فایل Style پوسته خود تعریف کرده اید نمایش داده می‌شود.

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

برای نمایش کد در وردپرس ابتدا فایل شیوه نامه (style.css) پوسته خود را برای ویرایش باز کرده و خط های زیر را به آخر این فایل اضافه کنید. در استایل زیر سعی شده است نسبت به نمایش صحیح کدها در بیشتر پوسته ها مقادیر بصورت استاندارد تعریف شود و در صورت عدم نمایش صحیح می توانید نسبت به ثابت کردن نحوه ی نمایش در مقادیر زیر تغییرات ایجاد کنید :

code, pre {
  direction:ltr;
  width: 100%;
  display: block;
  color: #333333;
  overflow:auto;
  background: #fcfcfc url(http://emila.ir/files/code.png) left top repeat-y;
  border: 1px solid #f2f2f2;
  padding: 10px 28px;
  margin: 10px 0px;
  max-height: 200px;
  line-height: 120%;

}
لینک کوتاه : https://emila.ir/?p=6988
سلام علیکم!
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم