هل تريد إنشاء أدوات مخصصة خاصة بك في ووردبريس ؟ تسمح لك الأدوات بإضافة عناصر غير متعلقة بالمحتوى إلى شريط جانبي أو أي منطقة جاهزة لعناصر واجهة المستخدم في موقعك على الويب.
يمكنك استخدام الأدوات لإضافة لافتات وإعلانات ونماذج الاشتراك في الرسائل الإخبارية وعناصر أخرى إلى موقع الويب الخاص بك.
كما يمكنك الاطلاع على كيفية تطور واجهة ووردبريس
في هذه المقالة ، سنوضح لك كيفية إنشاء أداة واجهة مستخدم ووردبريس مخصص ، خطوة بخطوة.
أداة واجهة مستخدم
ملاحظة: هذا المقال مخصص لمستخدمي ووردبريس DIY الذين يتعلمون تطوير ووردبريس والترميز.
ما هي أداة ووردبريس ؟
تحتوي أدوات ووردبريس على أجزاء من التعليمات البرمجية التي يمكنك إضافتها إلى الأشرطة الجانبية لموقعك على الويب أو المناطق الجاهزة لعناصر واجهة المستخدم.
فكر فيها كوحدات نمطية يمكنك استخدامها لإضافة عناصر مختلفة باستخدام واجهة سحب وإفلات بسيطة.
بشكل افتراضي ، يأتي ووردبريس مع مجموعة قياسية من الأدوات التي يمكنك استخدامها مع أي قالب ووردبريس .
يتيح ووردبريس أيضًا للمطورين إنشاء أدوات مخصصة خاصة بهم.
تأتي العديد من قوالب وإضافات ووردبريس المتميزة مع أدوات مخصصة خاصة بها يمكنك إضافتها إلى أشرطتك الجانبية.
على سبيل المثال ، يمكنك إضافة نموذج اتصال أو نموذج تسجيل دخول مخصص أو معرض صور إلى شريط جانبي دون كتابة أي رمز.
بعد قولي هذا ، دعنا نرى كيفية إنشاء أدواتك المخصصة بسهولة في ووردبريس .
إنشاء أداة واجهة مستخدم مخصص في ووردبريس
إذا كنت تتعلم ترميز ووردبريس ، فستحتاج إلى بيئة تطوير محلية. يمكنك تثبيت ووردبريس على جهاز الكمبيوتر الخاص بك (Mac أو Windows).
هناك عدة طرق لإضافة رمز أداة واجهة المستخدم المخصص في ووردبريس .
من الناحية المثالية ، يمكنك إنشاء إضافة خاص بالموقع ولصق رمز أداة واجهة المستخدم الخاص بك هناك.
يمكنك أيضًا لصق الشفرة في ملف jobs.php الخاص بقالبك. ومع ذلك ، سيكون متاحًا فقط عندما يكون هذا القالب المحدد نشطًا.
أداة أخرى يمكنك استخدامها هي الإضافة Code Snippets الذي يسمح لك بسهولة إضافة رمز مخصص إلى موقع ووردبريس الخاص بك.
في هذا المقال ، سننشئ أداة واجهة مستخدم بسيطًا يرحب بالزوار فقط. الهدف هنا هو التعرف على فئة عناصر واجهة مستخدم ووردبريس .
هيا بنا نبدأ.
إنشاء أداة واجهة مستخدم ووردبريس أساسي
يأتي ووردبريس مع فئة WordPress Widget المضمنة. تعمل كل أداة ووردبريس جديدة على توسيع فئة أدوات ووردبريس .
ومع ذلك ، من أجل هذا المقال ، سنركز على الطرق التالية.
__construct (): هذا هو الجزء حيث نقوم بإنشاء معرف أداة واجهة المستخدم والعنوان والوصف.
widget : هذا هو المكان الذي نحدد فيه الإخراج الناتج عن الأداة.
form : هذا الجزء من الكود هو المكان الذي ننشئ فيه النموذج بخيارات أداة واجهة المستخدم للخلفية.
update: هذا هو الجزء الذي نحفظ فيه خيارات أداة واجهة المستخدم في قاعدة البيانات.
دعنا ندرس الكود التالي حيث استخدمنا هذه الطرق الأربعة داخل فئة 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
__('parmja Widget', 'wpb_widget_domain'),
// Widget description
array( 'description' => __( 'Sample widget based on parmja 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' );بعد إضافة الكود ، عليك التوجه إلى صفحة Appearance » Widgets .
تحتوي هذه الأداة على حقل نموذج واحد فقط لملئه ، يمكنك إضافة النص والنقر فوق الزر “حفظ” لتخزين تغييراتك.
يمكنك الآن زيارة موقع الويب الخاص بك لرؤيته أثناء العمل.
الآن دعونا ندرس الكود مرة أخرى.
أولاً ، سجلنا “wpb_widget” وقمنا بتحميل أداة واجهة المستخدم المخصص. بعد ذلك حددنا ما تفعله هذه الأداة ، وكيفية عرض الواجهة الخلفية لأداة واجهة المستخدم.
أخيرًا ، حددنا كيفية التعامل مع التغييرات التي تم إجراؤها على الأداة.
الآن هناك بعض الأشياء التي قد ترغب في طرحها. على سبيل المثال ، ما هو الغرض من wpb_text_domain؟
يستخدم ووردبريس gettext للتعامل مع الترجمة والتعريب. يقوم wpb_text_domain و __e بإخبار gettext بإتاحة سلسلة نصية للترجمة. انظر كيف يمكنك العثور على قوالب ووردبريس جاهزة للترجمة.
إذا كنت تقوم بإنشاء أداة واجهة مستخدم مخصص لقالبك ، فيمكنك استبدال wpb_text_domain بنطاق نص القالب الخاص بك.
نأمل أن تساعدك هذه المقالة في تعلم كيفية إنشاء أداة واجهة مستخدم ووردبريس مخصص بسهولة.
