{{htmlmetatags>metatag-description=(كيفية إدراج التعليمات البرمجية في صفحات ومقالات ووردبريس بدون استخدام إضافة بالصور والفيديو )

}}
{{:ويكي-إدارة_المواقع.png?direct|}}

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

===== كيفية إدراج الكود البرمجي من خلال التحرير النصي =====
في هذا القسم سنتعلم كيفية إضافة أكواد إلى [[برمجيات_الويب:ووردبريس:المقالات_والمنشورات|مقالة ووردبريس]] دون الحاجة استخدام أي [[برمجيات_الويب:ووردبريس:إضافات_ووردبريس|إضافة ووردبريس]]. سنقوم بذلك من خلال إدراج وسم code في المحرر النصي للمقالة أو الصفحة.

==== تحويل الكود إلى ترميز HTML====
ماذا يعني ذلك؟ إذا أردت كتابة تعليمات برمجية تحتوي على إشارات < أو >، فسيتم الخلط بينها وبين وسوم HTML التي تحتوي على هذه الإشارات.
\\
وبالتالي علينا استبدال إشارات < أو > بما يناسبها من علامات HTML. 
\\
\\
يمكننا القيام بذلك بكل سهولة من خلال [[https://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder|هذا الموقع]]. حيث يتم إدخال الكود الذي تريد إضافته إلى المقالة في المستطيل الأعلى،  وستجد نتيجة تحويل الكود إلى ترميز HTML في المستطيل الأدنى.
\\
\\
على سبيل المثال:\\
لتحويل هذا الكود إلى ترميز HTML، قم بإدخاله في المستطيل العلوي، ثم بالنقر على Encode Text.
<code>
<a href="www.learnwithnaw.com" target="_blank">
visit Learnwithnaw.com
</a>
</code>
ستحصل على هذه النتيجة في المستطيل الأدنى (قم بنسخها):
<code>
&lt;a href=&quot;www.learnwithnaw.com&quot; target=&quot;_blank&quot;&gt; visit Learnwithnaw.com &lt;/a&gt;
</code>
\\
\\
{{ :برمجيات_الويب:ووردبريس:موقع-التحويل-إلى-ترميز-html.jpeg?nolink |}}


==== إدراج وسم <code> في المقالة أو الصفحة ====
بدايةً قم [[برمجيات_الويب:ووردبريس:كيفية_كتابة_مقالة_في_ووردبريس|بإضافة مقالة جديدة]] أو [[برمجيات_الويب:ووردبريس:صفحات_ووردبريس|صفحة جديدة]] في [[برمجيات_الويب:ووردبريس|موقع ووردبريس]] الخاص بك.
\\
\\
قم باختيار المحرر النصي للمقالة كما يظهر في الصورة التالية، وقم بلصق الكود الذي نسخته في الخطوة السابقة ضمن وسمي pre و code في الموضع الذي تريد من المقالة كما يظهر في الصورة التالية والكود الآتي:
\\

  <pre>
  <code>
  &lt;a href=&quot;www.learnwithnaw.com&quot; target=&quot;_blank&quot;&gt; visit Learnwithnaw.com &lt;/a&gt;
  </code>
  </pre>

\\
\\
{{ :برمجيات_الويب:ووردبريس:اختيار-التحرير-النصي-للمقالة.jpeg?nolink |}}
\\
\\
ثم قم بالحفظ المقالة، ستلاحظ أن الكود ظهر على الواجهة الأمامية للموقع دون أي تنسيق وبشكل قبيح نسبياً حسب تنسيقات [[برمجيات_الويب:ووردبريس:مظهر_ووردبريس_وتثبيت_القوالب|قالب ووردبريس]] المفعل. 
\\
\\
{{ :برمجيات_الويب:ووردبريس:معاينة-الكود-في-المقالة-دون-تنسيق.jpeg?nolink |}}

==== تنسيق عرض الأكواد على موقع ووردبريس ====
لجعل الأكواد والتعليمات البرمجية تظهر بشكل أجمل في [[برمجيات_الويب:ووردبريس:المقالات_والمنشورات|مقالات موقع ووردبريس]]، علينا القيام بإضافات تنسيقات css وإضافتها إلى مخصص css في [[برمجيات_الويب:ووردبريس|موقع ووردبريس]].
\\
\\
لاتقلق! سأقوم بشرح ذلك بالخطوات المبسطة:\\
1- قم باختيار مظهر من القائمة الجانبية في موقع ووردبريس.\\
2- اختر خيار تخصيص من القائمة الفرعية.\\
3- اختر خيار خيارات CSS الإضافية من قائمة تخصيص القالب.\\
\\
{{ :برمجيات_الويب:ووردبريس:تنسيقات-css-الإضافية-في-مخصص-القالب.jpeg?nolink |}}
\\

4- ادخل تنسيقات CSS في المستطيل ثم انقر على نشر. \\
<code>
pre, code{
	direction: ltr !important;
	text-align: left !important;
}
pre{
     background:#e5e5e5;
     border: double 6px #000;
     margin: 3px;
     padding: 3px;
}
code{
     color:#000;
     font-family: monospace;	
     font-size: 14px;	
     line-height: 18px;
}
</code>
\\
\\
{{ :برمجيات_الويب:ووردبريس:إدخال-تنسيقات-css-في-المحرر.jpeg?nolink |}}
\\
\\
ستظهر نتيجة التنسيق المضاف إلى المقالة في الواجهة الأمامية كما يظهر في الصورة التالية:
\\
\\
{{ :برمجيات_الويب:ووردبريس:إضافة-الكود-إلى-المقالة-بنجاح.jpeg?nolink |}}

===== إضافة أكواد لمقالات ووردبريس باستخدام استضافة =====
إذا كنت تبحث عن سهولة إضافة الأكواد إلى مقالات وصفحات ووردبريس، يمكنك ذلك باستخدام ب[[برمجيات_الويب:ووردبريس:إضافات_ووردبريس|اضافة ووردبريس]].

==== تثبيت وتفعيل الإضافة التي تختص بذلك ====

هنالك الكثير من الإضافات التي تؤدي هذه المهمة، ولكنني اخترت لكم اليوم إضافة  [[https://wordpress.org/plugins/syntaxhighlighter/|SyntaxHighlighter Evolved]].
\\
\\
يتم إيجاد هذه الإضافة في مكتبة ووردبريس، حيث يمكنك البحث عنها ومن ثم تثبيتها، وتفعيلها كما يظهر في الصورة التالية:
\\
\\
{{ :برمجيات_الويب:ووردبريس:إضافة-أكواد-إلى-مقالات-باضافة.jpeg?nolink |}}
\\
==== إضافة الكود إلى المقالة ====
بكل سهولة الآن ما عليك إلا إضافة الكود الذي تريد إلى المقالة. \\
مثال 1: إذا أردت إضافة كود PHP إلى المقالة، قم بإضافة التالي إلى المحرر المرئي للمقالة:
<code>
[php]
<?php
echo "Write your PHP code here";
?>
[\php]
</code>
وبعد ذلك ستظهر النتيجة على الواجهة الأمامية للمقالة بهذا الشكل:
\\
\\
{{ :برمجيات_الويب:ووردبريس:نتيجة-إضافة-أكواد-الموقع-باستخدام-إضافة.jpeg?nolink |}}
\\
\\
مثال 2: إذا أردت إضافة كود css، قم بإضافة التالي إلى المحرر المرئي للمقالة:
<code>
[css]
/*Write your css code here*/
[/css]
</code>





\\
<WRAP center round box 60%>

تم تقديم هذا الشرح من قبل ويكي إدارة مواقع الويب التي تشارك معكم شروحات ودروس حول كيفية إدارة موقعكم الإلكتروني وحمايته. 
\\
\\
هل لديك أي سؤال حول هذا الشرح؟! لا تتردد بسؤاله هنا [[http://eepurl.com/cKJvSH| اسأل ويكي إدارة المواقع]].
\\
\\
في حالة أعجبك هذا العمل، يمكنك دعمنا من خلال طلبك لأحد خدماتنا [[https://www.learnwithnaw.com/%d9%85%d8%aa%d8%ac%d8%b1-%d8%a7%d9%84%d9%85%d8%af%d9%88%d9%86%d8%a9/|خدمات مدونة تعلّم مع ناو]]


</WRAP>
 --- //[[learnwithnaw@gmail.com|نورس علي]] 2017/12/11 00:49//