كيفية إضافة فئات إلى أدوات WordPress

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

كيف أقوم بإضافة فئة Css إلى عنصر واجهة مستخدم في WordPress؟

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

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

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

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

Hstngr_register_widget () هي وظيفة جديدة تستخدم معرف عنصر واجهة المستخدم المحدد في وظيفة __construct () لتسجيل عنصر واجهة المستخدم الخاص بنا. ثم نستخدم widget_init لتحميل الأداة في WordPress باستخدام طريقة add_action () المضمنة. يجب الآن تنفيذ الكود في ملف function.php.

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

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

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

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

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

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

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

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

البرنامج التعليمي: كيفية إظهار عنصر واجهة مستخدم في بعض المنشورات أو الصفحات أو الأرشيفات

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

كيفية تحرير كود القطعة في ووردبريس

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

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

كيف أحصل على رمز القطعة؟

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

WordPress Widget Css

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

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

كيفية تخصيص القطعة الخاصة بك باستخدام Css

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

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

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

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

ووردبريس: المنصة الأكثر قابلية للتخصيص

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