Начало > Помощен център > Апликации > WordPress > WordPress plugins – Custom Sidebars

WordPress plugins – Custom Sidebars

Помощен център

WordPress plugins – Custom Sidebars

В тази статия продължаваме темата за предоставяне на съдържание според избора на посетителя, която започнахме в Smart Recent Posts Widget. Видяхме, че плъгинът Smart Recent Posts Widget дава възможност за филтриране на страници и публикации според атрибути като категории и тагове, които ни показват предпочитанията на посетителя.

Плъгинът Custom Sidebars ни предоставя възможност да създаваме персонализирани странични ленти (Sidebars) за различни страници и публикации на основата на различни критерии като типове съдържание, категории или архив.

Като обединим възможностите на двата плъгина - Custom Sidebars и Smart Recent Posts Widget, може да създаваме сложни структурни конфигурации, които да помагат на посетителите с предоставяне на персонализирано според техния избор съдържание.

На този адрес - https://custom-sidebar.icn-demo.com/, може да видите как работи конфигурацията, чието създаване описваме подробно в статията.

Използваме нова инсталация на WordPress и тема GeneratePress, в която инсталирахме двата плъгина, конфигурирахме WordPress да зарежда статична начална страница, създадохме три страници - Audi, Mercedes и BMW, създадохме меню, през което зареждаме трите страници:

Изглед на началната страница Audi

Създадохме публикации в различни категории, с които ще демонстрираме ползата от описаната структура.

На началната страница виждаме класическа грешка - посетителя е кликнал линк към страница, търсейки информация за Audi, но в сайта има една единствена страница за този тип автомобил.

Наличието на само една страница в предпочитаната от посетителя тема, предвид многобройните модели автомобили и предлаганите различни модификации, по никакъв начин не го стимулира дори да разгледа страницата и най-вероятно след няколко секунди същият посетител вече ще разглежда страница в конкурентен сайт.

Информацията в страничната лента показва стандартните WordPress widget-и Search и Categories, но в конкретния случай те са безполезни, защото посетителя търси информация за Audi.

Нека разгледаме страницата Mercedes:

Изглед на страница Mercedes

Страницата има фокус - Mercedes, и като ключова дума, и като графика, марката фигурира навсякъде в страницата и посетителя се зарежда с очакване, че в този сайт ще открие много информация. Дори текущото съдържанието да е в описателен стил, линковете в страничната лента добавят конкретика по отношение на класовете автомобили, които сайта представя.

Кликаме първият линк Mercedes AMG Cabrio:

Изглед на страница Mercedes AMG Cabrio

Зарежда се конкретната страница, но (както при Audi) няма как само една страница да покрие всички типове кабриолети, които компанията предлага, и които са разделени в няколко ценови диапазона, с няколко типа различни двигатели и много различни нива на оборудване.

Помощ от допълнителните линкове също не можем да получим тъй като те водят към публикации за други типове автомобили, различни от кабриолета в текущата публикация.

Явно структурата на публикациите в категория Mercedes, макар и по-добра от тази на Audi, не дава усещането за пълнота и изобилие от информация, каквато търсят посетителите, и поради липсата на която, те едва ли ще поставят отметка на нашия сайт като авторитетен източник по темата Mercedes.

Нека видим какво има да ни предложи страницата BMW:

Изглед на страница BMW

На пръв поглед има копиране на структурата от страницата Mercedes - текуща обща информация с линкове към различни типове автомобили. Кликаме линка BMW Convertibles и веднага виждаме разликата:

Изглед на страница BMW Convertibles

Текущото съдържание на страницата вероятно прави преглед на цялата гама кабриолети на компанията, но през страничната лента имаме достъп до различни типове кабриолети. В примера те са три, за да е компактно изображението в статията, но използвания софтуер не поставя ограничение в броя на линковете, така че най-вероятно професионално изграден сайт на автокъща, например, ще съдържа линкове с подробна информация и изображения за всички модели в продажба.

Кликаме линк на конкретен модел - BMW Z4 Convertible:

Изглед на страница BMW Z4 Convertible

Освен общата информация за модела в текущата публикация, линковете в страничната лента ни дават достъп до конкретна информация за самия модел - двигатели, интериор и задвижващата система на покрива:

Изглед на страница BMW Z4 Interior

