no-img

اِمیلا نمایش کد در وردپرس بدون افزونه
اِمیلا
ترفند وب نمایش کد در وردپرس بدون افزونه
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

بروزسانی شده در 14 خرداد 1398
نمایش کد در وردپرس بدون افزونه
امتیاز 5.00 ( 6 رای )
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

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

emila.ir QR-code
بروزسانی شده در 14 خرداد 1398
154
milipinkman

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

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

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

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

 برای این کار ابتدا به مسیر پوسته ای که هم اکنون از آن بروی وبسایت خود استفاده می‌کنید بروید و فایل 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
designer
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

دیدگاهتان را بنویسید

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

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

درباره نویسنده

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک  -  ارسال ایمیل
IP شما: 3.81.73.233