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

چگونه بدون نصب افزونه در وردپرس، کدها را نمایش دهیم ؟

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

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

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

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

صفحه افزونه در مخزن وردپرس

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

code, pre {
direction:ltr;
width: 90%;
display: block;
color: #333333;
overflow:auto;
background: #fcfcfc url(https://infu.ir/wp-content/uploads/2019/02/cropped-Header-1.png) left top repeat-y;
border: 1px solid #f2f2f2;
padding: 10px 28px;
margin: 10px 0px;
max-height: 200px;
line-height: 120%;
}