Схожі публікації з картинками без плагінів
Вітання усім читачам мого скромного блоґу, сьогодні хочу поділитися маленьким оновленням і одночасно описати програмне рішення, яке було застосоване до цього оновлення. Мова йтиме про блок зі схожими публікаціями (система 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();
?>
Вивід схожих публікацій з картинками на 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);}
Функція визначення картинки для прев’ю з іншого сайту готова і працює. Вивід схожих публікацій, чи рекомендованих публікацій з картинкою-прев’ю реалізовано. Стилі написані і новий блок відображається гарно та коректно. Залишається лише написати декілька слів про те, для чого потрібно робити цей вивід схожих чи рекомендованих публікацій на блозі.
Справа у тому, що людина, яка заходить на наш блог з пошуку, може цікавитися інформацією подібною до тієї, яку вона шукала. І список рекомендацій знизу тексту, може втамувати її спрагу. Інша ситуація, коли інформація у статті не повна, чи не точна, але категорія тематична і у іншій статті є те, що людині потрібно. При звичайному перегляді – вона закриє вкладку з нашим блогом, але якщо є список схожих публікацій, то висока ймовірність того, що вона відкриє іншу тематичну і саме ту, яка їй потрібна.
Отже маємо простий і корисний інструмент для залучення додаткової уваги від користувача, до нашого блогу. А це однозначно позитивно вплине на ознаки життя сайту.
А тут без плагіна: “Схожі публікації списком без картинок“