Що таке сайдбари WordPress і що туди можна помістити. Змінюємо місцями сайдбар та основне текстове поле Невдалий код сайдбару

Для початку нам потрібно зайти в functions.php нашої теми. Прокручуємо сторінку до кінця та перед ?> вставляємо цей код:

Function register_my_menus() ( register_nav_menus (array("header-menu" => "Menu v Shapke", "footer-menu" => "Menu v podvale")); ) if (function_exists("register_nav_menus")) ( add_action( "init", "register_my_menus");

Розберемося трохи в коді. На 4 рядку в дужках після arrayвказуємо меню:
‘header-menu’— ця назва потрібна для виведення меню на сторінку;
‘Menu v Shapke’- Назва, яка буде виводитися в адмінці в розділі "Зовнішній вигляд" - "Меню". Так само я додав нижнє меню(footer-menu). Через кому перераховуємо стільки меню, скільки вам потрібно.

Код if (function_exists('register_nav_menus'))…перевіряє, чи підтримує поточна версія WordPressфункцію реєстрації меню register_nav_menus(функція не підтримується лише у дуже старих версіях).

При верстці цього шаблону я вказав верхнє меню у файлі header.php , так як це меню на всьому сайті одне й те саме. Переходимо в header.php нашої теми і в тому місці, де має бути меню, вставляємо код:

"header-menu")); ?>

Аналогічно і для футера:

"footer-menu")); ?>

Тепер нам потрібно створити меню через адмінку. Для цього зайдемо до Адмінки (вашсайт.ру/wp-admin). Далі у вкладці "Зовнішній вигляд" вибрати "Меню".

Створюємо меню з будь-якою назвою. Я створив меню під назвою «Верхнє меню».


Тепер виберемо в блоці «Області теми» для Menu в Shapkeнаше «Верхнє меню» та натиснемо «Зберегти».

Створення сайдбару

Сайдбар потрібен, щоб у нього можна було вставляти віджети. Віджети використовують багато плагінів і якщо ваша тема не підтримує віджети, потрібно це терміново виправити.
Щоб створити сайдбар для WordPress, потрібно зайти в functions.php та додати нову функцію.

If (function_exists("register_sidebar")) ( register_sidebar(array("name" => "Left Sidebar", "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); }

Пояснення:
'name' - назва сайдбара, яка виводиться в розділі "Зовнішній вигляд" - "Віджети"
'before_title' - до назви віджету.
'before_widget' — що стоятиме до віджету. Можна встановити тег

, але я звик працювати через

. Через

легше буде налаштувати css оформлення сайдбару.
'after_widget' — що стоятиме після віджету. Якщо ви в 'before_widget' використовували

(як я), то вказуємо закриває тег

, якщо прописували

, то використовуємо

.
'after_title' - після назви віджету.

У те місце, де буде сайдбар (у мене це sidebar.php ) вставляємо:

Переходимо до Адмінки — «Зовнішній вигляд» — «Віджети» та додаємо кілька віджетів. Налаштовуємо css для гарного оформленнясайдбару. Я вже при верстці знав, як виводяться віджети і заздалегідь прописав оформлення в style.css.

Декілька сайдбарів

Щоб зробити кілька сайдбарів у functions.php, потрібно зареєструвати пару сайдбарів.
Ось як це виглядає у мене:

If (function_exists("register_sidebar")) ( register_sidebar(array("name" => "Left Sidebar", "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => "Right Sidebar", "before_widget" => " ", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => "Three Sidebar", "before_widget" => " ", "before_title" => "

", "after_title" => "

",)); }

Як ви вже помітили, для додавання ще одного сайдбару потрібно додати код:

Register_sidebar(array("name" => "Tut Luboe Nazvanie", "before_widget" => "

", "before_title" => "

", "after_title" => "

",));

А щоб вивести сайдбар на сторінці, потрібно вставити код

Three Sidebar у списку сайдбарів третій, тому код для виведення у нього буде такий:

Усі сайдбари налаштовуються через адмінку на сторінці «Віджети». Начебто все що хотів вам розповісти — розповів. Якщо у вас ще залишилися питання чи щось не виходить — пишіть у коментарі, обов'язково допоможемо.

Для додавання необхідних плагінів і доповнень на сторінку в WordPress необхідно просто перетягнути в адмінці віджет, що цікавить вас, на sidebar. Таким чином, навіть новачки в движку WordPress можуть без ускладнень видозмінити свою бічну панель (і не тільки її).

Іноді розробники теми надають на вибір кілька можливих сайдбарів, куди ви можете перетягнути widget. Але бувають і теми, де сайдбари 1-2, і вони використовуються чисто для потреб самої теми (тобто нові віджети ви туди запхати не зможете).

Та й буває, що вам просто захотілося додати новий сайдбар для розмежування логіки або з іншим оформленням.

Для початку потрібно зареєструвати ваш сайдбар. Це можна зробити у файлі functions.php у папці з шаблоном. Деякі розробники шаблонів створюють спец. функцію реєстрації сайдбарів. Наприклад, function twentyten_widgets_init() () . Це не принципово. Просто знайди місце в коді, де відбувається реєстрація. Виглядає це приблизно так:

Register_sidebar(array("name"=>"Site description", "before_widget" => "

"));

Як додати свій сайдбар?

Коли знайдеться ділянка коду, де реєструються сайдбари, можете за аналогією зареєструвати свою. Як приклад:

Register_sidebar(array("name" =>"Second sidebar", "id" => "secondary-widget-area", "before_widget" => "

", "after_widget" => "

", "before_title" => "

", "after_title" => "

",));

Name- Назва вашого sidebar. воно відображатиметься в адмінці.

id- Унікальний ідентифікатор. Він вам знадобиться при додаванні на сторінку (про це нижче).

before_widget— код/текст, який буде вставлено перед кожним віджетом.

after_widget— відповідно код/текст, який буде вставлено після кожного віджеу.

before_title- код/текст, який буде вставлено перед заголовком віджетів.

after_title- Код/текст, який буде вставлено за заголовком віджетів.

Після додавання вище наведеного коду до файлу, збережіть його та зайдіть на сторінку віджетів в адміністративній панелі. Тепер так само, як і з рештою сайдбарів, ви можете перетягувати на новий необхідні віджети. Щоб цей сайдбар відобразився на вашому веб-сайті, потрібно відкрити відповідний файл шаблону, а саме sidebar.php , і знайти код:

Вам необхідно в тому місці, де ви хочете бачити свій сайдбар, додати його між тегами, що відкривають і закривають. Буде приблизно так:

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

Як ви вже напевно помітили secondary-widget-areaпри виведенні на сторінці це ім'я сайдбара. Воно має бути таким самим, як ім'я вказане при реєстрації у файлі functions.php . Тепер, редагуючи файл style.cssнадати сайдбару потрібного вигляду.

Іноді трапляються теми, де всього один сайдбар і вони використовуються для потреб самої теми, і нові віджети ви там розмістити не зможете. Можливо, вам знадобилося змінити існуючий шаблон теми і додати додатковий сайдбар, допустимо в темі він ліворуч, а вам треба додати ще один справа.

Вирішити це завдання зовсім не складно. Достатньо внести невеликі зміни у файли теми functions.php та файл шаблону тієї сторінки, де хочете розмістити сайдбар. Як дізнатися, який файл відповідає за виведення сторінок, можете

Для початку потрібно зареєструвати новий сайдбар. Це робиться у файлі functions.php у папці із шаблоном.

", "after_widget" => "

", "before_title" => "

", "after_title" => "

",));

register_sidebar(array("name" =>"Новий сайдбар", "id" => "secondary-widget-area", "before_widget" => " Готово, на панелі управління віджетами з'явився новий сайдбар. Залишається лише трохи налаштувати йогозовнішній вигляд

у файлі style.css (можна скопіювати вигляд із існуючого)

NameЩо є що в коді
id– назва сайдбара (sidebar), вона відображатиметься в адмін панелі Віджети.
before_widget- Унікальний ідентифікатор. Потрібно при додаванні на сторінку.
after_widget– код або текст, який буде вставлено після кожного віджету.
before_title– код або текст, який буде вставлено перед заголовком віджетів.
after_title– код або текст, який буде вставлено після заголовка віджетів.

Зверніть увагу на ID, ім'я сайдбара, в даному випадку це "secondary-widget-area". Воно має бути таким самим, як ім'я вказане при реєстрації у файлі functions.php.

Сайдбар - частина практично будь-якого сайту, зазвичай розміщується зліва, праворуч від зони контенту, або перед підвалом, (footer). Сайдбари WordPress не є винятком. Різниця лише в тому, що в WordPress сайдбар – це зона, в якій автоматично виводяться віджети. Сайдбарів у WordPress можна створити необмежену кількість, але для прикладу я створю два сайдбари, ліворуч і праворуч від основної зони контенту.

Реєстрація сайдбарів WordPress

Для того, щоб сайдбари для початку відобразилися в адмінці, нам потрібно їх зареєструвати. Тобто додати у файл functions.php код:

/** * Реєстрація сайдбарів.

", "before_title" => "

", "after_title" => "

*/ function fwbs_widgets_init() ( register_sidebar(array("name" => __("Права колонка", "fwbs"), "id" => "sidebar-1", "description" => __("Права бічна колонка) ", "fwbs"), "before_widget" => " ", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => __("Ліва колонка", "fwbs"), "id" => "sidebar-2", "description" => __("Ліва колонка у футері сайту) ", "fwbs"), "before_widget" => "

",));) add_action("widgets_init", "fwbs_widgets_init");

Розбираю вищезгаданий код для створення сайдбарів WordPress

• Тут не так все складно, як здається.
• "name" => __("Права колонка", "fwbs") - назва зони віджетів, можете писати будь-яку назву, тільки акуратно між дужками, дивіться на скрині видно, де вона виводиться;
• "id" => "sidebar-1" - ID унікальний ідентифікатор, що присвоюється сайдбару, у всіх сайдбарів повинен бути свій, відмінний від інших ID;
• "description" => __("Права бічна колонка", "fwbs") - опис, аналогічний назві зони віджетів;
• - HTML тег відкриває сайдбар, що позначає початок зони сайдбара, плюс до якого присвоюється динамічно клас widget;"after_widget" => " " - закриває зону сайдбара HTML тег. Як ми знаємо, що всі HTML теги
• , за деяким винятком повинні бути парними (що відкриває та закриває);

  "before_title" => "

  " - заголовок віджета буде обернутий у тег H4 з класом

• можна змінювати значимість заголовка H1, H2, H3, H4, H5, H6 і присвоювати свої класи;"after_title" => "- закриваючий

Тепер заходимо в адміку, розділ «віджети» і дивимося результат. Ось картинка того, що вийшло у мене:

Цей код я зареєстрував дві зони віджетів WordPress, тепер потрібно вивести їх на екран.

Виведення сайдбарів WordPress

Щоб вивести сайдбари у будь-якому місці шаблону, логічно у потрібному місці прописати наступний код:

Небагато пояснень за кодом:

• - PHP код, який дає команду, якщо в сайдбарі під id=sidebar-1 знаходяться віджети, його потрібно виводити на екран, якщо віджетів немає, сайдбар не виводиться;
• - PHP код сайдбар, що викликає, під id=sidebar-1 в місці, де ви його прописали в коді шаблону.

Але як можна помітити, в шаблони WordPressкод виведення сайдбарів розміщують в окремих файлах sidebar.php, а потім вже виводять контент із файлу sidebar.php у потрібному місці шаблону. Як ми знаємо, що WordPress виводить контент динамічно і шаблон сайту складається з кількох частин, то однією з його частин є sidebar.php Давайте я так і зроблю.

Створення файлу sidebar.php

Створіть файл, наприклад sidebar-right.php, задайте йому заголовок, і вставте в нього наведений вище код. Все разом це буде виглядати так:

Як бачимо з прикладу, я доповнив код додаткової HTML розміткою. Тепер, щоб вивести зону віджетів, у потрібному місці залишається прописати таке:

Для лівої бічної колонки створюється файл sidebar-left.php і в потрібному місці шаблону виводимо так:

Як кажуть, знайдіть у коді одну відмінність.

Всі, створені сайдбари, тепер залишилося справа за малим, створити для них у шаблоні розмітку і прописати стилі CSS.

Сайдбар - частина практично будь-якого сайту, зазвичай розміщується зліва, праворуч від зони контенту, або перед підвалом, (footer). Сайдбари WordPress не є винятком. Різниця лише в тому, що в WordPress сайдбар – це зона, в якій автоматично виводяться віджети. Сайдбарів у WordPress можна створити необмежену кількість, але для прикладу я створю два сайдбари, ліворуч і праворуч від основної зони контенту.

Реєстрація сайдбарів WordPress

Для того, щоб сайдбари для початку відобразилися в адмінці, нам потрібно їх зареєструвати. Тобто додати у файл functions.php код:

/** * Реєстрація сайдбарів. */ function fwbs_widgets_init() ( register_sidebar(array("name" => __("Права колонка", "fwbs"), "id" => "sidebar-1", "description" => __("Права бічна колонка) ", "fwbs"), "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => __("Ліва колонка", "fwbs"), "id" => "sidebar-2", "description" => __("Ліва колонка у футері сайту) ", "fwbs"), "before_widget" => " ", "before_title" => "

", "after_title" => "

",));) add_action("widgets_init", "fwbs_widgets_init");

Тепер заходимо в адміку, розділ «віджети» і дивимося результат. Ось картинка того, що вийшло у мене:

Але просто так сайдбари не з'являться у Front-End, на лицьовій стороні сайту, їх потрібно буде викликати. Але про це трохи нижче.

",));) add_action("widgets_init", "fwbs_widgets_init");

Розбираю вищезгаданий код для створення сайдбарів WordPress

• "name" => __("Права колонка", "fwbs") - назва зони віджетів, можете писати будь-яку назву, тільки акуратно між дужками, дивіться на скрині видно, де вона виводиться;
• "id" => "sidebar-1" - ID унікальний ідентифікатор, що присвоюється сайдбару, у всіх сайдбарів повинен бути свій, відмінний від інших ID;
• "description" => __("Права бічна колонка", "fwbs") - опис, аналогічно назві зони віджетів;
• "description" => __("Права бічна колонка", "fwbs") - опис, аналогічний назві зони віджетів;
• - HTML тег відкриває сайдбар, що позначає початок зони сайдбара, плюс до якого присвоюється динамічно клас widget;Як ми знаємо, що всі HTML теги, за деяким винятком повинні бути парними (відкриває і закриває);
• , за деяким винятком повинні бути парними (що відкриває та закриває);

  - заголовок віджета буде обернутий в тег H4 з класом

  " - заголовок віджета буде обернутий у тег H4 з класом

• можна змінювати значимість заголовка H1, H2, H3, H4, H5, H6 і присвоювати свої класи;- закриваючий- закриваючий

Цей код я зареєстрував дві зони віджетів WordPress, тепер потрібно вивести їх на екран.

Виведення сайдбарів WordPress

Щоб вивести сайдбари у будь-якому місці шаблону, логічно у потрібному місці прописати наступний код:

Небагато пояснень за кодом:

• - PHP код, який дає команду, якщо в сайдбарі під id=sidebar-1 знаходяться віджети, його потрібно виводити на екран, якщо віджетів немає, сайдбар не виводиться;
• — PHP код сайдбар, що викликає, під id=sidebar-1 у місці, де ви його прописали в коді шаблону.

Але як можна помітити, у шаблонах WordPress код виведення сайдбарів розміщують в окремих файлах sidebar.php , а потім виводять контент з файлу sidebar.php в потрібному місці шаблону. Як ми знаємо, що WordPress виводить контент динамічно і шаблон сайту складається з кількох частин, то однією з його частин є sidebar.php Давайте я так і зроблю.

Створення файлу sidebar.php

Створіть файл, наприклад sidebar-right.php , задайте йому заголовок, і вставте в нього наведений вище код. Все разом це буде виглядати так:

Як бачимо з прикладу, я доповнив код додаткової HTML розміткою.

Тепер, щоб вивести зону віджетів, у потрібному місці залишається прописати таке:

Для лівої бічної колонки створюється файл sidebar-left.php і в потрібному місці шаблону виводимо так:

Як кажуть, знайдіть у коді одну відмінність.

Все, сайдбари створені, тепер залишилося справа за малим, створити для них шаблон HTMLрозмітку та прописати стилі CSS, але це вже зовсім інша історія. Я зараз відкрив нову рубрику