چگونه ویجت های سفارشی وردپرس ایجاد کنیم: آنها چیست و چگونه کار می کنند؟

آیا می دانستید که می توانید ویجت سفارشی وردپرس خود را ایجاد کنید؟ در حالی که هزاران ابزارک اضافی در کنار تم ها و افزونه ها وجود دارد، وردپرس به کاربران خود این گزینه را ارائه می دهد که ویجت های سفارشی را به صورت دستی کدنویسی کنند.

این یک چیز پیچیده نیست process زیرا شما فقط به دانش اولیه وردپرس و PHP نیاز دارید. بنابراین، بدون هیچ مقدمه ای، بیایید شروع کنیم!

ابزارک های وردپرس چیست؟

ویجت‌های وردپرس این امکان را برای شما فراهم می‌کنند که از طریق یک رابط ساده کشیدن و رها کردن، عملکردهای اضافی را به وب‌سایت خود اضافه کنید. به طور پیش فرض، وردپرس با چندین ویجت عرضه می شود. آنها ویژگی های اساسی ابزاری را در اختیار شما قرار می دهند و با هر تم وردپرس سازگار هستند.

با این حال، گاهی اوقات، آن ویجت های استاندارد نمی توانند وظایف مورد نظر شما را انجام دهند. بهترین گزینه شما این است که به دنبال افزونه هایی باشید که عملکرد مورد نظر را به شما ارائه می دهند. متأسفانه، ممکن است متوجه شوید که حتی پلاگین های شخص ثالث نیز نمی توانند نیازهای شما را برآورده کنند.

خوشبختانه، شما قدرت ایجاد یک ویجت سفارشی وردپرس را دارید. فقط به خاطر داشته باشید که باید از ابتدا ساخته شود تا بتوانید شخصاً ویجت سفارشی خود را تنظیم کنید روی نیازهای شما.

هنگام ایجاد یک ویجت سفارشی از کجا شروع کنیم؟

ابتدا باید انتخاب کنید که آیا می خواهید ویجت را با استفاده از یک افزونه ایجاد کنید یا از طریق ویرایش فایل functions.php. یک افزونه ویجت سفارشی را فعال می کند روی هر سایتی در حین اضافه کردن کد به functions.php. به این ترتیب، ویجت را در کنار یک موضوع خاص کار می کند.

در مرحله دوم، شما این امکان را دارید که ویجت را اضافه کنید روی یک سایت زنده یا در یک محیط محلی. با این حال، ما به شما توصیه می کنیم که ابتدا ویجت را در یک محیط محلی پیاده سازی کنید تا آن را آزمایش کنید. با دنبال کردن راهنمای ما می توانید به راحتی این کار را انجام دهید روی روش اجرای وردپرس روی داکر.

هنگامی که ابزار به درستی کار می کند، وقت آن است که آن را به وب سایت خود منتقل کنید.

ابزارک های سفارشی وردپرس چگونه کار می کنند؟

در وردپرس باید با استفاده از استاندارد یک ویجت سفارشی ایجاد کنید ویجت WP کلاس از ابزارک API. حدود 20 عملکرد وجود دارد که می توانید با آنها بازی کنید. از این میان، چهار حداقل مورد نیاز برای کار هر ویجت است:

• __ساختن() – تابع سازنده که در آن می توانید پارامترهای ویجت خود را تعریف کنید.
• ویجت () – حاوی خروجی ویجت است.
• فرم() – تنظیمات ویجت را در داشبورد وردپرس تعیین می کند.
• به روز رسانی() – تنظیمات ویجت را به روز می کند.

البته، شما گزینه های زیادی دارید که عملکردهای اضافی را ارائه می دهند. برای بیشتر روی را WP_Widget کلاس، نگاهی به وردپرس بیندازید توسعه دهنده page.

ایجاد یک ویجت سفارشی وردپرس

برای این آموزش، ما یک آموزش ساده ایجاد خواهیم کرد «سلام از طرف هاستینگer.com!» ویجت سفارشی تا بتوانید اصول ایجاد ویجت در وردپرس را بیاموزید. پس از انجام این کار، می توانید حرکت کنید روی برای ایجاد ویجت های پیچیده تر روی مال خودت

نکته دیگری که باید به آن توجه داشت این است که ما در حال نوشتن این کد در functions.php فایل برای تم بارگذاری شده فعلی. همانطور که گفته شد، می توانید از همان کد برای هر افزونه سفارشی استفاده کنید.

1. گسترش کلاس WP_Widget

اولین کاری که باید انجام دهید این است که هر ویرایشگر متنی را باز کنید روی کامپیوتر خود را ایجاد کنید و یک کلاس جدید ایجاد کنید که پایه را گسترش دهد WP_Widget کلاس، مانند این:

class hstngr_widget extends WP_Widget {
//Insert functions here
}

2. اضافه کردن __construct()

در مرحله بعد، ما اجرای چهار تابع استاندارد را یکی یکی شروع می کنیم. اولین روش، متد سازنده است که شناسه، نام و توضیحات ویجت سفارشی را تعیین می کند.

function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('هاستینگer Sample Widget', 'hstngr_widget_domain'),
// widget description
array ( 'description' => __( 'هاستینگer Widget Tutorial', 'hstngr_widget_domain' ), )
);
}

3. اضافه کردن ویجت()

حالا بیایید تمرکز کنیم روی را ویجت () تابع. ظاهر ویجت سفارشی وردپرس شما را مشخص می کند روی قسمت جلویی

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before widget'];
//if title is present
If ( ! empty ( $title ) )
Echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Greetings from هاستینگer.com!', 'hstngr_widget_domain' );
echo $args['after_widget'];
}

با این کار خروجی ویجت خود را طوری پیکربندی کرده ایم که عبارت را نمایش دهد «سلام از طرف هاستینگer.com!» و عنوان ویجت که توسط کاربر مشخص شده است.

4. افزودن فرم()

اکنون، ما باید قسمت پشتی ویجت را با استفاده از آن برنامه ریزی کنیم فرم() روش. هنگامی که می خواهید ویجت را از داشبورد وردپرس اضافه کنید، می توانید نتیجه را مشاهده کنید.

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_widget_domain' );
?>
<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
}

در اینجا می توانید ببینید که چگونه یک ویجت سفارشی راه اندازی شده است. اگر کاربر عنوانی را اعمال کند، آن عنوان در فرم HTML که ایجاد کردیم درج می شود. در این مثال، نام عنوان را روی قرار می دهیم عنوان پیش فرض.

5. اضافه کردن به روز رسانی ()

وقتی این کار انجام شد، باید اجرا کنیم به روز رسانی()، که هر بار که تنظیمات را تغییر می دهید ویجت را تازه می کند.

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

ما عنوان فعلی نمونه تازه ایجاد شده را می گیریم و هر تگ HTML/PHP را حذف می کنیم. سپس، عنوان را به نمونه می‌فرستیم و آن را برمی‌گردانیم.

6. ثبت ویجت سفارشی وردپرس

در نهایت، ما باید ویجت سفارشی جدید را با استفاده از آن ثبت کنیم add_action() تابع. به خاطر داشته باشید که قبل از گسترش کد زیر را باید در بالا قرار دهید WP_Widget کلاس

function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}
add_action( 'widgets_init', 'hstngr_register_widget' );

افزودن کد به فایل functions.php

بنابراین، ما یک تابع جدید به نام تعریف کرده ایم hstngr_register_widget(). ویجت ما را با استفاده از شناسه ویجت که در قسمت مشخص شده است ثبت می کند __ساختن() تابع.

سپس، این تابع را با استفاده از آن گره زده ایم widgets_init، که ویجت را از طریق داخلی در وردپرس بارگذاری می کند add_action() روش. آخرین کد ویجت سفارشی وردپرس شما باید به شکل زیر باشد:

function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}
add_action( 'widgets_init', 'hstngr_register_widget' );
class hstngr_widget extends WP_Widget {
function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('هاستینگer Sample Widget', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'هاستینگer Widget Tutorial', 'hstngr_widget_domain' ), )
);
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Greetings from هاستینگer.com!', 'hstngr_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_widget_domain' );
?>
<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
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
}

در نهایت نوبت به درج کد در خود می رسد functions.php فایل.

1. وارد بخش مدیریت وردپرس خود شوید. سپس، به ظاهر -> ویرایشگر تم -> توابع تم.
2. کد را از ویرایشگر متن خود در پایین صفحه قرار دهید functions.php فایل. کلیک به روز رسانی فایل برای ذخیره تغییرات

استفاده از ویجت سفارشی وردپرس

در نهایت می توانید از ویجت تازه نصب شده خود استفاده کنید.

1. برو به ظاهر منو، و انتخاب کنید ابزارک ها. شما باید یک ویجت به نام را ببینید هاستینگer ویجت نمونه در ابزارک های موجود فهرست
2. بعد، ویجت را بکشید و آن را در قسمت رها کنید نوار کناری بخش روی سمت راست از page.
   
3. تغییرات خود را ذخیره کنید و از وب سایت خود بازدید کنید. شما با یک ویجت سفارشی با کلمات مورد استقبال قرار خواهید گرفت «سلام از طرف هاستینگer.com داخل.

تبریک می گوییم، شما با موفقیت اولین ویجت سفارشی وردپرس خود را ایجاد کردید!

نتیجه

ویجت سفارشی وردپرس به شما این امکان را می دهد که یک عملکرد خاص را بر اساس وب سایت خود اضافه کنید روی نیازهای شما. این یک راه حل عالی برای زمانی است که نمی توانید چیز خاصی پیدا کنید که نیازهای خاص شما را برآورده کند. یا زمانی که در حال تبدیل شدن به یک توسعه دهنده وردپرس هستید و می خواهید وب سایت خود را توسعه دهید.

به طور خلاصه، اجازه دهید یک بار دیگر به مراحل نگاهی بیندازیم روی چگونه ویجت وردپرس سفارشی خود را بسازید:

1. یک کلاس جدید ایجاد کنید که گسترش یابد WP_Widget.
2. شروع با __ساختن() برای تعیین پارامترهای ویجت
3. استفاده کنید ویجت () برای تعریف ظاهر ویجت روی قسمت جلویی
4. اضافه کردن فرم() برای پیکربندی روش ظاهر ویجت.
5. فراموش نکنید که اضافه کنید به روز رسانی() تا ویجت را هر بار که آن را تغییر می دهید، به روز کنید.
6. ویجت سفارشی جدید وردپرس را با استفاده از آن ثبت کنید add_action() تابع.
7. کل کد را کپی کرده و در انتهای آن قرار دهید functions.php فایل و کلیک کنید به روز رسانی فایل.
8. برو به ابزارک ها منو و ویجت را به محل مورد نظر منتقل کنید.

موفق باشید!