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

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

25130
57
ПОДЕЛИТЬСЯ
Темы для 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
Сдал всю технику в аренду, списали все деньги с карточки и обосрали голуби. Что я сделал не так?