Почитателите на този тип кабриолет няма как да останат недоволни от предоставената информация.

В конкретния пример обаче стигаме до следния възможен проблем - колко лесно посетителя може да стигне до публикация за друг модел кабриолет ако реши да сравнява параметри.

В текущата структура на публикациите посетителя трябва да кликне четири линка (BMW > Convertibles > 8S Convertible > 8S Engines) за да достигне до информация за двигател на друг модел кабриолет. Доказано е от многобройни изследвания, че необходимостта от много кликания е сериозна причина посетителите да напускат един сайт.

Затова трябва да преценим дали да се откажем от последното ниво на детайлизиране и да предоставим цялата информация за Z4 в главната страница за модела и в същото време посетителя да може само с едно кликане в страничната лента да достъпи цялата налична информация за 8S модел:

Детайлна информация за модел BMW Z4

Детайлна информация за модел BMW 8S

Дотук в статията показахме, че софтуера ни дава възможност за неограничено детайлизиране, но до каква степен то е целесъобразно, трябва да преценяваме за всеки конкретен продукт или услуга.

В статията ще опишем подробно всички стъпки, необходими за изграждане структурата BMW - страница, странични ленти и публикации в различни, но свързани категории.

Пояснение: статията няма за цел да препоръча определена марка автомобили за сметка на други марки, просто най-бързо намерихме необходимите за статията изображения с BMW в pixabay.com и unsplash.com.

Инсталиране и конфигуриране на Custom Sidebars

Инсталираме и активираме Custom Sidebars през Plugins > Add New или по някой от описаните в тази статия начини.

Инсталиране и активиране на Custom Sidebars

Както подсказва краткото описание на плъгина, това е мениджър, чрез който управляваме създаването на персонализирани ленти за widget-и за страници, публикации и типове съдържание (custom post types).

Затова първо отиваме в Appearance > Widgets за да видим как работи софтуера.

Дясната половина на панела Widgets сега е разделена на две колони - Custom Sidebars и Theme Sidebars, в които се подреждат създадените персонализирани ленти и тези, които темата поддържа.

Custom Sidebars и Theme Sidebars в панела Widgets

Над тях се намира панел Sidebars, през който създаваме персонализираните ленти като кликнем бутона Create a new sidebar:

Панел Sidebars и бутон Create a new sidebar

Създаваме нова лента като въведем име на лентата в полето Name (полето Description за описание на лентата не е задължително) и кликнем бутона Create Sidebar:

Създаване на нова странична лента

При маркиране на полето Advanced - Edit custom wrapper code се отваря панел с допълнителни полета, в които може да въведем наш собствен HTML код (не препоръчаме ползването на тази опция):

Разширени опции Advanced - Edit custom wrapper code

Новата лента се позиционира в панела Custom Sidebars:

Новата лента в панела Custom Sidebars

За да дефинираме при какви условия новата лента ще се зарежда, кликаме линка Sidebar Location. Отваряме настройките на лентата BMW Page, която се зарежда със страницата BMW.

В панела за управление на всяка създадена лента има три групи настройки:

  • For all Single Entries matching selected criteria;
  • For Archives;
  • For Screen Sizes;

Панели за управление на Custom Sidebars

Настройка 'For all Single Entries matching selected criteria'

Настройките са разделени в две колони и чрез поставяне на отметка активираме лентата за съответната категория или тип съдържание (post type). В примера ние създаваме списък с линкове към публикации в дясната странична лента затова интерес за нас в конкретния случай представляват опциите за настройване само на лентата Right Sidebar:

Настройки за Right Sidebar

При поставяне на отметка в полето As Right Sidebar for selected categories се отваря падащо меню с всички създадени категории, в което избираме подходящата:

Меню за избор на категория

Поле с избрана категория

По абсолютно същия начин може да избираме подходящия тип съдържание в другия панел през настройката As Right Sidebar for selected Post Types:

Меню за избор на тип съдържание

Поле с избран тип съдържание

В примера настройките на лентата BMW Page изглеждат така:

Настройки на лентата BMW Page

Припомняме, че в структурата на сайта най-напред създадохме три страници (pages), които достъпваме през главното меню и чак след това управляваме публикациите (posts) през страничната лента.

