Многим бывает нужен широкий виджет под шапкой и меню сайта, использующего какую-то из дочерних тем Genesis. При этом он должен быть расположен до постов, так, чтобы в него можно было поставить слайдер, форму для подписки на рассылку или еще что-то.
Брайан Гарднер написал следующий код, который изначально использовался в теме eleven40 как раз для такого виджета. На самом деле этот код может использоваться в любой теме Genesis.
Несмотря на то, что это очень просто, не все догадываются заглянуть в код и забрать оттуда этот эпизод.
Создаем широкую зону для виджета
Открываем functions.php и добавляем в конец файла:
1 2 3 4 5 6 7 8 9 10 11 12 |
genesis_register_sidebar( array( 'id' => 'welcome-text', 'name' => __( 'Welcome Text', 'genesis' ), 'description' => __( 'This is the welcome text widget.', 'themename' ), ) ); add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' ); function custom_welcome_text() { genesis_widget_area( 'welcome-text', array( 'before' => ' 'after' => ' ',) ); } |
Вместо ‘themename’ нужно поставить название дочерней темы.
Добавляем виджет только на главную страницу
Если вам нужно, чтобы эта зона виджета показывалась только на главной странице сайта, можно сделать две вещи.
Либо, если вы используете плагины Jetpack, можно установить переключатель «Visibility» в соответствующее положение.
Либо можно просто использовать слегка модифицированный код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
genesis_register_sidebar( array( 'id' => 'welcome-text', 'name' => __( 'Welcome Text', 'genesis' ), 'description' => __( 'This is the welcome text widget.', 'themename' ), ) ); add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' ); function custom_welcome_text() { if ( ! is_home() ) { return; } genesis_widget_area( 'welcome-text', array( 'before' => ' 'after' => ' ',) ); } |
Добавляем оформление
В файл style.css дочерней темы добавляем следующее (и меняем по вкусу/необходимости):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Welcome Text ------------------------------------------------------------ */ .welcome-text { border-bottom: double #ddd; border-top: double #ddd; font-family: 'Lora', serif; font-size: 30px; line-height: 1.0; overflow: hidden; padding: 25px 0; text-align: center; } .welcome-text p { font-size: inherit; line-height: 1.0; margin: 0; } |
Вот и всё. Теперь у вас есть зона, в которую можно добавить слайдер или еще что-то.