Как добавить новую область виджетов к вашей теме WordPress и как кодировать виджеты

Если тема не имеет в себя областей виджетов там, где вам необходимо, можно добавить собственную. Для этого необходимо добавить два куска кода.

использование виджетов WordPress

Давайте добавим область виджета ниже содержимого.

Создание области виджетов в файле возможностей темы

Первый шаг – изменить область виджетов при помощи возможности register_widget().

Если вы используете стороннюю тему WordPress, то для этого вам необходимо создать дочернюю тему. Причина в том, что если вы обновите тему в будущем, все изменения потеряются.

Если вы работаете со собственной темой, можете просто отредактировать тему.

Начните с открытия файла functions.php темы. Внизу файла добавьте этот код.

function kinsta_register_widgets() { register_sidebar( array( 'name' => __( 'After Content Widget Area', 'kinsta'), 'id' => 'after-content-widget-area', 'description' => __( 'Widget area after the content', 'kinsta'), 'before_widget' => '<div id="%1$s" class="widget-container %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>',));}add_action( 'widgets_init', 'kinsta_register_widgets');

Сейчас сохраните файл functions.php. Если вы перейдете к экрану виджетов или настройщику, вы найдете новую область виджетов, доступную для добавления виджетов.

Но если вы добавите туда виджеты, они не будут выводиться на странице. Это потому, что вам необходимо добавить код в файл шаблона темы.

Добавление виджета в файл шаблона темы

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

  • Если вы добавляете дополнительную боковую панель, вам необходимо добавить этот код в файл sidebar.php.
  • Если вы добавляете область виджета до или после содержимого, вам надо добавить его в любой файл шаблона темы, который отображает содержимое.
  • Если вы добавляете область виджета в заголовок, вам необходимо добавить код в файл header.php.
  • Если новая область виджетов предназначена только для одной страницы веб-сайта или для одного типа содержимого, вам необходимо использовать иерархию шаблонов WordPress, чтобы точно определить, какой файл шаблона вам необходимо использовать / создать, а далее отредактировать. Так, к примеру, если вы планируете добавить области виджетов на домашнюю страницу, тогда необходимо создать файл front-page.php и добавить туда область виджетов.

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

if( is_active_sidebar( 'after-content-widget-area')) {?> aside class="after-content widget-area full-width" role="complementary"> <?php dynamic_sidebar( 'after-content-widget-area');?> </aside><?php } 

Сейчас сохраните файл(ы) шаблона.

Обратите внимание, что программный код будет отличаться от представленного выше в зависимости от того, как вы называете область виджета, и какие элементы вы хотели бы поместить в нее. Здесь используется элемент aside, так как он подходит для боковых панелей и областей виджетов.

Совет: если вы переместите конец элемента контейнера для содержимого в начало боковой панели и / или файла нижнего колонтитула, то можете легко добавить его туда, и при этом его необходимо добавить только один раз.

Сейчас, если вы посмотрите на веб-сайт, то обнаружите, что все виджеты, добавленные вами в области виджетов, будут выводиться в нужном месте. Если они находятся не в нужном месте, вернитесь и отредактируйте файлы шаблонов, убедившись, что код находится там, где вам необходимо. Может быть придется отредактировать CSS, чтобы все выглядело так, как вы хотели бы.

виджеты WordPress

Как кодировать виджеты при помощи API виджетов

Сейчас вы знаете, как выбирать виджеты для веб-сайта, как добавлять их на веб-сайт и как регистрировать новые боковые панели или области виджетов. Следующий шаг – научиться создавать виджет WordPress.

Вы можете без труда обнаружить, что плагина для создания нужного виджета на веб-сайте нет. Это означает, что вам придется кодировать его самостоятельно.

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

Обзор API виджетов

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

  • Классы для создания новых виджетов.
  • Возможности регистрации виджетов и их размещения на веб-сайте.
  • Возможности для отмены регистрации виджетов, к примеру, из родительской темы.

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

Создайте плагин для виджета WordPress

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

Начните с создания пустого плагина. Создайте папку с плагинами в  каталоге wp-content/plugins и добавьте к ней пустой файл. Дайте ему соответствующее имя. Откройте этот файл и добавьте этот программный код.

<?php/** * Plugin Name: Kinsta Call to Action Widget * Plugin URI: https://rachelmccollin.com * Description: A simple call to action widget. * Version: 1.0 * Author: Rachel McCollin * Author URI: https://rachelmccollin.co.uk */

Вам необходимо отредактировать URI автора и URI плагина по усмотрению. Этот программный код создаст для вас плагин, который вы сможете без проблем активировать через экран плагинов.

Как добавить новую область виджетов к  теме WordPress и как кодировать виджеты

Но если вы активируете его, ничего не произойдет, так как необходимо добавить код в плагин.

Создайте класс для виджета

Код для виджета идет внутри класса. Поэтому дальше добавьте этот программный код:

class kinsta_Cta_Widget extends WP_Widget {} 

Создайте возможность конструктора

Первое, что необходимо сделать внутри класса – это определить возможность конструктора для создания виджета. Добавьте этот код в фигурные скобки класса:

//widget constructor functionfunction __construct() { $widget_options = array(  'classname' => 'kinsta_cta_widget',  'description' => 'Add a call to action box with your own text and link.'); parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options);}

Это старт для строительства виджета.

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

Что такое виджеты WordPress и как их использовать для параметра веб-сайта.

Создать форму для вывода виджета

Далее нам понадобится форма, которая будет использоваться экраном виджетов и настройщиком для создания виджета. Добавьте этот программный код все ещё внутри скобок.

//function to output the widget formfunction form( $instance) { $title =! empty( $instance['title'])? $instance['title']: ''; $link =! empty( $instance['link'])? $instance['link']: 'Your link here'; $text =! empty( $instance['text'])? $instance['text']: 'Your text here';?> <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label> <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /> <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label> <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /> <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label> <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /><?php }

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

Создать возможность для сохранения виджета

Сейчас необходимо сохранить все, что вводится в эту форму. Добавьте программный код:

//function to define the data saved by the widgetfunction update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = strip_tags( $new_instance['title'] ); $instance['text'] = strip_tags( $new_instance['text'] ); $instance['link'] = strip_tags( $new_instance['link'] ); return $instance;          } 

Это сохранит введенные посетителями данные в параметра виджета.

Создайте возможность для вывода виджета

Сейчас необходимо добавить код, который будет выводить виджет на веб-сайте. Снова добавьте это в фигурные скобки:

//function to display the widget in the sitefunction widget( $args, $instance ) { //define variables $title = apply_filters( 'widget_title', $instance['title'] ); $text = $instance['text']; $link = $instance['link']; //output code echo $args['before_widget']; ?> <div class="cta">  <?php if ( ! empty( $title ) ) {   echo $before_title . $title . $after_title;  };  echo '<a href="' . $link . '">' . $text . '</a>';  ?> </div> <?php echo $args['after_widget'];}

Сейчас сохраните файл плагина. Перейдите на экран виджетов, и вы увидите виджет Призыв к действию.

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

Как добавить новую область виджетов к  теме WordPress и как кодировать виджеты
Возможно, теперь это выглядит не отлично. Просто необходимо для стилизации добавить CSS.

Добавление CSS в виджет

Чтобы добавить CSS в плагин, необходимо создать таблицу стилей и поставить ее в очередь в плагине. Добавьте этот код к файлу плагина перед классом.

function kinsta_widget_enqueue_styles() { wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) ); wp_enqueue_style( 'widget_cta_css' );}add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' ); 

Сейчас вам необходимо добавить файл style.css в папку плагина и добавить к нему любой стиль.

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

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

Если вы хотели бы увидеть код для рассмотренного этого плагина, включая стили, найдите его на Github .Виджеты WordPress могут оживить веб-сайт, заполучить больше регистраций или превращать пользователей в покупателей. Вы можете вставить виджеты WordPress в любую существующую область виджетов или добавить дополнительные области виджетов, чтобы добавлять виджеты куда вам хочется.WordPress поставляется с несколькими предварительно установленными плагинами, иные – можете без труда установить при помощи плагинов. Но если вы чувствуете себя комфортно, то можете без труда кодировать собственные виджеты при помощи API виджетов.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *