Добавляем область для виджетов (widget area) в WordPress

Добавляем область для виджетов (widget area) в WordPress

26468
60
ПОДЕЛИТЬСЯ
Темы для WordPress обычно уже имеют несколько областей виджетов (Widget Area), но чаще всего, размещение ограничивается боковой колонкой (sidebar) и подвалом (footer). А что делать, если Вам к примеру необходимо разместить такую область в начале страницы, или вообще в шапке (header)? А возможно Вы хотите иметь разные области виджетов в боковой колонке на страницах архива и на страницах блога. Выход есть, необходимо добавить собственные области туда, куда вам необходимо. Итак, давайте добавим области виджетов в шапку, в пост, и в страницу архивов.
Сначала, нам необходимо зарегистрировать свои области виджетов в WordPress. В файле functions.php вашей темы ищем регистрацию уже существующих областей, выглядит это примерно так:

В некоторых темах, например от http://www.InkThemes.com регистрация виджетов вынесена в отдельный файл, но его легко найти по функции include_once.
Добавляем свои области рядом с уже опубликованными:

 

Первый этап завершен, можно «полюбоваться» на него в административной панели:

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

 

Размещаем этот код в файле header.php. Лично я обычно размещаю внутри блока содержащего логотип, чтобы сайдбар с баннером получался на одном уровне с логотипом, справа него. Единственное что необходимо сделать, это стилями CSS выровнять его в блоке.

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

Аналогично поступаем с архивными страницами, добавляем нижеследующий код:

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

Теперь добавим последнюю область

Вставляем этот код в single.php или loop.php перед выводом if (have_posts()) : while (have_posts()) : the_post();

comments powered by HyperComments
Pavel
2013-08-30 17:54:36
А автоматически виджет никак не добавить ?
Tkacheff.ru
Tkacheff.ru
2013-09-27 13:05:36
В произвольное место, воткнуть область виджетов можно только ручками.
Алексей
2013-11-25 16:12:14
Спасибо за подробные и точные советы и ответы. На других сайтах советов полно, но барахло полное.
Илья
2013-11-27 14:03:37
У меня вопрос подскажите что ни так я сделал? Вот стили которые я прописал. Если вставлять код банера сразу в эти стили он появляется там где надо, а если через панель виджетов то нет.
Илья
2013-11-27 14:04:56
div style="background:; width:468px; height:60px; position:relative; " div style="position:relative; top:190px; right:-700px; float:right;" /div /div
Илья
2013-11-27 14:23:01
Все нашел выход просто прописывать вместе с стилями в окно виджета.
Ольга
2014-01-07 18:42:19
У меня горизонтальное меню и нужно вставить форму входа на аяксе справа от других разделов навигации. Установленный плагин идет в виде виджета в сайдбар, + Вы дали оч. хорошие подсказки (шапка /страница). А как сделать область виджета в меню? заранее,спасибо!
Tkacheff.ru
Tkacheff.ru
2014-01-07 23:45:59
Честно говоря не очень понял вопроса. Но если я правильно понял, то вам нужно найти либо в index.php либо в header.php то место в котором выводится область меню. и в этот же div вставить область виджетов. Если дадите ссылку на тему в которой нужно это сделать, то смогу подсказать конкретнее. Одно непонятно, к чему такие сложности для вывода формы входа.
Ольга
2014-01-08 00:18:45
Вы правильно поняли). Спасибо за подсказку.Буду пробовать. Вот тема http://webtuts.pl/test/sugarspice/, справа с краю хотелось сделать "вход".
Tkacheff.ru
Tkacheff.ru
2014-01-08 04:03:26
Ок. посмотрю. но не проще добавить прямо в меню пункт - Вход. и повесить на него например модальную форму входа? или Вам какая то особенная форма нужна?
Tkacheff.ru
Tkacheff.ru
2014-01-08 04:20:02
Вот смотрите, в <strong>header.php</strong> ищите вот этот блок, собственно он отвечает за меню: <pre class="php"> &lt;div id="nav-wrapper"&gt; &lt;div class="ribbon-left"&gt;&lt;/div&gt; &lt;nav id="main-nav" class="main-navigation" role="navigation"&gt; &lt;div class="skip-link"&gt;&lt;a class="screen-reader-text" href="#content"&gt;&lt;?php _e( 'Skip to content', 'sugarspice' ); ?&gt;&lt;/a&gt;&lt;/div&gt; &lt;?php if(has_nav_menu('primary')){ wp_nav_menu( array( 'theme_location'=&gt; 'primary', 'container' =&gt; false, 'menu_id' =&gt; 'nav', 'fallback_cb' =&gt; 'wp_page_menu' ) ); } else { ?&gt; &lt;ul&gt; &lt;?php wp_list_pages('title_li='); ?&gt; &lt;/ul&gt; &lt;?php } ?&gt; &lt;/nav&gt;&lt;!-- #site-navigation --&gt; &lt;div class="ribbon-right"&gt;&lt;/div&gt; &lt;/div&gt; </pre> классы ribbon-left и ribbon-right это флажки слева и справа от меню. далее если присутствует меню primary то меню выводит has_nav_menu, если же меню primary пустое, то выводится список страниц функцией wp_list_pages
Ольга
2014-01-08 11:30:37
действительно). что-то ступила)тем более никакой особенной формы не нужно. Спасибо за подсказку!
Ольга
2014-01-08 11:32:06
Большое спасибо за такую помощь. Оба варианта буду пробовать.Очень помогли.
Петр
2014-01-26 23:30:33
Здраствуите!!! http://taxi-maximum.com ,вот мой сайт.Я добавил виджет,как бы все хорошо,но немогу расместить телефоны справа(они добавлены через виджет)
Tkacheff.ru
Tkacheff.ru
2014-01-26 23:50:08
Вопрос непонятен. контент это контент, а виджет, это область в которой можно его разместить. Добавьте новый виджет <strong>Текст</strong> (Произвольный текст или HTML-код) в новую добавленную вами область. и там уже и размещайте необходимый вам контент
Петр
2014-01-27 03:04:00
я немогу настроить положения виджета, не текста в виджете
Tkacheff.ru
Tkacheff.ru
2014-01-27 22:46:18
Как то либо я Вас не понимаю, либо Вы плохо свои мысли выражаете. У Вас не получается вставить область виджета в нужное место шаблона? тогда покажите код, куда хотите вставить, и опишите место. Если я пойму что Вы хотите, - помогу. )
Петр
2014-01-28 20:42:54
вот код шапки &lt;?php /** * Header template for the theme * * Displays all of the section and everything up till . * * @package WordPress * @subpackage Twenty_Eleven * @since Twenty Eleven 1.0 */ ?&gt; <!--[if IE 6]&gt;--> &lt;html id=&quot;ie6&quot; &gt; <!--[if IE 7]&gt;--> &lt;html id=&quot;ie7&quot; &gt; <!--[if IE 8]&gt;--> &lt;html id=&quot;ie8&quot; &gt; <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]&gt;&gt;--> &lt;html &gt; &lt;!-- &lt;meta charset=&quot;" /&gt; &lt;?php // Print the tag based on what is being viewed. global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( '' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description &amp;&amp; ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged &gt;= 2 || $page &gt;= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) ); ?&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;" /&gt; &lt;link rel=&quot;pingback&quot; href=&quot;" /&gt; <!--[if lt IE 9]&gt;--> &lt;script src=&quot;/js/html5.js" type="text/javascript"&gt; &lt;?php /* * We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() &amp;&amp; get_option( &#039;thread_comments&#039; ) ) wp_enqueue_script( &#039;comment-reply&#039; ); /* * Always have wp_head() just before the closing * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to such * as styles, scripts, and meta tags. */ wp_head(); ?&gt; &lt;body &gt; <span>&lt;a href=&quot;" title="" rel="home"&gt;</a></span> <!-- Код который будет выводиться если в вашей области не добавлено --> <!-- ни одного виджета --> &lt;a href=&quot;"&gt; ID ) &amp;&amp; ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), array( $header_image_width, $header_image_width ) ) ) &amp;&amp; $image[1] &gt;= $header_image_width ) : // Houston, we have a new header image! echo get_the_post_thumbnail( $post-&gt;ID, 'post-thumbnail' ); else : // Compatibility with versions of WordPress prior to 3.4. if ( function_exists( 'get_custom_header' ) ) { $header_image_width = get_custom_header()-&gt;width; $header_image_height = get_custom_header()-&gt;height; } else { $header_image_width = HEADER_IMAGE_WIDTH; $header_image_height = HEADER_IMAGE_HEIGHT; } ?&gt; &lt;img src=&quot;" width="" height="" alt="" /&gt; </a> &lt;div class=&quot;only-search with-image"&gt; &lt;a class=&quot;assistive-text&quot; href=&quot;#content&quot; title=&quot;"&gt;</a> &lt;a class=&quot;assistive-text&quot; href=&quot;#secondary&quot; title=&quot;"&gt;</a> 'primary' ) ); ?&gt; <!-- #access --> <!-- #branding -->
Петр
2014-01-28 20:45:35
код сss для шапки /* =Header ----------------------------------------------- */ #branding { border-top: 2px solid #bbb; padding-bottom: 1000px; position: relative; z-index: 9999; } #site-title { margin-right: 400px; padding: 1.65625em 0 0; } #site-title a { color: #111; font-size: 100px; font-weight: bold; line-height: 70px; text-decoration: none; } #site-title a:hover, #site-title a:focus, #site-title a:active { color: #00FF00; } #site-description { color: #00FF00; font-size: 15px; margin: 0 20px 0.65625em 0; } #branding img { height: auto; display: block; width: 100%; }
Петр
2014-01-28 20:46:30
я хочу разместить номера телефонов в шапке с права в столбик
Tkacheff.ru
Tkacheff.ru
2014-01-29 17:31:07
стоп. а зачем вам заморочки с виджетами для статического содержимого? в чем проблема просто вставить нужный код html в header.php? или эти телефоны у вас постоянно меняются? зачем вам виджет суть которых заточенность под вывод динамического содержимого? p.s. То что сейчас у вас сделано... просто заключите вывод области виджета внутрь любого div например <pre> &lt;div id="header-tel"&gt; **Тут ваша область** &lt;/div&gt; </pre> И средствами css выровняйте этот див с логотипом шапки P.P.S. Если где то размещаете код, особенно в комментариях не забывайте заключать его в тег <code>pre</code> или <code>code</code>а то разбирать практически нереально что вы там разместили )))
Tkacheff.ru
Tkacheff.ru
2014-01-29 18:05:25
) и по моему у вас что то с версткой попутано. у вас div footer включен внутрь дива header. где то вы с разметкой походу немного накосячили, или незакрыли какой то из div-ов. для наглядности, у вас идет так <pre> &lt;div id="page"&gt; &lt;div id="header"&gt; &lt;div id="main"&gt;&lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </pre> А по логике, должно быть так: <pre> &lt;div id="page"&gt; &lt;div id="header"&gt;&lt;/div&gt; &lt;div id="main"&gt;&lt;/div&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; </pre>
Петр
2014-01-30 16:15:08
Дело в том,что я переделываю сайт.и всех ошибок еще не видел
Akiko
2014-02-22 01:23:28
Михаил, доброго времени суток. Подскажите, как мне в шапке сайта http://akiko.com.ua/ разместить два номера телефона. Хочу разместить номера телефонов в шапке по середине в столбик что посоветуете? Благодарю за ответ. Ирина.
Tkacheff.ru
Tkacheff.ru
2014-02-22 02:27:05
Честно говоря, не совсем понял в чем сложность. в header.php ищите html вывода шапки, для Вашей темы это <pre> &lt;header id="header"&gt; &lt;&lt;?php pinboard_title_tag( 'site' ); ?&gt; id="site-title"&gt; &lt;?php if ( ( '' != get_header_image() ) && ( false != get_header_image() ) ) : ?&gt; &lt;a href="&lt;?php echo home_url( '/' ); ?&gt;" rel="home"&gt; &lt;img src="&lt;?php header_image(); ?&gt;" alt="&lt;?php bloginfo( 'name' ); ?&gt;" width="&lt;?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()-&gt;width / 2 ) : get_custom_header()-&gt;width ); ?&gt;" height="&lt;?php echo ( pinboard_get_option( 'retina_header' ) ? absint( get_custom_header()-&gt;height / 2 ) : get_custom_header()-&gt;height ); ?&gt;" /&gt; &lt;/a&gt; &lt;?php endif; ?&gt; &lt;a class="home" href="&lt;?php echo home_url( '/' ); ?&gt;" rel="home"&gt;&lt;?php bloginfo( 'name' ); ?&gt;&lt;/a&gt; &lt;/&lt;?php pinboard_title_tag( 'site' ); ?&gt;&gt; &lt;?php if( ! is_active_sidebar( 1 ) ) : ?&gt; &lt;&lt;?php pinboard_title_tag( 'desc' ); ?&gt; id="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/&lt;?php pinboard_title_tag( 'desc' ); ?&gt;&gt; &lt;?php endif; ?&gt; &lt;?php get_sidebar( 'header' ); ?&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;nav id="access"&gt; &lt;a class="nav-show" href="#access"&gt;Show Navigation&lt;/a&gt; &lt;a class="nav-hide" href="#nogo"&gt;Hide Navigation&lt;/a&gt; &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary_nav' ) ); ?&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/nav&gt;&lt;!-- #access --&gt; &lt;/header&gt;&lt;!-- #header --&gt; </pre> И вставляете в нужном месте <pre> &lt;div&gt; &lt;p&gt;Тел. 322-223&lt;/p&gt; &lt;p&gt;Факс. 233-322&lt;/p&gt; &lt;/div&gt; </pre> К тому же насколько я вижу в этой теме есть область виджетов в шапке - <?php get_sidebar( 'header' ); ?> Поэтому создайте html виджет в области 'header' и вставьте туда нужный код.
Tkacheff.ru
Tkacheff.ru
2014-02-22 02:46:36
Вот как пример на вашей теме за 1 минуту накидал. http://wpboom.ru/ естественно можно как угодно раскрасить средствами CSS
Akiko
2014-02-22 02:55:35
ну вот нашла в functions.php часть кода: register_sidebar( array( 'name' =&gt; 'Header', 'description' =&gt; 'Displays in the header. Intended exclusively for displaying ads of standard dimentions.', 'before_widget' =&gt; '', 'after_widget' =&gt; '<!-- .widget -->', 'before_title' =&gt; '', 'after_title' =&gt; '' что дальше? что куда писать? куда писать телефоны?
Tkacheff.ru
Tkacheff.ru
2014-02-22 03:27:21
В header.php перед вызовом <?php get_sidebar( 'header' ); ?> либо Админка -> Внешний вид -> Виджеты В область Header добавляете виджет <b>Текст</b> И в него вставляете <pre> &lt;div&gt; &lt;p&gt;Тел. 322-223&lt;/p&gt; &lt;p&gt;Факс. 233-322&lt;/p&gt; &lt;/div&gt; </pre>
Akiko
2014-02-22 03:34:09
ну вот нашла :
Akiko
2014-02-22 03:41:04
Получилось .. Миша, спасибо! А как увеличить шрифт и цвет?
Akiko
2014-02-22 03:43:00
Миша - вы мега! Спасибо, получилось .. а как увеличить шрифт и изменить цвет этих телефонов? http://akiko.com.ua/
Tkacheff.ru
Tkacheff.ru
2014-02-22 03:43:23
Заключайте код в тэг <code>pre</code> а то не разобрать что вы там пишете
Tkacheff.ru
Tkacheff.ru
2014-02-22 03:50:35
Ну уж совсем элементарщину как то даже стыдно спрашивать ))) Ну например так <pre> &lt;div&gt; &lt;p&gt; &lt;span style="font-size:18px;color:#E05909;"&gt;моб. +38(098) 0268554&lt;/span&gt;&lt;br&gt; &lt;span style="font-size:12px;color:#125D7F;"&gt;&lt;strong&gt;факс. +38(098) 0268554&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;/div&gt; </pre>
Akiko
2014-02-22 04:01:59
куда-то исчезли кнопки социальных сетей ... странно!
Akiko
2014-02-22 04:06:11
Спасибо, Миша, Вы настоящий джентльмен ))
Tkacheff.ru
Tkacheff.ru
2014-02-22 04:11:37
;-) Вот это вряд ли ))
fursic
2015-01-26 05:25:15
Как-же вставить виджет в админбар?
Александр Примак
2015-02-07 18:59:16
ув. Михаил, как сделать так, чтобы после добавления <p style="font-size:20px;">+38 (067) 402 9704</p> в Header сайта, в котором есть ещё и картинка(logo) и социальные кнопки, положение номера телефона было на уровне с logo и социальными кнопками и чтобы кнопки не исчезал после вставки в Header текста <div> <p>Тел. 322-223</p> <p>Факс. 233-322</p> </div> ? с ув. Александр http://advocatus.info/
Михаил Ткачев
2015-02-07 19:06:35
Ну так вы поместили телефон в селектор #site-description его и редактируйте, чтобы выставить положение
Александр Примак
2015-02-08 01:27:52
решил вопрос сам интуитивно, хотя на будущее нужно разбираться, спасибо
next_mail
2015-03-05 03:16:52
Огромное СПАСИБО!!!! 2 дня вынашивал идею, а тут случайно набрел на Вашу статью и за 15 минут достиг нужного результата!!
Tkacheff.ru
Tkacheff.ru
2015-03-10 02:16:56
) не за что.
Ирина
2015-09-28 04:30:47
у меня очень серьезная проблема произошла. После того как я ввела скрипт в редакторе для добавления области виджетов, а потом пыталась обновить, у меня вообще не открылся мой сайт. Открывался белый экран на весь экран компьютера. Я вообще ничего не могу сделать через админку, так как она только как картинка, ни какие команды не работают и выводят на белый экран. Я совершенно далека от компьютерных дел, я преподаватель, и не знаю, что теперь делать. Получается у меня сейчас нет сайта вообще. Пожалуйста, подскажите, что можно сделать чтобы вернуть сайт. Я уже столько вложила в него и времени и усилий. Я просто в отчаянии. Пожалуйста, что можно сделать? Это мой сайт www.englishsteps.ru, почта - ierusha@yandex.ru. Спасибо всем, кто откликнется.
глеб
2015-10-04 03:13:44
если вы сделали бэкап, то всё нормально
Wasit
2015-11-28 01:08:59
У меня не получилось. Сайт: http://detimamapapa.ru/ :(
Tkacheff.ru
Tkacheff.ru
2015-12-03 17:31:40
информативно ))
vsdvsfv
2016-03-12 20:48:23
Люди делятся на 2 типа: те которые делают backup и те которые уже делают backup)
Иван
2016-04-22 21:43:40
Область появилась, но когда добавляю виджет он не отображается на сайте
Дмитрий
2016-05-23 22:35:49
От души благодарю! Прыгаю от радости! Столько проблем решилось!!!!
Михаил Ткачев
2016-09-18 22:36:36
) не за что
Михаил
2016-12-15 20:54:47
"Единственное что необходимо сделать, это стилями CSS выровнять его в блоке" Могли бы помочь, показать как это выглядит
Людмила Шельмук
2017-03-23 16:52:37
Добрый день! Не могли бы Вы подсказать мне как опубликовать боковое меню на сайте (WP-4-7-3)? Уже весь мозг себе сломала... Создаю, сохраняю - а на сайте его нет, и все тут. Заранее благодарю за ответ
гельды курбанов
2017-08-11 13:46:41
Здравствуйте, я хотел узнать почему не работает страница виджетов? Как узнать где ошибка? Дело не в плагинах... https://upwork.uz/
Егор Дорофеев
2017-08-11 14:16:22
Вчера кума интерeсный cекрет пoвeдалa под вoдoчку, были вчeра y них нa Др крecникa, у них дома вcе тaк класснo, видно что баблa море. oкaзываeтcя они все свoи гaджeты в аpенду нa ceрвисe cдaют a им зa это дeнежка капаeт. Гoвopит cначaла cама бoялаcь, a мyж втихapя провеpил и тeперь вcя техника у них рaбoтaет. Вот cайт тoт, http://1ink.cc/G16 вeчepом тожe пpовеpять будeм.
Пётр Егоров
2017-08-11 14:16:56
Было нeмнoго стрaшнo, a потом удивитeльнo когдa смс пиликнула чтo денeжкa нa карту пpишла, Благoдapствую Вaм за сepвиc!
Стахий Павлов
2017-08-11 14:17:30
Ну, блин, узнaли и ладнo, зaчем вездe публикoвать то?
Пупа
2017-08-24 11:19:42
Сдал всю технику в аренду, списали все деньги с карточки и обосрали голуби. Что я сделал не так?
Melina Kodes
2017-12-22 12:48:11
Согласна :) А есть еще те люди которые делают бэкап как ненормальные после чуть ли не каждого изменения. Это категория уже "вкуренных" программистов :)
Melina Kodes
2017-12-22 12:51:07
ну можно немного поковыряться в верстке(изучить HTML+CSS) и сделать через способ чтоб установить плагин редактирования стилей темы и там чисто ровными ручками прописать. :)
Melina Kodes
2017-12-22 12:54:25
Я бы так не советовала. Очень криворукий способ после которого следующие программисты которые видят такое на сайте, готовы поламать руки за такое предыдущему программисту. Незнаю, может вы так не делаете, но советовать такое я бы не стала. Через тэг style прописывать стили это ДУРНОЙ ТОН. Лучше бы рассказали какие есть плагины по редактированию css-стилей тем или на крайняк через Visual-Composer.