تعد أدوات وورد بريس مفيدة بشكل لا يصدق. إنها تتيح لك إضافة جميع أنواع المحتوى الإضافي إلى موقع الويب الخاص بك خارج نص المنشور أو الصفحة نفسها ، مما يشجع المستخدمين على الحصول على المعلومات أو متابعة الروابط أو اتخاذ إجراء.
في هذا المنشور ، سأعرض لك كل ما تحتاج لمعرفته حول أدوات وورد بريس. كيفية إضافتها إلى موقعك ، وكيفية إنشاء مناطق عناصر واجهة المستخدم لوضعها فيها ، وكيفية تثبيت المكونات الإضافية التي تمنحك المزيد منها ، وكيفية ترميز عناصر واجهة المستخدم الخاصة بك ، وغير ذلك الكثير.
ما هي أدوات وورد بريس؟
في وورد بريس ، الأدوات الذكية عبارة عن مقتطفات من المحتوى تعيش خارج تدفق الصفحة أو محتوى المنشور.
تحتوي الأدوات على معلومات أو تنقل أو وسائط منفصلة عن منشور أو صفحة فردية. في معظم الحالات ، سيتم عرض كل عنصر واجهة مستخدم في كل صفحة في الموقع ، ولكن يمكنك أيضًا تسجيل مناطق عناصر واجهة المستخدم لصفحات معينة مثل الصفحة الرئيسية.
لإضافة عنصر واجهة مستخدم إلى موقعك ، تحتاج إلى إضافته إلى منطقة عنصر واجهة المستخدم. يتم إنشاء مناطق عناصر واجهة المستخدم بواسطة السمة الخاصة بك لأنها تتعلق بتصميم وتخطيط موقعك وليس بالوظائف.
تحتوي معظم سمات وورد بريس على مناطق عناصر واجهة مستخدم في الشريط الجانبي والتذييل ، على الرغم من أن بعضها يحتوي على مناطق عناصر واجهة مستخدم متعددة في العديد من الأماكن ، مثل أسفل أو أعلى المحتوى أو في الرأس.
تُظهر لقطة الشاشة أدناه ، لأحد مواقعي الخاصة ، عناصر واجهة مستخدم في الشريط الجانبي والتذييل.
مناطق القطعة في موقعي
مناطق القطعة في موقعي
يأتي وورد بريس مزودًا بمجموعة من الأدوات التي تم تحميلها مسبقًا حتى تتمكن من استخدامها دون الحاجة إلى تثبيت أي مكونات إضافية أو كتابة أي كود. ولكن يمكنك أيضًا إضافة المزيد من عناصر واجهة المستخدم عن طريق تثبيت المكونات الإضافية أو ترميز المكونات الخاصة بك.
يمكن أن تغطي مجموعة كبيرة من أنواع المحتوى ، مثل الوسائط وموجزات الوسائط الاجتماعية والتنقل والبحث والخرائط وغير ذلك الكثير. هناك القليل جدًا الذي قد تريده على موقعك ولا يمكنك العثور على عنصر واجهة مستخدم له. في الواقع ، يتمثل التحدي الأكبر في كثير من الأحيان في الاختيار بين جميع الخيارات وعدم المبالغة في ذلك.
متى تستخدم أدوات وورد بريس
يجب عليك استخدام أداة عندما تريد إضافة محتوى إضافي إلى صفحة واحدة أو أكثر في موقعك (وعندما أقول صفحة ، أقوم بتضمين المنشورات والمحفوظات وما إلى ذلك) ، لكن هذا ليس جزءًا من محتوى تلك الصفحة. إنها مفيدة بشكل خاص للمحتوى الذي تريد عرضه على كل صفحة من صفحات الموقع ، مثل قائمة بآخر منشوراتك ، أو عربة التسوق ، أو زر الحث على اتخاذ إجراء.
فكر في عدد المستخدمين الذين سيحتاجون إلى الوصول إلى كل عنصر واجهة مستخدم ومدى أهميته عندما تقرر مكان وضعه. ستكون الأدوات في الشريط الجانبي أكثر وضوحًا من تلك الموجودة في التذييل ، والتي قد لا يراها بعض المستخدمين.
لذلك ، قد تكون أداة استخدام أحدث المنشورات أو عنصر واجهة المستخدم للحث على اتخاذ إجراء أفضل حالًا في الشريط الجانبي حيث يكون لدى الأشخاص فرصة أكبر للتفاعل معهم ، بينما يمكن أن يتم وضع موجز الوسائط الاجتماعية في التذييل.
إذا كان المظهر الخاص بك يحتوي أيضًا على مناطق عناصر واجهة مستخدم خاصة للصفحة الرئيسية ، فقد ترغب في استخدامها للتنقل حول أقسام الموقع أو قوائم المحتوى ذي الصلة أو الوسائط مثل مقطع فيديو يرحب بالأشخاص في الموقع.
11 أمثلة على الأدوات في وورد بريس
أفضل طريقة لفهم الإمكانيات التي توفرها أدوات وورد بريس هي النظر في بعض الأمثلة عليها. دعنا نلقي نظرة على أحد عشر نوعًا من الأدوات التي ستراها كثيرًا على مواقع وورد بريس.
1. القطعة المشاركات الأخيرة
من المحتمل أن تكون أداة المشاركات الأخيرة هي الأداة الأكثر استخدامًا في المدونات.
يتيح لك عرض قائمة بأحدث منشوراتك في الشريط الجانبي أو تذييل الصفحة لكل صفحة على موقعك ، مما يزيد من احتمالية تصفح الأشخاص للموقع وقراءة عدد من المنشورات.
تأتي أداة Recent Posts مثبتة مسبقًا مع وورد بريس. يتيح لك تعيين عدد المشاركات التي تريد عرضها والعنوان الذي تريد تقديمه إلى الأداة.
أحدث القطعة الوظائف
القطعة المشاركات الأخيرة
إذا كنت ترغب في إضافة وظائف إضافية ، فيمكنك تثبيت مكون إضافي لعنصر واجهة مستخدم بديل مثل وورد بريس Popular Posts ، والذي يعرض المحتوى الأكثر شيوعًا. بدلاً من ذلك ، يتم تحديث عنصر واجهة مستخدم منشورات عشوائية متقدمة في كل مرة يزور فيها المستخدم شاشة جديدة.
2. القطعة التعليقات الأخيرة
هل تريد أن تُظهر للزوار مدى حيوية موقعك ومدى تفاعل جمهورك مع المحتوى الخاص بك؟
تعرض أداة التعليقات الأخيرة أحدث التعليقات على موقعك ، مما يمنح الزائرين الفرصة للانتقال مباشرة إلى تلك التعليقات والانضمام إلى المناقشة.
أداة التعليقات الأخيرة
أداة التعليقات الأخيرة
تأتي أداة التعليقات الأخيرة مع وورد بريس. مرة أخرى ، إذا كنت ترغب في إضافة وظائف إضافية ، فيمكنك تثبيت مكون إضافي لتعليقات الجهات الخارجية مثل أداة WP Social Comments التي تتيح للأشخاص التعليق باستخدام حساب Facebook الخاص بهم: جيد للمشاركة في وسائل التواصل الاجتماعي.
3. أدوات الدعوة إلى العمل
من الاستخدامات الرائعة لعنصر واجهة المستخدم تشجيع الأشخاص على اتخاذ إجراء ، ويمكنك القيام بذلك باستخدام عنصر واجهة المستخدم للحث على اتخاذ إجراء.
يمكن أن يكون عنصر واجهة المستخدم الخاص بك زرًا بسيطًا ، أو يمكنك إنشاء شيء مخصص أكثر باستخدام عنصر واجهة مستخدم نصي أو عنصر واجهة مستخدم HTML ، أو حتى عنصر واجهة مستخدم للصور ، وكلها تأتي مثبتة مسبقًا مع وورد بريس.
في أحد المواقع الخاصة بي ، قمت بإنشاء عنصر واجهة مستخدم للحث على اتخاذ إجراء لتشجيع الأشخاص على الاشتراك في القائمة البريدية الخاصة بي. يستخدم هذا أداة HTML المضمنة التي قمت بتضمين صورة وبعض النص وزر قمت بترميزه في HTML.
أدوات الحث على اتخاذ إجراء على موقعي
أدوات الحث على اتخاذ إجراء على موقعي
4. أدوات التنقل
يمكنك أيضًا استخدام الأدوات لتشجيع الأشخاص على التنقل حول موقعك.
هناك عدد قليل من الخيارات لهذا: عناصر واجهة المستخدم الفئات أو Tag Cloud وأداة قائمة التنقل.
تتيح لك أداة قائمة التنقل إنشاء قائمة تنقل مخصصة بالإضافة إلى قائمة التنقل الرئيسية في موقعك ، ثم إضافتها إلى منطقة عنصر واجهة المستخدم.
يمكنك أيضًا إضافة قائمة التنقل الرئيسية الخاصة بك إلى منطقة عنصر واجهة المستخدم ، على الرغم من أن هذا لن يعمل إلا إذا كانت لديك قائمة تنقل صغيرة.
أداة قائمة التنقل
أداة قائمة التنقل
ستؤدي إضافة قائمة تنقل إلى تذييل موقعك إلى تشجيع الأشخاص على الوصول إلى نهاية المنشور للتنقل حول موقعك. إنه مفيد بشكل خاص لمستخدمي الأجهزة المحمولة الذين قد يضطرون إلى القيام بالكثير من التمرير للرجوع إلى قائمة التنقل الرئيسية بعد الوصول إلى نهاية المنشور.
بدلاً من ذلك ، يمكنك استخدام أداة الفئات المضمنة لعرض قائمة بالفئات في موقعك ، أو أداة Tag Cloud لتسهيل وصول الأشخاص إلى أرشيفات العلامات.
5. أدوات الوسائط
ستؤدي إضافة الوسائط إلى الشريط الجانبي أو التذييل إلى إضفاء الحيوية على موقعك ومنح المستخدمين شيئًا للنظر إليه أو التفاعل معه.
يمكنك استخدام أداة الصورة المضمنة لعرض أي صورة في الشريط الجانبي أو التذييل ، وتتيح لك تحويل تلك الصورة إلى رابط أيضًا.
القطعة الصورة
القطعة الصورة
بدلاً من ذلك ، تتيح لك أداة الفيديو دفق الفيديو من YouTube أو Vimeo مباشرة إلى منطقة عنصر واجهة المستخدم في موقعك. يكون هذا مفيدًا بشكل خاص إذا كان موقعك يحتوي على مناطق أدوات خاصة للصفحة الرئيسية ، ولكن يمكن أيضًا أن يكون جيدًا في التذييل كطريقة لجذب انتباه الأشخاص عند وصولهم إلى نهاية المنشور.
6. قطع الوسائط الاجتماعية
إذا كنت ترغب في التفاعل مع الأشخاص الذين يزورون موقع الويب الخاص بك عن طريق وسائل التواصل الاجتماعي ، فإن إضافة موجز الوسائط الاجتماعية الخاص بك إلى الشريط الجانبي أو تذييل موقعك سيُظهر للأشخاص أنك نشط على وسائل التواصل الاجتماعي ويشجعهم على الإعجاب بك أو متابعتك.
تتمثل إحدى طرق الوصول إلى أدوات الوسائط الاجتماعية لأكبر المنصات (Facebook و Twitter و Instagram) في تثبيت المكون الإضافي Jetpack ، والذي يتضمن كل هذه الأشياء وغيرها الكثير.
البرنامج المساعد Jetpack
البرنامج المساعد Jetpack
بدلاً من ذلك ، تحتوي جميع منصات الوسائط الاجتماعية على مكونات إضافية خاصة بها ، وهي متاحة مجانًا عبر دليل المكونات الإضافية. أو يمكنك العثور على مكونات إضافية لجهات خارجية تتيح لك تخصيص طريقة عرض موجز الوسائط الاجتماعية الخاص بك.
7. القطعة عربة التسوق
إذا كنت تدير متجرًا للتجارة الإلكترونية على موقعك باستخدام مكون إضافي مثل WooCommerce ، فمن الجيد تضمين أداة سلة التسوق بحيث يمكن للمستخدمين التنقل بسهولة إلى عربة التسوق الخاصة بهم أينما كانوا في المتجر.
القطعة عربة التسوق
القطعة عربة التسوق
يمكنك وضع هذا في الشريط الجانبي حيث سيتمكن الأشخاص من رؤيته بسهولة ، أو في الرأس لمزيد من الرؤية إذا كان المظهر الخاص بك يتضمن منطقة عنصر واجهة المستخدم هناك.
تتضمن المكونات الإضافية للتجارة الإلكترونية مثل WooCommerce أدوات سلة التسوق وأدوات التجارة الإلكترونية الأخرى كجزء من المكون الإضافي ، لذلك بمجرد إضافة التجارة الإلكترونية إلى موقعك ، ستجدها مضافة إلى شاشة الأدوات الخاصة بك .
8. أداة النموذج
إذا كنت تريد أن يتصل بك الأشخاص أو يطرحوا أسئلة أو يسجلوا في قائمة بريدية ، فيمكنك إضافة نموذج إلى الشريط الجانبي.
لا توجد أداة نموذج مضمنة في وورد بريس ولكن يمكنك إضافة مكونات إضافية لتوفيرها ، مثل نموذج الاتصال المجاني 7 أو نماذج Gravity المتميزة ولكنها قوية جدًا .
9. أداة الخريطة
إذا كان عملك قائمًا في موقع مادي وتريد أن يتمكن الأشخاص من العثور عليك بسهولة ، فإن إضافة عنصر واجهة مستخدم للخريطة إلى موقعك سيساعدك.
هناك عدد من المكونات الإضافية لعناصر خرائط Google المجانية أو ملحقات خرائط وورد بريس الأخرى التي يمكنك استخدامها ، مثل المكوِّن الإضافي لخرائط Google WP .
WP Google Maps plugin
WP Google Maps plugin
بدلاً من ذلك ، إذا كنت لا ترغب في تثبيت مكون إضافي ، فيمكنك الحصول على رمز التضمين من خرائط Google وإضافته إلى عنصر واجهة مستخدم HTML.
10. أداة تسجيل الدخول
إذا كنت تقوم بتشغيل موقع عضوية ، فستجعل أداة تسجيل الدخول من السهل على الأشخاص تسجيل الدخول إلى موقعك دون الحاجة إلى الانتقال إلى صفحة تسجيل دخول منفصلة.
تتضمن أداة Meta التي تأتي مع وورد بريس رابط تسجيل الدخول ولكنها تتضمن أيضًا أشياء أخرى قد لا تريدها ، لذلك أوصي باستخدام مكون إضافي منفصل لهذا من دليل البرنامج المساعد.
و الدخول مع اياكس القطعة يتيح لك نموذج تسجيل دخول في عنصر واجهة المستخدم يعني أن الناس يمكنهم تسجيل الدخول إلى موقع الويب الخاص بك من أي صفحة.
تسجيل الدخول باستخدام البرنامج المساعد Ajax widget
تسجيل الدخول باستخدام البرنامج المساعد Ajax widget
11. بحث القطعة
هناك أداة بسيطة ولكنها مفيدة للغاية وهي أداة البحث ، والتي تأتي محملة مسبقًا بـ وورد بريس.
القطعة البحث
القطعة البحث
أضف هذا إلى الشريط الجانبي أو العنوان وستسهل على الأشخاص العثور على الأشياء على موقعك.
إذا كنت ترغب في تعزيز قوة أداة البحث الخاصة بك ، فيمكنك تثبيت أداة WP Google Search المجانية ، والتي تستخدم بحث Google.
كيفية إضافة أدوات إلى موقع وورد بريس الخاص بك
بمجرد أن تقرر نوع الأدوات التي تحتاجها لموقع وورد بريس الخاص بك ، فقد حان الوقت لتثبيتها.
لا تنجذب إلى إضافة الكثير. كلما زاد عددها ، قل احتمال ملاحظتها من قبل المستخدمين. بدلاً من ذلك ، ركز على اثنين أو ثلاث أدوات رئيسية للشريط الجانبي. يمكنك إضافة المزيد إلى التذييل ، حيث تكون أقل أهمية على أي حال.
وإذا كان لديك أي مناطق عناصر واجهة مستخدم إضافية في المظهر الخاص بك ، فحدد الأدوات التي تريد وضعها فيها. تأكد من أنها تتناسب مع تخطيط وتصميم موقعك .
توجد ثلاث طرق لإضافة عناصر واجهة مستخدم:
استخدم الأدوات التي تأتي بالفعل مع وورد بريس.
أضف أداة طرف ثالث من دليل الملحقات .
قم بشراء مكون إضافي مميز يتضمن عنصر واجهة مستخدم.
العثور على أدوات لموقع وورد بريس الخاص بك
هناك مجموعة كبيرة من عناصر واجهة المستخدم المتاحة ، لذلك قد يكون من الصعب اختيار الأداة التي تريد تثبيتها. دعنا نلقي نظرة على الخيارات ثم نفحص كيف يمكنك اختيار الخيار الأفضل لك.
الأدوات المصاحبة لـ وورد بريس
إذا كانت إحدى الأدوات المثبتة مسبقًا تفعل ما تريده ، فاستخدم ذلك. سيوفر لك الوقت ويعني تشغيل رمز أقل على موقعك.
أدوات وورد بريس المثبتة مسبقًا
أدوات وورد بريس المثبتة مسبقًا
الأدوات المثبتة مسبقًا هي:
الأرشيف : رابط للأرشيفات حسب الشهر ، مصمم للمدونات ولكنه أصبح قديمًا الآن.
التقويم : تقويم لمنشوراتك ، مناسب مرة أخرى للمدونات خاصة إذا كانت مدونتك حساسة للوقت (ولكنها ليست شائعة هذه الأيام).
HTML مخصص : أقصى درجات المرونة ، أضف أي محتوى تريده عن طريق الكتابة أو اللصق في HTML (مثل نماذج Google ). تجنبه إذا لم تكن مرتاحًا للترميز.
صورة : اعرض صورة من مكتبة الوسائط الخاصة بك.
قائمة التنقل : إظهار قائمة التنقل الرئيسية أو قائمة منفصلة تقوم بإنشائها.
التعليقات الأخيرة : قائمة التعليقات الأخيرة مع روابط لها.
سحابة العلامات : قائمة بالعلامات بتنسيق سحابي ، مع روابط للأرشيفات ذات الصلة.
الفيديو : قم بتضمين مقطع فيديو من YouTube أو أي خدمة بث أخرى.
الصوت : قم بتضمين بودكاست أو مشغل أو أغنية أو مقاطع صوتية أخرى (مقترح: كيفية بدء تشغيل بودكاست باستخدام وورد بريس ).
الفئات : قائمة الفئات في مدونتك ، مع روابط لصفحات الأرشيف.
المعرض : أكثر تقدمًا من أداة الصورة ، اعرض معرضًا للصور .
الفوقية : الفوقية مثل الروابط تسجيل الدخول و آر إس إس . مخلفات من أيام وورد بريس الأولى وليست مفيدة جدًا الآن.
الصفحات : اعرض قائمة بصفحات موقعك التي تحتوي على روابط.
المشاركات الأخيرة : اعرض قائمة بأحدث منشوراتك لتشجيع الناس على قراءتها.
البحث : مربع بحث بسيط.
النص : أي نص تريد إضافته ، مثل معلومات عن الموقع.
إضافة الحاجيات مع البرنامج المساعد
يحتوي دليل البرنامج المساعد وورد بريس على الآلاف من المكونات الإضافية المجانية لعناصر واجهة المستخدم التي ستمنحك المزيد من الأدوات لتختار من بينها.
بالإضافة إلى ذلك ، تشتمل الكثير من المكونات الإضافية الأخرى أيضًا على عناصر واجهة مستخدم ، مثل مكون إضافي للتجارة الإلكترونية يمنحك أداة سلة التسوق والمزيد .
إذا لم يكن دليل المكون الإضافي يحتوي على المكون الإضافي الذي تحتاجه ، فقد تقرر إضافة مكون إضافي مميز. في بعض الأحيان ستوفر هذه المزيد من الوظائف أو واجهة أكثر سهولة. لكن في بعض الأحيان ستجد نفس الميزات في مكون إضافي مجاني ، لذا قم بإجراء بحث جيد في دليل المكونات الإضافية قبل الدفع مقابل المكونات الإضافية.
كيفية البحث عن القطعة المناسبة لموقعك
للعثور على أداة وورد بريس المناسبة لك ، اتبع هذه النصائح:
حدد بالضبط ما تحتاجه من القطعة. ما هي الوظيفة التي تحتاجها وكيف تريدها أن تبدو؟ هل تحتاج إلى الارتباط بأي واجهات برمجة تطبيقات تابعة لجهات خارجية؟
تحقق من الأدوات المضمنة لمعرفة ما إذا كان هناك عنصر يلبي احتياجاتك. اختبر أي منها ذات صلة ، إذا وجدت واحدة مناسبة ، فهذا رائع. ان لم…
تحقق من دليل البرنامج المساعد ، والذي يمكنك الوصول إليه عبر الملحقات> إضافة جديد . حاول البحث عن أكثر من مصطلح للعثور على البرنامج المساعد المناسب لك ، وابحث باستخدام كلمة “widget” وبدونها. في بعض الأحيان ، يشتمل المكون الإضافي الذي لا يركز على الأدوات على عنصر واجهة مستخدم كجزء من مجموعة أكبر من الميزات.
إذا لم تتمكن من العثور على أي شيء مناسب بين المكونات الإضافية المجانية ، فابحث عن مكون إضافي مميز . اطلب من مستخدمي وورد بريس الآخرين الحصول على توصيات وانظر إلى المراجعات قبل اختيار واحدة.
أيًا كان عنصر واجهة المستخدم الذي تختاره ، ستحتاج إلى اختباره للتحقق من أنه يعمل بالشكل الذي تريده. إذا كنت تشتري مكونات إضافية مميزة ، فإنني أوصي بشراء واحدة بضمان استرداد الأموال أو فترة تجريبية مجانية في حال لم تكن مناسبة لك.
كيفية إضافة أدوات إلى الشريط الجانبي والتذييل في وورد بريس
لقد اخترت الآن عنصر واجهة المستخدم الخاص بك ، حان الوقت لإضافته إلى موقعك.
يمكنك إضافة عناصر واجهة مستخدم إلى أي مناطق عناصر واجهة مستخدم نشطة يوفرها قالبك. إذا كان المظهر الخاص بك لا يحتوي على منطقة عنصر واجهة مستخدم في المكان الذي تريده ، فحاول البحث عن سمة بديلة .
سأوضح لك لاحقًا في هذا المنشور كيفية ترميز منطقة عنصر واجهة المستخدم الخاصة بك.
هناك طريقتان لإضافة أدوات إلى موقعك:
باستخدام أداة التخصيص . انتقل إلى Appearance> Customizer> Widgets في قائمة المسؤول ، أو Customize> Widgets من شريط المسؤول أعلى الشاشة.
عبر شاشة إدارة الحاجيات. انتقل إلى Appearance> Widgets في قائمة المسؤول ، أو من شريط المسؤول ، انقر فوق Customize> Widgets .
الحاجيات في أداة التخصيص
الحاجيات في أداة التخصيص
سأوضح لك كيفية استخدام هاتين الطريقتين قريبًا ، لكن دعونا أولاً نلقي نظرة على مناطق عناصر واجهة المستخدم ولماذا تحصل على تلك التي تفعلها مع المظهر الخاص بك.
الحاجيات ليست فقط للشريط الجانبي
اعتمادًا على سمة وورد بريس الخاصة بك ، قد تجد أن لديك مناطق عناصر واجهة المستخدم في أماكن متعددة.
تحتوي معظم السمات على مناطق عناصر واجهة المستخدم في الشريط الجانبي والتذييل. لكن البعض الآخر يمتلكها أيضًا في أماكن أخرى ، مثل أسفل المحتوى أو فوقه أو في الرأس.
إذا انتقلت إلى شاشة إعدادات الأدوات الذكية في مسؤول وورد بريس ، فستتمكن من رؤية جميع مناطق عناصر واجهة المستخدم في المظهر الخاص بك.
أستخدم موضوعًا به مناطق عناصر واجهة مستخدم متعددة في الكثير من الأماكن. يمكنك أن ترى في لقطة الشاشة أدناه أن هناك مناطق عناصر واجهة المستخدم أعلى المحتوى وأسفله ، في الرأس ، أسفل التذييل الرئيسي.
شاشة ضبط الحاجيات ، مناطق القطعة
شاشة ضبط الحاجيات ، مناطق القطعة
إذا كنت ترغب في إضافة عناصر واجهة مستخدم إلى أماكن أخرى في موقعك ، فمن المنطقي العثور على سمة بها مناطق عناصر واجهة مستخدم متعددة. أفضل طريقة للقيام بذلك هي استخدام سمة إطار العمل .
من الأمثلة الجيدة لعنصر واجهة مستخدم في مكان في قالبك ليس الشريط الجانبي أو التذييل هو إضافة شريط بحث في الرأس كما هو الحال لدي في أحد مواقع الويب الخاصة بي.
شريط البحث في الرأس
شريط البحث في الرأس
مناطق وموضوعات القطعة
يتم ترميز مناطق عناصر واجهة المستخدم في ملفات قالب النسق ، بالإضافة إلى ملف وظائف النسق.
هنا يمكنك رؤية الكود الذي استخدمته في ملف وظائف السمة الخاص بي لإضافة منطقة عنصر واجهة مستخدم في الرأس.
register_sidebar( array(
'name' => __( 'In Header Widget Area', 'rmccollin' ),
'id' => 'in-header-widget-area',
'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
وإليك الكود الموجود في ملف header.php الذي يضيف منطقة عنصر واجهة المستخدم هذه إلى المكان الصحيح في السمة.
if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>
<aside class="in-header widget-area right" role="complementary">
<strong><?php</strong> dynamic_sidebar( 'in-header-widget-area' ); <strong>?></strong>
</aside>
<strong><?php</strong> }
إذا كنت ترغب في إضافة مناطق عناصر واجهة مستخدم إضافية في المظهر الخاص بك ، فأنت بحاجة إلى إضافة نفس النوع من التعليمات البرمجية. سأوضح لك كيفية القيام بذلك لاحقًا في هذا المنشور.
لا تنس أنه إذا لم يكن القالب الخاص بك يحتوي على العديد من مناطق عناصر واجهة المستخدم كما تريد ، فيمكنك دائمًا القيام بأحد أمرين:
ابحث عن سمة تحتوي على مناطق عناصر واجهة المستخدم حيث تريدها.
قم بتدوين منطقة عنصر واجهة المستخدم الجديدة في المظهر الخاص بك أو جزء ثانٍ من المظهر الخاص بك .
بمجرد حصولك على مناطق عناصر واجهة المستخدم في جميع الأماكن التي تريدها في المظهر الخاص بك ، يمكنك البدء في إضافة عناصر واجهة مستخدم إليها.
كيفية استخدام شاشة الأدوات لإضافة الحاجيات
هناك طريقتان لإضافة أدوات إلى موقع وورد بريس الخاص بك. الأول هو استخدام شاشة Widgets في مدير وورد بريس.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
انقر فوق المظهر> الحاجيات . يؤدي هذا إلى إظهار شاشة الأدوات.
شاشة الحاجيات
شاشة الحاجيات
لإضافة عنصر واجهة ، يمكنك القيام بأحد أمرين:
اسحبه من قائمة الأدوات على الجانب الأيسر إلى منطقة الأدوات ذات الصلة.
انقر فوق عنصر واجهة المستخدم الذي تريد إضافته ، وسترى قائمة بالمكان الذي يمكنك إضافته فيه. حدد منطقة عنصر واجهة المستخدم التي تريدها ، وانقر فوق الزر ” إضافة عنصر واجهة مستخدم” .
اختيار منطقة القطعة والقطعة
اختيار منطقة القطعة والقطعة
قد تحتاج بعد ذلك إلى تعديل مكان وضع الأداة داخل منطقة عنصر واجهة المستخدم.
يمكنك إضافة العديد من عناصر واجهة المستخدم كما تريد لكل منطقة عنصر واجهة مستخدم ، ولكن لا تسرف. يمكنك سحبها داخل منطقة عنصر واجهة المستخدم للحصول عليها بالترتيب الصحيح. يمكنك أيضًا سحبها من منطقة عنصر واجهة مستخدم إلى أخرى إذا قررت أنك لا تحب الطريقة التي تبدو بها.
يمكنك أيضًا استخدام لوحة المفاتيح لإضافة عناصر واجهة مستخدم باستخدام شاشة الأدوات ، لذلك إذا لم يكن لديك وصول إلى الماوس ، فلا يزال بإمكانك إضافة عناصر واجهة مستخدم.
إضافة وتحرير الأدوات في وضع الوصول
إذا لم تتمكن من استخدام الماوس ، يمكنك استخدام شاشة الأدوات باستخدام لوحة المفاتيح.
أولاً ، ضع الشاشة في وضع إمكانية الوصول عن طريق النقر فوق (أو الضغط على علامة التبويب واختيار) رابط تمكين وضع إمكانية الوصول في أعلى يمين الشاشة.
رابط وضع الوصول
رابط وضع الوصول
ستتغير الشاشة بعد ذلك لتعكس حقيقة أنك في وضع الوصول.
الحاجيات وضع الوصول للشاشة
الحاجيات وضع الوصول للشاشة
يمكنك بعد ذلك التنقل بين عناصر الشاشة باستخدام مفتاح Tab على لوحة المفاتيح ، والضغط على Enter لتحديد عنصر والعمل عليه. يمكنك إما الانتقال إلى عنصر واجهة مستخدم ، والضغط على ” رجوع” على رابط ” إضافة” ، ثم اختيار المكان الذي تريد إضافته إليه ، أو الانتقال إلى منطقة عنصر واجهة المستخدم والضغط على ” رجوع” على رابط ” تعديل” .
كيفية استخدام مُخصص وورد بريس لإضافة أدوات
إن استخدام أداة التخصيص لإضافة عناصر واجهة مستخدم بدلاً من شاشة الأدوات يعني أنه يمكنك رؤية عناصر واجهة المستخدم الخاصة بك أثناء إضافتها. هذا يجعل من السهل رؤية كيف ستبدو عناصر واجهة المستخدم الخاصة بك ونقلها بين مناطق عناصر واجهة المستخدم إذا كنت ترغب في ذلك.
في قائمة المسؤول ، انقر فوق المظهر> تخصيص . بدلاً من ذلك ، من شريط المسؤول أعلى الشاشة في الموقع المباشر (بافتراض أنك قمت بتسجيل الدخول) ، ما عليك سوى النقر فوق تخصيص . سيؤدي هذا إلى فتح أداة التخصيص.
شريط إدارة وورد بريس
شريط إدارة وورد بريس
الآن انقر فوق خيار Widgets وسترى قائمة بجميع مناطق عناصر واجهة المستخدم في المظهر الخاص بك. انقر فوق منطقة عنصر واجهة المستخدم حيث تريد إضافة عنصر واجهة مستخدم وانقر فوق الزر إضافة عنصر واجهة مستخدم .
يمنحك هذا قائمة بجميع الأدوات المتاحة لموقعك. سيشمل ذلك جميع الأدوات المضمنة التي تأتي مع وورد بريس بالإضافة إلى أي عنصر واجهة مستخدم قمت بإضافته عبر المكونات الإضافية.
إضافة زر القطعة
إضافة زر القطعة
اختر الأداة التي تريد إضافتها إلى منطقة عنصر واجهة المستخدم هذه وستراها في شاشة المعاينة على الجانب الأيمن.
يمكنك إعادة ترتيب الأدوات عن طريق سحبها لأعلى ولأسفل على الجانب الأيسر أو بالنقر فوق رابط إعادة الترتيب أسفل قائمة الأدوات ثم النقر فوق الأسهم لتحريكها لأعلى ولأسفل.
تحرير الحاجيات في أداة التخصيص
تحرير الحاجيات في أداة التخصيص
بمجرد الانتهاء من إضافة الأدوات عبر أداة التخصيص ، لا تنس النقر فوق الزر ” نشر” في أعلى اليسار حتى يتم حفظ تغييراتك. إذا تركت أداة التخصيص دون القيام بذلك ، فلن تنعكس أي من تغييراتك على الموقع المباشر.
بمجرد إضافة أدواتك ، يرجى إلقاء نظرة عليها والتحقق من مدى ملاءمتها لتصميم صفحتك. إذا قمت بإضافة العديد من مناطق عناصر واجهة المستخدم ، فقد تبدو الأشياء فوضوية بعض الشيء. ستحتاج إما إلى إزالة بعضها أو يمكنك نقلها من منطقة عنصر واجهة مستخدم إلى أخرى.
من السهل فعل ذلك في شاشة Widgets ، حيث يمكنك سحب عناصر واجهة المستخدم بين مناطق عناصر واجهة المستخدم.
كيفية إضافة عنصر واجهة مستخدم إلى صفحة محددة
تتضمن بعض السمات مناطق عناصر واجهة المستخدم المخصصة لصفحات معينة فقط ، مثل الصفحة الرئيسية. ولكن ماذا لو كنت تريد إضافة عنصر واجهة مستخدم إلى صفحة واحدة فقط على موقعك؟
يمكنك القيام بذلك في محرر الصفحة والمنشور Gutenberg .
أضف كتلة جديدة بالطريقة المعتادة ثم حدد نوع كتلة الحاجيات .
نوع كتلة القطعة
نوع كتلة القطعة
يمكنك بعد ذلك الاختيار من بين العديد من الأدوات التي قمت بتمكينها لموقعك ، وإضافتها إلى محتوى منشورك أو صفحتك. إنه مفيد حقًا إذا كنت ترغب في إضافة عنصر واجهة مستخدم للنموذج أو عنصر واجهة مستخدم للحث على اتخاذ إجراء أو قائمة بأحدث منشوراتك.
كيفية تحرير الحاجيات
بمجرد إضافة الأدوات إلى موقعك ، يمكنك إجراء تغييرات عليها. ستحتوي الأدوات الفردية على إعدادات يمكنك الوصول إليها إما عبر شاشة الأدوات أو أداة التخصيص (لا يهم أي من هذه الأدوات التي استخدمتها لإضافة الأداة.)
بعض الأدوات لا تتضمن أي إعدادات ، لكن البعض الآخر لديه إعدادات لعنوان الأداة على سبيل المثال أو عدد المنشورات المعروضة. بعضها أكثر تعقيدًا ويتطلب منك إعداد الأداة في صفحة إعدادات منفصلة. تحقق من الوثائق من مطور البرنامج المساعد الخاص بك.
تتضمن الخيارات التي لديك لتحرير المكونات الإضافية لعناصر واجهة المستخدم:
تحرير إعدادات المكون الإضافي.
نقل عنصر واجهة المستخدم من منطقة عنصر واجهة مستخدم إلى أخرى.
إزالة القطعة. لديك خياران لهذا ، والذي سيتم النظر فيهما قريبًا.
لتعديل إعدادات الأداة ، ابحث عن الأداة في شاشة الأدوات أو أداة التخصيص ، وقم ببساطة بتحرير أي خيارات متوفرة.
هل تحتاج إلى استضافة سريعة وآمنة وصديقة للمطورين لمواقع عملائك؟ تم تصميم Kinsta مع وضع مطوري وورد بريس في الاعتبار ويوفر الكثير من الأدوات ولوحة تحكم قوية. تحقق من خططنا
تحرير خيارات القطعة
تحرير خيارات القطعة
لنقل عنصر واجهة المستخدم من منطقة إلى أخرى ، افتح شاشة الأدوات واسحبها من منطقة عنصر واجهة مستخدم إلى أخرى. في وضع إمكانية الوصول ، انتقل إلى السهم الموجود على يمين الأداة وحدد من الخيارات.
حذف الحاجيات
لحذف عنصر واجهة مستخدم في شاشة الأدوات ، ابحث عن هذه الأداة وانقر على رابط الحذف في الجزء السفلي الأيسر من مربع إعدادات الأداة.
حذف عنصر واجهة مستخدم في شاشة التطبيقات المصغّرة
حذف عنصر واجهة مستخدم في شاشة التطبيقات المصغّرة
لحذف عنصر واجهة مستخدم في Customizer ، ابحث عن عنصر واجهة المستخدم في منطقة عنصر واجهة المستخدم الخاصة به. انقر فوق السهم الموجود على يمين اسم عنصر واجهة المستخدم ، ثم انقر فوق ارتباط إزالة الموجود في الجزء السفلي الأيسر من إعدادات عنصر واجهة المستخدم.
إزالة عنصر واجهة مستخدم في أداة التخصيص
إزالة عنصر واجهة مستخدم في أداة التخصيص
يمكنك أيضًا إزالة عنصر واجهة مستخدم من منطقة عنصر واجهة المستخدم ولكن لا يزال بإمكانك إتاحته لاستخدامه لاحقًا من خلال شاشة الأدوات.
قم بالتمرير لأسفل إلى منطقة Inactive Widgets باتجاه الجزء السفلي من الشاشة. اسحب الأدوات إلى هذه المنطقة لإزالتها من منطقة الأدوات ولكن احتفظ بها كمسودات مع إعداداتها الحالية. يمكنك بعد ذلك دائمًا سحبها مرة أخرى إلى منطقة عنصر واجهة المستخدم إذا كنت ترغب في ذلك في المستقبل.
إذا قمت بتبديل السمات وكان المظهر الجديد الخاص بك يحتوي على مناطق عناصر واجهة مستخدم مختلفة ، فسيتم تلقائيًا نقل أي عناصر واجهة مستخدم لا تتناسب مع مناطق عناصر واجهة المستخدم في القالب الجديد إلى قائمة الأدوات غير النشطة بواسطة وورد بريس.
كيفية إضافة منطقة عنصر واجهة مستخدم جديدة إلى المظهر الخاص بك
إذا كان المظهر الخاص بك لا يحتوي على مناطق عناصر واجهة المستخدم حيث تريدها ، فيمكنك دائمًا إضافة الخاص بك. يمكنك القيام بذلك عن طريق إضافة جزأين من التعليمات البرمجية.
دعنا نضيف منطقة عنصر واجهة المستخدم أسفل المحتوى.
إنشاء منطقة عنصر واجهة المستخدم في ملف وظائف النسق الخاص بك
الخطوة الأولى هي إعداد منطقة عنصر واجهة المستخدم باستخدام الوظيفة.register_widget()
إذا كنت تستخدم قالب وورد بريس تابعًا لجهة خارجية (إليك مجموعة مختارة من أفضلها ) ، فأنت بحاجة إلى إنشاء سمة فرعية للقيام بذلك. والسبب في ذلك هو أنك إذا قمت بتحديث السمة في المستقبل ، فستفقد جميع تغييراتك.
إذا كنت تعمل مع المظهر الخاص بك ، يمكنك ببساطة تعديل السمة.
تبدأ من خلال فتح موضوع الخاص بك functions.php الملف. في الجزء السفلي من الملف ، أضف هذا الرمز.
function kinsta_register_widgets() {
register_sidebar( array(
'name' => __( 'After Content Widget Area', 'kinsta' ),
'id' => 'after-content-widget-area',
'description' => __( 'Widget area after the content', 'kinsta' ),
'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'kinsta_register_widgets' );
الآن احفظ ملف jobs.php الخاص بك. إذا انتقلت إلى شاشة Widgets أو Customizer ، فستجد منطقة عناصر واجهة المستخدم الجديدة متاحة لك لإضافة عناصر واجهة مستخدم.
ولكن إذا قمت بذلك ، فلن تظهر في الواقع على الصفحة. هذا لأنك تحتاج إلى إضافة بعض التعليمات البرمجية إلى ملف قالب القالب الخاص بك.
إضافة القطعة إلى ملف قالب النسق
أول شيء هو معرفة ملف قالب القالب الذي تحتاج إلى استخدامه.
إذا كنت تضيف شريطًا جانبيًا إضافيًا ، فستحتاج إلى إضافة هذا الرمز إلى ملف sidebar.php .
إذا كنت تضيف منطقة عنصر واجهة المستخدم الخاصة بك قبل المحتوى أو بعده ، فستحتاج إلى إضافته إلى أي ملفات قالب قالب تخرج المحتوى.
إذا كنت تضيف منطقة عنصر واجهة مستخدم إلى رأسك ، فستحتاج إلى إضافة الرمز إلى ملف header.php الخاص بك.
إذا كانت منطقة عنصر واجهة المستخدم الجديدة مخصصة لصفحة واحدة فقط في موقعك أو لنوع واحد من المحتوى ، فستحتاج إلى استخدام التسلسل الهرمي لقالب وورد بريس لتحديد ملف القالب الذي تحتاج إلى استخدامه أو إنشائه ثم تحريره. لذلك ، على سبيل المثال ، إذا كنت ترغب في إضافة مناطق عناصر واجهة المستخدم إلى صفحتك الرئيسية ، فستحتاج إلى إنشاء ملف front-page.php وإضافة منطقة عنصر واجهة المستخدم الخاصة بك هناك.
بمجرد تحديد ملف القالب الذي تريد تحريره والمكان الذي تحتاج فيه بالضبط للحصول على رمز منطقة عنصر واجهة المستخدم ، أضف الكود التالي. في حالة وجود منطقة عنصر واجهة مستخدم بعد المحتوى ، نضيفها إلى ملف post.php و page.php في موضوعنا:
if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>
aside class="after-content widget-area full-width" role="complementary">
<strong><?php</strong> dynamic_sidebar( 'after-content-widget-area' ); <strong>?></strong>
</aside>
<strong><?php</strong> }
الآن احفظ ملف (ملفات) القالب الخاص بك.
لاحظ أن الكود الخاص بك سيكون مختلفًا عن الكود الخاص بك اعتمادًا على ما أسميته منطقة عنصر واجهة المستخدم والعناصر التي تريد وضعها بداخله. عادةً ما أستخدم عنصرًا جانبيًا لأنه في رأيي مصمم للأشرطة الجانبية ومناطق عناصر واجهة المستخدم.
نصيحة Ninja: إذا قمت بنقل نهاية عنصر الحاوية الخاص بك للمحتوى إلى بداية الشريط الجانبي و / أو ملف التذييل ، فيمكنك إضافة هذا هناك وستحتاج إلى إضافته مرة واحدة فقط.
الآن إذا ألقيت نظرة على موقعك ، فستجد أن أي عناصر واجهة مستخدم قمت بإضافتها إلى مناطق عناصر واجهة المستخدم الخاصة بك ستظهر في المكان الصحيح. إذا لم تكن في المكان المناسب تمامًا ، فارجع وقم بتحرير ملفات القالب ، وتأكد من وجود الكود في المكان الذي تريده. قد تحتاج أيضًا إلى تعديل CSS الخاص بك لتبدو بالطريقة التي تريدها.
القطعة على الموقع المباشر
القطعة على الموقع المباشر
كيفية ترميز الحاجيات باستخدام واجهة برمجة التطبيقات Widgets
الآن أنت تعرف كيفية اختيار عناصر واجهة المستخدم لموقعك ، وكيفية إضافتها إلى موقعك ، وكيفية تسجيل أشرطة جانبية جديدة أو مناطق عناصر واجهة مستخدم. الخطوة التالية هي تعلم كيفية إنشاء عنصر واجهة مستخدم وورد بريس.
في بعض الأحيان ، قد تجد أنه لا يوجد مكون إضافي متاح لإنشاء الأداة الدقيقة التي تريدها على موقعك. هذا يعني أنه سيتعين عليك ترميزها بنفسك.
في هذا المثال ، سأوضح لك كيفية ترميز عنصر واجهة مستخدم للحث على اتخاذ إجراء بسيط حقًا.
نظرة عامة على Widgets API
تتضمن واجهة برمجة تطبيقات Widgets في وورد بريس جميع الأكواد التي تحتاجها للتسجيل ، وإنشاء ، وكود الأدوات. تتضمن واجهة برمجة تطبيقات Widgets ما يلي:
فصول لبناء الحاجيات الجديدة.
وظائف لتسجيل الحاجيات ونشرها على موقعك.
وظائف لإلغاء تسجيل عناصر واجهة المستخدم ، على سبيل المثال من النسق الرئيسي.
سنستخدم هنا فئة لبناء عنصر واجهة مستخدم. تتمثل الخطوة الأولى في إنشاء مكون إضافي لعقد الأداة.
قم بإنشاء مكون إضافي لبرنامج وورد بريس Widget الخاص بك
لإنشاء عنصر واجهة المستخدم الخاص بك ، ستحتاج إلى ترميز مكون إضافي . لا تقم بإضافة رمز عنصر واجهة مستخدم جديد إلى المظهر الخاص بك ، لأن الأدوات المصغّرة تتعلق بالوظيفة وليست متعلقة بالعرض. إذا قمت بتغيير المظهر الخاص بك في المستقبل ، فأنت تريد أن تظل قادرًا على الوصول إلى هذه الأداة.
ابدأ بإنشاء مكون إضافي فارغ. قم بإنشاء مجلد مكون إضافي في wp-content/pluginsدليلك وأضف ملفًا فارغًا إليه. أعطها اسما مناسبا. افتح هذا الملف وأضف هذا الرمز.
<strong><?php</strong>
/**
* Plugin Name: Kinsta Call to Action Widget
* Plugin URI: https://rachelmccollin.com
* Description: A simple call to action widget.
* Version: 1.0
* Author: Rachel McCollin
* Author URI: https://rachelmccollin.co.uk
*/
ستحتاج إلى تعديل عنوان URI للمؤلف و URI الخاص بالمكون الإضافي. سيؤدي ذلك إلى إنشاء مكون إضافي لك يمكنك تنشيطه عبر شاشة المكونات الإضافية.
القطعة المساعد في شاشة الإضافات
القطعة المساعد في شاشة الإضافات
ولكن إذا قمت بتنشيطه ، فلن يحدث شيء. سيتعين عليك إضافة بعض التعليمات البرمجية إلى المكون الإضافي الخاص بك.
إنشاء فئة للأداة
يتم إدخال رمز الأداة داخل الفصل الدراسي. لذا أضف ذلك بعد ذلك.
class kinsta_Cta_Widget extends WP_Widget {
}
أنشئ وظيفة المُنشئ
أول شيء يجب إدخاله داخل الفصل هو وظيفة المُنشئ لإنشاء عنصر واجهة المستخدم. أضف هذا داخل أقواس الفصل.
//widget constructor function
function __construct() {
$widget_options = array (
'classname' => 'kinsta_cta_widget',
'description' => 'Add a call to action box with your own text and link.'
);
parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );
}
هذا يبدأ في بناء القطعة.
قم بإنشاء النموذج لإخراج القطعة
بعد ذلك ، نحتاج إلى نموذج ستستخدمه شاشة الأدوات والمخصص لإنشاء الأداة. أضف هذا ، لا يزال داخل الأقواس.
//function to output the widget form
function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : '';
$link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
$text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>
<p>
<label for="<strong><?php</strong> echo $this->get_field_id( 'title'); <strong>?></strong>">Title:</label>
<input class="widefat" type="text" id="<strong><?php</strong> echo $this->get_field_id( 'title' ); <strong>?></strong>" name="<strong><?php</strong> echo $this->get_field_name( 'title' ); <strong>?></strong>" value="<strong><?php</strong> echo esc_attr( $title ); <strong>?></strong>" /></p>
<p>
<label for="<strong><?php</strong> echo $this->get_field_id( 'text'); <strong>?></strong>">Text in the call to action box:</label>
<input class="widefat" type="text" id="<strong><?php</strong> echo $this->get_field_id( 'text' ); <strong>?></strong>" name="<strong><?php</strong> echo $this->get_field_name( 'text' ); <strong>?></strong>" value="<strong><?php</strong> echo esc_attr( $text ); <strong>?></strong>" /></p>
<p>
<label for="<strong><?php</strong> echo $this->get_field_id( 'link'); <strong>?></strong>">Your link:</label>
<input class="widefat" type="text" id="<strong><?php</strong> echo $this->get_field_id( 'link' ); <strong>?></strong>" name="<strong><?php</strong> echo $this->get_field_name( 'link' ); <strong>?></strong>" value="<strong><?php</strong> echo esc_attr( $link ); <strong>?></strong>" /></p>
<strong><?php</strong> }
يمنح هذا المستخدمين نموذجًا يمكنهم استخدامه لإضافة نص ورابط إلى مربع الحث على اتخاذ إجراء.
قم بإنشاء وظيفة حفظ القطعة
أنت الآن بحاجة إلى حفظ أي شيء يتم إدخاله في هذا النموذج. اضف هذا.
//function to define the data saved by the widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['text'] = strip_tags( $new_instance['text'] );
$instance['link'] = strip_tags( $new_instance['link'] );
return $instance;
}
سيؤدي هذا إلى حفظ إدخال البيانات من قبل المستخدمين في إعدادات عنصر واجهة المستخدم.
إنشاء وظيفة لإخراج القطعة
أنت الآن بحاجة إلى إضافة الكود الذي سيعرض القطعة على الموقع. مرة أخرى ، أضف هذا داخل الأقواس:
//function to display the widget in the site
function widget( $args, $instance ) {
//define variables
$title = apply_filters( 'widget_title', $instance['title'] );
$text = $instance['text'];
$link = $instance['link'];
//output code
echo $args['before_widget'];
?>
<div class="cta">
<strong><?php</strong> if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
};
echo '<a href="' . $link . '">' . $text . '</a>';
<strong>?></strong>
</div>
<strong><?php</strong>
echo $args['after_widget'];
}
تسجيل القطعة
الآن لديك فصلك مكتوب ، حان الوقت لتسجيل أداة وورد بريس حتى تعمل. أضف هذا الرمز خارج الفصل.
//function to register the widget
function kinsta_register_cta_widget() {
register_widget( 'kinsta_Cta_Widget' );
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );
الآن احفظ ملف البرنامج المساعد الخاص بك. انتقل إلى شاشة الأدوات وسترى الأداة للاستخدام.
القطعة الجديدة في شاشة الحاجيات
القطعة الجديدة في شاشة الحاجيات
إذا قمت بإضافته إلى منطقة عنصر واجهة المستخدم وأضفت نصًا ورابطًا إليه ، فسيتم إخراجه في الموقع المباشر.
القطعة الجديدة في الموقع المباشر
القطعة الجديدة في الموقع المباشر
قد لا يبدو كل هذا جيدا الآن. تحتاج إلى إضافة بعض CSS لتصميمها.
إضافة CSS إلى القطعة
لإضافة CSS إلى المكون الإضافي الخاص بك ، تحتاج إلى إنشاء ورقة أنماط ووضعها في قائمة الانتظار في المكون الإضافي الخاص بك. أضف هذا إلى ملف البرنامج المساعد الخاص بك قبل الفصل.
function kinsta_widget_enqueue_styles() {
wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
wp_enqueue_style( 'widget_cta_css' );
}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );
أنت الآن بحاجة إلى إضافة ملف style.css داخل مجلد البرنامج المساعد وإضافة أي نمط إليه. سأترك هذا لك!
لديك الآن زر دعوة إلى اتخاذ إجراء بسيط يمكنك إضافته إلى أي منطقة عنصر واجهة مستخدم على موقعك. إذا قمت بإضافته إلى الشريط الجانبي الخاص بك ، على سبيل المثال ، سيتمكن الأشخاص من استخدامه للوصول إلى صفحة التسجيل الخاصة بك من أي مكان على الموقع.
يمكنك إنشاء عناصر واجهة مستخدم أكثر تعقيدًا بإعدادات وخيارات إضافية ، ولكن هذا يمنحك فكرة عن كيفية البدء في إنشاء عنصر واجهة المستخدم الخاص بك.
إذا كنت تريد رؤية الكود الخاص بي لهذا المكون الإضافي ، بما في ذلك التصميم ، فيمكنك العثور عليه على Github . إذا كنت تبدأ برمز ، فإليك دليلًا تفصيليًا حول git vs GitHub وكيفية البدء في كليهما.
الحاجيات هي واحدة من أفضل ميزات وورد بريس! يمكنهم حرفياً تغيير موقعك من “meh” إلى “نعم!” 🤔😻 تعرف على ماهيتها وكيفية استخدامها وكيفية ترميز أدواتك الخاصة باستخدام هذا الدليل المتعمق!
انقر للتغريد
ملخص
الأدوات المصغّرة هي إحدى ميزاتي المفضلة في وورد بريس . يمكنهم إضفاء الحيوية على موقع الويب الخاص بك ، ومساعدتك في الحصول على المزيد من الاشتراكات أو تحويل المزيد من الزوار إلى عملاء . يمكنك إضافة عناصر واجهة مستخدم وورد بريس إلى أي منطقة عناصر واجهة مستخدم موجودة في المظهر الخاص بك ، أو يمكنك إضافة مناطق عناصر واجهة مستخدم إضافية بحيث يمكنك إضافة المزيد من عناصر واجهة المستخدم في المزيد من الأماكن.
هناك أيضًا الكثير من الأماكن للعثور على الحاجيات. يأتي وورد بريس مع عدد منها مثبت مسبقًا ، ويمكنك أيضًا تثبيت المزيد منها عبر المكونات الإضافية . ولكن هذا ليس كل شيء ، إذا كنت تشعر بالراحة ، يمكنك أيضًا ترميز أدواتك الخاصة باستخدام Widgets API.
الآن حان دورك: كيف تستخدم أدوات وورد بريس على موقعك؟ كم تستخدم؟
وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:
مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.
تكامل Cloudflare Enterprise.
يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.
التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.
كل ذلك وأكثر من ذلك بكثير ، في خطة واحدة بدون عقود طويلة الأجل ، وعمليات الترحيل المدعومة ، وضمان استرداد الأموال لمدة 30 يومًا. تحقق من خططنا أو تحدث إلى قسم المبيعات للعثور على الخطة المناسبة لك.

