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

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

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

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

كيف يمكنني تخصيص الأدوات في WordPress؟

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

يتيح لك مُنشئ عنصر واجهة المستخدم المخصص لـ WordPress إضافة وظائف بسهولة إلى موقع الويب الخاص بك عن طريق سحبها وإفلاتها. كل ما تحتاج إلى معرفته هو WordPress و PHP ، وهذا كل ما تحتاجه. يجب عليك إنشاء عنصر واجهة المستخدم من الألف إلى الياء للتأكد من ضبطه بدقة. في هذا البرنامج التعليمي ، سننشئ تحية بسيطة من Hostinger.com. من خلال تثبيت البرنامج المساعد Widget Builder ، يمكنك معرفة كيفية إنشاء عنصر واجهة مستخدم مخصص في WordPress. الكود الموجود في ملف jobs.php لهذا المثال مخصص للموضوع الذي تم تحميله حاليًا. ليست هناك حاجة لاستخدام نفس الكود لمكوِّن إضافي مخصص في هذه الحالة.

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

كيف أضيف نمطًا مخصصًا في WordPress؟

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

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

سيسمح لك استخدام مكون CSS إضافي مخصص بإضافة CSS مستقل عن السمات إلى موقع الويب الخاص بك. إذا كنت تريد تغيير CSS لموضوعك بشكل كبير ، فيمكنك إنشاء سمة فرعية. يمكن الوصول إلى جميع الملفات الموجودة في النسق الرئيسي ، مثل CSS و PHP والأصول الثابتة مثل الصور ، عبر السمات الفرعية. في هذا البرنامج التعليمي ، سنوضح لك كيفية استخدام Simple Custom CSS في حالة عدم وجود أي خطوات إضافية. من الممكن تعديل ملف style.html في منطقة إدارة WordPress أو داخل محرر التعليمات البرمجية ، مثل Atom أو Visual Studio Code. إذا كنت لا تريد إضافة تغييرات قاعدة التعليمات البرمجية الخاصة بك ، فيمكن استخدام Customizer و Customizer. يمكنك استدعاء ملف CSS خارجي في ملف jobs.php الخاص بالقالب الفرعي الخاص بك بحيث يتم تحديده بشكل صحيح بواسطة WordPress Core.

لتخصيص موقعك ، يمكنك إنشاء سمة فرعية. لإنشاء قواعد نمط مخصصة لموضوع الطفل ، يجب عليك أولاً نسخ ملف style.html ولصقه. عند إنشاء ملف CSS خارجي ، يجب عليك أولاً إنشاء ملف jobs.html. يعد ThemeForest مكانًا رائعًا للعثور على سمات WordPress.

كيف يمكنني تحرير Css مخصص في WordPress؟

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

أين يتم تخزين ووردبريس Css الإضافي؟

يمكنك القيام بذلك عن طريق البحث عن أنماط WordPress CSS وتعديلها. وهو موجود في المجلد / wp-content / themes / themename /.

كيفية تحرير أدوات WordPress

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

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

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

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

عناصر واجهة المستخدم Css

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

كيفية تخصيص فئات Css للأداة الخاصة بك

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

كيفية عرض عنصر واجهة مستخدم مخصص في WordPress

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

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

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

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

كيفية تغيير مظهر القطعة

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

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

من أجل إنشاء عنصر واجهة مستخدم HTML مخصص في WordPress ، ستحتاج إلى اتخاذ الخطوات التالية: 1. سجّل الدخول إلى حسابك على WordPress وانتقل إلى لوحة التحكم. 2. في لوحة التحكم الرئيسية ، انقر على رابط "الأدوات" في قسم المظهر. 3. في صفحة الأدوات ، سترى قائمة بجميع الأدوات المتاحة. ابحث عن أداة “Custom HTML” وانقر على زر “Add”. 4. ستتم الآن إضافة عنصر واجهة مستخدم HTML مخصص جديد إلى الشريط الجانبي. يمكنك الآن إدخال كود HTML المخصص الخاص بك في القطعة. 5. بمجرد الانتهاء ، انقر فوق الزر "حفظ".

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

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

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