كيفية عرض الكود في WordPress - 3 طرق (مع المكونات الإضافية وبدونها)

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

لماذا يصعب عرض الكود في WordPress؟

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

وبالمثل ، إذا قمت بنسخ ولصق رمز قصير ، فسيعرض WordPress الوظيفة بدلاً من إظهار الرمز القصير المكتوب ببساطة.

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

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

كيفية عرض الكود في WordPress

هناك 3 طرق رئيسية لعرض الكود في WordPress :

1. باستخدام محرر WordPress
   1. جوتنبرج
   2. محرر كلاسيكي
2. استخدام مكوّن إضافي مخصص لـ WordPress
3. إدخال الكود يدويًا

دعنا نلقي نظرة على كل طريقة ونوضح لك كيفية عرض الكود على موقعك خطوة بخطوة.

1) استخدام محرر WordPress

أسهل طريقة لعرض التعليمات البرمجية في WordPress هي استخدام محرر WordPress. في هذا القسم ، سنوضح لك كيفية القيام بذلك باستخدام كل من Gutenberg و Classic Editor.

1.1) جوتنبرج

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

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

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

1.2) المحرر الكلاسيكي

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

ثم حدد مقتطف الشفرة واختر خيار النص المنسق مسبقًا من القائمة المنسدلة.

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

بهذه الطريقة ، يمكنك عرض أي كود على موقع WordPress الخاص بك.

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

2) عرض الكود مع برنامج WordPress الإضافي

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

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

ضمن قسم إعدادات WordPress ، سترى خيارات تكوين المكون الإضافي.

في صفحة إعدادات المكون الإضافي ، سترى العديد من خيارات التخصيص:

• التحكم في الإصدار
• موضوع اللون
• فرش التحميل
• متنوع
• فئات CSS إضافية
• رقم خط البداية
• المساحة المتروكة لرقم السطر
• حجم علامة التبويب
• عنوان

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

في هذه المرحلة ، تختلف العملية اعتمادًا على المحرر الذي تستخدمه. دعونا نلقي نظرة على كليهما.

2.1) محرر جوتنبرج

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

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

في هذا المثال ، سنعرض مقتطف شفرة CSS ، لذلك سنختار CSS من القائمة المنسدلة.

يمكنك أيضًا تغيير لغة الشفرة من قسم الحظر.

بعد تحديد لغة الشفرة ، الصق البرنامج النصي في الكتلة.

بالإضافة إلى ذلك ، يمكنك ضبط الإعدادات الافتراضية للمكون الإضافي من قسم Advanced في اللوحة اليمنى وتغيير التصميم.

بمجرد الانتهاء ، قم بنشر (أو تحديث) المنشور وتحقق من المنشور من الواجهة الأمامية لرؤية النتائج.

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

2.2) المحرر الكلاسيكي

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

أولاً ، افتح أي منشور أو أنشئ منشورًا جديدًا باستخدام المحرر الكلاسيكي. لعرض محتوى HTML ، على سبيل المثال ، استخدم الرمز المختصر [html] [/ html] والصق الرمز بينهما على النحو التالي وانشر المنشور.

[لغة البرمجة]
<a href=”quadlayers.com”> QuadLayers </a>
[/لغة البرمجة]

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

هذه هي الطريقة التي يمكنك بها استخدام ميزة تضمين HTML ولكن يمكنك فعل الشيء نفسه مع أي لغة تعليمات برمجية أخرى. على سبيل المثال ، لعرض مقتطف PHP ، استخدم الرموز القصيرة [php] [/ php] ، والأكواد القصيرة [css] [/ css] لإظهار CSS ، وما إلى ذلك.

بهذه الطريقة ، يمكنك تعديل الرموز القصيرة وعرض أي مقتطفات تعليمات برمجية تريدها. دعنا نعرض مثالا لمقتطف كود PHP في مقال:

[بي أتش بي]
<؟ php
؟>
[/بي أتش بي]

كما ترى ، يمكنك تغيير الرموز وعرض أي مقتطف على موقع WordPress الخاص بك.

