Похожие материалы в WordPress (с миниатюрами) — с плагинами Related Posts Thumbnails и YARPP (и без)

Давайте начнем с настроек Yet Another Related Posts, в которые вы сможете попасть из меню админки, выбрав пункты «Параметры» — «Связанные посты (YARPP)». Тут есть одна тонкость, которая поначалу ввела меня в недоумение. У этого плагина должны быть настройки, позволяющие задать способ определения связанных постов, а также позволяющие настроить порог соответствия.

По умолчанию порог стоял очень высокий (5) и у многих моих постов этот плагин не находил связанных с ними статей, что несколько меня печалило.

Оказалось, что ларчик просто открывался. На странице настроек YARPP в правом верхнем углу есть кнопка «Настройки экрана», при нажатии на которую у вас будет возможность настроить отображения тех или иных блоков настроек данного плагина. Именно там по каким-то не очень понятным мне причинам оказались не активны первые два блока настроек: Контент и Критерии похожести:

В настройках контента я ничего не менял, хотя там можно исключить из рассмотрения часть категорий или тегов. А вот в настройках «Критерии похожести» я поставил троечку вместо стоящей там пятерки и, о чудо, во всех моих постах появились связанные записи в нужном мне количестве. Статистика сайта от этого только выиграет.

Кстати, количество выводимых Yet Another Related Posts Plugin связанных записей вы так же можете задать в настройках в области «Просмотр опций для вашего сайта». Там же вы активируете автоматический показ связанных постов в записях вашего блога.

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

Далее вам, наверное, нужно будет сразу же решить, что вы хотите видеть — слайдер с превьюшками картинок из статей (создаются плагином Related Posts Slider) одновременно с текстовыми ссылками на эти же самые статьи (создаются в YARPP), или же все-таки вам дублирование ссылок на одни и те же материалы вашего блога будет ни к чему.

Я выбрал второй вариант, т.е. у меня показывается только слайдер, связанные посты в котором формируются плагином Yet Another Related Posts Plugin, но который свои собственные ссылки не выводит. Сделать все это чисто за счет настроек плагинов у меня не получилось и поэтому пришлось пойти на хитрость.

Дело в том, что плагин YARPP поддерживает шаблоны оформления, которые подключаются довольно-таки необычно — их файлы нужно будет скопировать в папку с используемой вами текущей темой Вордпресс (/wp-content/themes/Название_темы).

Сами же файлы шаблонов живут в папке «/plugins/yet-another-related-posts-plugin/yarpp-templates». В общем, с помощью FileZilla осуществите несложное копирование и у вас в настройках плагина появится возможность выбрать из выпадающего списка нужный вам шаблон оформления:

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

Как в YARPP убрать прозрачный пиксель и изменить надпись Похожие материалы

Этот пост представляет из себя «заметки на полях», которые нужны прежде всего мне самому, чтобы потом не вспоминать, а как этот прозрачный пиксель из yarpp убрал. А вспоминать придется, ибо для этого пришлось редактировать файлы данного плагина для WordPress и после его обновления данную процедуру придется повторить (при необходимости).

Итак, про замечательный плагин вывода похожих постов в WordPress под названием Yet Another Related Posts я уже довольно подробно писал. Недавно возникала проблема, которую проще всего продемонстрировать на скриншоте:

Удаляем код изображения «http://yarpp.org/pixels» из YARPP

Появилось сообщение (в разных браузерах выглядит по разному) о том, что не удалось загрузить изображение, а вместо него показывается альтернативный текст «yarpp». Отсюда следует, что бяка вылезла именно из-за Yet Another Related Posts.

Я посмотрел код данного элемента с помощью встроенного в браузер инструмента подобного Фаербагу:

Это было изображение, которое подгружалось с сайта плагина Yet Another Related Posts:

<img src="http://yarpp.org/pixels/d6a8abd01f62881fcdc06a89f3687fa0" alt="YARPP"/>

