Як створити свій кастомний віджет у WordPress

Якщо ви хочете додати або створити свій кастомний віджет для WordPress сайту, ви читаєте правильну інструкцію.

За допомогою віджетів ви можете додавати різні елементи в бічній панелі сайту (сайдбар), або в нижній області (підвал), або в будь-якому іншому довільному місці, дивлячись де це передбачено вашою темою оформлення.

У цій невеликій інструкції ми покажемо, як самостійно зареєструвати та створити свій кастомний віджет на WordPress.

Дивіться також:

• Створюємо віджети у WordPress за допомогою візуального редактора
• Додаємо кастомні віджети до WordPress з безкоштовним плагіном Ultimate Widgets
• GetSale – корисний інструмент для створення віджетів та pop-up вікон у WordPress
• Як створити віджети, що настроюються, для консолі WordPress
• Як показувати віджети WordPress лише авторизованим користувачам

Що таке віджети у WordPress?

WordPress віджети містять певний код, який можна помістити в область сайдбара або іншу зареєстровану область для додавання віджетів у вашій темі.

Іншими словами, це такі модулі, які можна додати або перемістити за допомогою drag-and-drop у Консолі WordPress. Кожен такий модуль несе свою функціональність, це може бути поле для пошуку, хмара міток, календар або просто довільний текстовий віджет, в якому міститься HTML код.

За умовчанням WordPress йде з набором стандартних віджетів, які ви в будь-який момент можете підключити до свого сайту в меню Зовнішній вигляд → Віджети.

WordPress також дозволяє розробникам створювати свої кастомні віджети. Наприклад, багато тем оформлення та плагіни йдуть в комплекті зі своїми віджетами, які ви можете додати на свій сайт.

Таким чином, ви можете легко додати віджет контактної форми, фотогалереї, форми реєстрації та авторизації, не написавши жодного рядка коду.

Давайте подивимося, як самому створити свій кастомний віджет в WordPress.

Створення кастомного віджету у WordPress

Перед тим, як ми почнемо, вирішіть для себе, як вам буде зручніше додати свій код в functions.php або створити кастомний плагін на WordPress?

Ми рекомендуємо робити всі дії через створення кастомного плагіна, але ви також можете просто скопіювати код із цієї інструкції та додати у свій файл functions.php.

У цьому уроці ми створимо простий віджет, який вітатиме відвідувачів.

Подивіться уважно на цей код, а потім скопіюйте та вставте його у свій плагін (або у файл 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

Після того, як ви додасте та збережете на сайті цей код, перейдіть в меню Зовнішній вигляд → Віджети, і у вас з'явиться новий віджет. Ви можете додати його на сайдбар, просто перетягнувши його мишкою:

Тепер можете переглянути зміни на головній сторінці сайту:

Давайте трохи розберемося в коді.

• Насамперед ми зареєстрували віджет 'wpb_widget' і цим створили сам віджет.
• Далі ми випередили, що робить цей віджет і які він містить параметри налаштування в адмінці WordPress.
• І наприкінці ми визначили, що має відбуватися із змінами, внесеними до віджету при його налаштуванні.

Підсумки

У цьому прикладі ми створили простий віджет, що виводить текст Hello, World! і дозволяє в налаштуваннях змінювати заголовок віджету.

Ви можете сміливо брати цей код і намагатися створити на його основі свій віджет.

Сподіваємося, ця інструкція допоможе вам розібратися, як можна самому зареєструвати та додати свій кастомний віджет на WordPress!

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/