ملاحظة: إذا كنت تريد تغيير الخط وحجم الخط ووزن الخط في التعليمات البرمجية الخاصة بك ، فأنت بحاجة إلى إضافة فئة CSS مخصصة للمكون الإضافي Syntaxhighlighter. يمكنك القيام بذلك من إعدادات البرنامج المساعد ثم إضافة كود CSS من خلال أداة تخصيص WordPress أو محرر السمات لتخصيصه.

3) عرض الكود يدويًا

إذا كانت لديك مهارات في البرمجة ، فيمكنك عرض التعليمات البرمجية في WordPress يدويًا. هذه طريقة أكثر تقدمًا وتوفر لك الكثير من المرونة. في هذا العرض التوضيحي ، سنستخدم علامتي <pre> و <code> لعرض الكود في المنشور.

أولاً ، تحتاج إلى استخدام أداة خارجية لتحويل نصك إلى HTML. سنستخدم MotherEff ولكن يمكنك استخدام أي برنامج ترميز HTML آخر تريده.

ثم قم بلصق مقتطف HTML الخاص بك في المربع الذي تم فك ترميزه وستعطيك الأداة إصدارًا مشفرًا.

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

 <p> <a href="/quadlayers"> قم بزيارة محفظتنا </a> </p>

وتحولها الأداة إلى هذا:

لن يبدو الرمز ودودًا ، لكنه سيؤدي المهمة.

ثم ، في لوحة معلومات WordPress الخاصة بك ، افتح المحرر الكلاسيكي وانتقل إلى محرر النصوص.

الصق الشفرة المشفرة هناك باستخدام <pre> و <code> علامات الفتح و </ code> و </ pre> لإغلاقهما. على سبيل المثال ، سيبدو نموذج الكود كما يلي:

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

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

ملاحظة : لن يتمكن مستخدمو Gutenberg من استخدام هذه الطريقة. يمكنك القيام بذلك فقط باستخدام المحرر الكلاسيكي.

المكافأة: كيفية عرض الكود في فقرة

بصرف النظر عن عرض الكود في منشور WordPress ، هناك بديل آخر مثير للاهتمام وهو عرض الكود في فقرة. في هذا القسم ، سنوضح لك كيفية القيام بذلك. لهذا ، سوف نستخدم القليل من CSS و HTML.

أولاً ، تحتاج إلى إضافة رمز CSS بسيط إلى موقع الويب الخاص بك. يمكنك إما استخدام أداة تخصيص WordPress أو مكون إضافي خاص بالموقع مثل Code Snippets. بالنسبة لهذا العرض التوضيحي ، سنذهب إلى المظهر> تخصيص> CSS إضافي ولصق الكود الخاص بنا هناك.

 الشفرة {
 حجم الخط: 1.2em ؛
 اللون: # 1e1e1e ؛
 الموقف: نسبي ؛
 نصف قطر الحدود: 4 بكسل ؛
 الخلفية: # e1e1e1
 } 

بمجرد نشر التغييرات ، افتح أي منشور تريد تحريره. ثم حدد المحتوى الذي تريد تمييزه. على سبيل المثال ، سوف نعرض عبارة "s tart a blog" كرمز في هذه الفقرة.

قم بالتبديل إلى محرر النصوص وقم بلف المحتوى داخل علامتي <code> و </code> . باتباع المثال الخاص بنا ، سيبدو الكود الخاص بنا كما يلي:

<code> بدء مدونة </ code>

بعد ذلك ، انشر أو حدِّث التغييرات وتحقق من الواجهة الأمامية لرؤية التغييرات.

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

استنتاج

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

1. باستخدام محرر محتوى WordPress
2. مع البرنامج المساعد المخصص
3. يدويا

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

أخيرًا ، إذا كنت تريد تمييز جمل أو كلمات معينة في فقرة ، فيمكنك التفاف النص في علامات <code> </code> .

لمزيد من المعلومات حول كيفية تحرير التعليمات البرمجية على موقعك ، راجع الدليل التالي لتعديل HTML في WordPress.

هل وجدت هذه الوظيفة مفيدة؟ ما هي الطريقة التي تفضلها لعرض الكود على موقعك؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه.