zhag
@zhag
System administrator

Как кастомизировать виджеты Wordpress?

Я пишу тему на _s и использую там бутстрап.

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

Пока я придумал вот что:

1) отключить стандартные виджеты в functions.php функцией unregister_widget('WP_Nav_Menu_Widget');

2) Скопировать файл class-wp-nav-menu-widget.php переименовать его дописав приставку custom

3) Отредактировать и дописать туда нужные css классы.

Не могу понять где эти классы живут.. ткните пальцем дурака. Что генерирует html разметку? Или предложите альтернативное решение.
  • Вопрос задан
  • 2667 просмотров
Пригласить эксперта
Ответы на вопрос 3
Зависит от виджета. Применительно к меню необходимо применять кастомные Walker's, для бутстрапа есть готовый. К остальным виджетам по усмотрению. Если нужно кастомизировать только контейнер, в котором находится виджет, можно залезть в functions.php, создать там новый сайдбар \ изменить существующий (как предложили выше), и дописать там нужную разметку в свойства before_widget \ after_widget. Не забудьте указать там в списке классов %1$s %2$s - это важно. Затем есть два пути, мой и неправильный:
- жестко указываете нужные классы бутстрапа в functions.php на предыдущем этапе
- устанавливаете плагин Widget CSS Classes, и потом, при добавлении виджетов в админку, вы получите возможность указывать css-классы бутстрапа для каждого виджета. Например, каждый виджет можно представить как одну колонку. Само собой, это и есть правильный способ.

Также нужные классы можно прописать в самом шаблоне темы, "обернув" сайдбар в нужный div, если эпопея выше каким-то образом не подходит.

Ну а чтобы создать полностью свой виджет, со своей разметкой, нужно создавать собственные классы и регистрировать их в пресловутом functions.php. Это отдельная тема, и если суть только в оформлении, вам это не нужно.
Ответ написан
Комментировать
@nikfakel
Веб-разработчик
Проще имхо меню выводить через <?php wp_nav_menu(class => 'bootstrap class'); ?>
Ответ написан
Комментировать
@stoik_kpd
Зарегистрировать свой сайдбар (html разметка виджетов) и вывести его в шаблон
Подробнее - wp-kama.ru/function/register_sidebar
function register_my_widgets(){
	register_sidebar( array(
		'name' => sprintf(__('Sidebar %d'), $i ),
		'id' => "sidebar-$i",
		'description' => '',
		'class' => '',
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
		'after_widget' => "</li>\n",
		'before_title' => '<h2 class="widgettitle">',
		'after_title' => "</h2>\n",
	) );
}
add_action( 'widgets_init', 'register_my_widgets' );


С меню также - зарегистрировать свое меню, потом вывести его
Подробнее - wp-kama.ru/function/wp_nav_menu
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы