كيفية إنشاء البرنامج المساعد ووردبريس القطعة

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

لقد قمت مؤخرًا بتطوير مكون إضافي يسمى Freelancer Widgets Bundle. عندما سُئلت عما يجب أن أكتبه للمكوِّن الإضافي ، اعتقدت أن الوقت قد حان لكتابة هذا المنشور لأن الناس قد استفسروا عنه. عند تثبيت مكون WordPress الإضافي ، يجب عليك إضافة رمز إضافي إليه. ستحتاج إلى محرر مثل Coda (Mac) أو Dreamweaver (PC) لتطوير المكون الإضافي الخاص بك. المُنشئ هو الوظيفة التي تحدد اسم عنصر واجهة المستخدم والوسيطات الرئيسية ؛ هذا مثال على الشكل الذي قد يبدو عليه. عند إجراء تغييرات على حقول النموذج ، تأكد من استخدام esc_attr () ، حيث يتم ذلك لأسباب أمنية. تسمح المعلمة "custom_selective_refresh" بتحديث عنصر واجهة المستخدم ضمن Appearance وكذلك عند تحريره.

بمعنى آخر ، لا يلزم تحديث التغييرات التي تم إجراؤها على عنصر واجهة المستخدم حتى تظهر في القائمة. تتم إزالة جميع العلامات ، باستثناء النص الأساسي ، باستخدام WP_strip_all_tags. WP_kses_post_string () هي نفس وظيفة سلسلة محتوى المنشور. ستنشئ هذه الوظيفة محتوى لموقع ويب باستخدام وظيفة عنصر واجهة المستخدم (). يمكن تخصيص هذه الوظيفة لتشمل علامة أو فئة معينة. GitHub هو المكان المثالي لعرض الكود بالكامل.

عندما تريد إضافة الأداة إلى موقع ويب ، انتقل إلى الصفحة حيث تريد القيام بذلك والصق الرمز قبل إغلاق علامة HTML "/ body". من الضروري تضمين الرمز في كل صفحة ويب ترغب في عرض الأداة. تحقق من جدار الحماية الخاص بك لمعرفة ما إذا تم تمكين أداة الويب (الكلاسيكية).

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

كيف يمكنني إنشاء مكون إضافي مخصص للويدجيت لـ WordPress؟

