لا بد أنك رأيت مقتطفات من الكود في منشورات مدونة DoctorMega المختلفة التي ننشئها لمساعدة قرائنا في حل المشكلات. ومع ذلك، فإن عرض هذا الكود ليس بالأمر السهل.

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

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

لماذا عرض الكود على موقع ووردبريس؟

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

ومع ذلك، فإن عرض الكود على موقع ووردبريس ليس بهذه البساطة.

سوف يفسر ووردبريس المقتطفات على أنها كود دالة ويحاول تنفيذه على الموقع الكتروني الخاص بك بدلاً من عرضه كنص. كما أنه لن يعرض الكود بدقة، مما قد يؤدي إلى حدوث أخطاء عندما يدخلها المستخدمون على الموقع الكتروني الخاص بهم.

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

مع ذلك، هناك طرق مختلفة يمكنك من خلالها عرض الكود في ووردبريس.

الطريقة 1. عرض الكود باستخدام المحرر الافتراضي في ووردبريس

يوصى بهذه الطريقة للمبتدئين والمستخدمين الذين لا يحتاجون إلى عرض الكود كثيرًا.

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

يمكنك الأن إدخال مقتطف الكود في منطقة النص في الكتلة.

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

بعد ذلك، يمكنك حفظ منشور مدونتك ومعاينته لرؤية كتلة الكود قيد التشغيل.

بمجرد رضاك ​​عن مظهر الكود، يمكنك المضي قدمًا ونشر منشور مدونتك.

اعتمادًا على قالب ووردبريس الخاص بك، قد تبدو كتلة الكود مختلفة على الموقع الكتروني الخاص بك.

الطريقة 2. عرض الكود في ووردبريس باستخدام اضافة

بالنسبة لهذه الطريقة، سنستخدم اضافة ووردبريس لعرض الكود في منشورات مدونتك. يوصى بهذه الطريقة للمستخدمين الذين يعرضون الكود غالبًا في منشوراتهم.

فهي تمنحك المزايا التالية مقارنة بكتلة الكود الافتراضي:

• يتيح لك عرض أي كود بسهولة بأي لغة برمجة
• يعرض الكود مع تمييز بناء الجملة وأرقام الأسطر
• يمكن لمستخدميك دراسة الكود ونسخه بسهولة

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

بعد التفعيل، يمكنك المضي قدمًا وتحرير منشور المدونة حيث تريد عرض الكود. على شاشة تحرير المنشور، أضف كتلة “SyntaxHighlighter Code” إلى منشورك.

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

بعد إضافة الكود، تحتاج إلى تحديد إعدادات الكتلة من العمود الأيسر.

أولاً، عليك تحديد لغة الكود الخاص بك، مثل PHP أو CSS أو Java وما إلى ذلك. بعد ذلك، يمكنك إيقاف تشغيل أرقام الأسطر، وتوفير رقم السطر الأول، وتسليط الضوء على أي سطر تريده، وإيقاف تشغيل الميزة لجعل الروابط قابلة للنقر.

بمجرد الانتهاء، احفظ منشورك وانقر على زر المعاينة لمشاهدته أثناء العمل.

تأتي الاضافة مع عدد من مخططات الألوان والثيمات.

لتغيير ثيمة اللون، تحتاج إلى زيارة صفحة الإعدادات » SyntaxHighlighter.

من صفحة الإعدادات، يمكنك تحديد ثيمة اللون وتغيير إعدادات SyntaxHighlighter.

يمكنك حفظ إعداداتك لرؤية معاينة لكتلة الكود في أسفل الصفحة.

استخدام SyntaxHighlighter مع المحرر الكلاسيكي

إذا كنت لا تزال تستخدم محرر ووردبريس الكلاسيكي القديم، فإليك كيفية استخدام اضافة SyntaxHighlighter لإضافة الكود إلى منشورات مدونة ووردبريس الخاصة بك.

ما عليك سوى لف الكود بين قوسين مربعين باسم اللغة. على سبيل المثال، إذا كنت ستضيف كود PHP، فستضيفه على النحو التالي:

<?php
private function get_time_tags() {
        $time = get_the_time('d M, Y');
        return $time;
    }
?>

وبالمثل، إذا كنت تريد إضافة كود HTML، فستقوم بلفه حول كود قصير HTML مثل هذا:

<a href="example.com">A sample link</a>

الطريقة 3. عرض الكود في ووردبريس يدويًا (بدون اضافة أو كتلة)

هذه الطريقة مخصصة للمستخدمين المتقدمين لأنها تتطلب المزيد من العمل ولا تعمل دائمًا كما هو مقصود.

إنه مناسب للمستخدمين الذين لا يزالون يستخدمون المحرر الكلاسيكي القديم ويريدون عرض الكود دون استخدام اضافة.

أولاً، تحتاج إلى تمرير الكود الخاص بك من خلال أداة HTML entities encoder. ستغير هذه الأداة ترميز الكود الخاص بك إلى كيانات HTML، مما يسمح لك بإضافة الكود وتجاوز فلاتر تنظيف ووردبريس.

الآن انسخ الكود الخاص بك والصقه في محرر النصوص وقم بلفه حول وسم <- pre- > و<- code- >.

سوف يبدو الكود الخاص بك مثل هذا:

<pre><code>
&lt;a href=&quot;home.html&quot;&gt;This is a sample link&lt;/a&gt;
</pre></code>

يمكنك الأن حفظ منشورك ومعاينة الكود أثناء العمل.

سيقوم متصفحك بتحويل كيانات HTML، وسيتمكن المستخدمون من رؤية الكود الصحيح ونسخه.

نأمل أن تساعدك هذه المقالة في تعلم كيفية عرض الكود بسهولة على موقع ووردبريس الخاص بك. قد ترغب أيضًا بالاطلاع على دليلنا حول كيفية السماح باستخدام PHP في منشورات وصفحات ووردبريس واختيارنا الخبير لـ أفضل برامج تطوير ووردبريس.