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

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

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

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

ما هي القطعة في WordPress؟

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

في البداية ، تمت إضافتهم إلى السمات لإنشاء طريقة بسيطة لإدارة تصميم وهيكل الموضوع.

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

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

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

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

الآن ، دعنا نرشدك عبر الطريقة الأولى لإضافة عنصر واجهة مستخدم مخصص إلى موقع WP الخاص بك والذي يتعلق بلصق الكود في ملف jobs.php.file الخاص بالسمة.

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

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

قم بتوصيل موقع WP عبر عميل FTP ، ثم انتقل إلى مجلد / wp-content / plugins ضمن عمود الموقع البعيد. حدد مجلد البرنامج المساعد الخاص بالموقع وقم بتحميله على موقعك.

سيتم نقل مجلد البرنامج المساعد الخاص بالموقع إلى موقعك وستتمكن من تثبيته على موقع الويب.

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

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

// تسجيل وتحميل القطعة
function yoursite_load_widget () {
register_widget ('yoursite_widget') ،
}
add_action ('widgets_init'، 'yoursite_load_widget') ؛

// إنشاء القطعة
تمدد _widget class yoursite WP_Widget {

وظيفة __construct () {
الوالد :: __ بناء (

// معرف قاعدة القطعة الخاصة بك
"yoursite _widget"،

// سيظهر اسم القطعة في واجهة المستخدم
__ ("أداة موقعك" ، "yoursite_widget_domain") ،

// وصف القطعة
المصفوفة ('description' => __ ('نموذج القطعة على أساس SKT Tutorial'، 'yoursite_widget_domain')،)
) ؛
}

// إنشاء الواجهة الأمامية للقطعة

أداة الوظيفة العامة ($ args ، $ example) {
$ title = application_filters ('widget_title'، $ example ['title']) ؛

// قبل وبعد يتم تحديد وسيطات عنصر واجهة المستخدم حسب السمات
صدى $ args ['before_widget']؛
إذا (! فارغ ($ title))
صدى $ args ['before_title']. العنوان. $ args ['after_title']؛

// هذا هو المكان الذي تقوم فيه بتشغيل التعليمات البرمجية وعرض الإخراج
echo __ ('Greetings!'، 'yoursite_widget_domain') ؛
صدى $ args ['after_widget']؛
}

// القطعة الخلفية
نموذج الوظيفة العامة (مثيل $) {
if (isset ($ enterprise ['title'])) {
$ title = مثيل $ ['title']؛
}
آخر {
$ title = __ ('New title'، 'yoursite_widget_domain')؛
}
// نموذج مشرف القطعة
؟>

<label for = "get_field_id ('title')؛؟>”>
<input class = "widefat" id = "get_field_id ('title') ؛؟>” name = ”get_field_name ('title') ؛؟>” type = ”text” value = ”” />

<؟ php
}

// تحديث القطعة مع استبدال المثيلات القديمة بالجديدة
تحديث الوظيفة العامة ($ new_instance ، $ old_instance) {
$ مثيل = مصفوفة () ؛
$ مثيل ['title'] = (! فارغ ($ new_instance ['title']))؟ strip_tags ($ new_instance ['title']): ''؛
عودة $ مثيل؛
}
} // Class yoursite_widget ينتهي هنا

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

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

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

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

الأشرطة الجانبية المخصصة: مدير منطقة عنصر واجهة المستخدم الديناميكي:

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

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

حزمة أدوات SiteOrigin:

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

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

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

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

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

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

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

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

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

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

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

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

إليك كيفية عمل العملية -

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

ولكن إذا كان إنشائه يدويًا يمثل مشكلة بالنسبة لك ، فيمكنك الحصول عليه مباشرةً من عميل FTP الذي تستخدمه.

كل ما عليك فعله هو الاتصال بموقعك عبر عميل FTP ، والتوجه إلى مجلد / wp-content / plugins وتحديد مجلد البرنامج المساعد الخاص بالموقع وتحميله إلى موقع الويب الخاص بك.

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

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

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

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

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