Первая картинка из записи вместо миниатюры WordPress без плагина и создание блока похожих записей

Поделиться

Доброго времени суток !
Тема этой статьи — первая картинка из записи вместо миниатюры WordPress без плагина включая блока «похожие записи». Часто авторы не добавляют миниатюры к своим записям или этой функции просто нет в теме, а через какое-то время вы решаете обзавестись таким удобством. Но вот беда, записи, которые вы добавили ранее не имеют миниатюр и если вы изменили тему или доработали ее и оформили красивый вывод картинок и текста в цикле, то старые записи будут смотреться не совсем красиво или получите первое изображение там, где не задана миниатюра, зато заодно в тех записях, где задана миниатюра получил две изображении, что и не очень приятно))) по этому пришлось допилить код.
Суть заключается в том что с помощью функции, мы вытягиваем первое изображение из записи и устанавливаем его в виде миниатюры. Как и раньше миниатюры добавлять не нужно, просто и далее продолжайте добавлять изображения в свою запись.
И так приступим к выполнению поставленной задачи.

Функция установки первой картинки в качестве миниатюры

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

//ВЫВОД ПЕРВОЙ КАРТИНКИ С ПОСТА
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 = "<?php the_post_thumbnail('thumbnail')";
// для вывода миниатюр в похожие записи 
  }
  return $first_img;
}

файл сохраним . Далее приступим к созданию блока похожих записей и вывод первого изображении записи на блоке похожих записей если не задана миниатюра.

В файл single.php в конце вставим команду:

<div class="related_posts">
<h3>Похожие записи</h3>
<?php
$categories = get_the_category($post->ID);
if ($categories) {
 $category_ids = array();
 foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
 $args=array(
 'category__in' => $category_ids,
 'post__not_in' => array($post->ID),
 'showposts'=>3,
'orderby'=>rand,
 'caller_get_posts'=>1);
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul>';
 while ($my_query->have_posts()) {
 $my_query->the_post();
?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?><div id="box-cel"><br><?php the_title(); ?></div></a></li><?php the_excerpt(); ?>
<?php
}
echo '</ul>';
}
wp_reset_query();
}
?></div>
  • Если заменить строку 'category__in' => $category_ids, на такую: 'tag__in' => $tag_ids, то сортировка похожих записей будет осуществляться по тегам.
  • В этом коде следует обратить внимание также на строку 'orderby'=>rand,. Она отвечает за случайный порядок вывода ссылок на записи. Если вы хотите, чтобы записи были показаны согласно датам создания, эту строку следует убрать.
  • Cтрока 'caller_get_posts'=>1 запрещает повторение записей под постом.
  • Cтрока 'showposts'=>3, указывает на количество выводимых записей.

У меня сначала в 19 строке после ?> и перед
<?php
}
echo ‘</ul>’;
}
wp_reset_query();
}
?></div> стоял код  <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li> Такое положение дел мне не устраивал , так, как блок выводил только те картинки , которые были назначены в качестве миниатюр , а у меня была куча записей с сторонними изображениями из других сайтов, по этому мне пришлось вместо этих строк вставить <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?><div id="box-cel"><br><?php the_title(); ?></div></a></li><?php the_excerpt(); ?>
этот код говорит, что если назначена миниатюра, то вывести миниатюру ,если не назначена, то вывести первое изображение записи .

Приведенный код нужно вставлять сразу после вывода статьи в файле single.php.

Естественно, будут выводятся изображения разного размера , по этому в style.css подправим их по своему вкусу.
Например:

/poxojie zapisi/
.related_posts #box-cel{
color:darkblue;
padding:0;
font-family:europeext;
font-weight:700;
}
.related_posts img:before{
content:"НЕТ ФОТО";
color:red;
font-size:150%;
font-family:europeext;
font-weight:800;
}
div.related_posts{
background-repeat:repeat;
background-image:url();
background-color:lemonchiffon;
background-position-y:center;
margin: 0px 0 10px;/* Отступы от верхнего и нижнего края /
float: left;/
Прижимаем блок к левому краю /
width: 100%;/
Длина блока соответствует ширине страницы /
}
.related_posts img{
background-color:#fff;
color:transparent;width:180px;
height:140px;float:left;margin-right:1em;
margin:.5em;padding:0;border:none;border-radius:50%;box-shadow:1px 5px 5px #2B1015
}
div.related_posts ul {
margin-left: 4px; /
Внешний отступ от левого края страницы /
width: 100%; /
Общая ширина блока без учета отступов от краев страницы /
}
div.related_posts li {
border:1px solid salmon;
overflow:hidden;
list-style: none; /
Отменяем нумерацию списка (1,2,3 и т.д.) /
}
div.related_posts a{
color: #000000; /
Цвет ссылки /
text-decoration:none; /
Убираем подчеркивание ссылки /
}
div.related_posts li :hover{
background-color: #ddd; /
Цвет фона ячейки при наведении курсора */
}
.related_posts .read-more{
display:none;
}
.related_posts p
{}

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

Итак, откроем файл content.php и после

<?php
        /**
         * generate_after_entry_header hook.
         *
         * @since 0.1
         *
         * @hooked generate_post_image - 10
         */
        do_action( 'generate_after_entry_header' );

        if ( generate_show_excerpt() ) : ?>
<?php 

вставим

<?php 
        /*Если надо, чтобы выводилась миниатюра, а если ее нет, первая картинка с записи, то нужно вставлять условие следующего вида:*/
        if ( has_post_thumbnail() ) {}
else { ?>
<img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?>

Таким образом задача решена.
Но если вдруг у вас никакое изображение не задано,и вы хотите,что на главной выводилась картинка по умолчанию, то в functions.php добавьте следующий код:

function get_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)){
$img_dir = get_bloginfo('template_directory');
$first_img = $img_dir . '/images/post-default.jpg';
}
return $first_img;
}

Подключаем функцию вывода первой картинки в теме

Миниатюра подключается во всех файлах где в цикле выводятся записи — это index.php, content.php, archive.php, category.php, single.php и тд,
Для подключения нужно вставить следующий код после определения цикла, который выглядит примерно так:

<?php
        /**
         * generate_after_entry_header hook.
         *
         * @since 0.1
         *
         * @hooked generate_post_image - 10
         */
        do_action( 'generate_after_entry_header' );

        if ( generate_show_excerpt() ) : ?>

Сам код вывода нашей функции:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php echo get_post_image() ?>" alt="<?php the_title(); ?>" />
</a>

так картинка будет кликабельна и по ссылке вы перейдете в саму запись.

А вот в записи нужно вывести некликабельную картинку. Для этого нужно в single.php добавить код без ссылки

<img src="<?php echo get_post_image() ?>" alt="<?php the_title(); ?>" />

Но если в записи и так выводится, то single.php не трогайте!

Теперь в Вашей теме не будет записей без миниатюр.

Еще небольшое дополнение к статье.

Если Вам надо, чтобы выводилась миниатюра, а если ее нет, первая картинка с записи, то нужно вместо сроки вывода, что Выше вставлять условие следующего вида:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo get_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?>

Если получаем дубль,о чем я говорил выше, то немного «обрежем » код

<?php 
        /*Если надо, чтобы выводилась миниатюра, а если ее нет, первая картинка с записи, то нужно вставлять условие следующего вида:*/
        if ( has_post_thumbnail() ) {}
else { ?>
<img src="<?php echo get_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?>

Конечно же добавляете свои классы стилей и оформителе их в CSS. Тогда ваши миниатюры будут выглядеть так, как Вам нужно,например как у меня :

/vivod izobraenii na glavnoy na stranice rubrik i tags/
.wp-block-image .aligncenter,.wp-block-image .alignleft,.wp-block-image .alignright,.wp-block-image.is-resized{float:auto}
.archive .tag div.entry-content img,.archive div.inside-article img,.archive div.wp-block-image,.category div.entry-content img,.category div.inside-article img,.category div.wp-block-image,.home div.entry-content img,.home div.inside-article img,.home div.wp-block-image,.tag div.entry-content img,.tag div.inside-article img,.tag div.wp-block-image{width:300px;float:left;margin-right:1em;padding:0;border:none;border-radius:10px;box-shadow:1px 1px 5px;}

Послесловие 

У меня раньше выводились первые картинки записи , в т.ч.  картинки из сторонних ресурсов и без этих манипуляции . но только в том случае,если ставить тег далее в записи, но такой метод не очень удобен , так,как тег «далее» перебросит читателю на ту часть, где он вставлен.Проблему вывода первого изображении записи  без тега «далее»я решил, но теперь не могу убрать #more-№№№№ в конце ссылок , иными словами прыжок тега далее ,ему еще называют якорем . Залезть се записи и удалить из них more не очень привлекательная идея. В теме генератепресс в принципе не было необходимости ставить тег далее в записи, так, как и так без тега тема вывел отрывок. Но этот тег был нужным именно за то, что вывести с отрывком записси первое изображение.
Кроме того, что нужно вывести первое изображение записи на главной и на страницах архивов и меток без плагинов. У меня был на сайте блок похоже записи от плагинов похожих записей , которые не выводили сторонние картинки, даже если ставить тег далее в записи .Другая сторона вопроса является проблема дублей , например в некоторых записей помимо того, что присутствуют изображения в текстах, еще и назначены миниатюры и как следствие стандартные коды выводили две картинки. По этому мне пришлось применить комплексные решения , сделать гибрид кодов , благодаря чему добывался:
1. Вывод первого изображении записи на главной странице если даже изображение находятся на сторонних ресурсов.
2. Создавать блок похожих записей с выводом первого изображении записи на главной странице если даже изображение находятся на сторонних ресурсов.
3. Исключить дубли выводов,то есть запрет вывода первой изображении записи на тех отрывках , где назначена миниатюра

Попробуйте , пишите комментарии !

 1,780 просмотров всего,  1 просмотров сегодня