
10 мифов о социальных сетях, которые нужно разрушить
Приветствуем вас! WordPress — это удивительная система управления контентом с множеством замечательных функций, таких как виджеты. Виджеты — это блоки кода — статические, динамические, которые можно добавить в любую конкретную область вашего сайта.
По умолчанию WordPress поставляется с несколькими виджетами, такими как: архивы, календарь, категории, облака тегов, страницы, мета и т. д. Они предоставляют вам основные служебные функции и совместимы с любой темой.
Виджеты позволяют добавлять дополнительный контент на веб-сайт. Их можно использовать для добавления баннеров, рекламных объявлений, форм подписки на рассылку и т.д.
Примечание. Это руководство предназначено для пользователей DIY WordPress, которые изучают разработку и кодирование WordPress.
Создание собственного виджета в WordPress
Если вы изучаете кодирование WordPress, то вам потребуется локальная среда разработки. Вы можете установить WordPress на свой компьютер (Mac или Windows). Есть несколько способов добавить свой собственный код виджета в WordPress.
В идеале вы можете создать плагин для конкретного сайта и вставить туда код вашего виджета или вставить код в файл functions.php вашей темы. Однако он будет доступен только тогда, когда эта конкретная тема активна.
Есть еще один инструмент, который вы можете использовать, это плагин Code Snippets, который позволяет легко добавлять пользовательский код на ваш сайт.
В этом уроке мы создадим простой виджет, который просто приветствует посетителей. Цель здесь — познакомиться с классом виджетов WordPress. Создание виджетов WordPress похоже на создание плагина, но оно более простое и понятное. Давайте начнем.
Создание базового виджета WordPress
WordPress поставляется со встроенным классом виджетов. Каждый новый виджет расширяет класс виджетов WordPress.
В руководстве разработчика WordPress упоминается 18 методов, которые можно использовать с классом WP Widget.
Однако в этом уроке мы сосредоточимся на следующих методах:
- __construct (): это часть, где мы создаем идентификатор виджета, заголовок и описание.
- Widget (): Здесь мы определяем вывод, сгенерированный виджетом.
- Form (): в этой части кода мы создаем форму с параметрами виджета для бэкенда.
- Update (): это часть, где мы сохраняем параметры виджета в базе данных.
Давайте изучим следующий код, в котором мы использовали эти четыре метода внутри класса WP_Widget.
// Creating the widget class wpb_widget extends WP_Widget { // The construct part function __construct () { } // Creating widget front-end public function widget ( $args, $instance ) { } // Creating widget Backend public function form ( $instance ) { } // Updating widget replacing old instances with new public function update ( $new_instance, $old_instance ) { } // Class wpb_widget ends here }
Последний фрагмент кода — это то, что мы зарегистрируем и загрузим в WordPress.
function wpb_load_widget () { register_widget ( 'wpb_widget' ); } add_action ( 'widgets_init', 'wpb_load_widget' );
Теперь давайте соберем все это вместе, чтобы создать базовый виджет WordPress. Вы можете скопировать и вставить следующий код в свой пользовательский плагин или файл functions.php темы.
// 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 __ ('kopslav Widget', 'wpb_widget_domain'), // Widget description array ( 'description' => __ ( 'Sample widget based on kopslav 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 ?> } // 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 } // Register and load the widget function wpb_load_widget () { register_widget ( 'wpb_widget' ); } add_action ( 'widgets_init', 'wpb_load_widget' );
После добавления кода идем на страницу «Внешний вид» — «Виджеты». Вы увидите новый виджет «kopslav» в списке доступных виджетов. Вам нужно перетащить этот виджет на боковую панель.
Этот виджет имеет только одно поле для заполнения, вы можете добавить свой текст и нажать кнопку «Сохранить», чтобы сохранить изменения. Теперь вы можете посетить ваш сайт, чтобы увидеть его в действии.
Теперь давайте изучим код еще раз. Сначала мы зарегистрировали wpb_widget и загрузили наш собственный виджет. После этого мы определили, что делает этот виджет и как отображать его виджет.
Наконец, мы определили, как обрабатывать изменения, сделанные в виджете. WordPress использует gettext для обработки перевода и локализации. Это wpb_text_domainи __e говорит gettext сделать строку доступной для перевода.
Если вы создаете собственный виджет для своей темы, вы можете заменить wpb_text_domain его текстовым доменом.
Итак, кодирование виджетов требует некоторого знакомства с объектно-ориентированным программированием или, по крайней мере, некоторых знаний о цикле WordPress. Ну вот и все. Как видите ничего сложного здесь нет. Ну что у нас на этом все. Всем пока!
С уважением Вячеслав и Валерия!