اختلافات

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

رابط إلى هذه المقارنة

برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2018/01/13 08:15]
برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2022/09/14 14:34] (حالي)
سطر 1: سطر 1:
 +{{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//