لإنشاء ملحق عنصر واجهة مستخدم مخصص لـ WordPress ، ستحتاج إلى إنشاء ملف PHP بالرمز التالي: / * اسم المكون الإضافي: [اسم المكون الإضافي] الوصف: [وصف المكون الإضافي] * / // تسجيل وتحميل الأداة الوظيفة [name_of_plugin] _load_widget () {register_widget ('[name_of_plugin]') ؛ } add_action ('widgets_init'، '[name_of_plugin] _load_widget') ؛ // يؤدي إنشاء فئة عنصر واجهة المستخدم [name_of_plugin] إلى توسيع WP_Widget {function __construct () {parent :: __ construct (// Base ID لأداتك '[name_of_plugin]' ، // سيظهر اسم القطعة في UI __ ('[اسم المكون الإضافي ] '،' [name_of_plugin] ')، // مصفوفة وصف القطعة (' description '=> __ (' [وصف المكون الإضافي] '،' [name_of_plugin] ')،))؛ } // إنشاء الواجهة الأمامية لعنصر واجهة المستخدم // هذا هو المكان الذي يحدث فيه الإجراء عنصر واجهة المستخدم العامة ($ args ، $ مثيل) {$ title = application_filters ('widget_title'، $ example ['title']) ؛ // قبل وبعد تحديد وسيطات عنصر واجهة المستخدم بواسطة السمات echo $ args ['before_widget'] ؛ if (! blank ($ title)) echo $ args ['before_title']. العنوان. $ args ['after_title']؛ // هذا هو المكان الذي تقوم فيه بتشغيل الكود وعرض صدى الإخراج __ ('[Name of plugin]'، '[name_of_plugin]')؛ صدى $ args ['after_widget']؛ } // Widget Backend public function form ($ enterprise) {if (isset ($ signature ['title'])) {$ title = $ signature ['title']؛ } else {$ title = __ ('[Name of plugin]'، '[name_of_plugin]')؛ } // نموذج مشرف القطعة؟ > عندما يقوم مستخدمو WordPress بإنشاء منطقة عنصر واجهة مستخدم ، فإنهم يضيفون أجزاء صغيرة من المحتوى إلى تلك المنطقة. اعتمادًا على منطقة عنصر واجهة المستخدم حيث تم تثبيته ، قد تعرض الأداة أنواعًا مختلفة من المعلومات في جميع الصفحات ، أو قد تعرض معلومات معينة فقط. هناك بعض الأدوات التي يتم إتاحتها بشكل افتراضي ، بينما يتم توفير البعض الآخر من خلال استخدام مكون إضافي أو سمة. يجب إضافة الطرق الأربع المذكورة أعلاه إلى فصلك الدراسي من أجل إنشاء عنصر واجهة مستخدم أساسي مخصص. يجب عليك استخدام وظيفة register_widget () لتسجيل الأداة من أجل استخدامها في لوحة القيادة. قبل أن ندرس المثال الذي قدمناه في هذه المقالة ، سننتقل بسرعة إلى الغرض من كل قسم من الكود. إحدى الطرق المستخدمة في فئة Custom_Widget هي طريقة لتعيين الأحرف. لقد أنشأنا عنصر واجهة المستخدم باستخدام custom_widget كمعرف له باستخدام طريقة الإنشاء باستخدام طريقة __construct (). باستخدام طريقة register_widget () ، يتم إنشاء عنصر واجهة مستخدم جديد بعد تسجيل العنصر الموجود. لقد قمنا بلف كل جزء من الأجزاء بعبارات if… * لضمان عرض تلك الأجزاء فقط إذا تم تضمينها في خيارات عناصر واجهة المستخدم. تضمنت طريقة widget () وظيفة nl2br () لضمان عرض جميع النصوص متعددة الفقرات بشكل صحيح. يزيل sanitize_text_field () المسافات البيضاء غير الضرورية وعلامات التبويب وفواصل الأسطر من الوسيطة. علاوة على ذلك ، يتم تعيين القيمة "نعم" كقيمة افتراضية داخل حقل التحديد ، مما يشير إلى أنه تم تعيين هدف الارتباط على _blank في الحالتين السابقتين. يجب تحديد العنوان والنص والرابط الموجود أسفل العنوان وما إذا كان يجب فتح الرابط في علامة تبويب جديدة أم لا. يرجى حفظ الخيارات التي اخترتها عن طريق النقر فوق الزر "حفظ" على الفور. عند تحديد سمة افتراضية ، ستنتج الأداة مخرجات مختلفة. في هذه الحالة ، قد تبدو الأداة الخاصة بك مشابهة جدًا لتلك الموضحة أدناه إذا كنت تستخدم سمة Lekker WordPress. كيف أقوم بإنشاء عنصر واجهة مستخدم مخصص للصور في WordPress؟ لإضافة صورة إلى الشريط الجانبي لـ WordPress ، حدد عنصر واجهة المستخدم "صورة". يمكنك إجراء تغييرات على مظهرك بالذهاب إلى المظهر. أضف عنصر واجهة المستخدم "صورة" إلى الشريط الجانبي إذا كان لديك صفحة تتضمن عنصر واجهة مستخدم. يعد هذا المكون الإضافي رائعًا لأولئك الذين يرغبون في إنشاء عنصر واجهة مستخدم مخصص لموقعهم على الويب أو مدونتهم. باستخدام هذا المكون الإضافي ، يمكنك بسهولة إنشاء عنصر واجهة مستخدم مخصص دون الحاجة إلى ترميزه بنفسك. لتوفير عنصر واجهة مستخدم مخصص يمكن استخدامه مع Qt Designer ، نحتاج إلى توفير تنفيذ مستقل بالإضافة إلى واجهة البرنامج المساعد. لا تحتوي الأداة المخصصة لهذا المثال ، مثل نظيرتها على مدار الساعة التناظرية ، على أي إشارات أو فتحات مخصصة. يجب استخدام الماكرو Q_PLUGIN_METADATA () للتأكد من تعريف الأداة بشكل صحيح كمكوِّن إضافي عن طريق تصدير البيانات منه. يمكن استخدام فئة AnalogClock كعنصر واجهة مستخدم مخصص داخل مربع عناصر واجهة المستخدم وهو مثال على فئة قائمة بذاتها. يتم تضمين فئة البرنامج المساعد لفئة AnalogClock في Qt Designer. يقوم المُنشئ لفئة QObject ببساطة باستدعاء مُنشئ الفئة الأساسية QObject ، والذي يقوم بتعيين المتغير المُهيأ على خطأ. تتحقق وظيفة isInitialized () مما إذا كان البرنامج المساعد جاهزًا للاستخدام من خلال السماح لـ Qt Designer بتحديده. يمكن أن تنشئ وظيفة createWidget () مثيلات لعنصر واجهة مستخدم مخصص. سيكون المكون الإضافي لعنصر واجهة المستخدم مرئيًا في اسم المجموعة في قسم المكون الإضافي لعناصر واجهة المستخدم في Qt Designer. نصيحة أداة وما هذا؟ في مربع الأدوات ، يمكنك تقديم المساعدة لعنصر واجهة المستخدم المخصص. تتحقق الوظيفة isContainer () مما إذا كان يجب استخدام عنصر واجهة المستخدم كحاوية لصور عناصر واجهة المستخدم الأخرى. هذا يمنع المستخدم من إنشاء عناصر واجهة مستخدم فيه. Custom Widget WordPress CodeCredit: www.hostpapa.in تعد الأداة المخصصة طريقة رائعة لإضافة وظائف إلى موقع WordPress الخاص بك. هناك بعض الأشياء التي يجب وضعها في الاعتبار عند إضافة رمز عنصر واجهة مستخدم مخصص إلى موقعك. أولاً ، ستحتاج إلى إنشاء ملف يسمى “widget.php” في دليل القالب الخاص بك. بعد ذلك ، ستحتاج إلى إضافة الكود التالي إلى ملف widget.php الخاص بك: class Custom_Widget تمتد WP_Widget {function __construct () {parent :: __ build ('custom_widget'، __ ('Custom Widget'، 'text_domain') ، مصفوفة ('description' => __ ('عنصر واجهة مستخدم مخصص لموقع WordPress الخاص بك.'، 'text_domain')،)) ؛ } أداة الوظيفة العامة ($ args، $ example) {$ title = apply_filters ('widget_title'، $ example ['title'])؛ صدى $ args ['before_widget']؛ if (! blank ($ title)) echo $ args ['before_title']. العنوان. $ args ['after_title']؛ echo __ ("Hello، World!"، "text_domain") ؛ صدى $ args ['after_widget']؛ } نموذج الوظيفة العامة (مثيل $) {if (isset ($ enterprise ['title'])) {$ title = $ مثيل ['title']؛ } else {$ title = __ ('New title'، 'text_domain')؛ }؟ >} تحديث الوظيفة العامة ($ new_instance، $ old_instance) {$ example = array ()؛ $ example ['title'] = (! blank ($ new_instance ['title'] Wordpress إضافة عنصر واجهة إلى القالب تعد إضافة عنصر واجهة مستخدم إلى قالب WordPress عملية بسيطة. ستحتاج إلى الوصول إلى ملفات WordPress من خلال حساب الاستضافة وتعديل الملف المناسب. في معظم الحالات ، سيكون هذا هو ملف header.php. ابحث عن الكود الذي يتحكم في المنطقة التي تريد إضافة عنصر واجهة المستخدم إليها. ثم انسخ رمز الأداة التي تريد إضافتها والصقه في الملف المناسب في الملف. احفظ الملف وقم بتحميله على الخادم الخاص بك. هذا كل شيء! ستظهر الأداة الآن على موقع WordPress الخاص بك. في WordPress ، هناك علامة قالب تسمى the_widget () تسمح لك بإضافة عنصر واجهة مستخدم مباشرة إلى ملفات القوالب. يمكن وضع عنصر واجهة المستخدم في ملف يحتوي على اسم فئة الأداة التي تريد استخدامها والمكان الذي تريد ظهوره فيه. وبعبارة أخرى ، إذا أردت سرد التعليقات الأخيرة ، يمكنك فقط كتابة هذا: مثيل $ لكل عنصر واجهة مستخدم. باستخدام الوظائف المضمنة ، يمكنك إضافة العديد من العناصر الافتراضية الخاصة بك أدوات ووردبريس ult WordPress لملفات القوالب الخاصة بك بدلاً من استخدامها. يمكن إدراج الأدوات المخصصة باستخدام طريقة the_widget () في جميع أنحاء القالب الخاص بك. تتوفر الأدوات المخصصة ، والتي يمكن استخدامها على نظام أساسي مختلف عن الشريط الجانبي ، في العديد من المكونات الإضافية. كيف يمكنني إضافة عنصر واجهة إلى سمة WordPress الخاصة بي؟ قم بزيارة شاشات إدارة WordPress لمشاهدة صفحة المظهر. اختر عنصر واجهة مستخدم عن طريق سحبه إلى شريط جانبي محدد أو النقر فوق رابط إضافة عنصر واجهة مستخدم (إذا كان المظهر الخاص بك يحتوي على أكثر من شريط جانبي واحد ، فاختر الشريط الجانبي الوجهة). وأدخل الملف حيث يجب أن تظهر الأداة الخاصة بك. الخطوة الثانية هي تحديد الأداة التي تريد استخدامها. في هذا القسم ، سنتطرق إلى أسماء فئات عنصر واجهة مستخدم WordPress الافتراضية: WP_Widget_Archives. كيفية إنشاء عنصر واجهة مستخدم مخصص للصور في WordPress من أجل إنشاء عنصر واجهة مستخدم مخصص للصور في WordPress ، ستحتاج أولاً إلى إنشاء مكون إضافي مخصص أو سمة فرعية. بمجرد القيام بذلك ، يمكنك بعد ذلك إنشاء ملف جديد يسمى "image-widget.php" داخل المكون الإضافي أو القالب الفرعي. داخل هذا الملف ، ستحتاج إلى تضمين الكود التالي: الفئة WP_Widget_Custom_Image تمتد WP_Widget {function __construct () {$ widget_ops = array ('classname' => 'widget_custom_image'، 'description' => __ ('عنصر واجهة مستخدم يسمح لك لتحميل صورة مخصصة. '،' text_domain ')،)؛ الأصل :: __ build ('custom_image'، __ ('Custom Image'، 'text_domain')، $ widget_ops)؛ } عنصر واجهة مستخدم ($ args، $ example) {echo $ args ['before_widget']؛ if (! blank ($ signature ['title'])) {echo $ args ['before_title']. application_filters ('widget_title'، $ example ['title']). $ args ['after_title']؛ } if (! blank ($ signature ['image'])) {echo ”؛ } echo $ args ['after_widget']؛ } تحديث الوظيفة ($ new_instance، $ old_instance) {$ example = $ old_instance؛ $ مثيل ['title'] = sanitize_text_field ($ new_instance ['title'])؛ $ مثيل ['image'] = esc_url_raw ($ new_instance ['image'])؛ عودة $ مثيل؛ } شكل دالة ($ مثيل) {$ title =! فارغ ($ مثيل ['title'])؟ $ example ['title']: __ ('Custom Image'، 'text_domain')؛ صورة $ =! فارغ ($ مثيل ['صورة'])؟ $ مثيل ['صورة']: ”؛ ؟ المكوّن الإضافي Image Widget هو مكون إضافي بسيط يمكن استخدامه لإضافة عناصر واجهة مستخدم للصور إلى موقعك باستخدام مدير وسائط WordPress. من الشائع أن تتضمن قوالب مخرجات عناصر واجهة المستخدم قالبًا افتراضيًا ، ولكن يمكن تعديل ذلك بواسطة الملفات الموجودة في القالب الخاص بك. في الإصدار 3.2 ، تمت إضافة مرشح sh_template_image_widget_php أيضًا ، مما يسمح لك بتجاوز سلوك القالب الافتراضي. لمعرفة المزيد حول مثيل عنصر واجهة المستخدم المحدد ، يجب عليك أيضًا إضافة وسيطتين $ args و $ مثيل. يمكنك استخدام هذا في تصميم سريع الاستجابة إذا تجاوزت هذا. كيف يمكنني إضافة شريط تمرير للصور العشوائية؟ نعم ، لديك خيار القيام بذلك ، وعادةً ما يتم التعامل مع هذا مباشرةً من خلال عرض الشريط الجانبي لمكوِّن Image Widget ؛ يجب تعيين عرض الشريط الجانبي على صفحة معينة. يرجى إعلامنا إذا كان لديك أي أسئلة أو تعليقات على هذه الصفحة. أداة Image Widget هي مشروع برمجي مفتوح المصدر. تم إتاحة هذا المكون الإضافي للجمهور من قبل مجموعة متنوعة من المساهمين. إذا كنت تريد تضمين صورة ، يمكنك إضافة حقل واحد ، وإذا كنت تريد تضمين ارتباط ، يمكنك إضافة فصل دراسي. ستقضي حوالي 15 دقيقة في القيام بذلك ، لذا فهو استثمار مفيد. كيف يمكنني إنشاء عنصر واجهة مستخدم جديد في WordPress؟ إما أن تسحب الأداة إلى منطقة عنصر واجهة المستخدم ذات الصلة أو اسحبها من الجانب الأيسر من الصفحة إلى اليسار . بمجرد النقر فوق الأداة التي تريد إضافتها ، سترى قائمة بالطرق للقيام بذلك. لإضافة عناصر واجهة مستخدم جديدة إلى منطقة موجودة ، انقر فوق الزر إضافة عنصر واجهة مستخدم.