اختلافات
عرض الاختلافات بين النسخة المختارة و النسخة الحالية من الصفحة.
المراجعة التالية جانبي المراجعة التالية | |||
برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2017/12/10 23:59] nawras اُنشئت |
برمجيات_الويب:ووردبريس:إدراج_الأكواد_البرمجية_في_المقالات [2017/12/10 23:59] 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> | ||
+ | <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> |