Эта самая ссылка «http://yarpp.org/pixels/d6a8abd01f62881fcdc06a89f3687fa0» была в данный момент не рабочей. Насколько я понял, подгружаться должно изображение размером в один пиксел (прозрачное), которое нужно для того, чтобы автор плагина мог оценивать частоту использования его плагина на блогах под управлением WordPress. Все бы хорошо, на с его сервером что-то случилось и картинка не грузилась.

Поэтому я скачал по ФТП все файлы этого плагина из папки /wp-content/plugins/yet-another-related-posts-plugin/ средствами Файлзилы, и с помощью встроенного в Тотал Коммандер поиск по содержимому файлов нашел то место, где формируется Html код подгрузки данного изображения. Это оказался файл YARPP_Core.php, лежащий в папке classes.

Открыв его на редактирование по ФТП (тот его вариант, что живет на сервере) я без труда с помощью внутреннего поиска по Notepad++ нашел нужно место:

 if($optin){
 $output .= '<img src="http://yarpp.org/pixels/'.md5(get_bloginfo('url')).'" alt="YARPP"/>'."\n";
 }
 $output .= "</div>\n";

И удалил код формирования изображения:

 if($optin){
 $output .= ''."\n";
 }
 $output .= "</div>\n";

Все. Останется только сохранить произведенные изменения и при необходимости сбросить кеш в WordPress, если вы используете какой-либо плагин для этой цели (у меня живет и помогает мне Hyper Cache).

Проблема, как я уже говорил, заключается в том, что с большой долей вероятности при очередном обновлении Yet Another Related Posts мне опять придется повторять данную процедуру, поэтому, собственно, я и написал для себя эту памятку.

Меняем теги H3 в надписи «Похожие материалы» на теги DIV

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

Текст надписи «Похожие материалы» я могу задать, но вот оформлен он будет в теги заголовков третьего уровня H3. Считаю, что это плохо, ибо это размывает ключевые слова (в заголовках они имеют больший вес) и оформление этой надписи мне хотелось бы сделать в одном ключе с соседними элементами.

В общем, опять же путем поиска в Тотал Коммандере был найдет файлик template_thumbnails.php в папке /wp-content/plugins/yet-another-related-posts-plugin/includes, и в нем были произведены следующие изменения.

Было:

$output .= '<h3>' . $thumbnails_heading . '</h3>' . "\n";

Стало:

$output .= '<div class="budu">' . $thumbnails_heading . '</div>' . "\n";

Т.е. вместо H3 я использовал теги div с прописанным классом. Ну, вот и все.

Как в WordPress можно выводить посты из категории с миниатюрами

У меня не так давно в конце всех статей появился блок из девяти (можно задать любое количество) карточек статей, которые были опубликованы ранее в той же рубрике, что и просматриваемая публикация.

Про внутреннюю перелинковку и ее способы реализации на этом блоге я уже писал, поэтому здесь не буду наводить тень на плетень и рассказывать, почему Википедия из-за своей всеобъемлющей перелинковки (ну, и не только) находится в Топе по подавляющему числу информационных запросов обоих поисковых систем.

Как выводить статьи из категории WordPress в виде миниатюр

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

Итак, описываю мой случай. Функция, которая позволяла выводить предыдущие N статей из той же рубрики, у меня работала уже несколько месяцев и была она взята с этой страницы известного знатока кода WordPress под ником Kama. Но мне хотелось немного акцентировать на этих ссылках внимание, поэтому и задумался о добавлении превьюшек.

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

Кроме заголовка и миниатюры можно даже некоторый фрагмент текста статьи добавить, как это сделал Уважаемый Ринат в комментарии 138 на блоге Димокса:

