نحوه ساخت ابزارک وردپرس

زمان انتشار:
تعداد بازدید: 498

زمان تقریبی خواندن نوشته: 2 دقیقه
حالت تمام صفحه:

نحوه ساخت ابزارک وردپرس -wpyad-create-widgetاین نوشته در تاریخ ۹۶/۱۲/۱۲ بروزرسانی شد.
سلام دوستان؛
تاکنون به این فکر کرده‌اید که ابزارکی خاص برای وب‌سایت وردپرسی‌تان تهیه کنید؟ ابزارک‌های وردپرس این امکان را به شما می‌دهند تاعناصر را به هر گوشه وستون که مدنظرتان است درگ کنید! در این مقاله از وردپرس یاد قصد داریم به نحوه ساخت ابزارک وردپرس بپردازیم. به‌سادگی می‌توان ابزارک‌های سفارشی ساخت .

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

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

ابزارک‌های وردپرس

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

وردپرس این اجازه را به توسعه‌دهندگان می‌دهد تا ابزارک های سفارشی بسازند. بسیاری از قالب ها و افزونه‌های وردپرس همراه با ابزارک‌های خاص خود ارائه‌شده‌اند.

به‌عنوان‌مثال، می‌توانید فرم تماس، فرم ورود خاص خود و یا یک گالری عکس را بدون نوشتن هیچ کدی به ستون‌ها اضافه کنید.

نحوه ساخت ابزارک وردپرس

نکته: قبل از شروع، بهتر است که درسایت یک محل مخصوص (Site-Specific) ایجاد کرده و این قطعه کدهای آموزشی ساخت ابزارک را در آن نگه‌دارید. یا اینکه کدها را در فایل functions.php مربوط به قالب خود Paste کنید. این کار به منظور در دسترس قرار گرفتن کدها و فراخوانی شدن موقع فعال‌سازی قالب موردنظر است.

در این آموزش قطعه کد ساده ای را بررسی خواهیم کرد تا عملکرد کلی ساخت ابزارک وردپرس را بیاموزید. سپس می توانید به صورت اختصاصی کد نویسی کنید یا کد ابزارک مورد نظر خود را دریافت کرده و آن را به صورت قوانینی که در ادامه بررسی می‌کنیم در فایل توابع قرار دهید.

نحوه قرار دادن کد ابزارک در قالب

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

نکته: به همین روال می‌توانید کدهای مخصوص ابزارک مورد نظر را درج کنید.

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

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
 
// 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
?>


<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 ); ?>" />


<?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

بعداز افزودن کد مورد نظر به قسمت نمایش > ابزارک‌ها رجوع کنید تا صفحه ابزارک ها باز شود.

نحوه ساخت ابزارک وردپرس به صورت سفارشی

همان‌طور که می‌بینید گزینه جدیدی با عنوان WPYAD به لیست ابزارک های موجود اضافه‌شده است.

نحوه ساخت ابزارک وردپرس به صورت سفارشی

باید این ابزارک را به قسمت – ستون کناری – بکشید یا دکمه افزودن ابزارک را بزنید.

نحوه ساخت ابزارک وردپرس به صورت سفارشی

درنهایت  ابزارک WPYAD که کد آن را قرار داده بودیم، در قسمت ستون نمایش داده می‌شود.

حالا اگر به وب‌سایت خود بروید می‌بینید که در سایدبار صفحات ، گزینه تازه‌ای اضافه‌شده این همان ابزارکی است که فعال کردیم.

نحوه ساخت ابزارک وردپرس به صورت سفارشی

جمع‌بندی نهایی

مجدداً  کد را باهم برسی کنیم:

  • در ابتدا ابزارک wpb_widget را در وردپرس رجیستر ولود کردیم .
  • سپس تعریف کردیم که این ابزارک دقیقاً برای ما چه‌کاری انجام دهد.
  • و درنهایت نحوه نمایش و عملکرد ابزارک را مشاهده کردیم. و تنظیمات و تغییرات  برای راه‌اندازی ابزارک را دیدیم.

نحوه ساخت ابزارک وردپرس wpyad-create-custom-widget✍?بیشتر بدانید:

۱- نکته‌ مهمی که همگی در هنگام کار با ابزارک‌های قالب باید بدانیم نحوه انتقال ابزارک‌های قالب وردپرس است.

۲- در حین کار با ابزارک‌ها یا همان ویجت ممکن است که سؤالی برای شما پیش بیاید. برای مثال:
سوال: هدف از wpb_text_domain  چیست؟

وردپرس از گتکس که مسئولیت ترجمه و محلی‌سازی را به عهده دارد استفاده می‌کند. در واقع وظیفه آن برقراری ارتباط و زبان رابط است. این wpb_text_domain و __e  به گتکس می‌گوید یک سری رشته باید ترجمه شوند. پس از ترجمه، ارتباط با قالب وردپرس برقرار می‌شود.

اگر ابزارک سفارشی ساختید  wpb_text_domain  را با تکست دامین خود جایگزین کنید!

امیدواریم که این مقاله  در  نحوه ساخت ابزارک سفارشی در وردپرس به شما کمک کرده باشد.

موفق باشید. 🙂

درباره نویسنده

75 نوشته تا کنون
فارغ‌التحصیل رشته آی‌تی. کارشناس آی‌تی وردپرس‌یاد ?
✍باتمام علاقه‌ای که به دنیای آی‌تی داشتم با وردپرس آشنا شدم و اکنون تمام تلاشم برای تهیه آموزش‌های کاربردی و کمک به علاقه‌مندان دنیای بزرگ وردپرس است.

پاسخ دهید

دیدگاه شما برای ما ارزشمند است. در کمترین زمان ممکن به آن پاسخ خواهیم داد.

دیدگاه های این نوشته

دیدگاهی برای این نوشته وجود ندارد.