Як створити різні сайдбари для сторінок, записів та категорій. Як додати додатковий sidebar для віджетів у WordPress

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

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

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

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

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

", "after_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надати сайдбару потрібного вигляду.

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

    "Все придумано і все продумано".

    Мені дуже подобається цей слоган шведської крамниці «Ікеа».

    Він всеосяжний.

    Тому що це справді так і є.

    Люди вже давно придумали та створили безліч чудових речей та програм.

    Але дуже багато хто з нас не знає, чого вони хочуть, поки їм цього не запропонують.

    Ось так і я досить довго існувала, маючи на своєму сайті нудний сірий віджет «Свіжі публікації». Дехто називає його «Останні записи». І виглядав він приблизно так.

    Зрозуміло, що простий перелік заголовків нових статей приваблював, хіба що, постійних відвідувачів, які мені довіряють.

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

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

    Виявляється, вже давно створено спеціальні плагіни WordPress, які дають змогу ілюструвати віджет «Свіжі (останні) записи».

    Просто в мене до цього руки не доходили.

    А може, я просто не зустрічала на інших блогах відповідних прикладів.

    Як організувати віджет Свіжі записи з картинками WordPress.

    Я перепробувала кілька плагінів:
    Recent Posts Widget Extended;
    Recent Posts Widget With Thumbnails;
    Newpost Catch.

    Є й інші.

    Але найбільше мені сподобався останній - Newpost Catch. До речі, не лише мені.

    Цей плагін дозволяє додавати в зазначений віджет як мініатюру запису, так і просто перше зустрічне зображення зі статті.

    Якщо хтось ще не знає, що таке мініатюра, то розповім трохи докладніше.

    Кожна стаття має можливість створити таку мініатюру — спеціальну картинку-заставку вказаного розміру, яку зазвичай використовують на початку публікації. Якщо Ваша тема (шаблон) Вордпрес це передбачає. А якщо не передбачає, то варто подбати, щоби цю функцію додати.

    Я сама нещодавно звернула увагу на таку можливість, але з того часу регулярно створюю мініатюри для кожної нового запису(Статті). І хочу відредагувати таким чином інші записи на моєму блозі, де я раніше цього не робила. Мініатюри можна буде потім використовувати у різних місцях, а не лише у статті.

    Але це вже зовсім інша історія.

    Повернімося до віджету Нові публікації (Останні записи з картинками).

    Якщо у Вас вузька бічна колонка (сайдбар), його можна організувати в такому вигляді, як у мене. Я поставила велику картинку, а назву статті розмістила під нею.

    А у випадку широкого сайдбару, можна розташувати невелику ілюстрацію зліва, а сам опис статті поруч праворуч.

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

    Можна організувати віджет «Свіжі записи з картинками» без жодних плагінів. Таку інформацію також легко знайти в інтернеті. Але коригувати код самостійно набагато складніше. І ймовірність помилок більша.

    До того ж, він дозволяє додатково організувати віджети ще й для певної категорії, якщо вказати її числовий ідентифікатор ID.

    Як визначити такий ідентифікатор для кожної рубрики можна переглянути . Або встановити плагін Reveal IDs, який це показує.

    Є ще одна чудова нагода. Плагін Newpost Catch пропонує використовувати так званий короткий код - shortcode у квадратних дужках. Розміщують такий код у звичайному текстовому віджеті.

    Задаючи у шорткоді певні параметри та атрибути можна отримати цікаві комбінації для організації різних блоків. Їх можна зробити кілька на власний розсуд. Більший простір фантазії.

    Наприклад, показувати при перегляді статті поряд у сайдбарі останні записи з картинками саме з цієї поточної рубрики.

    Код виглядатиме приблизно так.

    шорткод Свіжі записи з картинками з поточної рубрики

    [ npc width = "170" height = "150" posts_per_page = "2" dynamic = "1" ]

    Де:
    width = 170 - ширина картинки;
    height = 150 - висота картинки;
    posts_per_page=2 - кількість записів у віджеті;
    dynamic=1 – виведення статей із поточної категорії.

    Усі числові значення, крім останнього рядка (dynamic=1), можна змінювати на власний розсуд.

    Але треба сказати, що на тренувальному блозі, організований таким чином віджет, у мене чудово заробив, а на основному сайті мені зробити це чомусь не вдалося. Розбиратимуся.

    Хоча ідея здалася мені дуже привабливою!

    Уявляєте, відриває читач будь-яку статтю, а у бічній колонці автоматично з'являється блок, що пропонує свіжі публікації з картинками саме з тієї рубрики, яка його зацікавила.

    І все це можна зробити лише за допомогою одного єдиного текстового віджету!

    Здорово! Люблю такі нестандартні рішення.

    У мене, як Ви пам'ятаєте, якщо читали попередню статтю, є блоки, де показуються найцікавіші (на мій погляд) статті з кожної рубрики.

    Але віджет з ілюстраціями та останніми публікаціями з поточної категорії я теж додала б.

    Дерзайте! Може у Вас одразу все вийде!

    Отакі цікаві можливості іноді чомусь ховаються від наших очей.

    А всього й треба, що виявляти постійну допитливість.

    Побачив на дружньому сайті цікаву знахідку, відкрий код сторінки за Ctrl+U.

    Подивися, за допомогою якого плагіна це організовано.

    Просто задай, відкривши віконце для пошуку за допомогою Ctrl+F, там слово plugins, і побачиш усі плагіни WordPress, які використовує автор на цій сторінці.

    Все просто.

    Ну, а на моєму сайті можна навіть і не турбувати себе пошуком, а перейти на сторінку ««, де в самому низу є таблиця з усіма встановленими у мене плагінами та їх докладним описом.

    Я спеціально збираю таку інформацію для зручності читачів блогу.

    Найновіші Публікації з Картинками.

    Свіжого не буває! Спробуйте!

    Перш ніж сказати як додавати мініатюри, хочу пояснити, що саме потрібно додавати в мініатюри.

    Мікророзмітка Schema.org/BlogPosting

    Щоб ваш сайт на базі теми дизайну займав вищі позиції в пошуковій видачі, на тему дизайну впроваджено мікропримітку формату schema.org.

    Дана мікророзмітка має певні обов'язкові вимоги, за дотриманням яких стежить Google.
    Однією з обов'язкових вимог є наявність зображень для кожного запису блогу.
    Але не просто зображень, а також мета-даних про це зображення – висоту та ширину зображення.

    Приблизно так має виглядати код зображень для запису блога:

    Куди вставляти цей код

    Цей код потрібно вставити в Додаткові параметризаписи у програмі Блог.
    Щоб їх знайти, потрібно відкрити редактор запису і в правому сайдбарі натиснути на кнопку "редагувати" під заголовком Мета

    Ось у це поле і потрібно вставити код.

    Як вставляти код

    Додаткові параметри Webasyst влаштовані таким чином, що новий рядок дорівнює новому параметру. І якщо вставити туди код у вигляді, що читається, то це може викликати помилки.

    Тому вставляти код потрібно так:

    Копіюєте код:

    І вставляєте його у полі "Додаткові параметри".
    Потім вказуєте посилання на зображення в атрибуті src, змінюєте alt на свій, а також вказуєте розміри зображення в мета-тегах.

    Потім на самому початку коду вам потрібно вказати ім'я параметра і знак: g_thumb=

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

    Ось як це має виглядати приблизно:

    Зображення на всю ширину

    При додаванні даного коду, ваше зображення буде стиснуто до розмірів 250px завширшки і обведено рамкою.
    Якщо ви хочете, відображати зображення на всю ширину блоку, то вам потрібно видалити з коду зображення class="post-thumb". Тобто код із зображенням має виглядати так:

    Як і куди завантажувати зображення

    Про те, куди і як завантажувати зображення можна прочитати в .

    Вітаю читачів. Напевно, на вашому WordPress сайті більше одного типу контенту. Так чому ж у більшості випадків ваш сайдбар один і той же для кожної категорії та сторінки? Використання різних сайдбарів для різних сторінокі категорій дозволяє запропонувати читачам те, що найбільше задовольнить їхні потреби. І сьогодні ми розглянемо чудовий плагін якраз для цих цілей.

    Коли різні сайдбари для різних сторінок чи категорій – це гарна ідея?

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

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

    Але справа не лише у зручності користувачів.

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

    Різні сайдбари для різного контенту

    Для цього вам знадобиться плагін Content Aware Sidebars.

    Content Aware Sidebars працює з усіма темами та дозволяє вам створити необмежену кількість кастомних сайдбарів для:

    • Записів
    • Сторінок
    • Категорій
    • Кастомних типів записів

    Також ви можете використовувати Content Aware Sidebars для відображення сайдбарів у ваших магазинах або .

    Ще одна потужна "фіча" полягає в тому, що ви можете пов'язати ці умови разом. Наприклад, ви можете мати сайдбар, який відображається і на одиниці вашого блогу, і для кастомного типу запису.

    Як використовувати Content Aware Sidebars

    Крок 1: Створіть новий сайдбар

    Після встановлення та активації Content Aware Sidebars, ви побачите нове посилання Sidebars в панелі керування, яка дозволить вам керувати всіма сайдбарами

    Щоб почати клацаємо на Add New (Додати новий):

    Крок 2: Виберіть ваші умови

    Умови (Conditions) – те, що запускає той чи інший сайдбар. Наприклад, якщо ви вибрали умову Category, новий сайдбар буде відображатися в цій категорії.

    Ви можете додати безліч умов – але зверніть увагу на різницю між І (AND) та АБО (OR).

    Якщо ви використовуєте And, то всі умови повинні збігтися в ту саму одиницю часу для того, щоб сайдбар відобразився. Якщо ви використовуєте Or, ваш сайдбар з'явиться, якщо збігається хоча б одна умова:

    Крок 3: виберіть опції

    Потім оберіть ваші опції (Options) у правій сторонівашого екрану

    Потрібно зробити 4 речі:

    Action– Ви можете повністю замінити існуючий сайдбар новим. Або існуючий сайдбар може доповнитися новим: тобто у вас буде базовий сайдбар, який у разі потреби доповнюватиметься необхідною інформацією.
    Target Sidebar– це той сайдбар, який ви хочете замінити чи міксувати
    Merge Position– якщо ви вибрали Merge і не Replace, то тут ви можете вказати, чи додається додатковий контент вище або нижче існуючого
    Visibility– видимість можна налаштувати за статусом користувача (або ролі в Pro версії).
    Наприклад, щоб повністю замінити існуючий сайдбар, я налаштував плагін ось так:

    і якщо ви хочете додати контент вашого нового сайдбара вище за контент існуючого сайдбару, то це буде виглядати так:

    Крок 4: Вибираємо розклад

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

    Якщо ви надаєте обмежену пропозицію, ця опція для вас. Якщо ж ви її проігноруєте, то ваш сайдбар показуватиметься 24/7:

    Зберігаємо налаштування

    Крок 5: Додаємо контент у ваш новий сайдбар

    Після збереження нового сайдбару, ви можете додати контент туди в звичайному віджет-інтерфейсі. Так що йдемо в Зовнішній вигляд→ Віджети та бачимо наш новий сайдбар:

    ви можете просто перетягнути віджет, як завжди:

    або якщо ви хочете швидко увімкнути або вимкнути сайдбар, просто скористайтесь повзунками:

    Конфлікт кастомних сайдбарів Використовуйте примусову заміну.

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

    Не переживайте, чи є вбудований механізм, який дозволяє вирішити цю проблему

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

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

    Якщо ви налаштуєте тільки один сайдбар, як Forced Replace, він повністю замістить будь-який інший сайдбар. Тож ви можете зібрати «сайдбар-бос». Якщо ви увімкнути у всіх сайдбарів Forced Replace, то виведеться той, який завантажиться найшвидше.

    Всім привіт! Минув уже тиждень, як ми поїхали з Пітера і оселилися в селі Хіккадува на Шрі-Ланці. Трохи докладніше про це наприкінці посту.

    Сьогодні ви дізнаєтесь, як створювати, додавати та редагувати мініатюри до записів у Вордпрес. Розберемося, для чого вони потрібні, а також про те, як можна додати прев'ю на блог автоматично.

    Як використовують мініатюри на WordPress-блозі?

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

    Дуже важливо, щоб у кожному місці відображення мініатюр вони були стиснуті до того розміру, в якому ми їх бачимо на сайті. Звичайно, можна було б виводити повнорозмірні картинки і просто ставити їм невеликі розміри засобами CSS-стилів. Але тоді браузеру щоразу доведеться завантажувати багато великих важких зображень, від чого сайт почне завантажуватися дуже повільно. На щастя, є можливість автоматично стискати картинки до потрібного розміру.

    Тепер перейдемо до того, як виводити мініатюри на WordPress-блозі та їх настроювання.

    Висновок прев'ю до запису WordPress

    Щоб перевірити, чи підтримує ваш шаблон WordPressвиведення мініатюр, потрібно зайти до редактора записів або сторінок. Якщо підтримує, ви повинні побачити таке:

    У мене ця опція знаходиться в нижньому правому куті на сторінці редагування.

    Тепер, щоб створити превьюшку для статті, натискаємо "Задати мініатюру".

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

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

    Задати розміри мініатюри до записів WordPress можна в адмінці: «Налаштування» — «Медіафайли»:

    Що ж робити, якщо виведення мініатюр не передбачене у вашій темі, а вам вони потрібні?

    Для цього можна використати наступну функціюу файл functions.php вашої теми:

    add_theme_support ( 'post-thumbnails'); ?>

    Авто мініатюри в Вордпрес за допомогою плагіна

    Добре, якщо ви справно додавали мініатюри до кожного запису під час їх створення. Але що робити, якщо на вашому блозі вже є безліч постів без прев'ю? Або як змінити розміри всіх мініатюр WordPress, після зміни дизайну блогу? Знову відкривати кожний запис та редагувати його надто трудомістко.

    На щастя, для того, щоб спростити нам життя, створені плагіни для автоматичної генерації мініатюр до записів WordPress.

    Для того, щоб знайти відповідний плагін, введемо в рядку їх пошуку thumbnails (з англ. - ескізи).

    Таким чином, ми знайдемо найактуальніші та найпопулярніші плагіни для нашого завдання.

    Один із найчастіше використовуваних і простих плагінів для зміни розмірів всіх мініатюр у WordPress – Regenerate Thumbnails:

    Після установки, заходимо "Інструменти" - "Regen.Thumbnails":

    У вікні, натискаємо кнопку «Regenerate All Thumbnails», якщо ви хочете підігнати все прев'ю до заданого в налаштуваннях блогу розміру.

    Чекаємо, поки закінчиться процес:

    Один з найпростіших плагінів по вставці автомобільних мініатюр до всіх записів на Вордпрес - Easy Add Thumbnail.

    Він автоматично створює превьюшку на основі першої картинки у пості. Для цього вам досить просто активувати його, нічого налаштовувати не потрібно.

    Ще один плагін для створення мініатюр до записів WordPress – Generate Post Thumbnails. Він дозволяє задати номер картинки в записі, за якою формуватиметься прев'ю.

    Як бачите, вивести мініатюри в WordPress і навіть автоматично їх генерувати дуже просто.

    P.S.Хіккадува – чудове туристичне містечко на південно-східному узбережжі Шрі-Ланки. Тут нам подобається: буйна соковита рослинність, чистий бурхливий океан із величезними хвилями, багато кокосів та інших фруктів, доброзичливі місцеві жителі. Знімаємо будиночок за 45 000 рупій (21 000 рублів). Сезон дощів зараз закінчується і в найближчі кілька місяців погода має бути чудовою! Приїжджайте в гості:)

    Підключення до інтернету