Чек лист по WP 3 часть

Дневник разработчика

Подключение поиска на сайте

Для того что бы оживить любу. форму поиска в верстке, при натяжке её на WP, нам достаточно найти форму поиска и выполнить:

В поле поиска и добавить атрибут name=»s»

В теге <form> добавить атрибут action и в значении атрибута прописать php функцию, которая будет генерировать ссылку на домашнюю страничку сайта.
Так же важно что бы в теге форм был указан атрибут method=»get» или его не должно быть вовсе (в таком случае WP подставит его самостоятельно)
Вот такая конструкция получается:

<form action="<?php echo site_url(); ?>" method="get">
    <imput type="search" name="s"></imput>
</form>

Создание отдельного шаблона для вывода результатов поиска по сайту

По сути если страницы search.php не создавать — результаты поиска будут выводится при помощи шаблона index.php но мы же хотим сделать всё как следует и внятно. Поэтому давайте создадим в корне темы отдельный шаблон для результатов поиска.

Вариант использования стандартного шаблона для отображения результатов поиска

Для того что бы отображать результаты поиска по сайту при помощи стандартного шаблона index.php и при этом отображать какую то информацию только при показе этих результатов, нам потребуется доработать основной шаблон и прописать условие.

В условии мы пишем, что если в шаблоне показывается страница поиска под названием search, то мы выводим фрагмент разметки. Ну и во фрагменте разметки мы подставляем обычную wp-функцию для отображения поискового запроса <?php the_search_query(); ?>:

<?php if( is_search() ) :  ?>
  <h1>Результаты поиска по запросу: &laquo;<?php the_search_query(); ?>&raquo;</h1>
<?php endif; ?>

Добавляем вывод сообщения на тот случай, если в результате поиска ничего не найдено

Для этого достаточно в конце цикла вывода постов, в шаблоне прописать инструкцию что показывать, если постов нет:

<?php else: ?>
  <p>По вашему запросу ничего не найдено.</p>
<? endif; ?>
Чек лист по WP 3 часть

Работа с изображениями при разработке шаблона на WP

Работа с основным изображением записей

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

Это делается при помощи ввода параметра в файле functions.php

Чек лист по WP 3 часть
add_theme_support( 'post-thumbnails', array('post', 'page') );

После того как вы сохраните эту команду — в админке, при создании записей блога у вас появится соответствующая опция для добавления изображения записи

Чек лист по WP 3 часть
Изображение записи в старых версиях WP назывались миниатюры. На английском они называются Post Thumbnails.

У этой функции есть дополнительный (второй параметр), который содержит перечисление тех типов записей, для которых нужно использовать этот функционал. Для того что бы активировать thumbnails не только для записей, но и для страниц, можно указать это в нём. Получаем конструкцию вида:

add_theme_support( 'post-thumbnails', array('post', 'page') );

Настройка создания миниатюр при загрузке картинок в WP

Для настройки этого функционала нам необходимо настроить функционал в разделе НАСТРОЙКИ > МЕДИАФАЙЛЫ

Чек лист по WP 3 часть

А так же зарегистрировать свои параметры для кастомных миниатюр для изображений — это делается в файле functions.php

Чек лист по WP 3 часть

Я задаю произвольные имена для миниатюр, в зависимости от названия темы или проекта, что бы они не пересекались с зарегистрированными именами.

/* регистрируем миниатюры для постов */
add_image_size( 'misha-big', 888, 578, true );
add_image_size( 'misha-middle', 425, 324, true );
add_image_size( 'misha-sidebar', 300, 250, true );

После того как вы сохраните новые настройки, для всех картинок, которые вы будете загружать на сайт, будут автоматически создаваться миниатюры, согласно нашим настройкам.

А вот с теми картинками, которые вы уже загрузили, придётся провести дополнительные работы — миниатюры для них нужно будет пересоздать по новой.

Для этого нам реккомендуют использовать различные расширения для сайта — плагины:

Например, этот: https://ru.wordpress.org/plugins/force-regenerate-thumbnails/

но я рекомендую вам изначально настраивать миниатюры, а потом уже заниматься наполнением. А если вы что то забыли — просто перезалить картинки в вWP.

Так же стоит упомянуть про изобретение велосипедов. Если у вас есть возможность просто переназначить миниатюры из коробки — сделайте это и не мудрите с доп функционалом. Это быстрей и проще для вас.

После чего можете добавить те варианты миниатюр, которые вам понадобятся. Так вы сэкономите массу времени и избежите лишнего кода в файле functions.php

Полезная статья https://www.internet-technologies.ru/articles/kak-otklyuchit-avto-gener-razmery-image-v-wp.html

Ручная обрезка миниатюр при помощи плагина

Из за автоматического кадрирования порой приходится подправлять миниатюры. Тут нам на помощь придёт отличное расширение, которое позволяет через интерфейс админ панели редактировать положение кадра, при обрезке миниатюры с жёсткими пропорциями — https://ru.wordpress.org/plugins/manual-image-crop/

Чек лист по WP 3 часть
Наша миниатюра автоматически обрезается по строгим размерам и это не всегда получается красиво.
Чек лист по WP 3 часть
Плагин обрезки позволяет выставить позицию кадра, для более красивой обрезки.
Чек лист по WP 3 часть
Можно смещать активную область в сторону, выбирая оптимальное положение кадра для миниатюры.

SEO оптимизация для статей БЕЗ картинок при помощи условия работы функции в шаблоне

А что если в нашей статье нет главной картинки? в таком случае в анонсе нашей статьи будет выводиться пустой тег. Как то не красиво с точки зрения оптимизации кода, да и вообще. Мы же хорошие специалисты, поэтому давайте оптимизируем наш шаблон и пропишем условие, по правилам которого мы будем выводить картинку статьи, только если она есть. А в остальных случаях мы не будем этого делать.

Для реализации этого нам понадобится обернуть функцию в конструкцию условия. Вот что должно получиться:

Чек лист по WP 3 часть
Пример кода с условием отрисовки картинки для статьи.
<?php if(has_post_thumbnail() ) : ?>

  <div class="entry-img">
    <a href="<?php the_permalink(); ?>">
      <?php the_post_thumbnail('large'); ?>
    </a>
  </div>

  <? endif; ?>

Юрий Ронин