اختلافات
عرض الاختلافات بين النسخة المختارة و النسخة الحالية من الصفحة.
|
برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2017/12/11 00:02] 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 |}} | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | |||
| - | \\ | ||
| - | <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> | ||
