اختلافات
عرض الاختلافات بين النسخة المختارة و النسخة الحالية من الصفحة.
برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2017/12/11 00:49] nawras |
برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2018/01/13 08:15] |
||
---|---|---|---|
سطر 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> | ||
- | <a href="www.learnwithnaw.com" target="_blank"> visit Learnwithnaw.com </a> | ||
- | </code> | ||
- | \\ | ||
- | \\ | ||
- | {{ :برمجيات_الويب:ووردبريس:موقع-التحويل-إلى-ترميز-html.jpeg?nolink |}} | ||
- | |||
- | |||
- | ==== إدراج وسم <code> في المقالة أو الصفحة ==== | ||
- | بدايةً قم [[برمجيات_الويب:ووردبريس:كيفية_كتابة_مقالة_في_ووردبريس|بإضافة مقالة جديدة]] أو [[برمجيات_الويب:ووردبريس:صفحات_ووردبريس|صفحة جديدة]] في [[برمجيات_الويب:ووردبريس|موقع ووردبريس]] الخاص بك. | ||
- | \\ | ||
- | \\ | ||
- | قم باختيار المحرر النصي للمقالة كما يظهر في الصورة التالية، وقم بلصق الكود الذي نسخته في الخطوة السابقة ضمن وسمي pre و code في الموضع الذي تريد من المقالة كما يظهر في الصورة التالية والكود الآتي: | ||
- | \\ | ||
- | |||
- | <pre> | ||
- | <code> | ||
- | <a href="www.learnwithnaw.com" target="_blank"> visit Learnwithnaw.com </a> | ||
- | </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// |