اختلافات

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

--- برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2017/12/10 23:59]
nawras اُنشئت
+++ برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2017/12/11 00:36]
nawras
@@ سطر 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 في [[برمجيات_الويب:ووردبريس|موقع ووردبريس]].
+\\
+\\
+لاتقلق! سأقوم بشرح ذلك بالخطوات المبسطة:\\
+- قم باختيار مظهر من القائمة الجانبية في موقع ووردبريس.\\
+- اختر خيار تخصيص من القائمة الفرعية.\\
+- اختر خيار خيارات CSS الإضافية من قائمة تخصيص القالب.\\
+\\
+{{ :برمجيات_الويب:ووردبريس:تنسيقات-css-الإضافية-في-مخصص-القالب.jpeg?nolink |}}
+\\
+- ادخل تنسيقات 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>