<?php
function show_previous_posts_from_category ($the_post_id, $the_category_id = 0, $post_num) {
function new_excerpt_length($length) {
return 10; }
 add_filter('excerpt_length', 'new_excerpt_length');

 $num = 0;
 global $wpdb;

 $sql = "SELECT wposts.*
 FROM $wpdb->posts wposts
 LEFT JOIN $wpdb->term_relationships ON (wposts.ID = $wpdb->term_relationships.object_id)
 LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
 WHERE $wpdb->term_taxonomy.taxonomy = 'category'
 AND $wpdb->term_taxonomy.term_id = '$the_category_id'
 AND wposts.post_status = 'publish'
 AND wposts.post_type = 'post'
 AND wposts.ID < '$the_post_id'
 ORDER BY wposts.ID DESC
 LIMIT $post_num";

 $result = $wpdb->get_results($sql, OBJECT);
 global $post;
?>

 <div class="latest_article">

 <ul class="latest">
 <h3>Предыдущие статьи из категории: <?php the_category( ', ' ) ?></h3>
<?php
 foreach ($result as $post) {

 setup_postdata($post);
?>
 <li>
<?php the_post_thumbnail(array(40,40)); ?>
 <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<? the_excerpt(); ?>

<?php
 $num++;
 $save_ids[] = $post->ID;
 }
 if ( $num < $post_num || !$result ) {
 $need_more = $post_num-$num;
 $save_ids[] = $the_post_id;
 $save_ids = join (',', $save_ids);
 $more_posts = get_posts("numberposts=$need_more&category=$the_category_id&exclude=$save_ids");
 foreach ($more_posts as $post){

 setup_postdata($post);
?>
 <li>
<?php the_post_thumbnail(array(40,40)); ?>
 <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>

<? the_excerpt(); ?>

 </li>
<?php
 }
 }
?>
 </ul>
 </div>
<?php } ?>
<?php
 $the_cat = get_the_category();
 $the_cat_id = $the_cat[0]->cat_ID;
 show_previous_posts_from_category($post->ID, $the_cat_id, 5);
 wp_reset_query();
?>

Функция рабочая:

В начале кода «return 10» задает число слов, которое будет выводиться в анонсе статьи с помощью <? the_excerpt(); ?> (если ничего не путаю, ибо в PHP нуб), в конце кода в ($post->ID, $the_cat_id, 5) цифрой 5 задается число предыдущих постов из той же категории, к которой относится данная публикация.

Все замечательно, и я даже пару дней такой вид тестировал на блоге (правда для вывода миниатюр использовался чуть более сложный способ, который описан ниже). Но потом чего-то не вставило и я поменял на то, что Вы наблюдаете сейчас (если я опять все не поменял):

Получились своеобразные карточки ранее написанных постов из той же категории, которые особенно хорошо смотрелись бы на фотоблоге или ресурсе, где изображения превалируют над текстом. Но и для обычного блога этот вариант может быть выигрышным, хотя, наверное, и не в такой степени. Если первые десять слов из поста не нужны, то просто удалите <? the_excerpt(); ?> в двух местах и этот кусок в начале:

function new_excerpt_length($length) {
return 10; }

Да, чуть не забыл, все это безобразие нужно вставлять непосредственно в то место шаблона WordPress, где предыдущие посты и должны выводиться. Обычно это файл single.php или index.php (если сингла нет) из папки с используемой вами темой оформления:

wp-content/themes/название темы/single.php

Если хотите, чтобы предыдущие посты из этой же категории показывались сразу после текста статьи, то найдите в коде single.php или index.php место:

<?php the_content('Читать полностью'); ?>

И лепите приведенный чуть выше громадный кусок кода сразу за ним. ВАЖНО. Все должно заработать, но все равно сначала сделайте на всякий пожарный резервную копию файлов вашей темы и не пользуйтесь возможностями WordPress по редактированию файлов шаблона, ибо при работе, например, в связке Файлзилы и Нотепад++ у вас всегда будет возможность сделать откат при неудаче или ошибке.

Создание миниатюры из первой картинки поста

Использование функции « the_post_thumbnail» это оптимальный вариант, который я не реализовал (на самом деле реализовал с помощью упомянутого чуть ниже плагина Auto Post Thumbnail и результирующий код приведен в самом низу статьи) потому, что файлы иллюстраций для статей кидаю сразу на хостинг через лучший ФТП менеджер, а в текст статьи вставляю шаблон, в котором потом меняю название файла картинки и его описание в атрибутах Alt и Title тега Img:

<img class="img_center1" src="https://ktonanovenkogo.ru/image/veb.png" title="Web" alt="веб"/>

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

Было два варианта дальнейшего развития событий: либо искать способ автоматического создания миниатюр для всех статей (вроде бы я его даже нашел, но если кто знает опробованный вариант, то киньте ссылку, плиз), либо каким-то образом выдергивать первое изображение из всех постов и делать из него превьюшку нужного размера.

P.S. Способ автоматического создания миниатюр найден — это плагин Auto Post Thumbnail. После установки заходите в его настройки и жмете на кнопку для создания миниатюрных картинок различных размеров, за основу которых будет браться первая картинка поста.

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

Почему-то у меня мысль (поиск) сначала пошла по второму руслу и именно этот вариант и был реализован, а в последствии заменен на классическую функцию работы с миниатюрами the_post_thumbnail (array (200,200).

Произошло это потому, что описанный здесь вариант имел один существенный недостаток (если я не ошибаюсь) — функцией вытягивается полноразмерное изображение из поста, которое потом средствами языка стилевой разметки CSS уменьшается до нужного размера миниатюры (с помощью height и width).

Если для блога KtoNaNovenkogo.ru это критично, но не сильно, ибо первые картинки изначально имеют не очень большой вес (в среднем 30 кило), то для фотоблога это будет серьезной проблемой.

Собственно, про способ выдергивания первой картинки из любого поста в WordPress. Достаточно будет в файл вашей темы оформления под названием functions.php (в любом месте, но после окончания какой-либо другой функции, а не ее середине) добавить следующую функцию catch_that_image:

function catch_that_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)){ //Defines a default image
 $first_img = "/files/no-image.gif.jpg";
 }
 return $first_img;
}

Добавляете, а затем чуток изменяете приведенный чуть выше громадный код функции show_previous_posts_from_category, т.к. нам теперь вместо стандартной функции the_post_thumbnail нужно будет использовать только что добавленную catch_that_image.

У меня получилось примерно так в PHP коде (он вставляется в single.php или index.php вашей темы по описанному чуть выше принципу):

<?php
function show_previous_posts_from_category ($the_post_id, $the_category_id = 0, $post_num) {

 $num = 0;
 global $wpdb;

 $sql = "SELECT wposts.*
 FROM $wpdb->posts wposts
 LEFT JOIN $wpdb->term_relationships ON (wposts.ID = $wpdb->term_relationships.object_id)
 LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
 WHERE $wpdb->term_taxonomy.taxonomy = 'category'
 AND $wpdb->term_taxonomy.term_id = '$the_category_id'
 AND wposts.post_status = 'publish'
 AND wposts.post_type = 'post'
 AND wposts.ID < '$the_post_id'
 ORDER BY wposts.ID DESC
 LIMIT $post_num";

 $result = $wpdb->get_results($sql, OBJECT);
 global $post;
?>

 <div class="latest_article">

<div class="vnimanie" id="vn1">Предыдущие статьи из категории: <?php the_category( ', ' ) ?></div><ol style="margin-left:-20px;">
<?php
 foreach ($result as $post) {

 setup_postdata($post);
?>
 <li class="rle">

 <a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><div class="tumbr" style="margin: 12px 15px 0 15px; width:200px;height: 150px;background: url(<?php echo catch_that_image(); ?>) 0 0 no-repeat;background-size: 100%;"></div><div class="fhjk"> <?php trim_title_chars(110, '...'); ?> </div></a></li>

<?php
 $num++;
 $save_ids[] = $post->ID;
 }
 if ( $num < $post_num || !$result ) {
 $need_more = $post_num-$num;
 $save_ids[] = $the_post_id;
 $save_ids = join (',', $save_ids);
 $more_posts = get_posts("numberposts=$need_more&category=$the_category_id&exclude=$save_ids");
 foreach ($more_posts as $post){

 setup_postdata($post);
?>
 <li class="rle">

 <a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><div class="tumbr" style="margin: 12px 15px 0 15px; width:200px;height: 150px;background: url(<?php echo catch_that_image(); ?>) 0 0 no-repeat;background-size: 100%;"></div><div class="fhjk"> <?php trim_title_chars(110, '...'); ?> </div></a></li>
<?php
 }
 }
?>
 </ol>
 </div>
<?php } ?>
<?php
 $the_cat = get_the_category();
 $the_cat_id = $the_cat[0]->cat_ID;
 show_previous_posts_from_category($post->ID, $the_cat_id, 9);
 wp_reset_query();
