Generic selectors
Только точные совпадения
Искать в заголовках
Искать в контенте
Искать в статьях
Искать на страницах
Filter by Categories
FAQ
Hostenko
Вдохновение
Видеоуроки
Новости
Плагины
Темы
Уроки
Хаки

Если вы хотите добавить или создать свой кастомный виджет для WordPress сайта, то вы читаете правильную инструкцию.

С помощью виджетов вы можете добавлять различные элементы в боковую панель сайта (сайдбар), или в нижней области (подвал), или в любом другом произвольном месте, смотря где это предусмотрено вашей темой оформления.

В этой небольшой инструкции мы покажем, как самостоятельно зарегистрировать и создать свой кастомный виджет на WordPress.

Как создать свой кастомный виджет в WordPress

Смотрите также:

Что такое виджеты в WordPress?

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

Специализированный хостинг для сайтов на WordPress!

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

По умолчанию, WordPress идет с набором стандартных виджетов, которые вы в любой момент можете подключить к своему сайту в меню Внешний вид → Виджеты.

Как создать свой кастомный виджет в WordPress

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

После того, как вы добавите и сохраните на сайте этот код, перейдите в меню Внешний вид → Виджеты, и у вас появится новый виджет. Вы можете добавить его на сайдбар, просто перетащив его мышкой:

Как создать свой кастомный виджет в WordPress

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

Как создать свой кастомный виджет в WordPress

Давайте немного разберемся в коде.

  • В первую очередь мы зарегистрировали виджет ‘wpb_widget’ и тем самым создали сам виджет.
  • Далее мы опеределили, что делает этот виджет и какие он содержит параметры для настройки в админке WordPress.
  • И в конце мы определили, что должно происходить с изменениями, внесенными в виджет при его настройке.

Итоги

В данном примере мы создали простой виджет, который выводит текст Hello, World! и позволяет в настройках менять заголовок виджета.

Вы можете смело брать этот код и пробовать создать на его основе свой собственный виджет.

Надеемся, эта инструкция поможет вам разобраться, как можно самому зарегистрировать и добавить свой кастомный виджет на WordPress!

Специализированный хостинг для сайтов на WordPress!

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

5 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Здравствуйте.
в виджете можно сделать обязательный для заполнения заголовок?

В виджете есть поле заголовок Title.
По умолчанию оно пустое. нужно сделать чтобы это поле было обязательно к заполнению. чтобы при нажатие кнопки сохранить выдавало что-то типа (не заполнено поле заголовок) .

Уточни, пожалуйста, вопрос. Это же не обратная форма для пользователей.

Спасибо за статью. Я уж думал, что вы закрылись_))

Тенгиз

Видно, находились в творческом отпуске! :)