Затова в настройките на лентата BMW Page, която се зарежда със страницата BMW, не въвеждаме нищо в панела за категории, а само маркираме Post Type 'Pages', защото в WordPress на страниците не се присвояват категории и тагове, а само на публикациите.

Настройка 'For Archives'

Следващата секция с настройки в прозореца Sidebar Location определя дали лентата да се зарежда при създаване на архив. И трите таба - Archive Types, Category Archives и Authors работят по един и същ начин. Маркираме област, в която желаем да се зарежда лентата, кликаме в полето, което се отваря и от падащото меню избираме съответен архив, категория или автор:

Настройка 'For Archives' за архиви

Настройка 'For Archives' за категории

Настройка 'For Archives' за автор

Настройка 'For Screen Sizes'

Последната секция с настройки For Screen Sizes се отнася до показване или скриване на лентата в зависимост от ширината на дисплея (responsive design). Примерната настройка по-долу скрива лентата в устройства с ширина на дисплея по-малка от 900 пиксела:

Настройка 'For Screen Sizes'

Намалихме ширината на браузъра до 800 пиксела и страничната лента Mercedes Page, асоциирана със страницата Mercedes, се зарежда коректно:

Зареждане на страница Mercedes при 800 пиксела ширина

Докато лентата BMW Page не се зарежда със страницата BMW поради настройката в секция For Screen Sizes:

Зареждане на страница BMW при 800 пиксела ширина

Запазваме настройките в прозореца Sidebar Location като кликнем бутона Save Changes.

Конфигуриране през metabox панел Sidebars

При инсталиране на Custom Sidebar в лентата с панели за управление на всяка отделна страница (pages), публикация (posts) и персонализиран тип съдържание (custom post type) се появява панел (metabox) за управление на страничната лента Sidebars:

Изглед на metabox панел Sidebars

Тук може да посочим коя лента да се зарежда заедно с текущата страница или публикация (CPT). Създадохме само за пример лента Custom, в която поставихме само стандартния WordPress widget Calendar и през metabox панела посочихме в дясната лента на публикацията Custom post да се зарежда Custom лентата с календара. Никаква друга настройка на лентата Custom в панела Sidebar Location не е активирана.

Точно според настройките в metabox панел Sidebars, публикацията се зарежда заедно с посочената лента:

Изглед на страница Custom post и лента Custom

Разгледахме начините на управление на Custom Sidebars, припомняме че този widget е само мениджър, който управлява условията за зареждането на лентата, но в него трябва да се инсталира widget с разширени настройки (като Smart Recent Posts Widget), чието съдържание ще се визуализира при зареждане, за да може да изградим желаната структура.

Създаване на оптимизирано съдържание

Сега може да започнем изграждането на оптимизираната структура от страници, публикации и странични ленти.

Audi Vehicles — Front Page

Създаваме страница Audi Vehicles и през Appearance > Customizer > Homepage Settings посочваме тази страница за начална страница на сайта:

Настройка Homepage Settings в Customizer

Въвеждаме заглавие Audi Vehicles, след заглавието поставяме изображението (не като featured image) и накрая кратко описание. За странична лента се зарежда лентата по подразбиране Right Sidebar (в панела Theme Sidebars), в която поставяме WordPress widget-ите Search и Categories:

Right Sidebar в панела Theme Sidebars

Създаване на страница Mercedes Vehicles

Създаваме страницата по същия начин както Audi Vehicles. Създаваме три публикации (posts) в категория Mercedes:

  • Mercedes AMG Cabrio;
  • Mercedes SUV;
  • Mercedes Luxury Cars;

Създаваме нова странична лента Mercedes Vehicles и в Sidebar Location настройваме лентата да се зарежда заедно с категория Mercedes:

Категория Mercedes в Sidebar Location

Важно: отваряме страницата Mercedes Vehicles, отваряме metabox панела Sidebars и в полето Right Sidebar от падащото меню избираме лентата Mercedes Page. Запазваме промяната на страницата като кликнем бутона Update.

Инсталираме widget-a Smart Recent Posts в новата лента Mercedes Page:

Инсталиране на Smart Recent Posts в лента Mercedes Page

Smart Recent Posts в лента Mercedes Page

