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

Опубликовано: 01.09.2018

Если вы хотите добавить или создать свой кастомный виджет для 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!