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

إن كتابة الشيفرة البرمجية ضمن منشورات المواقع -والتي تُشبه الشيفرة من ناحية الشكل لكنها لا تُنفذ عمل الشيفرة من ناحية الوظيفة- يُعد تحدي لمعظم المدونين. يعتمد تفسير الشيفرة التي تكتبها ضمن محرر ووردبريس افتراضيًا على علامة التبويب التي تستخدمها مرئي أو نص حيث أن علامة التبويب مرئي تنظر للشيفرة على أنها نص عادي وبالتالي تحوّل المحارف < و > إلى الترميز الموافق لها كي لا تُفسر الشيفرة من قبل المتصفح. سوف تُحوّل علامات التنصيص أيضًا، وتذكر أن ووردبريس افتراضيًا يُطبق عمليات تصحيح تلقائية حتى يُحاط النص بعلامات تنصيص صحيحة اعتمادًا على مُحددات اللغة، بينما لا يُحوّل محرر ووردبريس ضمن علامة تبويب نص المحارف إلى الترميز المقابل لها وبالتالي سوف يتعرف المتصفح على وسوم ومحددات HTML وCSS ليظهر النص بتنسيق وشكل غير مُرتب.

انتبه إلى أن ما سبق يُمكن أن يختلف حسب نسخة ووردبريس والإضافات ومحرر المنشورات المستخدم، ففي بعض الإصدارات الأقدم من ووردبريس سوف تُحوّل المحارف < و > إلى التراميز ‎<‎ و ‎>‎ وعند استخدام وسم HTML ضمن المنشور سوف يبقى كما هو وهذا يؤدي إلى تفسيره من قبل المتصفح.

استخدام الشيفرة ضمن الفقرات

إن وسوم HTML التي تحول النص إلى خط ثابت عرض أحرفه monospaced هي <code> و<tt> والأخير نادرًا ما يُستعمل اليوم لأنه استبدل بالوسم الذي يدل على عمله والأكثر فائدة <code>. يُظهر هذا الوسم الشيفرة البرمجية بتنسيق مختلف عن النص العادي.

‫هذا مثال عن طريقة ذكر الشيفرة ضمن فقرة مثل الدوال <code>wp_title()</code> و<code>wp_content()</code> و<code>wp_footer()</code> المفيدة في ووردبريس.

يُفيد هذا الوسم في إنشاء فقرات من النص (الذي لا يتضمن HTML) تبدو مثل الشيفرة لكن ماذا عن وسوم HTML التي تريد عرضها؟

‫ابحث ضمن ملف header.php عن قسم <code><div class="header"></code> لتغيير الترويسة <code><h1></code>.

إن استخدام الوسم <code> لا يفرض على ووردبريس ترميز وسوم HTML ضمن وسم أو تجريدها منه ضمن المنشور لأن ووردبريس يعتقد أنك تستخدم هذا الوسم للتنسيق وبالتالي لا يجري أي تغيير عليه، ويأتي بعده متصفح الويب ليجد وسم <code> يليه وسم <div> لذا يُنشئ حاويةً جديدةً ضمن صفحة الويب.

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

‫ابحث ضمن ملف header.php عن قسم <code><div class="header"></code> لتغيير الترويسة <code><h1></code>.

استخدام الروابط ضمن الفقرات

يحول ووردبريس افتراضيًا أي عبارة تبدأ بالكلمة http:‎ إلى رابط لذا إن كنت تعطي مثالًا عن كيفية الربط مع منشور ما ضمن ووردبريس تستطيع استخدام محارف موسّعة لإشارة / كي لا يرى ووردبريس الرابط كرابط.

الربط مع منشور ووردبريس مُعين باستخدام
<code>http:& amp;#47;& amp;#47;example.com& amp;#47;index.php?p=453</code>
ضمن منشورك.

ملاحظة: أزل الفراغات بين & و amp.

قائمة بترميز المحارف المهمة

إليك قائمة بترميز بعض محارف HTML المرتبطة بسياق هذا المقال.

(less than) = < or <
(greater than) = > or >
/ = /      
] = ]
[ = [
" = " or "
' = '
“ = “ or “
” = ” or “
‘ = ‘ or ‘
’ = ’ or ’
(ampersand) = & or &

يوجد قائمة بالمصادر في نهاية المقال سوف تساعدك على تحويل وسوم HTML إلى محارف مُرمّزة تلقائيًا وهكذا لست بحاجة لحفظ ترمزي هذه المحارف.

استخدام وسم <pre>

تستطيع استخدام الوسم <pre> لكي تظهر الشيفرة ضمن صندوق يُمكن نسخة ولصق محتواه ضمن ملف شيفرة أو قالب شيفرة آخر. يوجه الوسم <pre> متصفح الويب ليستخدم خط ثابت عرض محارفه momospaced ليُعيد إنشاء ما يوجد ضمن الوسم كما هو بما يتضمنه من فراغات وفواصل سطرية ومحارف كما هي مكتوبة.

<h3> عنوان القسم الثالث</h3>
<p> هذه هي بداية
<a title="مقال حول العلاقات" href="goodtalk.php">
مقال حول العلاقات</a> بين تحسين محركات البحث والروابط الداخلية...

إن استخدام وسم <pre> من ناحية المظهر ليس جميلًا لكنه يؤدي عمله. يُمكن إيجاد أمثلة عن كيفية تنسيق هذا الوسم في القسم التالي لكن وظيفته لا تتغير وهي عرض الشيفرة كما هي.

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

<h3>عنوان القسم الثالث</h3>
<p>هذه هي بداية <a title="مقال عن العلاقات" href="goodtalk.php">مقال عن العلاقة</a> بين تحسين محركات البحث والروابط الداخلية لموقعك وأعتقد أنه عليك قراءته لأنه من المهم معرفة 
<a title="مقال عن الروابط الداخلية" href="communication.php">فوائد الروابط الداخلية</a> للاستفادة منها ضمن موقعك قدر الإمكان....

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

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

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

إصلاح الأخطاء ضمن الشيفرة

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

التصحيح التلقائي لعلامات التنصيص

أحد المشاكل التي تتكرر عند استخدام شيفرة برمجية ضمن منشورات ووردبريس هي ميزة التصحيح التلقائي لعلامات التنصيص في ووردبريس حيث يحوّل ووردبريس افتراضيًا علامات التنصيص العادية إلى علامات تنصيص مائلة ويعتمد هذا على لغة تثبيت ووردبريس ضمن ملف wp-config.php. انتبه إلى أن ميزة التصحيح التلقائي (التي تُدعى أيضًا بعلامات التنصيص الذكية) تُطبق بغض النظر عن موضع كتابتك لعلامات التنصيص أي ضمن علامة التبويب النص أو المرئي ضمن المحرر.

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

<code><p class=& #34;red& #34;></code>    // أزل المسافة بين & و #‏

بدلًا من استخدام

<p class="red">

في الإصدارات الأقدم من ووردبريس إن حررت صفحة مرة أخرى بعد نشرها فإن محرر المنشور النصي سوف يستبدل جميع التراميز بمقابلاتها، فعلى سبيل المثال إن استخدمت &#34 لعلامات التنصيص سوف تُصبح " وبالتالي إن حفظت الصفحة مرة أخرى فإن ميزة التصحيح التلقائي لعلامة التنصيص سوف تؤثر عليها.

إضافات مفيدة

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

انظر الإضافات التالية المفيدة في هذا السياق: