Tabla de contenidos
Поисковая система WordPress — отстой
Я не знаю ни одного пользователя WordPress, который бы хорошо отзывался о его поисковой системе, и я до сих пор не понимаю, что она практически не развивалась со времен первых версий.
Она не только примитивна с точки зрения того, как она работает, она не предлагает никакой конфигурации. Даже внешний вид его страницы результатов оставляет желать лучшего. В зависимости от шаблона, который Вы используете, он может иметь немного лучший дизайн, но в целом он все еще доисторический
Внешний вид результатов можно немного улучшить с помощью CSS и отзывчивости с помощью бесплатного плагина (с платной версией) типа Relevanssi (хотя он утроит вес Вашей базы данных) или этого другого, который соединяется с внешним сервисом Algolia (бесплатно до 10 000 поисковых запросов в месяц).
Но я оставлю вопрос производительности на другой день, поскольку я все еще борюсь с ним, и займусь чисто эстетическими реформами, используя GeneratePress (GP) и GenerateBlocks (GB).
GeneratePress и GenerateBlocks
GP и GB — это все еще два инструмента из молодого проекта, в котором еще многое предстоит улучшить, GB не предлагает такой кривой обучения, как Вы ожидаете, если Вы используете такие конструкторы, как Elementor или подобные.
Как мы увидим на этом примере, некоторые процессы создания определенных вещей с помощью GenerateBlocks намного длиннее и трудоемче, и в первых попытках могут вызвать отчаяние. По мере того, как Вы добавляете все больше и больше блоков, все становится сложнее.
С другой стороны, как только Вы поймете, как они работают, и освоитесь с ними, у Вас будет гораздо больше контроля над внешним видом и ощущениями каждого элемента.
сложность уравновешивается документацией и безупречной поддержкой, в которой создатели даже помогают в специфических вопросах дизайна, не входящих в их компетенцию, так что это все еще отличная альтернатива, которую стоит принять во внимание, поскольку они остаются верны своей философии: справедливый, чистый и легкий код.
Элементы блока
Блок Элементы, далее Элементы, был добавлен в июле 2020 года в GeneratePress Premium версии 1.11.0. Его можно использовать как обычный хук для вставки содержимого практически в любое место Вашего блога без необходимости возиться с кодом.
В сочетании с GenerateBlocks он позволяет Вам использовать редактор блоков WordPress для создания хуков, заголовков, футеров, боковых панелей, страницы «Героя», шаблонов контента и т.д.
Давайте приступим к делу.
Шаблон структуры
Первое, что мы сделаем, это создадим то, что мы назовем «шаблон структуры». Этот шаг необязателен, но не помешает создать его на случай, если однажды мы захотим изменить что-то парой щелчков мыши.
Я даю ему такое название, потому что он будет определять только структурные аспекты, а не содержание. То есть, если мы хотим показать или нет хедер, футер или его виджеты, боковую панель или определить ширину и т.д., и чтобы не запутаться в названиях блоков остальных шагов.
Из главного меню Внешний вид/Элементы или сверху мы можем получить доступ к созданию и управлению элементами.
Для конкретного использования, которое нас интересует, при добавлении нового элемента мы выбираем « Дизайн » и нажимаем «Создать».
Затем мы указываем элементу, на какой странице мы хотим его применить. Для этого мы переходим на вкладку «Правила отображения» и в позиции выбираем «результаты поиска» из выпадающего списка.
Элементы предлагают много возможностей для настройки. Как Вы увидите, в этом выпадающем списке Вы можете выбрать большинство позиций Вашего блога, чтобы применить эти настройки там.
Мы также можем решить, какие элементы мы хотим скрыть. В моем случае я собираюсь использовать только один вариант, чтобы обойтись без боковой панели, поэтому я выбираю«Содержание (Без боковых панелей)«.
Существуют и другие способы скрыть боковую панель, но этот, помимо того, что он самый простой и быстрый, позволяет нам отменить любые изменения, просто вернувшись сюда или непосредственно «распубликовав» этот элемент/шаблон в статус «Черновик», тем самым вернув странице ее первоначальный вид.
Кроме того, на вкладке«Деактивировать элементы» Вы можете оставить страницу практически чистой. Можно сказать, что это эквивалент шаблона страницы «Canvas» от Elementor, даже немного улучшенный и более простой в использовании.
Хорошая практика, которая также рекомендуется на одной из вкладок конфигурации, заключается в документировании того, что делает каждый Элемент, с помощью внутренних заметок на случай, если заголовок недостаточно описателен или мы не хотим, чтобы он был слишком длинным.
Я привык добавлять примечания и комментарии ко всему, потому что когда Вы делаете много изменений и со временем неизбежно забываете, где и/или как они были сделаны. Таким образом, во внутренних заметках у Вас всегда будет вся информация, необходимая для того, чтобы проследить свои шаги, если что-то пойдет не так или если Вы захотите внести новые изменения.
Опубликовав этот шаблон, мы уже настроим страницу результатов по своему вкусу, но, конечно, теперь она будет пустой при выполнении поиска, потому что нам нужно создать и опубликовать новый элемент, который будет определять внешний вид этих поисков.
Вы можете пока оставить этот шаблон в черновиках, а опубликовать его, когда все будет готово.
Шаблон внешнего вида
Хотя это просто еще один элемент, я называю его «шаблоном внешнего вида» для этого небольшого руководства, потому что в то время я немного запутался в номенклатуре вещей и их различных возможных применениях.
Именно здесь начинается настоящая работа по настройке.
Мы создаем новый элемент, на этот раз Блок, и даем ему описательное имя.
Мы добавляем контейнер GenerateBlocks и внутри этого контейнера помещаем блок Query Loop.
И вот что мы увидим.
Я выбрал«Start blank«, чтобы воспроизвести родную структуру результатов, но Вы можете выбрать любой из шаблонов, которые предлагает этот блок.
Лучше всего попробовать их, прежде чем принять решение, потому что, начав работать с одним из них, Вы не сможете применить другой, и Вам придется начинать весь процесс с нуля, если Вы захотите его изменить (то, что должно решить GB).
После выбора шаблона, выберите блок цикла запроса (1), и справа Вы увидите вкладку «Блок» (2). Нажмите на него и отметьте опцию«Наследовать запрос от шаблона» (3) в разделе «Параметры запроса». Наконец, внизу, в разделе «Правила отображения»/»Положение» (4) ищем и устанавливаем «Результаты поиска» и сохраняем как черновик.
Когда мы развернем цикл запроса, то увидим следующее:
Мы добавляем еще один блок сетки внутри «Query Template» и выбираем нужную нам структуру.
Для примера мы собираемся использовать один из двух контейнеров , которые будут действовать как колонки. Левая колонка будет местом для главного изображения, а правая — для отрывка записи.
Вы также можете поиграть с тремя контейнерами и сконфигурировать центральный как пространство. Я настаиваю, возможностей много, и лучше всего поиграть с ними.
Как Вы могли заметить, мы создаем почти с нуля контейнер со всеми частями, которые составят окончательный аспект того, что мы хотим показать. В данном случае это результаты поиска, но Вы можете сделать это с любым другим содержимым.
Теперь давайте опустошим эти два контейнера.
Выберем первый контейнер и установим его ширину 33 (на самом деле она равна 33.33), как Вы увидите, если прокрутите вниз до опций изменения размера.
Мы делаем то же самое со вторым контейнером и выбираем значение 66 (которое автоматически устанавливается равным 66,66). Очевидно, что смысл в том, чтобы все используемые Вами контейнеры складывались в 100, чтобы они не выходили за пределы горизонтального пространства страницы и отображались на одной линии.
Теперь, выбрав первый контейнер, мы добавляем внутрь блок изображений GenerateBlocks.
Что произойдет, так это то, что появятся разные пространства для изображений. Не паникуйте, это потому, что блок обнаруживает Loop и воссоздает его поведение. Если Ваша поисковая система покажет десять результатов, то именно эти пространства и появятся. Просто продолжайте работать над контейнером с изображением, пропуская большую часть остального, которое является не более чем предварительным просмотром страницы результатов.
Мы снова выбираем контейнер, содержащий изображение (1). В меню блока справа спускаемся вниз к пункту «Включить динамические данные и активируем его (2). Выбираем «Featured image» в источнике фоновых изображений (3), и изображения появятся в редакторе.
В источнике ссылок выбираем «Индивидуальная ссылка» (4), чтобы каждое изображение ссылалось на соответствующий пост, и снова сохраняем как черновик.
Теперь перейдем ко второму контейнеру, выделим его и добавим блок «Заголовок» из GenerateBlocks.
Выбираем блок «Заголовок» (1) с активированными динамическими данными (2) и повторяем предыдущий процесс (3), но на этот раз выбираем «Заголовок» в качестве источника содержимого (4) и отдельную запись в источнике ссылки (5)
Наконец, ниже мы добавим еще один блок «Заголовок», который будет использоваться для отображения выдержки из записи, следующей за этими шагами.
После добавления мы снова повторяем тот же процесс. Выбрав этот новый блок (1), мы активируем динамические данные (2), а в качестве источника данных (3) текущую запись и источник содержимого «Extract» (4). Теперь Вы также можете установить длину выписки в словах (5).
Наконец, мы добавим пагинацию, которая будет отображаться под результатами. Для этого выберите блок цикла запроса (1) и нажмите на маленький символ + с точками, который Вы найдете на панели редактирования (2).
Пагинация построена с помощью блока кнопок, которым Вы должны будете придать формат, цвет и форму, соответствующую тому виду, который Вы ищете. Все возможные конфигурации, которых не мало, находятся в меню блока, в котором у Вас всегда будут возможности тонкой настройки каждого блока для мобильных, планшетных и настольных компьютеров.
Я собираюсь оставить это здесь, чтобы не слишком растягивать этот пост.
Я советую Вам сделать все это сначала в тестовой среде, чтобы увидеть, как это действительно работает за пределами предварительного просмотра, предлагаемого редактором, и опубликовать его, когда Вы убедитесь, что он отображается так, как нужно.
Помните также, что если Вы сделаете тот блок дизайна, который был предложен в начале и который мы называем Шаблон структуры который мы оставили в черновом варианте, Вам нужно будет опубликовать его.
Это будет отправной точкой для дальнейшей настройки внешнего вида страницы результатов в зависимости от Ваших эстетических предпочтений.
Множество возможностей для настройки
Вы можете продолжать редактировать или добавлять все, что захотите, например, блок сетки с двумя контейнерами между заголовком и отрывком и добавить туда дату публикации, номер автора записи или все, что Вам нравится.
Если Вам захочется, Вы можете даже создать другой шаблон для той безвкусной страницы по умолчанию, когда WordPress не находит результатов при поиске, и добавить кнопки помощи или любой другой элемент, который поможет посетителю.
Вы можете изменить тип и размер шрифта, выровнять его в ту или иную сторону, отрегулировать расстояние между элементами и их размеры, поиграть с цветом фона, добавляя изображения и фигуры, добавить иконки, границы, эффекты наведения на ссылки, тени на контейнеры и т.д.
И все это не выходя из редактора, без необходимости возиться с CSS или трогать файлы Вашего шаблона.
Здесь Вы можете попробовать базовый макет моих результатов поиска, которые мне еще предстоит отполировать, например, добавить время чтения и количество посещений, написать пустые выдержки и добавить недостающие тематические изображения.
Бонусный шар: Если Вам нужно добавить к результатам типичное«Показано (количество) результатов для: ( искомоеслово )«, здесь Вы можете найти необходимый код код и инструкции, чтобы заставить его работать с Вашим блоком Query Loop, благодаря Дэвиду из службы поддержки GB
