طور حياتك

كيف تقوم بسهولة بعرض الشفرات والأكواد فى موقعك ووردبريس

هل تريد عرض الأكواد على موقعك وردبريس؟ خاصة اذا كان الموقع يقدم دروس وتعليمات برمجية مثل موقعنا هذا. بشكل افتراضي، يقوم وردبريس بتصفية أي شفرة أولية تضاف إلى مشاركات المدونة أو الصفحات أو الأدوات أو التعليقات. في هذه المقالة، سوف نوضح لك كيفية عرض التعليمات البرمجية ( الأكواد) بسهولة على موقع ووردبريس الخاص بك.

هل تريد عرض الأكواد على موقعك وردبريس؟ خاصة اذا كان الموقع يقدم دروس وتعليمات برمجية مثل موقعنا هذا. بشكل افتراضي، يقوم وردبريس بتصفية أي شفرة أولية تضاف إلى مشاركات المدونة أو الصفحات أو الأدوات أو التعليقات. في هذه المقالة، سوف نوضح لك كيفية عرض التعليمات البرمجية ( الأكواد) بسهولة على موقع ووردبريس الخاص بك. أولا تحتاج إلى تثبيت وتنشيط الاضافة Syntax Highlighter Evolved، لمزيد من التفاصيل، راجع دليل خطوة بخطوة حول كيفية تثبيت مكون وردبريس الإضافي. عند التنشيط، تحتاج إلى زيارة إعدادات »سينتاكس هيغليغتر لتكوين إعدادات البرنامج المساعد.

أولا تحتاج إلى تثبيت وتنشيط الاضافة Syntax Highlighter Evolved، لمزيد من التفاصيل، راجع دليلنا حول كيفية تثبيت الاضافات فى ووردبريس خطوة بخطوة .

بعد تثبيت وتنشيط الاضافة، تحتاج إلى زيارة إعدادات »Syntax Highlighter Evolved لعمل إعدادات الاضافة

syntaxhilightersettings.

يجب أن تعمل إعدادات الاضافة الافتراضية لمعظم مواقع الويب. ومع ذلك، يجب مراجعة جميع الإعدادات وإجراء تغييرات إذا لزم الأمر.

كل خيار له وصف مفصل لشرح ما يفعله. بمجرد الانتهاء، ببساطة انقر على زر حفظ التغييرات لحفظ الإعدادات الخاصة بك.

Syntax Highlighter Evolved يستخدم الرموز القصيرة shortcodes لعرض التعليمات البرمجية ( الأكواد). لكل لغة برمجة تحتاج وضع التعليمات البرمجية الخاصة بك في رمز قصير لتلك اللغة.

للغة PHP تحتاج وضع الكود مثل هذا:

[php]
<?php
echo “Hello World”;
?>
[/php]

سيظهر في مشاركتك مثل هذا:

<?php
echo "Hello World";
?>

 

لأكواد CSS  يجب عليك وضع الكود مثل هذا :

[css]
.entry-title {
font-family:”Open Sans”, arial, sans-serif;
font-size:16px;
color:#272727;
}
[/css]

سيظهر في مشاركتك مثل هذا:

.entry-title {
font-family:"Open Sans", arial, sans-serif;
font-size:16px;
color:#272727;
} 
Syntax Highlighter سيعمل على تمييز هذا الكود وتمييز هذة اللغة تحديدا تلقائيا. كما سيتم أيضا إضافة أرقام الأسطر والتعامل مع علامة التبويب البادئة بشكل صحيح. وسيتمكن المستخدمون من نسخ مقتطفات الشفرة ولصقها بسهولة من موقعك وردبريس.

باختصار بعد تثبيت الاضافة قم بوضع الكود بين 

[css]</strong></code> و <strong><code>[/css]

مع تغيرر css الى لغة الكود الذى تستخدمه.

كيفية عرض الاكواد في ووردبريس بدون استخدام الاضافات

لا يدير العديد من المدونين مدونة تطوير أو مدونة شرح لغات برمجه، لذا لا يحتاجون إلى إضافة أكواد أو شفرات في مشاركاتهم في كثير من الأحيان. الا أنهم يحتاجون ذلك في حالات نادرة، يمكنك إضافة التعليمات البرمجية والأكواد عن طريق ترميز الشفرة إلى مدخلات HTML. مثل:

&gt;?php echo "Hello World"; ?&lt;

المشكلة في تحويل التعليمات البرمجية إلى مدخلات HTML أنه من الصعب القيام به يدويا. يمكنك استخدام أدوات الإنترنت مثل هذه الأداة، لتحويل التعليمات البرمجية إلى مدخلات HTML.

عن طريق تحويل PHP، HTML وأكواد جافا سكريبت الى مدخلات HTML ، يمكنك لصقها في مشاركات ووردبريس الخاصه بك. للحصول على تصميم إضافي يمكنك وضع التعليمات البرمجية بين علامات <code> و </code>.

نأمل أن تساعدك هذه المقالة أن تجد أفضل اضافة Syntax Highlighter  لـ وردبريس. والتى تساعدك القيام بسهولة بعرض الشفرات والأكواد فى موقعك ووردبريس.