• Facebook
  • LinkedIn
  • EN EN EN en
  • LV LV LV lv
  • RU RU RU ru
[email protected] | +371 29394520
Coma Web Development
  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
    • Обслуживание сайтов на WordPress
    • LiteSpeed WordPress хостинг
    • Shared WordPress хостинг
  • Работы
    • Сайты-визитки
    • Корпоративные сайты
    • Интернет-магазины
  • О нас
    • Преимущества
    • Вакансии
  • Цены
  • FAQ
  • Отзывы
  • Контакты
  • Menu Menu
canstockphoto20514218

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

Sep 11, 2016/0 Comments/in WordPress, Туториалы /by Vadim Pavlovich

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

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

WordPress виджеты изначально создавались для предоставления лёгкого способа управления дизайном и структурой темы. Интересно также то, что вы можете перетащить виджет на любую боковую панель или область для виджетов вашего сайта. Это даёт больше свободы для разработчиков плагинов и тем. Они могут добавить функционал в свои продукты и дают возможность пользователям решать, когда и где использовать эти функции без какой-либо головной боли с кодом. Также пользователь может создать свой собственный виджет в специальном плагине, и вы сможете перетащить его на любую тему, которую вы используете.

WordPress

Создание виджета в WordPress

Перед тем как начать, было бы хорошо, если вы создадите сайт-специфический плагин, куда вы будете вставлять код виджета. Вы также можете вставлять его в файл вашей темы functions.php. Но сайт-специфический плагин лучше.

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

// Создание виджета
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Имя виджета появится в UI
__('Our Widget', 'wpb_widget_domain'), 

// Описание виджета
array( 'description' => __( 'Наш простой виджет', 'wpb_widget_domain' ), ) 
);
}

// Здесь происходит работа виджета
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'];

// Здесь работает код и выводится результат
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
		
// Конец виджета
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Форма администратора виджета
?>


<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 
}
	
// Обновление виджета
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
} // Класс wpb_widget заканчивается здесь

// Регистрация и загрузка виджета
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Теперь перейдите в Appearance » Widgets, перетащите наш виджет на вашу боковую панель, чтобы увидеть виджет в действии.

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

Осталось лишь пара вещей, которые вы можете нам задать. Например, что делает wpb_text_domain? WordPress использует gettext для управления переводами и локализациями. Этот wpb_text_domain и __e сообщают gettext , чтобы он делал строку доступной для перевода. Посмотрите также нашу статью, как найти и перевести тему для WordPress.

Надеемся эта статья помогла вам научится создавать пользовательские виджеты на WordPress.


Наша специальность – разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации – [email protected], +371 29394520


Поделиться публикацией
  • Share on Facebook
  • Share on Twitter
  • Share on WhatsApp
  • Share on LinkedIn
  • Share on Vk
  • Share by Mail

Search

Новые работы в портфолио

  • Lofoten Dyreklinikk 1Lofoten DyreklinikkMar 18, 2021 - 12:36
  • My Fruits 2My FruitsJan 28, 2021 - 19:59
  • The Raven 3The RavenJan 15, 2021 - 19:05
  • Skyn 4SkynDec 22, 2020 - 17:11
  • Tetra Hemp Company 5Tetra Hemp CompanyDec 22, 2020 - 17:07

О нас

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

Каждый проект планируется, оценивается, разрабатывается и поддерживается индивидуально.

Контакты

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

+371 29394520
[email protected]

SIA YUVA
Reģ. Nr.: 42403034996
PVN reģ. Nr.: LV42403034996
Банк: A/S Swedbank
Счёт: LV16HABA0551038070386

Навигация

  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
  • О нас
  • FAQ
  • Отзывы
  • Блог
  • Контакты
Developed in coma.lv (естественно). Работаем с 2010 года.
  • Facebook
  • LinkedIn
Scroll to top