Отваряме Smart Recent Posts като кликаме стрелката и маркираме следните настройки:

  • General - в полето Title въвеждаме името на лентата, както желаем да се изписва в сайта (Mercedes Vehicles);
  • Posts - в полето Post Types маркираме Posts (за всички останали ленти);
  • Taxonomy - в секция Limit to categories маркираме Mercedes;
  • Thumbnail - избираме за големина medium и за подравняване center (за всички останали ленти);
  • Display - маркираме само полето Display Title (за всички останали ленти);
  • Appearance - избираме стил Modern, полето CSS style оставяме празно (за всички останали ленти);

Запазваме настройките като кликаме бутона Save и затваряме widget-a като кликнем линка Done.

Подробно описание на всички настройки на Smart Recent Posts може да прочетете в статията .

Създаване на страница BMW Vehicles

Повтаряме абсолютно всички стъпки от създаването на предишната страница, но вече с името BMW Vehicles, създаваме и три публикации в категория BMW:

  • BMW Convertibles;
  • BMW e-Drive;
  • BMW Luxury Cars;

Създаваме странична лента BMW Page и я настройваме да се зарежда заедно с публикациите в категория BMW.

Отваряме страницата BMW Vehicles, отваряме metabox панела Sidebars и в полето Right Sidebar от падащото меню избираме лентата BMW Page. Запазваме промяната в публикацията като кликнем бутона Update.

Инсталираме Smart Recent Posts в лентата, отваряме widget-a и въвеждаме в раздела:

  • General - в полето Title въвеждаме името на лентата - BMW Vehicles;
  • Taxonomy - в секция Limit to categories маркираме категория BMW;

Запазваме настройките с Save и затваряме widget-a с Done.

Важно: Информацията в останалите табове на Smart Recent Posts трябва да копира описаните настройки за лентата Mercedes Page, които са отбелязани с '(за всички останали ленти)'.

Създаване на структура BMW e-Drive

Вече работим само с публикации и е важно да разберем как да преминаваме от една категория в друга със съответстващи линкове в страничната лента.

Създаваме три нови публикации в категория BMW-eDrive:

  • BMW i8;
  • BMW i8 interior design;
  • BMW i8 charging;

Създаваме лента BMW eDrive и през Sidebar Location я настройваме да се зарежда с публикации в категория BMW-eDrive.

Отваряме публикацията BMW e-Drive и я настройваме през metabox панела Sidebars да се зарежда с лентата BMW eDrive. Кликаме бутона Update за да запазим промяната.

Инсталираме Smart Recent Posts в лентата BMW eDrive, отваряме widget-a и въвеждаме в раздела:

  • General - в полето Title въвеждаме името на лентата - BMW eDrive;
  • Taxonomy - в секция Limit to categories маркираме категория BMW-eDrive;

Запазваме настройките с Save и затваряме widget-a като кликаме Done.

Създаване на структура BMW Luxury Cars

Повтаряме всички описани по-горе стъпки. Създаваме три нови публикации в категория BMW-Luxury:

  • BMW 5S Sedan;
  • BMW 4S Gran Coupe;
  • BMW Interior;

Създаваме лента BMW Luxury Cars и през Sidebar Location я настройваме да се зарежда с публикации в категория BMW-sedan.

Отваряме публикацията BMW Luxury Cars и я настройваме през metabox панела Sidebars да се зарежда с лентата BMW Luxury Cars. Запазваме промяната като кликнем бутона Update.

Инсталираме Smart Recent Posts в лентата BMW Luxury Cars, отваряме widget-a и въвеждаме в раздела:

  • General - в полето Title въвеждаме името на лентата - BMW Luxury Cars;
  • Taxonomy - в секция Limit to categories маркираме категория BMW-Luxury;

Запазваме настройките с Save и затваряме widget-a с Done.

Създаване на структура BMW Convertibles

Оставихме структурата на кабриолетите накрая защото при нея ще въведем още едно ниво на детайлизиране. Затова създаваме два блока от по три публикации.

Създаваме три публикации в категория BMW-Convertible:

  • BMW 2S Convertible;
  • BMW Z4 Convertible;
  • BMW 8S Convertible;

Създаваме други три публикации в категория BMW-Z4:

  • BMW Z4 Roof System;
  • BMW Z4 Interior;
  • BMW Z4 Engines;

Имаме нужда от две различни ленти, които да зареждат двата блока от публикации за кабриолети, затова създаваме две ленти:

  • BMW Convertibles;
  • BMW Z4;

