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

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

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

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

 

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

في هذا المنشور ، سنغطي هذا الموضوع في ثلاثة أجزاء رئيسية.

 

الجزء 1: افهم أشياء قليلة قبل أن تبدأ

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

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

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

 

ما هي أداة WordPress؟

عنصر واجهة WordPress عبارة عن كتلة صغيرة ويتم وضع هذه الكتلة في مكان ما على صفحة ويب WordPress الخاصة بك.

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

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

 

القطعة الثابتة

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

 

القطعة الديناميكية

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

 

مجموعة

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

 

أشياء يجب أن تعرفها

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

 

الترميز الأساسي

يجب أن تكون على دراية بـ OOP الأساسي (البرمجة الشيئية) في PHP. 

 

كود النسخ الاحتياطي الأصلي

ضع في اعتبارك أنك ستلعب برمز WordPress الخاص بك. لتجنب أي مشكلة ، يجب عليك الاحتفاظ بنسخة احتياطية من رمز WordPress الأصلي الخاص بك.

 

وضع الكود

سيتم تطوير أدوات WordPress باستخدام أكواد ولكن أين سيتم وضع هذه الرموز؟ يمكنك وضع رمز القطعة في قالب WordPress Functions.php ملف. ستكون هذه الأدوات نشطة عندما يكون الموضوع نشطًا.

 

أساسيات أداة WordPress

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

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

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

 

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

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

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

 

الخطوة 1: إنشاء مكون إضافي فارغ

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

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

للقيام بذلك عليك أن تذهب إلى  / wp-content / plugins /. أثناء إنشاء هذا المكون الإضافي لموقع WordPress الخاص بك ، سيتعين عليك إضافة دليل جديد ثم تسميته وفقًا لذلك.

يمكنك تسميته بأي شيء تريده. في الدليل الخاص بك ، سيكون عليك إنشاء ملف   Index.php.   سيكون ملف الفهرس هذا نموذج التعليمات البرمجية التالي.

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

 

الخطوة 2: إنشاء نموذج رمز عنصر واجهة المستخدم

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

تمدد فئة Example_Widget WP_Widget {public function __construct () {} أداة الوظيفة العامة ($ args، $ example) {// Create the sample widget}} // تسجيل وظيفة عنصر واجهة المستخدم register_sample_widget () {register_widget ('My_Custom_Widget') ؛ } add_action ('widgets_init'، 'register_sample_widget') ؛

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

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

بونوس تيب: لإضافة تفاصيل التصميم ، يمكنك استخدام CSS  الطبقة.   يمكن إضافته إلى HTML DOM وسيقوم بأسلوب عرض القطعة بالكامل. 

 

الخطوة 3: إضافة أداة إلى الصفحة

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

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

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

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

 

الخطوة 4: إضافة بيانات ديناميكية إلى القطعة

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

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

احصل على عنوان URL للمعلومات وأضف ملف  مفتاح API إليها. الآن باستخدام ملف القطعة جنبًا إلى جنب مع تعليمات "GET" ، يمكنك الحصول على التفاصيل الحية لـ COVID-19 (وفقًا للمثال).  

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

 

الخطوة 5: تحميل البرنامج المساعد

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

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

 

الجزء 3: احصل على العناصر والمكونات الإضافية والأدوات في مكان واحد

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

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

 

Deep وورد موضوع

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

 

سرعة الداعم

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

 

استجابة فائقة

سوف تحصل على تجربة مستخدم محسنة على صفحات الويب الخاصة بك. ستساعدك تجربة المستخدم المحسّنة على توفير ميزة استجابة فائقة لزوار موقعك.

 

سهل الاستخدام

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

 

أسعار حقيقية

ستوفر الكثير عند استخدام ملف deep وورد موضوع Webnus. جميع السمات والمكونات الإضافية متوفرة بسعر حقيقي.

 

دعونا نلخص!

في هذا المنشور ، تعلمنا ما هي أداة WordPress الديناميكية وكيفية إنشائها.

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

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