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

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

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

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

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

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

نمونه نمایش کد ها هم مانند کد هایی است که در بالا به کار بردیم!

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