?>

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

<a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><div class="tumbr" style="margin: 12px 15px 0 15px; width:200px;height: 150px;background: url(<?php echo catch_that_image(); ?>) 0 0 no-repeat;background-size: 100%;"></div><div class="fhjk"> <?php trim_title_chars(110, '...'); ?> </div></a>

Возможно, что сделано по нубски (CSS как шахматы, в которых я знаю как ходить, но это не позволяет мне играть хоть сколько-нибудь прилично), но работает. Гиперссылка имеет Href в виде ссылки на нужный пост (из той же рубрики) и она покрывает сразу два блока:

1. Первый с пустым контейнером Div, фоном для которого выступает выдернутое с помощью функции catch_that_image первое изображение из этого поста (он задается CSS свойством background), которое с помощью свойств width:200px и height: 150px уменьшается до нужных мне размеров, а при помощи background-size: 100% отображается не его верхняя левая часть, а уменьшенная копия.
2. Второй контейнер Div с помощью функции trim_title_chars (110, '...') позволяет отобразить чуть ниже этого фонового изображения заголовок поста, в котором отображаются только первые 110 символов, ибо мои тайтлы очень длинные (читайте про мета теги title, description и keywords) и вносят сумбур в стройные ряды карточек постов. Если обрезать не нужно, то можете вставлять традиционную функцию the_title ().

Ну и понятно, что все, что можно было вынести в классы, я вынес, поэтому будет не лишним их здесь привести (живут они в отдельном файле стилей style.css в папке с темой оформления):

