297

Схожі публікації з картинками без плагінів

Вивід схожих публікацій на WordPress

Кодування на WordPress

Вітання усім читачам мого скромного блоґу, сьогодні хочу поділитися маленьким оновленням і одночасно описати програмне рішення, яке було застосоване до цього оновлення. Мова йтиме про блок зі схожими публікаціями (система WordPress).

Всі уже, мабуть, помітили блок “Гляньте ще на ці фіглі:“, він виглядає ось так:

Схожі публікації з картинками WordPress

Це звичайний вивід публікацій, що сортуються за алгоритмом випадкової публікації у тій же категорії, що й відкрита. Але я додатково ще застосував маленьку функцію, яка реалізує вивід картинок-прев’ю на WordPress. Здавалось би що з того і чим це може бути цікавим? Я теж так думав, поки не зіштовхнувся з проблемою.

Справа у тім, що на одному із сайтів, аби не завантажувати свій хостинг, я в публікаціях розміщую картинки із хостингу картинок (з контакту), відповідно ніяких картинок-прев’ю у мене немає. Виникає запитання – як зробити такий блок схожих публікацій з картинками без плагіна і без власних картинок? Відповідь ховається у тексті публікацій.

Майже у кожній публікації є картинка, яка в html коді розміщується так:

<img src=”bla bla bla”>

Спробуємо витягнути цю картинку, а також відфільтрувати першу, у випадку, якщо в публікації їх декілька. Цю спробу записуємо як функцію у файлі functions.php у нашій темі на WordPress:

function figli_first_image() {
 global $post, $posts;
 $first_img = '';
 $output = preg_match_all('//i', $post->post_content, $matches);
 if(isset($matches[1][0])){
 $first_img = $matches [1][0];
 return $first_img;
 }  
}

Функція готова! Маленька, але дієва. Тепер додаємо вивід випадкових схожих публікацій з тієї категорії, в якій розміщена публікація що переглядається. При виводі картинки-прев’ю, яку ми отримуємо з функції вище, ставимо перевірку (є ж публікації без картинок), якщо такої немаємо – виводимо стандартну картинку. Цей код зазвичай розміщується у файлі single.php одразу ж після виводу контенту (<?php the_content(); ?>):

Гляньте ще на ці фіглі: 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'=>4, //кількість схожих публікацій 'caller_get_posts'=>1, 'orderby' => 'rand' ); $my_query = new wp_query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) { $my_query->the_post(); ?>
';the_title();echo''; else: echo '';the_title();echo''; endif; ?>

Вивід схожих публікацій з картинками на WordPress готовий! Залишається його оформити за допомогою css, щоби це виглядало красиво. У моєму випадку код такий:

.similar{width:90%;margin:0 auto;text-align:center;padding:20px 0; border-top: 1px solid #E6E6E6;}
.sm-title{font-weight:bold;margin-bottom:10px;}
.similar div{/*display:table-cell;*/float:left;width:25%;padding:7px;}.similar span, .similar a{display:block;}
.similar div, .similar a{-webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out}
.similar div:hover, .similar div:hover a {-moz-transform:scale(1.1); -webkit-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); -ms-transform:scale(1.1);}
.similar div:hover{ -webkit-box-shadow:0px 0px 10px rgba(50,50,50,0.75);-moz-box-shadow:0px 0px 10px rgba(50,50,50,0.75);box-shadow:0px 0px 10px rgba(50,50,50,0.75);}

Функція визначення картинки для прев’ю з іншого сайту готова і працює. Вивід схожих публікацій, чи рекомендованих публікацій з картинкою-прев’ю реалізовано. Стилі написані і новий блок відображається гарно та коректно. Залишається лише написати декілька слів про те, для чого потрібно робити цей вивід схожих чи рекомендованих публікацій на блозі.

Справа у тому, що людина, яка заходить на наш блог з пошуку, може цікавитися інформацією подібною до тієї, яку вона шукала. І список рекомендацій знизу тексту, може втамувати її спрагу. Інша ситуація, коли інформація у статті не повна, чи не точна, але категорія тематична і у іншій статті є те, що людині потрібно. При звичайному перегляді – вона закриє вкладку з нашим блогом, але якщо є список схожих публікацій, то висока ймовірність того, що вона відкриє іншу тематичну і саме ту, яка їй потрібна.

Отже маємо простий і корисний інструмент для залучення додаткової уваги від користувача, до нашого блогу. А це однозначно позитивно вплине на ознаки життя сайту.

А тут без плагіна:Схожі публікації списком без картинок

Читайте також: