كيفية إضافة مناطق عناصر واجهة المستخدم إلى WordPress (قوالب وكلاسيكية)

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

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

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

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

ما هي الحاجيات وكيف تستخدمها؟

قبل الوصول إلى المزيد من الأمور التقنية ، دعنا أولاً نستقر سريعًا على ما نتحدث عنه عند استخدام المصطلح "عنصر واجهة مستخدم" فيما يتعلق بـ WordPress. إذا كنت تستخدم سمة غير مجمعة مثل Twenty-One ، فستجد إعداداتها ضمن Appearance> Widgets .

يعرض هذا جميع مناطق عناصر واجهة المستخدم المتاحة في نسختك الحالية (هنا ، التذييل فقط) والأدوات التي تحتوي عليها. كل شيء مرئي هنا يتوافق أيضًا مع الواجهة الأمامية لموقع الويب الخاص بك.

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

كيفية عرض الحاجيات على موقعك

كانت قائمة الأدوات تحتوي على واجهة مستخدم مختلفة ، ولكن تم تحويلها الآن للعمل مع محرر الكتلة مثل باقي WordPress. لذلك ، يمكنك استخدامه مثل أي مثيل آخر لمحرر WordPress Gutenberg.

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

الكتل التي يمكنك استخدامها تمتد إلى الخيارات المعتادة. الفقرات والعناوين والجداول والصور - كل شيء ممكن.

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

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

بدلاً من ذلك ، تجد كل هذه الإعدادات أيضًا في مُخصص WordPress ( المظهر> التخصيص ) ثم في علامة التبويب الأدوات .

الميزة هنا هي أنه يمكنك معاينة كيف سيبدو كل شيء على الصفحة مباشرة في المحرر.

إنشاء مناطق عناصر واجهة مستخدم جديدة في سمات WordPress الكلاسيكية

حسنًا ، جيد جدًا حتى الآن. لقد قررنا تحديد العناصر المصغّرة وفي أي جزء من السمات الكلاسيكية يمكنك إدارتها.

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

في هذه الحالة ، عليك أن تنشئها بنفسك ، وهذا ما سنمر به الآن.

1. تسجيل منطقة القطعة الخاصة بك

يعد إنشاء مناطق عناصر واجهة المستخدم في قالب WordPress عملية من خطوتين. الخطوة الأولى هي تسجيلهم.

يمكنك القيام بذلك باستخدام الوظيفة register_sidebar() داخل functions.php . يبدو شيئًا كالتالي:

 function ns_register_top_banner_widget() { register_sidebar( array( 'name' => 'Top Bar', 'id' => 'top-bar-widgets', 'description' => 'Widgets in this area will appear in a bar at the top of the site.', 'before_widget' => '<div class="widget top-bar-widget">', 'after_widget' => '</div>', 'before_sidebar'=> '<div>', 'after_sidebar'=> '</div>', ) ); } add_action( 'widgets_init', 'ns_register_top_banner_widget' );

ملاحظة: مثل العديد من تغييرات السمات ، يُنصح بتنفيذ ذلك في شكل سمة فرعية.

بعض الشرح للأجزاء المختلفة من مقتطف الشفرة وما تعنيه:

• name - هذا هو اسم منطقة عنصر واجهة المستخدم التي ستظهر في النهاية الخلفية لـ WordPress.
• id - تحتاج إلى إعطاء معرف منطقة عنصر واجهة المستخدم حتى تتمكن من عرضها لاحقًا.
• description - يستخدم هذا لتظهر داخل قائمة الأدوات . يمكنك استخدامه ، على سبيل المثال ، لشرح موقع الشريط الجانبي للمستخدمين الآخرين. ومع ذلك ، سيظهر فقط لإصدارات WordPress التي لا تستخدم محرر الكتلة للأدوات ، لذلك يمكنك أيضًا حذفها.
• before_sidebar and after_sidebar - تسمح لك هاتان المعلمتان بإضافة ترميز HTML قبل وبعد منطقة عنصر واجهة المستخدم. بهذه الطريقة ، على سبيل المثال ، يمكنك لفها في حاوية <div> .
• before_widget و after_widget - نفس ما ورد أعلاه ولكن لأي عنصر واجهة مستخدم يظهر في هذه المنطقة.

هناك معلمات أخرى يمكنك استخدامها مع register_sidebar() . يمكنك معرفة المزيد عنها في الوثائق. ومع ذلك ، لغرضنا ، ما ورد أعلاه كاف.

بمجرد التواجد في functions.php ومع حفظ الملف ، ستظهر منطقة عنصر واجهة المستخدم بالفعل في الواجهة الخلفية لـ WordPress.

2. إخراج مناطق القطعة في موضوع WordPress الخاص بك

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

يحدث هذا عبر وظيفة dynamic_sidebar() . على سبيل المثال ، لإخراج منطقة عنصر واجهة المستخدم التي قمت بإنشائها أعلاه في أي مكان في المظهر الخاص بك ، يمكنك استخدام هذه الوظيفة:

 <?php dynamic_sidebar( 'top-bar-widgets' ); ?>

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

بينما يعمل ما سبق ، فمن المنطقي استخدام مقتطف أكثر تعقيدًا:

 <?php if ( is_active_sidebar( 'top-bar-widgets' ) ) : ?> <?php dynamic_sidebar( 'top-bar-widgets' ); ?> <?php endif; ?>

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

هذا يترك فقط الأسئلة ، أين تضع هذا الترميز؟

الإجابة: في أي مكان في ملفات السمة الخاصة بك حيث تريد أن تظهر منطقة عنصر واجهة المستخدم. عادةً ما يكون ذلك داخل ملفات قالب الصفحة مثل page.php أو single.php . ومع ذلك ، يمكنك أيضًا إضافته إلى شيء مثل header.php أو footer.php . لاتخاذ قرار ، من المفيد معرفة التسلسل الهرمي للقالب وفهم كيفية عمل السمات.

في هذه الحالة ، بالنسبة لموضوع Twenty-One ، نضعه داخل header.php مباشرةً بعد فتح الصفحة.

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

بديل: استخدم خطافات WordPress لعرض مناطق عناصر واجهة المستخدم

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

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

كيف سيبدو ذلك في حالتنا؟

إليك كيفية وضع منطقة عنصر واجهة مستخدم باستخدام خطاف WordPress:

 function ns_output_top_banner_widget() { if ( is_active_sidebar( 'top-bar-widgets' ) ) : dynamic_sidebar( 'top-bar-widgets' ); endif; } add_action( 'wp_body_open', 'ns_output_top_banner_widget' );

يحتوي قالب Twenty-One على خطاف يسمى wp_body_open() من الداخل ملف الرأس الخاص به. من خلال الربط به ، يمكننا عرض منطقة عنصر واجهة المستخدم في نفس المكان دون تعديل الملف نفسه.

كما ذكرنا ، يتم إدخال مقتطف الشفرة داخل functions.php القالب (الفرعي) الخاص بك .php. هذه الطريقة مناسبة بشكل خاص للسمات التي تحتوي على الكثير من الخطافات ، مثل Genesis Framework.

كيفية إضافة أدوات في Block Themes

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

هنا ، نظرًا لأن محرر الموقع يعمل بشكل مختلف تمامًا ، فليس لديك بالفعل مناطق عناصر واجهة المستخدم. ستلاحظ أيضًا أن قائمة Appearance> Widgets غير موجودة.

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

أدخل قوالب الصفحة وأجزاء القوالب

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

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

يمنحك هذا قائمة قوالب الصفحات المتوفرة على موقعك. عادة ما تتراوح من صفحة فوق قوالب الأرشيف إلى صفحة 404.

إنه مشابه لما ستجده إذا ألقيت نظرة على ملفات السمات في سمة كلاسيكية.

ضمن أجزاء القالب ، من ناحية أخرى ، يمكنك العثور على قوالب لأجزاء من موقع الويب الخاص بك مثل قسم الرأس أو التذييل أو التعليق.

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

يمكنك أيضًا اختيار نموذج آخر من محرر القائمة المنسدلة.

إضافة عناصر / أدوات جديدة

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

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

إذا قمت بذلك ، وقمت بحفظه ، فسيظهر أيضًا في الواجهة الأمامية لموقع الويب لكل صفحة يوجد بها جزء القالب هذا.

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

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

إنشاء "مناطق ودجت" جديدة في قوالب قوالب ووردبريس

لذا ، كيف يمكنك إنشاء مناطق عناصر واجهة مستخدم جديدة في سمات الكتلة؟

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

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

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

في القائمة التي تظهر ، أعطها اسمًا (على سبيل المثال ، "Header with top bar") واختر النوع (في هذه الحالة ، Header ، بالطبع) ، ثم ابدأ التحرير. املأها بأي عناصر صفحة وعناصر واجهة مستخدم ومحتوى تحتاجه أو ترغب فيه.

عند الانتهاء ، ما زلت بحاجة إلى تعيينه إلى قالب الصفحة الذي تريده أن يظهر فيه.

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

سيؤدي هذا إلى فتح قائمة بأجزاء وأنماط القالب المتوفرة على موقعك.

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

كيفية إضافة عناصر / كتل جديدة

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

لأحدها ، يمكنك تثبيت مكونات Gutenberg block الإضافية ، والتي يحتوي العديد منها على مجموعات عناصر واجهة مستخدم مختلفة مثل النماذج أو الخرائط أو الدوارات.

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

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

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

بالمناسبة ، يمكنك دائمًا إزالة الكتل الفردية التي قمت بتثبيتها في قائمة المكونات الإضافية في حالة عدم حاجتك إليها بعد الآن.

تطبيق Widgetizing WordPress Themes ليس بهذه الصعوبة

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

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

المهم الذي يجب أخذه في الاعتبار هو أن المبادئ هي نفسها ، ويختلف التنفيذ فقط. الآن بعد أن عرفت كيف يتم ذلك ، استخدم هذه المعرفة لتحسين موقعك!

ما هو عنصر واجهة المستخدم الذي يجب أن يكون لديك والذي ترغب في وضعه على مواقع الويب الخاصة بك؟ هل تستخدم سمة كلاسيكية أو قالب كتلة لتنفيذه؟ اسمحوا لنا أن نعرف في التعليقات!