هل تريد إنشاء أدوات مخصصة خاصة بك في ووردبريس؟ تتيح لك الأدوات إضافة عناصر غير متعلقة بالمحتوى إلى شريط جانبي أو أي منطقة جاهزة لعناصر واجهة المستخدم في موقع الويب الخاص بك.
يمكنك استخدام عناصر واجهة المستخدم لإضافة لافتات وإعلانات ونماذج الاشتراك في الرسائل الإخبارية وعناصر أخرى إلى موقع الويب الخاص بك.
في هذه المقالة ، سنوضح لك كيفية إنشاء عنصر واجهة مستخدم ووردبريس مخصص ، خطوة بخطوة.
إنشاء عنصر واجهة مستخدم ووردبريس مخصص
ملاحظة: هذا البرنامج التعليمي مخصص لمستخدمي ووردبريس DIY الذين يتعلمون تطوير ووردبريس والترميز.
تحتوي أدوات ووردبريس على أجزاء من التعليمات البرمجية التي يمكنك إضافتها إلى الأشرطة الجانبية لموقع الويب الخاص بك أو المناطق الجاهزة لعناصر واجهة المستخدم.
فكر فيها كوحدات نمطية يمكنك استخدامها لإضافة عناصر مختلفة باستخدام واجهة سحب وإفلات بسيطة.
بشكل افتراضي ، يأتي ووردبريس مع مجموعة قياسية من الأدوات التي يمكنك استخدامها مع أي سمة ووردبريس. انظر دليل المبتدئين لدينا حول كيفية إضافة واستخدام الحاجيات في ووردبريس .
إضافة أدوات في ووردبريس
يتيح ووردبريس أيضًا للمطورين إنشاء أدوات مخصصة خاصة بهم.
تأتي العديد من سمات وإضافات ووردبريس المتميزة مع أدوات مخصصة خاصة بها يمكنك إضافتها إلى أشرطةك الجانبية.
على سبيل المثال، يمكنك إضافة شكل من أشكال الاتصال ، وهو نموذج تسجيل دخول مخصصة ، أو معرض للصور في الشريط الجانبي دون كتابة أي رمز.
بعد قولي هذا ، دعنا نرى كيفية إنشاء أدواتك المخصصة بسهولة في ووردبريس.
فيديو تعليمي
اشترك في WPBeginner
إذا كنت تفضل التعليمات المكتوبة ، فيرجى متابعة القراءة.
إذا كنت تتعلم ترميز ووردبريس ، فستحتاج إلى بيئة تطوير محلية. يمكنك تثبيت ووردبريس على جهاز الكمبيوتر الخاص بك (Mac أو Windows).
هناك عدة طرق لإضافة رمز عنصر واجهة المستخدم المخصص في ووردبريس.
من الناحية المثالية ، يمكنك إنشاء مكون إضافي خاص بالموقع ولصق رمز عنصر واجهة المستخدم الخاص بك هناك.
يمكنك أيضًا لصق الشفرة في ملف jobs.php الخاص بالقالب . ومع ذلك ، سيكون متاحًا فقط عندما يكون هذا المظهر المحدد نشطًا.
أداة أخرى يمكنك استخدامها هي المكون الإضافي Code Snippets الذي يسمح لك بإضافة رمز مخصص بسهولة إلى موقع ووردبريس الخاص بك .
في هذا البرنامج التعليمي ، سننشئ عنصر واجهة مستخدم بسيطًا يرحب بالزوار فقط. الهدف هنا هو التعرف على فئة عناصر واجهة مستخدم ووردبريس.
هيا بنا نبدأ.
يأتي ووردبريس مع فئة ووردبريس Widget المضمنة. تعمل كل أداة ووردبريس جديدة على توسيع فئة أدوات ووردبريس.
هناك 18 طريقة مذكورة في كتيب مطور ووردبريس يمكن استخدامها مع فئة WP Widget .
ومع ذلك ، من أجل هذا البرنامج التعليمي ، سنركز على الطرق التالية.
__construct (): هذا هو الجزء حيث نقوم بإنشاء معرف عنصر واجهة المستخدم والعنوان والوصف.
القطعة: هذا هو المكان الذي نحدد فيه الإخراج الناتج عن الأداة.
النموذج: هذا الجزء من الكود هو المكان الذي ننشئ فيه النموذج بخيارات عنصر واجهة المستخدم للخلفية.
تحديث: هذا هو الجزء الذي نحفظ فيه خيارات عنصر واجهة المستخدم في قاعدة البيانات.
دعنا ندرس الكود التالي حيث استخدمنا هذه الطرق الأربعة داخل فئة WP_Widget.
// Creating the widget
class wpb_widget extends WP_Widget {
// The construct part
function __construct() {
}
// Creating widget front-end
public function widget( $args, $instance ) {
}
// Creating widget Backend
public function form( $instance ) {
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
}
// Class wpb_widget ends here
} الجزء الأخير من الكود هو المكان الذي سنقوم فيه بالفعل بتسجيل الأداة وتحميلها داخل ووردبريس.
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );الآن دعنا نجمع كل هذا معًا لإنشاء عنصر واجهة مستخدم أساسي في ووردبريس.
يمكنك نسخ ولصق الكود التالي في المكوِّن الإضافي المخصص أو ملف jobs.php الخاص بالقالب.
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'),
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), )
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );بعد إضافة الكود ، عليك التوجه إلى صفحة المظهر »الحاجيات . ستلاحظ WPBeginner Widget الجديدة في قائمة الأدوات المتاحة. تحتاج إلى سحب هذه الأداة وإفلاتها في شريط جانبي.
القطعة التجريبية
تحتوي هذه الأداة على حقل نموذج واحد فقط لملئه ، يمكنك إضافة النص الخاص بك والنقر فوق الزر “حفظ” لتخزين تغييراتك.
يمكنك الآن زيارة موقع الويب الخاص بك لرؤيته أثناء العمل.
معاينة القطعة المخصصة الخاصة بك
الآن دعنا ندرس الكود مرة أخرى.
أولاً ، سجلنا “wpb_widget” وقمنا بتحميل عنصر واجهة المستخدم المخصص. بعد ذلك حددنا ما تفعله هذه الأداة ، وكيفية عرض الواجهة الخلفية لعنصر واجهة المستخدم.
أخيرًا ، حددنا كيفية التعامل مع التغييرات التي تم إجراؤها على الأداة.
الآن هناك بعض الأشياء التي قد ترغب في طرحها. على سبيل المثال ، ما هو الغرض wpb_text_domain؟
يستخدم ووردبريس gettext للتعامل مع الترجمة والتعريب. هذا wpb_text_domainو __e يروي gettext لجعل سلسلة متاح للترجمة. انظر كيف يمكنك العثور على قوالب ووردبريس جاهزة للترجمة .
إذا كنت تقوم بإنشاء عنصر واجهة مستخدم مخصص لموضوعك ، فيمكنك استبداله wpb_text_domainبنطاق نص السمة الخاصة بك.
نأمل أن تساعدك هذه المقالة في تعلم كيفية إنشاء عنصر واجهة مستخدم ووردبريس مخصص بسهولة. قد ترغب أيضًا في الاطلاع على قائمة أدوات ووردبريس الأكثر فائدة لموقعك .
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