които настройваме през Sidebar Location да се зареждат с публикациите в съответната категория (BMW-Convertible и BMW-Z4).

Инсталираме Smart Recent Posts в двете ленти и повтаряме действията за настройването му:

  • General - в полетата Title въвеждаме заглавие на съответната лента (BMW Convertibles и BMW Z4 Convertible);
  • Taxonomy - в секции Limit to categories маркираме съответните категории BMW-convertible и BMW-Z4;

Отваряме публикацията BMW Z4 Convertible и я настройваме през metabox панела Sidebars да се зарежда с лентата BMW Z4. Кликаме бутона Update за да запазим промяната.

Важно е да разберем, че във всички случаи, когато се променя категорията на лентата, има публикация, която служи като посредник за динамичната промяна. Тези страници-посредници присъстват като линк в лентата в определена категория, но след това през metabox панела Sidebars им присвояваме лента, която зарежда публикации от друга категория.

Например: публикацията BMW Z4 Convertible е в категория BMW-Convertibles и се зарежда като линк в лентата BMW Convertibles. Но през metabox панела Sidebars я настройваме да се зарежда с лентата BMW Z4, която конфигурираме да зарежда линкове към статии в категория BMW-Z4.

По този начин създаваме нива на детайлизиране (от общо към конкретно) с помощта на публикации-посредници - в примера, от категория BMW-Convertibles (различни кабриолети) към категория BMW Z4 Convertible (един кабриолет BMW Z4) с помощта на публикацията-посредник BMW Z4 Convertible.

Конфигуриране на Custom Sidebars с custom post type (CPT)

Създаваме CPT Tests с помощта на плъгина Custom Post Types UI. Влизаме в панела Tests и създаваме четири публикации:

  • Just Porsche…;
  • Porsche 918 Spyder;
  • Porsche Cayenne;
  • Porsche GT3 RS;

Създаваме нова лента CPT Tests, която през Sidebar Location настройваме да се зарежда с публикациите от custom post type Tests:

Настройка custom post type Tests в Sidebar Location

Инсталираме Smart Recent Posts в лентата и въвеждаме:

  • General - Title - заглавие на лентата Porsche Reviews;
  • Posts - Post Types - маркираме Tests;

Създаваме ново меню footer с достъп до примерните страници Porsche и Custom:

Меню footer с достъп до страниците Porsche и Custom

Зареждаме менюто footer през widget-a Navigation Menu в Footer Bar лентата на WordPress темата:

Настройване на Navigation Menu в Footer Bar

Редът на зареждане на статиите се определя от настройката по подразбиране за сортиране по дата (Smart Recent Posts > CPT Tests > Posts > Orderby > Date) - най-новата статия ще се зарежда като страница, следващите като линкове в лентата:

Изглед на страница Just Porsche…

Import/Export на Custom Sidebars

Изключително удобна функционалност ни предоставят разработчиците на Custom Sidebars с инструмента за импортиране/експортиране на страничните ленти.

В панела за създаване на нова лента кликаме линка Imoprt/Export Sidebars и за да експортираме създадените ленти кликаме бутона Export. Информацията се записва като JSON файл на нашия компютър.

За да импортираме персонализирани ленти кликаме Browse... и навигираме до JSON файла, след това кликаме бутона Preview:

Панел Import/Export Sidebars

Маркираме всички ленти в главния панел, които желаем да импортираме. Много полезна в нашия случай е опцията Also import all... тъй като при маркирането й всички widget-и в избраните ленти също се импортират:

Опции за импортиране в панела Import/Export Sidebars

Кликаме бутона Import selected items за да започне импортирането. След приключване на процеса, текстово съобщение ни потвърждава успешното импортиране:

Потвърждение за успешно импортиране

Изтриване на Custom Sidebar

За да изтрием Custom Sidebar кликаме иконата-кошче:

Икона-кошче в панела на Custom Sidebar

Потвърждаваме изтриването в прозореца Delete Sidebar като кликнем бутона Yes, delete it:

Потвърждаване на изтриване в прозореца Delete Sidebar

Текстово съобщение ни потвърждава успешното изтриване:

Потвърждение за успешно изтриване

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

Всъщност трябва само да инсталирате два плъгина, да изберете настройките в три панела и да повторите една и съща поредица от действия шест пъти за да пресъздете структурата, описана в статията.