Как без плагинов вывести похожие записи с миниатюрами | Часть 1

Как без плагинов вывести похожие записи с миниатюрами | Часть 1 | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Я уже рассказывал, как вывести похожие записи с пропорционально уменьшенными картинками (Часть 1 и 2). Идея вывода именно пропорциональных изображений из похожих постов весьма интересна — она нашла применение в нескольких моих блогах (например, в этом — вы можете увидеть похожие записи в конце каждого поста). Однако не всем нужно выводить именно пропорциональные изображения, и вполне достаточно миниатюр. Действительно, если в блоге уже используются миниатюры, тема их поддерживает, то почему бы не воспользоваться этим? Именно на миниатюрах и основывается вывод похожих записей в одном из моих блогов.

Как без плагинов вывести похожие записи с миниатюрами | Часть 1

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

1. Для начала нужно активировать использование миниатюр. Сделать это можно очень просто, воспользовавшись инструкцией Основы работы с WordPress | Работа с изображениями – размер миниатюр. Зайдите в настройки миниатюр и выставьте их размеры (Размер миниатюры). Это обязательный параметр, который активирует миниатюры в блоге. Не забудьте поставить чекбокс «Обрезать миниатюру точно по размерам» — это позволит создавать миниатюры с пропорциональным изображением, обрезая его по заданным размерам. Все остальные параметры указывать не обязательно, если вы не будете пользоваться миниатюрами с другими размерами.
Теперь создадим функцию, выуживающую первую миниатюру из нужного нам поста. Предполагаем, что размер миниатюр: 200 на 150. Эту функцию будем применять для вставки миниатюр в похожих постах. Откройте файл functions.php и вставьте в него такой код:

function ordered_thumbnails( $display = 'true', $class='' ) {
	
	global $post;
	
	// get all image attachments for this post
	$images = get_children( array( 'post_type' => 'attachment', 'post_parent' => $post->ID, 'post_mime_type' => 'image', order=>"asc" ) );
	
	// if the post has image attachments
	if( $images !== false ) {
		
		// find the image in position 1
		foreach($images as $i) {
			if ( $i->menu_order == 1 ) {
				$img_id = $i->ID;
			}
		}
		
		// if the images were unordered
		if ( $img_id == '' ) {
			$i = array_slice( $images, 0, 1 );
			$img_id = $i[0]->ID;
		}
		
		// get image data
		$image = wp_get_attachment_image_src( $img_id, 'thumbnail' );
		
		$result = array(
			'url'		=> $image[0],
			'width'		=> $image[1],
			'height'	=> $image[2]
		);
		
		// should the image be displayed or should data be returned as an array?
		if ( $display == 'true' ) {
			return _e( '' );
		} else {
			return $result;
		}
		
	} else {
		
		// post does not have any image attachments
		return (bool) false;
		
	}	
}

function ordered_thumbnails_medium( $display = 'true', $class='' ) {
	
	global $post;
	
	// get all image attachments for this post
	$images = get_children( array( 'post_type' => 'attachment', 'post_parent' => $post->ID, 'post_mime_type' => 'image', order=>"asc" ) );
	
	// if the post has image attachments
	if( $images !== false ) {
		
		// find the image in position 1
		foreach($images as $i) {
			if ( $i->menu_order == 1 ) {
				$img_id = $i->ID;
			}
		}
		
		// if the images were unordered
		if ( $img_id == '' ) {
			$i = array_slice( $images, 0, 1 );
			$img_id = $i[0]->ID;
		}
		
		// get image data
		$image = wp_get_attachment_image_src( $img_id, 'medium' );
		
		$result = array(
			'url'		=> $image[0],
			'width'		=> $image[1],
			'height'	=> $image[2]
		);
		
		// should the image be displayed or should data be returned as an array?
		if ( $display == 'true' ) {
			return _e( '' );
		} else {
			return $result;
		}
		
	} else {
		
		// post does not have any image attachments
		return (bool) false;
		
	}	
}

// create template tag "ordered_thumbnails"
add_action( 'ordered_thumbnails', 'ordered_thumbnails', 2 );


// Add Post Thumbnail Theme Support
if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'featured', 200, 150, true );
}

//get thumbnail
function postimage($size=medium) {
	if ( $images = get_children(array(
		'post_parent' => get_the_ID(),
		'post_type' => 'attachment',
		'numberposts' => 1,
		'order' => 'ASC',
		'post_mime_type' => 'image',)))
	{
		foreach( $images as $image ) {
			$attachmentimage=wp_get_attachment_image( $image->ID, $size );
			echo $attachmentimage.apply_filters('the_title', $parent->post_title);
		}
	}
}

//check any attachment 
function checkimage($size=medium) {
	if ( $images = get_children(array(
		'post_parent' => get_the_ID(),
		'post_type' => 'attachment',
		'numberposts' => 1,
		'post_mime_type' => 'image',)))
	{
		foreach( $images as $image ) {
			$attachmentimage=wp_get_attachment_image( $image->ID, $size );
			return $attachmentimage;
		}
	} 
}

2. После этого нужно открыть файл single.php и найти место, в котором нужно выводить похожие посты. Обычно такие ссылки выводят сразу после основного содержимого поста. Содержимое поста обычно выводится с помощью функции the_content — значит вам нужно выводить ссылки после вызова этой функции. Вставьте в нужное место такой код:

<div>				
    ID);
     if($tags):
      $tag_ids = array();
      foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
      $args=array(
         'tag__in' => $tag_ids,
         'post__not_in' => array($post->ID),
         'showposts'=> 5, // Number of related posts that will be shown.
         'caller_get_posts'=> 1
      );
     $rp_query = new wp_query($args);
     endif;
     if($rp_query):
      if($rp_query->have_posts()) ?>
        have_posts()):  $rp_query->the_post(); ?>
         
         <div style="width:210px;padding:10px;text-align:center;vertical-align:top;float:left">
             <div style="text-align:center"><a href="" title=""></div>
             <div style="text-align:center"></a></div>
         </div>
         </div>
         
        
     
       <div></div>
     
</div>

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

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. zoopicture.ru/

    А как быть с уже опубликованными (старыми) постами ? как для них создать миниатюры ?
    Если код картинки просто вставлен в код поста… но все фотки разложенны как рекомендует wordpress … есть ли возможность их «оминиатюрить» ? :)

    Ответить
    1. Посмотрите этот пост: https://n-wp.ru/kak-dobavit-v-temu-podderzhku-miniatyur/

      Ответить
  2. p0zitiv

    а как такие превьюшки на главную зафигачить без группировки по тегам, все подряд??

    Ответить
  3. Track

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

    the_permalink();
    ordered_thumbnails();
    the_title();

    вот собственно результат можно посмотреть на моем сайте для тестов http://test.3d-kstudio.com/vg-plugins-for%C2%A03ds-max/

    function related_posts($content){
    if(is_page() || is_single()) {
    $output .= '<table width="750px" style="margin-top: -15px;"><tr><td><div>
    <h4>Related Posts:</h4>';
    	global $post;
    	// global $rp_query;
        $tags = wp_get_post_tags($post->ID);
        if($tags):
    		  $tag_ids = array();
    		  foreach($tags as $individual_tag)
    			$tag_ids[] = $individual_tag->term_id;
    			
    		  $args=array(
    			 'tag__in' => $tag_ids,
    			 'post__not_in' => array($post->ID),
    			 'showposts'=> 4, // Number of related posts that will be shown.'', ''
    			 'caller_get_posts'=> 1
    		  );
    		 $rp_query = new wp_query($args);
         endif;
         if($rp_query):	
          if($rp_query->have_posts())
    	  {
            while ($rp_query->have_posts()): $rp_query->the_post();
    		$link=the_permalink();
    		$thumb=ordered_thumbnails();
    		$title=the_title();
            $output .= '<div style="width:170px;padding:5px;text-align:center;display:inline-block;position:relative;vertical-align:top;float:left;">';
            $output .= '<div id="random_posts_td" style="text-align:center;min-height: 190px;" >'. $thumb .''; 
    		$output .= '<div class="td">'. $title .'
    		</div>
    	</div>
    </div>             
             </div>
             </div>';         
           endwhile; 
         }
    	 else
           $output .= '<div></div>';
    	 endif; 
    	 wp_reset_query();
    $output .= '</div></td></tr>
    </table>';
    }
    
    return ($content . $output);
    }
    add_action('the_content', 'related_posts');
    
    Ответить
  4. Track

    Нашел таки в чем дело
    Надо заменить

    $link=the_permalink();
    $title=the_title();

    на

    $link=$post->post_name;
    $title=$post->post_title;
    Ответить
  5. kinogrant

    Хороший урок, спасибо!

    Ответить
  6. andrapp

    Вот это класс, все так подробно. Сделал себе! Круто!

    Ответить