.rle {border:solid 1px #ccc;margin:0px 3px 6px 3px !important;float:left;list-style-type:none;height:280px;}
.fhjk {color:#333;padding:0 0px 0 20px;margin:10px 0 0 0;width:200px;}
.rle a:hover {text-decoration:none !important;}
li.rle:hover {background-color:#eee !important;}

Опять же, нубский стиль, но работает. С помощью border задается сплошная рамочка в один пиксел шириной, а с помощью Padding и margin — внутренние и внешние отступы (код хорошо анализировать с помощью Фаербага или его встроенных во все браузеры аналогов).

Float заставляет карточки постов плавать и прижиматься к левому краю, но не забывайте, что остальные блоки кода не замечают плавающие элементы, поэтому во избежании их прилипания снизу следует указать в CSS свойствах нижнего (следующего после них) блога свойство Clear:both для возможности задания отступов от него до плавающих вверху блоков карточек предыдущих постов. Интересно, я бы сам понял, что написал, не пиши это собственноручно. Сомневаюсь, но объяснять подробнее лень. Извините.

Последние две строки заставляют не отображать подчеркивание ссылок при наведении на них мыши (читайте про селектор hover и text-decoration) и задают серенький фон при наведении на карточку курсора, что добавляет, на мой взгляд, некую живость. List-style-type убирает нумерацию у используемого мною Html списка (OL и LI).Тупо, глупо, но интересно.

P.S. Если у вас миниатюры уже есть, или же вы их создали для всех постов автоматически с помощью упомянутого чуть выше плагина Auto Post Thumbnail, то можете использовать более простой и легкий в плане нагрузки на сервер способ:

<?php
function show_previous_posts_from_category ($the_post_id, $the_category_id = 0, $post_num) {

 $num = 0;
 global $wpdb;

 $sql = "SELECT wposts.*
 FROM $wpdb->posts wposts
 LEFT JOIN $wpdb->term_relationships ON (wposts.ID = $wpdb->term_relationships.object_id)
 LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
 WHERE $wpdb->term_taxonomy.taxonomy = 'category'
 AND $wpdb->term_taxonomy.term_id = '$the_category_id'
 AND wposts.post_status = 'publish'
 AND wposts.post_type = 'post'
 AND wposts.ID < '$the_post_id'
 ORDER BY wposts.ID DESC
 LIMIT $post_num";

 $result = $wpdb->get_results($sql, OBJECT);
 global $post;
?>

 <div class="latest_article">

<div class="budu">Самое интересное и полезное из категории <strong><?php the_category( ', ' ) ?></strong>:</div><ol class="sdfhju">
<?php
 foreach ($result as $post) {

 setup_postdata($post);
?>
 <li class="rle"> 

<a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><?php the_post_thumbnail(array(220,200)); ?><div class="fhjk"> <?php trim_title_words(7, '...'); ?> </div></a></li>

<?php
 $num++;
 $save_ids[] = $post->ID;
 }
 if ( $num < $post_num || !$result ) {
 $need_more = $post_num-$num;
 $save_ids[] = $the_post_id;
 $save_ids = join (',', $save_ids);
 $more_posts = get_posts("numberposts=$need_more&category=$the_category_id&exclude=$save_ids");
 foreach ($more_posts as $post){

 setup_postdata($post);
?>
 <li class="rle"> 

<a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><div class="tumbr"><?php the_post_thumbnail(array(220,200)); ?></div><div class="fhjk"> <?php trim_title_words(7, '...'); ?> </div></a></li>
<?php
 }
 }
?>
 </ol>
 </div>
<?php } ?>
<?php
 $the_cat = get_the_category();
 $the_cat_id = $the_cat[0]->cat_ID;
 show_previous_posts_from_category($post->ID, $the_cat_id, 6);
 wp_reset_query();
?>

Как на страницах рубрик выводить миниатюры постов

Ну и еще чуток о том, как организовать вывод постов на страницах категорий (рубрик), меток (тегов) или временных архивов WordPress в виде миниатюр (превьюшек) и заголовков этих статей. Собственно, сделать тоже самое, что мы только что сделали, но при этом еще оставив пагинацию (нумерацию страниц — читайте про пагинацию с WP-PageNavi). Сложного тут ничего нет. Если у вас в теме уже имеется файл archive.php, то его нужно будет лишь немного подкорректировать, убрав из него:

<?php the_content('Читать дальше...'); ?>

или 
<? the_excerpt(); ?>

Кстати, первый вариант выводит анонс статьи до тега More, а второй только 50 (по-моему) первых слов. Хотя, количество слов можно варьировать, дописав в functions.php следующий код:

function new_excerpt_length($length) {
	return 55;
}
add_filter('excerpt_length', 'new_excerpt_length');

Но не суть. Итак, удаляем оговоренную конструкции, а также стоящую чуть выше часть, где выводится заголовок статьи:

<h3><a target="_blank" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

И вместо них вставляем уже упомянутый чуть выше фрагмент:

<a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><div class="tumbr" style="margin: 12px 15px 0 15px; width:200px;height: 150px;background: url(<?php echo catch_that_image(); ?>) 0 0 no-repeat;background-size: 100%;"></div><div class="fhjk"> <?php trim_title_chars(110, '...'); ?> </div></a>

Но не все так просто. Нужно попасть внутрь цикла и правильно распорядиться с уже имеющимися блоками. Я, как уже говорил, не силен в ПХП, но путем сравнительно непродолжительных итераций смог получить нужный мне результат. Делал я это для другого проекта, в шаблоне которого файла archive.php не было и я его создал на базе имеющего файла index.php. Объяснять суть довольно долго, поэтому приведу оба файла, а вы сможете сравнить и сделать по аналогии у себя так же.

Был такой вот index.php:

<?php get_header(); ?><div id="wrapper"><div id="page"><?php if (is_day()) { ?>
		<h3><?php the_time('l, F jS, Y'); ?> Архивы</h3>

	<?php } elseif (is_month()) { ?>
		<h3><?php the_time('F, Y'); ?> Архивы по месяцам</h3>

	<?php } elseif (is_year ()) { ?>
		<h3><?php the_time('Y'); ?> Архивы по годам</h3>

	<?php } elseif (is_category()) { ?>
		<h3>Рубрика: <?php single_cat_title(''); ?> </h3>

	<?php } elseif (is_tag()) { ?>
		<h3>Метка: <?php single_tag_title(); ?></h3>
	<?php } ?></div>
	<div id="home_content">
	<?php if (have_posts()) : ?><?php while (have_posts()) : the_post();
 if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
	 <div class="post">
	 <div class="main_meta">
	 <h3><a target="_blank" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	 <div class="comments">
	 <div class="kjdlfs"><?php comments_number('', '1 Комментарий', '% коммент.'); ?></div>
	 </div>
	 <div class="additional"><span class="date"><?php the_time('j F, Y'); ?></span><?php if(has_tag()): ?><ul class="tags"><?php the_tags('<li>Метки ', ', ', '</li>');?>Рубрика: <b><?php the_category(',') ?></b></ul>
	 <?php endif; ?>
	 <?php the_excerpt(); ?>
	 </div>
	 </div>
	 <div class="content"><?php the_content('Смотреть все фото'); ?>
	 <?php if(is_single()) : get_related_posts_slider(); endif; ?>
	 <?php wp_link_pages('before=<div class="page-links">&after=</div>'); ?>
	 </div>
	 </div>
	 <?php endwhile; ?>
	 <?php if(is_single()): else: ?><?php wp_pagenavi(); ?>
	 <?php endif; ?><?php else : ?>
	 <div class="fourohfour"><img src="/wp-content/themes/images/mail.jpg" alt="" class="notfound" /></div><?php endif; ?></div><?php if(is_single()) : comments_template(); endif; ?></div><?php get_footer(); ?>

Из него путем удаления лишнего и добавления нужного получился такой вот файл archive.php:

<?php get_header(); ?>
<div id="wrapper">
<div id="page"><?php if (is_day()) { ?>
		<h3><?php the_time('l, F jS, Y'); ?> Архивы</h3>

	<?php } elseif (is_month()) { ?>
		<h3><?php the_time('F, Y'); ?> Архивы по месяцам</h3>

	<?php } elseif (is_year ()) { ?>
		<h3><?php the_time('Y'); ?> Архивы по годам</h3>

	<?php } elseif (is_category()) { ?>
		<h3>Рубрика: <?php single_cat_title(''); ?> </h3>

	<?php } elseif (is_tag()) { ?>
		<h3>Метка: <?php single_tag_title(); ?></h3>

	<?php } ?></div>

<div class="gjtf" id="home_content"> <ol style="margin:20px 0;">

 <?php $posts = query_posts($query_string . '&posts_per_page=12'); if (have_posts()) : ?><?php while (have_posts()) : the_post();
 if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

	 <li class="hmlf">

 <a href="<?php the_permalink() ?>" target="_blank" rel="bookmark"><div class="tumbr" style="width:300px;height: 190px;background: url(<?php echo catch_that_image(); ?>) 0 0 no-repeat;background-size: 100%;"></div><div class="kfdk"> <?php the_title(); ?> </div></a></li>

<?php endwhile; ?> </ol></div>

<div class="fgfr">
<?php if(is_single()): else: ?><?php wp_pagenavi(); ?></div>

<?php endif; ?><?php else : ?>

<div class="fourohfour"><img src="/wp-content/themes/images/mail.jpg" alt="" class="notfound" /></div>
<?php endif; ?> 
</div>
<?php get_footer(); ?>

Вот, собственно, и все. Ах, да. Мне не понравилось, что на страницах рубрик и меток отображается столько же постов, что и на главной. Мне хотелось больше. Сделать это оказалось не сложно — достаточно заменить конструкцию <?php if (have_posts()) : ?> на:

<?php $posts = query_posts($query_string . '&posts_per_page=12'); if (have_posts()) : ?>

Где и указать нужное число статей, отображаемое на страницах архивов. Все.