كيفية استخدام WordPress Code Block

قد يكون عرض التعليمات البرمجية في صفحات WordPress والمنشورات أمرًا صعبًا. يمكن أن يؤدي مجرد نشر الشفرة داخل المحتوى إلى نتائج مثيرة للاهتمام ، خاصةً إذا كان WordPress يعرضها بشكل غير صحيح أو إذا كان الأمان الخاص بك يحجبك عن أي نشاط ضار. لحسن الحظ ، يجعل WordPress Code Block من السهل عرض مقتطفات التعليمات البرمجية. ستساعدك معرفة كيفية استخدام هذه الكتلة على عرض الكود داخل المحتوى الخاص بك بأفضل طريقة لكل من موقع الويب الخاص بك والقراء.

في هذه المقالة ، سنلقي نظرة على WordPress Code Block ونرى ما يفعله. سنرى كيفية إضافته إلى منشوراتك وصفحاتك وننظر في إعداداته وخياراته. انتظر حتى النهاية للاطلاع على النصائح وأفضل الممارسات حول كيفية استخدامها والاطلاع على الأسئلة المتداولة.

اشترك في قناتنا على اليوتيوب

كيفية إضافة كتلة الكود إلى منشورك أو صفحتك

لإضافة Code Block إلى صفحاتك ومنشوراتك ، حدد أداة إدراج الحظر بجوار منطقة المحتوى حيث تريد وضع الكتلة ، أو حدد أداة الإدخال في الزاوية اليسرى العلوية من الصفحة. أدخل اسم الكتلة وحددها عند ظهورها أو قم بالتمرير عبر الكتل لترى ما هو هناك.

إذا كنت تفضل ذلك ، يمكنك كتابة / رمز في المنطقة التي تريد ظهور الكتلة فيها. بعد ذلك ، ما عليك سوى الضغط على Enter أو تحديد الكتلة من الخيارات التي تظهر.

لديك الآن Code Block داخل المحتوى الخاص بك حيث يمكنك إضافة أي نوع من التعليمات البرمجية التي تريد عرضها. يتم تمييز الرمز تلقائيًا بعلامات التعليمات البرمجية ، لذلك يتم عرضه بشكل صحيح كرمز. يساعد هذا في تقديم أمثلة للقراء للتعلم منها أو استخدامها في مشاريعهم الخاصة. في هذا المثال ، أستخدم الكود الزائف من صفحة دعم WordPress (لأن) lazy.level = متقدم.

إعدادات وخيارات Code Block

يحتوي Code Block على مكانين حيث ستجد الإعدادات والخيارات. الأول هو شريط أدوات التعليمات البرمجية أعلى الكتلة. والثاني هو الخيارات الموجودة في الشريط الجانبي الأيمن. سننظر في كليهما.

شريط أدوات كتلة التعليمات البرمجية

انقر في أي مكان في الكتلة لرؤية شريط الأدوات الخاص بها. إذا كنت لا ترى جميع الأدوات ، فضع الماوس أسفل الكتلة في موقع كتلة جديد ، ثم انقر فوق الكتلة. ستظهر جميع الإعدادات.

تغيير نوع أو نمط كتلة الكود

يستخدم الإعداد الأول الأسهم اليمنى واليسرى. يغير هذا الكتلة إلى كتلة HTML مخصصة ، كتلة منسقة مسبقًا ، ويغير الأعمدة ، ويتيح لك إنشاء مجموعة حتى تتمكن من ضبط لون الخلفية ، واختيار الحدود ، وضبط الخيارات الأخرى. يمنحك التمرير فوقها معاينة لكيفية ظهور كل منها. أنا أحوم فوق خيار HTML المخصص.

يجر

تتضمن أداة السحب ست نقاط. احصل على هذه النقاط لسحب الكتلة إلى أي مكان تريده. يظهر خط أزرق حيث سيتم وضعه في كل مكان ممكن عندما تحوم فوق مناطق مختلفة.

عندما تسقطه ، سيتم وضع الكتلة في موقعها الجديد.

نقل

تعمل أسهم الحركة لأعلى ولأسفل على تحريك الكتلة لأعلى أو لأسفل ضمن كتل المحتوى في كل مرة تنقر عليها.

غامق ومائل

يتم تطبيق الإعدادات الغامقة والمائلة على الكود الذي حددته. يمكنك استخدامها معًا أو بشكل فردي. أنا أستخدم كلاهما معًا وبشكل مستقل في هذا المثال. هذه طريقة جيدة للفت الانتباه إلى سطور أو أوامر معينة في الكود.

وصلة

يتيح لك الرابط جعل أي رمز ارتباط قابل للنقر عليه. يمكنك البحث عن أو إدخال عنوان URL لجزء الرمز الذي حددته. يعد هذا أمرًا جيدًا إذا كنت تريد الارتباط ببرامج تعليمية لكل من الأوامر ، أو أمثلة أخرى ، أو مصدر الشفرة ، وما إلى ذلك. يمكنك فتح الرابط في علامة التبويب نفسها أو علامة تبويب جديدة.

المزيد من الإعدادات

يفتح المزيد من الإعدادات في Code Block مربع قائمة منسدلة به العديد من الخيارات. لقد قمت بتطبيق كل خيار من الخيارات في هذا المثال.

الكود المضمن - يُظهر النص المنسق كرمز. يضع النص على سطر بمفرده. نظرًا لتنسيق كل شيء كرمز ، يبدو الخط كما هو.

صورة مضمنة - تضع صورة داخل النص حيث وضعت الماوس. يفتح مكتبة الوسائط حيث يمكنك تحديد صورة. إذا قمت بالنقر فوق الصورة ، فسترى مربعًا منسدلًا حيث يمكنك تغيير عرضه.

إدخال لوحة المفاتيح - يضيف علامات لوحة المفاتيح إلى الرمز الذي حددته. يتم عرض الشفرة في خط monospace الافتراضي للمتصفح.

يتوسطه خط - يضيف سطرًا عبر الكود الذي حددته.

منخفض - تنسيقات التعليمات البرمجية على هيئة خط منخفض.

مرتفع - تنسيق الكود على هيئة نص مرتفع. يمكنك استخدام الأحرف المنخفضة والمرتفعة معًا. يؤدي ذلك إلى تقليل حجم الخط وتوسيط الكود أفقيًا.

لون النص - يغير لون الكود الذي حددته. حدد من الألوان المعدة مسبقًا ، أو اختر لونًا من أداة منتقي الألوان ، أو أدخل القيمة على هيئة HEX أو RBG أو HSL.

خيارات

يتم وضع خيارات Code Block ضمن النقاط الثلاث في أقصى يمين شريط الأدوات. تشمل الخيارات:

إخفاء المزيد من الإعدادات - لإخفاء الشريط الجانبي الأيمن لمنحك مساحة عمل نظيفة وواسعة.

نسخ - نسخ الكتلة حتى يمكنك لصقها في أي مكان داخل منطقة المحتوى.

مكرر - نسخة مكررة من الكتلة ووضعها تحت الأصل.

أدخل قبل - يضيف منطقة محتوى فوق Code Block.

إدراج بعد - يضيف منطقة محتوى أسفل Code Block.

نقل إلى - يتيح لك تحريك الكتلة عن طريق وضع خط أزرق يمكنك تحريكه لأعلى أو لأسفل باستخدام مفاتيح الأسهم. عندما تحصل على الخط إلى الموقع الذي تريده ، ما عليك سوى الضغط على Enter.

تحرير بتنسيق HTML - تغييرات في محرر التعليمات البرمجية للكتلة حيث يمكنك تحرير التعليمات البرمجية بتنسيق HTML. حدد تحرير مرئيًا لتغيير الكتلة مرة أخرى إلى الوضع المرئي.

إضافة إلى الكتل القابلة لإعادة الاستخدام - تضيف الكتلة إلى الكتل القابلة لإعادة الاستخدام حتى تتمكن من إعادة استخدامها في أي صفحة أو منشور.

المجموعة - تضيف الكتلة إلى مجموعة حتى تتمكن من إجراء تغييرات عليها كوحدة واحدة.

إزالة الكتلة - يحذف Code Block.

