هل ترغب في نشر رمز مع نوع ما من الحلول أو التعليمات على موقع الويب الخاص بك، ولكن هل تواجه مشاكل معه؟ تعرف على كيفية القيام بكل شيء بشكل صحيح وعرض الكود كما يظهر في محرر الكود.
قد لا يبدو إدخال الكود مهمة صعبة، ولكن قد تنشأ صعوبات إذا كنت لا تعرف بعض القواعد التي سيتم مناقشتها.
الصق الكود كرمز
لإدراج رمز في موقع ويب، يتم تغليفه بعلامات
و . وينتج عن هذا البناء التالي:
هذا هو الرمز
للشرح بإيجاز وفي صلب الموضوع، في هذا التصميم، تخبر علامة الكود المتصفح بما بداخله كود البرنامج، وتحتفظ العلامة المسبقة بفواصل الأسطر وعلامات تبويب الأسطر (المسافات البادئة) والمسافات.
يبدو أن كل شيء واضح وليس هناك أي شيء معقد، ولكن المشكلة هي أنه إذا كنت تريد إدراج كود html أو كود يحتوي على أحرف< , >, & , " , ` ، فقد تنشأ مشاكل - سيقوم المتصفح بمعالجة التعليمات البرمجية الخاصة بك بتنسيق HTML. على سبيل المثال، إذا كنت تريد إظهار رمز النموذج باستخدام زر، وحقول الإدخال، وما إلى ذلك في التعليمات البرمجية، فسيقوم المتصفح بذلك عرض النموذج وليس الكود الخاص به.
رمز الهروب
ولمنع حدوث ذلك، يقومون بما يسمى بالهروب من التعليمات البرمجية - وذلك عندما يتم استبدال الأحرف المذكورة أعلاه برموز UTF الخاصة بهم.
مخطط لاستبدال الأحرف برموز UTF
فيما يلي الرموز والأكواد التي تحل محلها:
بالطبع، لا أحد يستبدل الرموز يدويا - يتم ذلك برمجيا. الأداة الأكثر سهولة لتحقيق ذلك هي الهروب من التعليمات البرمجية عبر الإنترنت، حيث سيتم استبدال جميع الأحرف على الفور، وسيحتفظ الرمز بجميع المسافات والواصلات وسيكون جاهزًا تمامًا للإدراج في إنشاء العلامة
ونتيجة لذلك، بعد الهروب، يمكنك إدراج أي جزء من التعليمات البرمجية. يمكنك مشاهدة مثال على هذا الإدراج بعد تخطي الكود أدناه:
عنوان
المنشورات ذات الصلة
علاوة على ذلك، أود على الفور أن أوضح أننا سنقوم بإدخال الكود في المقالة نفسها، حتى يتمكن القراء من نسخه دون إضاعة الوقت في كتابة النص نفسه. وبالتالي، سنزيد من راحة () موردنا - هذه المرة. وستبدو المقالات أكثر احترافية واكتمالًا - هذان اثنان.
أود أيضًا أن أشير إلى أن المعلومات الواردة في هذه المقالة ستكون مفيدة للأشخاص الذين، كما قلنا لك، كيفية عمل أنواع مختلفة من الإضافات إلى الموقع، أو المستخدمين الذين يرغبون ببساطة في المشاركة معلومات مفيدة. ولا يهم أن تكون هذه المعلومات عبارة عن كود :) بالمناسبة، سأخبرك بسر صغير؛ في هذا المشروع نعرضها باستخدام البرنامج الإضافي Wp-Syntex.
قد تسأل: "لماذا نستخدمها؟" الجواب بسيط - لا يوجد رفاق حسب الذوق واللون. نكتة. في الواقع، اخترنا هذا البرنامج المساعد لأنه سهل الاستخدام، فهو يضيف نمطًا مرئيًا بشكل مثالي إلى أنواع مختلفة من لغات البرمجة (css، html، java، javascript، perl، sql، وما إلى ذلك)، ولا يزيد التحميل على خادمنا .
حسنًا، بما أنني تجاهلت الأمر بشأن Wp-Syntex، فلنستخدم مثاله لإظهار كيفية إدراج التعليمات البرمجية في المقالات على WordPress.
تحتاج أولاً إلى تثبيت هذا البرنامج المساعد. تحدثنا عن كيفية القيام بذلك في المقالة حول .
لذلك، لن أصف هذا الإجراء هنا.
ونتيجة لذلك، سترى ما يلي:
الكود الذي تريد إخراجه
أيضًا، بدلاً من PHP في هذا الكود، يمكنك إدراج لغة برمجة أخرى، على سبيل المثال CSS أو Java. وفي الوقت نفسه، سوف يتغير نمط المظهر.
ميزات إضافية لـ Wp-Syntex
إذا قمت بإضافة السمة إلى علامة الفتح "pre". خطأي أن الكود الذي ستحتاج إلى لصقه سيبدأ على النحو التالي:
الكود الذي تريد إخراجه
آمل أن تلاحظ الفرق؟
هناك سمة صغيرة أخرى قد تحتاجها - هذه هرب. يسمح لك بتحويل أكواد html للأحرف مباشرة إلى الأحرف نفسها. على سبيل المثال، يقوم بتحويل ">" إلى ">". من أجل كسب المال هذه الوظيفة، في علامة الفتح "pre"، أدخل السمة التالية:
هرب = "صحيح"
وبناءً على ذلك، ستبدأ العلامة على النحو التالي:
<
pre lang=
"php"
line=
"1"
escaped=
"true"
>
لقد عثرت أيضًا على معلومات على الإنترنت تفيد بأنه يمكنك تثبيت مكون إضافي آخر (زر WP-Syntax)، والذي يعمل جنبًا إلى جنب مع المكون الإضافي الخاص بنا ويضيف زر إدخال التعليمات البرمجية إلى محرر WP. لم أكن كسولًا جدًا وقررت اختباره.
فور تثبيته، انزعجت من حقيقة أنه لم يتم تحديثه لفترة طويلة ولم يتم اختباره باستخدام إصدار WordPress الخاص بنا. حسنًا، ماذا يمكنني أن أقول، كانت مخاوفي مبررة.
بعد تفعيل زر WP-Syntax، قررت أن أحاول إدراج برنامج جافا سكريبت في إحدى مقالاتنا. فعلت كل شيء كما هو مبين في جبل التعليمات والتوصيات. لقد أدخلت النص في المقالة، واخترته ثم ضغطت على زر "الكود".
ثم أشار إلى لغة البرمجة ورقم السطر الذي يجب أن يبدأ منه إخراج البرنامج النصي.
ربما تتساءل لماذا كتبت عن هذه التجربة في هذا المقال؟ وبهذا أردت أن أقول أنه عندما تبحث عن بعض المعلومات على الإنترنت، انتبه إلى تاريخ النشر. بعد كل شيء، هناك احتمال كبير للغاية أن المعلومات الواردة في المقالة القديمة كانت ذات صلة منذ عدة سنوات، و هذه اللحظةفهو ببساطة لا يعمل، وقد يؤدي استخدامه أو تنفيذه إلى جعل مشروعك عرضة للخطر.
في مدونتنا، أحاول تحديث جميع المواد. الوضع الحالي، أراقب التحديثات باستمرار، وإذا لزم الأمر، أقوم بإجراء تعديلات على المقالات المكتوبة بالفعل.
إذا كنت ترغب في الحصول على معلومات محدثة إلى حسابك بريد إلكتروني، ثم أوصي به.
فيديو "كيفية إدراج كود HTML في المقالة"
أيها الأصدقاء، إذا كان شخص ما يفضل أن يرى كيف يتم ذلك، فقد قمت بتسجيل مقطع فيديو لكم. وأذكرك أن لدينا أيضًا قناة على YouTube يمكنك الاشتراك فيها أيضًا.
مقالات ذات صلة:
حسنًا، أتمنى ألا تكون المقالة معقدة، وأن أكون قادرًا على إخبارك بالتفصيل عن كيفية إدراج كود html في موقع ويب دون أي متاعب غير ضرورية.
لا تهمل جماليات مدونتك. بعد كل شيء، فإن قارئنا، كما هو الحال في الحياة، يقابلك بملابسه ويرافقك بعقله.
هذا كل شيء بالنسبة لي!
وداعا وداعا!
مع خالص التقدير، كالميكوف أنطون
تختلف طريقة إدراج كود html قليلاً حسب المكان الذي تريد إدراجه فيه بالضبط. وفقا لهذا، سننظر في خيارات مختلفة.
لإدراج كود html في الموقع، وخاصة في نص المقالة على إحدى صفحات الموقع، انتقل إلى لوحة الإدارة، وحدد المقالة المطلوبة وافتحها لتحريرها. بعد ذلك، يجب تغيير وضع المحرر المرئي إلى وضع التحرير. عند العمل مع نظام CMS، ما عليك سوى النقر لتغيير الوضع. ثم انسخ كود html والصقه في الموقع المخطط له.
في كثير من الأحيان، بعد الإدراج، تريد تنسيق الكود قليلاً، على سبيل المثال، ضبط النص ليلتف حول الكود على الجانب الآخر. هناك طريقة بسيطة للقيام بذلك باستخدام خصائص CSS.
باستخدام العلامة
… ، لف الكود الخاص بك في حاوية. ويمكن القيام بذلك أيضًا باستخدام علامات نموذج الجدول. وداخل هذه الحاوية، استخدم خاصية "النمط" لتعيين جميع السمات المطلوبة.
للتأكد من أنه عند حفظ مقال، لا يقوم المحرر المرئي بقطع التغييرات التي، في رأيه، ليست كود html، فمن الأفضل تعطيله عند إدخال الكود. تم تصميم عملية قطع التغييرات التي أجراها المحرر لمنع تهديد التعليمات البرمجية الضارة المحتملة.
كيفية تعطيل المحرر المرئي؟
في لوحة الإدارة، انقر فوق "الموقع" - " الاعدادات العامة" - "الموقع" وفي سطر "المحرر المرئي" حدد "بدون محرر". الآن سيكون من الممكن تحرير وإدراج كود html في وضع كود html. بعد لصق الكود وحفظ التغييرات، يمكن تمكين المحرر المرئي مرة أخرى.
إذا كنت تريد إعادة تحرير المقالة، فستحتاج أيضًا إلى إعادة إدخال كود html. في بعض الأحيان يكون من الضروري عرض كود html على كل صفحة من صفحات الموقع. إدخال كود HTML بحيث يظهر في كل صفحة من صفحات الموقع.
لحل هذه المشكلة، استخدم برنامج "المفكرة" أو أي محرر آخر لإدخال ملف الموقع الرئيسي (افتراضيًا هو ملف Index.php أو ملف Index.html). في ملف مفتوححدد موقعك المفضل للصق الرمز. للراحة، يمكنك تعيين عبارة في البحث الموجود في المكان الذي تريد إدراج الرمز فيه، لذلك ستجده بشكل أسرع. ثم انسخ الكود والصقه في المكان المطلوب إذا لزم الأمر، يمكن تنسيق التعليمات البرمجية بنفس الطريقة الموضحة لتنسيق التعليمات البرمجية في المقالة.
قبل أدخل الكود في الموقعتحتاج إلى معرفة هيكل الموقع. لا يجب عليك لصق الرمز في أي مكان أيضًا. ل عناصر معينةالموقع، هناك أماكن مخصصة لهم. على سبيل المثال، يحاولون وضع لافتات إعلانية في الجزء العلوي من الموقع، وعدادات حركة المرور في الأسفل.
ما هو الكود الذي نريد إدراجه؟
- على سبيل المثال، نريد إدراج (توصيل) بعض جافا سكريبت، كما اعتادت البرامج النصية أو تم وضعها فيها ملف منفصلأو وضعها في أعلى الموقع
- إذا كنت تريد إدراج لافتة إعلانية، فمن الأفضل تحديد الجزء العلوي من الموقع (رأس الموقع، قائمة التنقل، المساحة أعلى المنشور)، ولكن في بعض الحالات لافتات إعلانيةيتم إدراجها داخل النص أو في نهايته.
- يتم وضع رمز الإشارات المرجعية الاجتماعية (الأيقونات) قبل النشر (في بداية الصفحة) وفي النهاية.
- توجد عدادات الحضور، إذا تم وضعها على الإطلاق، في الجزء السفلي من الشاشة.
وهذا مجرد جزء صغير من الأمثلة.
في كل حالة محددة، يتم تحديد جزء أو جزء آخر من الموقع بناءً على تفاصيله.
نبحث عن (تحديد) ملف لوضع الكود فيه
كقاعدة عامة، تكون عدة ملفات مسؤولة عن عرض الموقع. فيما يلي أكثرها شيوعًا في WordPress: Index.php؛ php; page.php; header.php; footer.php; Sidebar.php; style.css.
أعلى الموقع
عادة ما يكون الملف مسؤولاً عن إخراج الجزء العلوي header.php (رأس الموقع). عادة ما تبدو بداية هذا الملف كما يلي:
>
يمكنك لصق البرنامج النصي هنا
بين العلامات
وضع البرامج النصية التي تعمل على جميع صفحات الموقع.
قد يختلف محتوى هذه العلامات لكل موضوع.
الصفحة الرئيسية للموقع
لكل عرض الصفحة الرئيسيةيستجيب الموقع بالملف Index.php، في أغلب الأحيان باستخدام لغة PHP، يجمع هذا الملف تعليمات برمجية من ملفات أخرى، على سبيل المثال (header.php، footer.php)، وبالتالي يتم تجميع الصفحة المعروضة في المتصفح من عدة ملفات.
القائمة الجانبية للموقع
عادةً ما يكون الملف Sidebar.php مسؤولاً عن عرض شريط الموقع (الكتلة الجانبية) على موقع الويب، وهنا يمكنك إدراج كتلة مع الإعلانات.
إخراج السجلات
إذا كنت تريد تغيير عرض منشورات المدونة، فاستخدم ملف Single.php.
صفحات الموقع
لتغيير صفحات الموقع، استخدم ملف page.php.
تذييل الموقع
هناك ملف آخر موجود في كل قالب تقريبًا وهو footer.php، ويمكنك أيضًا وضع البرامج النصية فيه؛ وغالبًا ما يُستخدم لإدراج عدادات حركة المرور.
مظهرالصفحات
إذا كنت تريد تعديل عرض الموقع، فستحتاج إلى ملف style.css.
الآن أنت تعرف تقريبًا الملفات المسؤولة عن إخراج أجزاء معينة من الموقع.
تحديد مكان إدخال الكود
لفهم مكان إدراج التعليمات البرمجية، يمكنك استخدام أداة قياسية جوجل كرومللقيام بذلك، انقر بزر الماوس الأيمن على جزء مجاني من الصفحة وحدد علامة التبويب عرض الرمز.
بمساعدتها، يمكننا تحديد اسم الكتلة أعلاه أو أدناه أو التي نحتاجها الصق الكود الخاص بك.
لتحديد الكتلة المطلوبة، انقر فوق الزر المميز باللون الأحمر وقم بتوجيهه إلى المنطقة المطلوبة من الموقع.
تُظهر الصورة في الأعلى لوحة يمكنك من خلالها رؤية رمز الموقع أو الكتلة المحددة.
الرجاء التواصل اسم الفصلتلك الكتلة أعلاه، أدناه، والتي يمكنك إدراج الرمز فيها.
الآن أدخل الرمز الذي تحتاجه وتحقق من التغييرات.
