اكتب الكود في منشوراتك (المحرر الكلاسيكي)

سواء كنت تكتب إضافات (plugins) أو تعديلات برمجية لووردبريس، أو كنت تريد إضافة أجزاء من الأكواد الخاصة بموقعك على ووردبريس أو غيره من لغات البرمجة مثل HTML أو CSS أو PHP أو JavaScript، فإن وضع كود في مقالك يبدو وكأنه كود، ولكن لا يتصرف ككود، يعد تحدياً متكرراً للمدونين.

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

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

الكود داخل الفقرات (Code Within Paragraphs)

وسم HTML الذي سيحول النص إلى خط أحادي المسافة (monospaced) هما الوسمان <code> و <tt>. نادرًا ما يتم استخدام الأخير اليوم، حيث تم استبداله بالوسم الأكثر فائدة والصحيح دلالياً <code>، والذي يميز النص الذي يعد كوداً برمجياً عن اللغة الطبيعية.

This is an example which mentions code within a paragraph,
namely the functions <code>wp_title()</code>, 
<code>wp_content()</code> and <code>wp_footer()</code>, 
which are very useful in WordPress.

هذا رائع لجعل جزء من النص غير المرتبط بـ HTML يبدو ككود، ولكن ماذا عن وسوم HTML التي تريد عرضها؟

In the header.php template file,
look for the <code><div class="header"></code>
section to change the <code><h1></code> heading.

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

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

In the header.php template file,
look for the <code>&lt;div class="header"&gt;</code>
section to change the <code>&lt;h1&gt;</code> heading.

روابط URL داخل الفقرات (URLs Within Paragraphs)

افتراضياً، سيقوم ووردبريس بتحويل أي جملة تبدأ بـ http: إلى رابط. إذا كنت تقدم مثالاً حول كيفية الربط بمقال معين داخل موقع ووردبريس، بدلاً من استخدام الرابط مع http://example.com/index.php?p=453 وتحويله إلى رابط، يمكنك استخدام الأحرف الموسعة للشرطات المائلة، حتى لا "يرى" ووردبريس الرابط:

...link to a specific WordPress post using 
<code>http:& amp;#47;& amp;#47;example.com& amp;#47;index.php?p=453</code>
in your post....

ملاحظة: قم بإزالة المسافة بين ‘&’ و ‘amp’.

قائمة كيانات الأحرف ذات الصلة (List of Related Character Entities)

إليك قائمة ببعض كيانات أحرف HTML المتعلقة بموضوع هذه المقالة:

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

استخدام وسم <pre> (Using the <pre> tag)

لعزل الكود الخاص بك بحيث يبدو وكأنه صندوق كود يمكن نسخه ولصقه ضمن كود آخر أو ملف قالب، يمكنك استخدام وسم HTML <pre>.

يُوجّه وسم <pre> المتصفح لاستخدام خط أحادي المسافة، ولكن لإعادة إنتاج كل ما هو موجود داخل وسوم <pre> بدقة تامة. يتم إعادة إنتاج كل مسافة، وكل فاصل أسطر، وكل جزء من الكود تماماً.

<h3>Section Three Title</h3>
<p>This is the start of a 
<a title="article on relationships" href="goodtalk.php">
good relationship</a> between you and me....

استخدام وسم <pre> ليس "جذاباً" جداً ولكنه يؤدي الغرض. يمكن العثور على أمثلة حول كيفية تنسيقه في القسم التالي. مع ذلك، فهو يعرض الكود بدقة.

نعني بكلمة بدقة الدقة الحرفية. إذا كان لديك سطر طويل من الكود، فسوف يمتد خارج الصفحة لعدم وجود تعليمات تخبر الكود بالالتفاف (wrap). لن يفعل ذلك. إليك مثال:

<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships"
href="goodtalk.php">good relationship</a> between you and I and I think you should read it because it is
important that we have these little <a title="article on communication"
href="communication.php">conversations</a> once in a while to let each other know how we feel....

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

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

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

استكشاف مشكلات الأكواد وإصلاحها (Troubleshooting Codes)

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

التصحيح التلقائي لعلامات التنصيص (Quotes Auto-correction)

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

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

<code><p class=& #34;red& #34;></code>     // Take off space between & and #

بدلاً من:

<p class="red">

لاحظ أنه في بعض إصدارات ووردبريس القديمة، إذا قمت بتحرير صفحة مرة أخرى بعد نشرها، فإن محرر HTML استبدل كل هذه الكيانات بما يعادلها حرفياً. على سبيل المثال، إذا كنت قد استخدمت بعناية &#34 لعلامات التنصيص الخاصة بك، لكانت قد عادت كـ “، وإذا تم حفظها، فإن ميزة التصحيح التلقائي سيكون لها تأثير عليها.