Первая картинка в виде миниатюры статьи. Как сделать картинку статьи миниатюрой? Как сделать картинку в превью статьи ?
Долго думал, как назвать статью. Смысл данной статьи заключается в организации кода, который возьмёт первую картинку статьи на нашем блоге и подставит её как миниатюру в превью статьи. Зачем ? Во-первых, не хочется делать отдельно миниатюры для каждой статьи. Во-вторых, нужно уменьшить вес страниц нашего блога. В-третьих, нужно сделать её в начале статьи, при предварительном просмотре. В-четвёртых, это удобно и красиво.
Что я заметил в используемом шаблоне Tortuga? Если выбрать запись, которая установлена у меню в виде статической стартовой страницы сайта и сохранить её в шаблоне PostSlider, получается очень красивенький слайдер.
В котором есть наша миниатюра, но так как я не хочу делать её отдельно, мы исправим этот момент. То есть подложим в поле миниатюры первую картинку в статье. Затем мы уменьшим наш слайдер и немного его переместим. Хотелось бы получить в качестве превью статьи первую картинку, а в слайдере — не миниатюра, а первую картинку статьи.
Разложим нашу задумку на задачи:
- Создать функцию для WordPress, которая будет определять первую картинку и брать её за миниатюру, в случае если её нет, а такое возможно, будет подкладывать ту, что мы укажем как стандартную.Так как это циклическая задача, и WordPress постоянно должен пробегать по статьям, то необходимо добавить её в циклы,
- Вносим код размещения картинки в файлы отображения статей, контента, в те, которые отвечают за формирование категорий, архивов, статей и т.д., а именно content.php, archive.php, category.php и т.д.
- Далее, определим, куда и как нам вставить сам слайдер.
- Изменим размеры картинки,выводимой в слайдере, и исправим количество текста в превью.
Если что-то забыли, исправим по ходу.
1. Создаём функцию для определения первой картинки статьи.
/**
* добавляем первую картинку как миниатюру
* сами сделали, сами и смотрим
*/
function first_post_image() {
global $post, $posts;
$first_img = »;
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'»]([^\'»]+)[\'»].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = «/wp-content/themes/наша_тема/images/default.jpg»;
// картинка стандарт, для статей без картинок.
}
return $first_img;
}
Сам путь до картинки может быть любой — /wp—content/themes/наша_тема/images/default.jpg«, главное знать, что там лежит. У меня он получился вот такой:
/wp-content/uploads/2016/08/default.jpg
Заносим всё вышеизложенное в файл functions.php. нашей темы, по адресу /public_html/wp-content/themes/tortuga/. Его находим на нашем скаченном сайте с помощью помощников из статьи удалить лишние ссылки с сайта WordPress. Правим файл. Закачиваем его на хостинг.
2. Вносим изменения для вывода картинки в статьях.
Открываем файл content.php нашей темы Tortuga. И вставляем код для отображения картинки.
<a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»>
<img src=»<?php echo first_post_image() ?>» alt=»<?php the_title(); ?>» />
</a>
Проверяем наше превью.
Отлично. Осталось сделать их одинаковыми и взять на заметку, что размер первой картинки в статье должен быть строго определенным. Можно, конечно, добавить стиль для её отображения. Сделаем следующее: первая картинка в виде миниатюры статьи со своим стилем, который адаптирует её под строгий размер.
Тут есть свой минус. Если картинка узкая или стоит вертикально, будет просто ужасно. Поэтому лучше для блога остановиться на решении по стандартизации первой картинки в строгий размер.
Смотрим на наш Слайдер и понимаем, что у него файл вывода контента другой. И изменение нашей миниатюры в статьях на слайдер не повлияло.
Ищем то, что отвечает за слайдер. Судя по файлам это content-slider . К гадалке не ходи!
Открываем и смотрим, где тут наша картинка ?
Предлагаю заменить на наш вариант:
<a href=»<?php the_permalink() ?>» title=»<?php the_title(); ?>»>
<img src=»<?php echo first_post_image() ?>» alt=»<?php the_title(); ?>» />
</a>
Проверяем.
Отлично, Григорий, прекрасно, Константин!
Ну да, она малость ОГРОМНАЯ )))) даже не совсем малость. Но она на месте!!! Добавим к ней class, а в нём зададим размер.
- Создаём стиль в файле \public_html\wp-content\themes\tortuga\style.css. Не забываем, что мы всё делаем в нашей теме, у меня она — Tortuga.
Что мы добавляем в конец файла style.css ?
/* стиль, для размера картинки в слайдере для Тортуги
*/
.tortuga-slider {
float: left;
max-width: 300px;
max-height: 200px;
padding-left: 1px;
.tortuga-slider — название самого стиля.
float: left; — Прижать влево;
max-width: 300px; — Максимальная ширина 300 пикселей; можно делать в %, например, 40 %
max-height: 200px; — Максимальная высота 200 пикселей; можно делать в %, например, 30 %
padding-left: 1px; — Отступ с левой стороны 1 пиксель.
Проверяем наше творение.
Нууууууууc. Стало гораздо лучше. Предлагаю перенести слайдер в желаемое место и уже на месте исправить всё, что нам надо.
3. Переносим слайдер в другое место.
Открываем Chrome и переносим прямо строчку слайдера, куда нам надо. Нам же надо понять, как это будет выглядеть ?
Удерживаем левой кнопкой мыши строку, которую хотим перенести, и отпускаем в месте, куда собираемся её вставить.
Получилось чудесненько. Во всяком случае, я хотел именно сюда. Осталось понять, как его сюда прикрутить.
Размышляем логически. Шаблоны.
Что–то при изменении шаблона главной страницы на Post Slider включает слайдер. Так как шаблоны страниц — это отдельные файлы, мы просто сравним тот, где есть слайдер, и тот, где его нет.
Открываем два интересующих нас шаблона: Post Slider и Full-width Page.
Чую, одним пивом это не закончится !!!
Спускаем наш слайдер ниже строки <section id=»primary» class=»content-fullwidth content-area»> так, как мы делали в Chrome. И обрамляем его кодом: <?php ………… ?>
<?php
get_template_part( 'template-parts/post-slider' );
?>
Сохраняем. Проверяем.
На месте, отлично. Осталось привести его в читабельный вид и заняться нашими картинками.
4. Изменяем размер картинки и текста в слайдере.
Открываем Chrome, смотрим, какой class отвечает за расположение нашего текста.
.post-slider .zeeslide .slide-comtent
Ищем его нашим другом, открываем файл ,отвечающий за стиль отображения картинки в слайдере flexslider.css.
Меняем % с 30 на 60, сохраняем, проверяем.
Совсем другое дело. Отличная работа! Правда, наша первая картинка в виде миниатюры статьи — уже не совсем только первая картинка в виде миниатюры статьи, но становится всё интереснее)
Осталось причесать наш текст в размерах и по его количеству в нашем слайдере.
Не нравится то, что все мои заголовки имеют заглавные буквы. По мне так это перебор. Поэтому этот пункт я сделаю для всего сайта, отменю переделку заголовков в заглавные буквы, а уже изменение размера шрифта и количество его в превью — только для самого слайдера. Приступим.
Открываем Chrome, наблюдаем, что отвечает за такую переделку, однозначно, это стиль в файле style.css. И снимая вот эти галочки, находим ту самую функцию.
Отлично, это text-transform: uppercase; . Находим его в файле style.css
Проверяем результат.
Отлично. Теперь ограничиваем количество текста в превью слайдера.
Не будем долго лохматить бабушку.
Добавим новый стиль.
.tortuga-slider-text {
overflow: hidden;
height:72px
}
в файле style.css и применим его к тексту нашего слайдера. Стиль просто обрезает высоту блока, а в этом блоке у нас текст. Его высоту надо подогнать под высоту текста.
Ещё я решил удалить кнопку «Continue reading», понятно, что она не переведена, а мы уже это делали в статье перевод шаблона Woprdpress. Считаю, что она просто лишняя, ссылка работает как с картинки, так и с названия статьи. Удаляю «Continue reading».
Проверяем наше произведение искусства.
Меня данное детище устраивает. Подведём итоги.
Первая картинка в виде миниатюры статьи вылилась у нас в грандиозное детище!) Но всё получилось и выглядит довольно хорошо.
Всём удачи, до встречи на просторах всемирной паутины. Продолжим заниматься картинками на сайте и установим для них lightbox для блога WordPress.
Что замечено из косяков, которые появились после всего вышеописанного, читайте в статье — отображение сайта для мобильных устройств_статья в разработке.
Свежие комментарии