Пошукова система WordPress - відстій
Я не знаю жодного користувача WordPress, який би добре відгукувався про його пошукову систему, і я все ще не розумію, що вона майже не розвинулася з перших версій.
Мало того, що вона примітивна з точки зору того, як вона працює, вона не пропонує жодних налаштувань. Навіть зовнішній вигляд сторінки результатів залишає бажати кращого. Залежно від шаблону, який ви використовуєте, вона може мати трохи кращий дизайн, але в цілому вона все ще доісторична
Зовнішній вигляд результатів можна трохи поліпшити за допомогою CSS і адаптивності за допомогою безкоштовного плагіна (з платною версією) на кшталт Relevanssi (хоча він втричі збільшить вагу вашої бази даних) або цього іншого, який підключається до зовнішнього сервісу Algolia (безкоштовно до 10 000 пошукових запитів на місяць).
Але я залишу питання продуктивності на інший день, оскільки я все ще борюся з ним, і займуся суто естетичними реформами за допомогою GeneratePress (GP) і GenerateBlocks (GB).
GeneratePress і GenerateBlocks
GP і GB - це все ще два інструменти з молодого проекту, який потребує покращення зручності використання. GB не пропонує таку ж криву навчання, як ви могли б очікувати, якщо ви використовували такі конструктори, як Elementor або подібні.
Як ми побачимо в цьому прикладі, деякі процеси створення певних речей за допомогою GenerateBlocks набагато довші і трудомісткіші, і перші спроби можуть бути трохи відчайдушними. По мірі того, як ви додаєте все більше і більше блоків, все ускладнюється.
З іншого боку, як тільки ви зрозумієте, як вони працюють, і освоїте їх, у вас буде набагато більше контролю над зовнішнім виглядом кожного елемента.
складність врівноважується документацією та бездоганною підтримкою, в якій творці навіть допомагають з конкретними питаннями дизайну, які не входять до їхньої компетенції, тому це все ще чудова альтернатива, яку варто взяти до уваги, оскільки вони залишаються вірними своїй філософії; чесний, чистий і легкий код.
Блокові елементи
Blocks Elements, далі Elements, був доданий в липні 2020 року в GeneratePress Premium версії 1.11.0. Його можна використовувати як звичайний хук для вставки контенту майже в будь-яке місце вашого блогу без необхідності возитися з кодом.
У поєднанні з GenerateBlocks він дозволяє використовувати редактор блоків WordPress для створення хуків, заголовків, колонтитулів, бічних панелей, сторінки "Героя", шаблонів контенту тощо.
Давайте перейдемо до справи.
Шаблон структури
Перше, що ми зробимо, це створимо так званий "шаблон структури". Цей крок необов'язковий, але не завадить створити його на випадок, якщо одного разу ми захочемо змінити щось у пару кліків.
Я називаю його так, тому що він визначатиме лише структурні аспекти, а не його зміст. Тобто, якщо ми хочемо показати чи ні верхній, нижній колонтитул або його віджети, бічну панель або визначити ширину і т.д., і щоб ми не плуталися в назвах блоків решти кроків.
З головного меню "Зовнішній вигляд/Елементи" або зверху ми можемо отримати доступ до створення та управління елементами.
Для конкретного використання, яке нас цікавить, при додаванні нового елемента ми вибираємо Дизайн і натискаємо Створити.
Потім ми вказуємо елементу, на якій сторінці ми хочемо його застосувати. Для цього ми переходимо на вкладку "Правила відображення" і в позиції "Результати пошуку" вибираємо зі спадного списку "Результати пошуку".
Елементи пропонують багато можливостей для налаштування. Як ви побачите, в цьому випадаючому списку ви можете вибрати більшість позицій вашого блогу, щоб застосувати ці налаштування до них.
Ми також можемо вирішити, які елементи ми хочемо приховати. У моєму випадку я збираюся використовувати лише один варіант, щоб обійтися без бічної панелі, тому я обираю"Вміст (без бічних панелей)".
Є й інші способи приховати бічну панель, але цей, крім того, що він найпростіший і найшвидший, дозволяє відмінити будь-які зміни, просто повернувшись сюди або безпосередньо "непублікувавши" цей елемент/шаблон до статусу "Чернетка", таким чином повернувши сторінку до її початкового вигляду.
Крім того, на вкладці"Деактивувати елементи" можна залишити сторінку практично чистою. Можна сказати, що це еквівалент шаблону сторінки "Canvas" від Elementor, навіть трохи покращений і простіший у використанні.
Хороша практика, яка також рекомендується на одній з вкладок конфігурації, полягає в документуванні того, що робить кожен елемент, за допомогою внутрішніх приміток на випадок, якщо назва недостатньо описова або ми не хочемо, щоб вона була надто довгою.
Я звик додавати примітки та коментарі до всього, тому що коли ви робите багато модифікацій і з часом неминуче забуваєте, де і/або як вони були зроблені. Таким чином, у внутрішніх нотатках ви завжди матимете всю інформацію, необхідну для того, щоб відстежити ваші кроки, якщо щось піде не так або якщо ви захочете внести нові зміни.
Опублікувавши цей шаблон, ми вже налаштували сторінку результатів на свій смак, але, звичайно, тепер вона буде порожньою при виконанні пошуку, тому що нам потрібно створити і опублікувати новий елемент, який визначатиме зовнішній вигляд цих пошуків.
Ви можете залишити цей шаблон у чернетці, поки ми це робимо, і опублікувати його, коли все буде готово.
Шаблон зовнішнього вигляду
Хоча це просто ще один елемент, я називаю його "шаблоном зовнішнього вигляду" для цього невеликого посібника, тому що в той час я був трохи спантеличений номенклатурою речей і їх різними можливими варіантами використання.
Тут починається справжня робота з кастомізації.
Ми створюємо новий елемент, цього разу блок, і даємо йому описову назву.
Додаємо контейнер GenerateBlocks і всередині нього розміщуємо блок Query Loop.
І ось що ми побачимо.
Я вибрав"Start blank", щоб повторити нативну структуру результатів, але ви можете вибрати будь-який з шаблонів, які пропонує цей блок.
Найкраще спробувати їх, перш ніж прийняти рішення, тому що після того, як ви почнете працювати з одним з них, ви не зможете застосувати інший, і вам доведеться починати весь процес з нуля, якщо ви захочете його змінити (те, що повинно вирішити GB).
Після вибору шаблону виберіть блок циклу запитів (1 ), і ви побачите вкладку "Блок" праворуч (2). Натисніть на неї і в розділі "Параметри запиту" встановіть прапорець "Успадкувати запит з шаблону" (3 ). Нарешті, внизу, в розділі "Правила відображення"/"Позиція" (4 ) шукаємо і встановлюємо "Результати пошуку" і зберігаємо як чернетку.
Коли ми розгорнемо цикл запиту, ми побачимо це:
Ми додаємо ще один блок сі тки всередині "Шаблону запиту" і вибираємо потрібну структуру.
У цьому прикладі ми використаємо один з двох контейнерів , які виконуватимуть роль стовпців. Лівий стовпець буде місцем для зображення, а правий покаже уривок запису.
Ви також можете погратися з трьома контейнерами і налаштувати центральний як пробіл. Я наполягаю на тому, що можливостей багато, і найкраще з ними погратися.
Як ви могли помітити, ми будуємо майже з нуля контейнер з усіма частинами, які складуть остаточний аспект того, що ми хочемо показати. В даному випадку це результати пошуку, але ви можете зробити це і з будь-яким іншим контентом.
Тепер давайте спорожнимо ці два контейнери.
Вибираємо перший контейнер і встановлюємо його ширину на 33 (насправді вона дорівнює 33.33), як ви побачите, якщо прокрутите вниз до опцій зміни розміру.
Ми робимо те ж саме з другим контейнером і вибираємо 66 (який автоматично буде встановлено на 66.66). Очевидно, сенс полягає в тому, що всі контейнери, які ви використовуєте, складають 100, щоб вони не виходили за межі горизонтального простору сторінки і відображалися в одному рядку.
Тепер, вибравши перший контейнер, ми додамо всередину блок зображень GenerateBlocks.
Після цього з'являться різні простори для зображень. Не панікуйте, це тому, що блок виявляє цикл і відтворює його поведінку. Якщо ваша пошукова система показує десять результатів, саме ці пробіли і з'являться. Просто продовжуйте працювати над контейнером із зображенням, пропускаючи решту, яка є нічим іншим, як попереднім переглядом сторінки результатів.
Знову вибираємо контейнер із зображенням (1). У меню блоку праворуч спускаємося до пункту "Увімкнути динамічні дані" і активуємо його (2). Вибираємо "Featured image" у джерелі фонового зображення (3 ), і зображення з'являться в редакторі.
У джерелі посилання обираємо "Індивідуальне посилання" (4 ), щоб кожне зображення посилалося на відповідний пост, і знову зберігаємо як чернетку.
Тепер переходимо до другого контейнера, вибираємо його і додаємо блок "Заголовок" з GenerateBlocks.
Виділимо блок "Заголовок" (1 ) з активованими динамічними даними (2 ) і повторимо попередній процес (3), але цього разу вибравши "Заголовок" як джерело контенту (4 ) і окремий запис у джерелі посилання (5)
Нарешті, ми додамо ще один блок "Заголовок" нижче, який буде використовуватися для відображення фрагмента запису, отриманого в результаті цих кроків.
Після додавання ми повторюємо той самий процес ще раз. Вибравши цей новий блок (1 ), ми активуємо динамічні дані (2 ), а в якості джерела даних (3) - поточний запис і джерело контенту "Витяг" (4). Тепер ви також можете встановити довжину витягу в словах (5).
Наостанок ми додамо пагінацію, яка з'явиться під результатами. Для цього виберіть блок циклу запиту (1) і натисніть на маленький символ + з крапками, який ви знайдете в рядку редагування (2).
Пагінація побудована за допомогою блоку кнопок, яким вам потрібно буде надати формат, колір і форму, що відповідає вашому вигляду. Всі можливі конфігурації, яких не так вже й мало, знаходяться в меню блоку, в якому у вас завжди будуть опції для точного налаштування кожного блоку для мобільних, планшетних і настільних комп'ютерів.
На цьому я зупинюся, щоб не надто розтягувати цей пост.
Я раджу вам спочатку зробити все це в тестовому середовищі, щоб побачити, як це працює насправді, а не в попередньому перегляді, запропонованому редактором, і публікувати його, коли ви будете впевнені, що він відображається так, як треба.
Пам'ятайте також, що якщо ви зробили той блок дизайну, який був запропонований на початку і який ми називаємо Шаблон структури який ми залишили в чернетці, вам потрібно буде його опублікувати.
Це буде відправною точкою для подальшої кастомізації вигляду сторінки результатів залежно від ваших естетичних уподобань.
Багато можливостей для кастомізації
Ви можете продовжувати редагувати або додавати все, що завгодно, наприклад, блок сітки з двома контейнерами між заголовком і уривком, і додати туди дату публікації, номер автора запису або що завгодно, що вам подобається.
Якщо вам захочеться, ви навіть можете створити інший шаблон для тієї сторінки за замовчуванням, коли WordPress не знаходить результатів при пошуку, і додати кнопки допомоги або будь-який інший елемент, який допоможе відвідувачеві.
Ви можете змінити тип і розмір шрифту, вирівняти його в ту чи іншу сторону, налаштувати інтервали і розміри елементів, погратися з кольором фону, додавши зображення і фігури, додати іконки, рамки, ефекти наведення на посилання, тіні на контейнерах тощо.
І все це, не виходячи з редактора, без необхідності возитися з CSS або торкатися файлів шаблону.
Тут ви можете спробувати базовий макет моєї пошукової видачі, який мені ще потрібно відшліфувати, наприклад, додати час читання і кількість відвідувань, вписати порожні уривки і додати відсутні зображення.
Бонусний бал: якщо вам потрібно додати до результатів типове"Показано (кількість) результатів для: ( шуканеслово )", тут ви можете знайти необхідний код код та інструкції, щоб змусити його працювати з вашим блоком циклу запитів, завдяки Девіду зі служби підтримки GB