إعدادات Code Block

يتم وضع إعدادات Code Block في الشريط الجانبي الأيمن. وهي تشمل الطباعة والإعدادات المتقدمة. سيؤدي تحديد الكتلة إلى عرض الإعدادات. إذا لم يكن الشريط الجانبي ظاهرًا ، فانقر فوق رمز الترس في الزاوية اليمنى العليا.

الطباعة

يتيح لك أسلوب الطباعة تحديد حجم الخط للكتلة بأكملها. اختر حجم الخط من مربع قائمة منسدلة بـ 7 أحجام أو أدخل حجمًا مخصصًا في الحقل. انقر فوق "إعادة تعيين" لتغييره مرة أخرى إلى حجم الخط الافتراضي.

متقدم

تتضمن الإعدادات المتقدمة نقطة ارتساء HTML وحقل لفئات CSS الإضافية. المرساة هي عنوان URL لهذه الكتلة فقط ، لذا يمكنك الارتباط بها مباشرةً. يسمح لك حقل فئات CSS الإضافية بإضافة فئة CSS مخصصة لتصميم الكتلة.

نصائح وأفضل الممارسات لاستخدام Code Block بشكل فعال

استخدم هذا الحظر في أي وقت تريد فيه عرض رمز داخل المحتوى الخاص بك. الكود نفسه ليس له أي تأثير على الكتلة.

نسق الشفرة بمسافات كما تفعل عند إنشاء رمز باستخدام محرر نصوص. استخدم الإعدادات الغامقة والمائلة للفت الانتباه إلى مقتطفات معينة داخل التعليمات البرمجية الخاصة بك.

كما هو الحال مع أي رمز ، صنفه جيدًا حتى يسهل فهمه. يمكنك التعليق على الكود أو إضافة ملاحظات داخل الكتلة ، ولكن تأكد من أنها ليست ضمن عناصر الكود في حالة رغبة شخص ما في نسخ الكود.

الأسئلة المتداولة حول Code Block

ما هو الغرض من WordPress Code Block؟

لعرض الكود ليراه الآخرون ويستخدمونه. يعرض الرمز في تخطيط نظيف يحافظ على التباعد.

هل يقوم كود بلوك بتشغيل الكود؟

لا ، فهو يعرض الرمز المنسق حتى يتمكن القراء من رؤيته واستخدامه. يتم تغليف الكود تلقائيًا بعلامات تعليمات HTML البرمجية.

ما أنواع التعليمات البرمجية التي يمكن عرضها؟

سيعرض أي رمز من أي لغة برمجة أو برمجة نصية. اللغة لا تصنع أي فرق.

هل تقوم بتنسيق المدونة؟

لا ، فهو لا يعمل كمحرر كود ، لذا فهو لا يغير التباعد ، والألوان ، وإضافة الأرقام ، وما إلى ذلك. إنه يعرض فقط الرمز بالطريقة التي تكتبه بها.

كيف يختلف Code Block عن HTML Block؟

يتيح لك HTML Block إنشاء HTML دون الحاجة إلى التغيير إلى عرض محرر التعليمات البرمجية لصفحتك. سيتم تشغيل HTML على الواجهة الأمامية. يمكنك معاينة النتائج من النهاية الخلفية. يمكنك استخدام Code Block لعرض HTML إذا كنت لا تريد تنفيذه.

كيف تختلف عن الكتلة المنسقة مسبقًا؟

تعرض الكتلة المنسقة مسبقًا نصًا مع مسافاتك بخط أحادي. يضيف ألوان الخط والخلفية لخيارات الشريط الجانبي.

استنتاج

هذه هي نظرتنا إلى WordPress Code Block. الكتلة بسيطة وسهلة الاستخدام. نظرًا لأنه لا يقوم بتشغيل الكود ، فإن اللغة نفسها لا تهم. توفر هذه الكتلة طريقة جيدة لعرض أي نوع من التعليمات البرمجية للقراء لنسخها أو التعلم منها.

نريد أن نسمع منك. هل استخدمت كتلة كود WordPress؟ أخبرنا برأيك في التعليقات.

صورة مميزة عبر Danielala / shutterstock.com