Related post with thumbnail wordpress

Related Posts Thumbnails Plugin for WordPress

Description

Related Posts by WPBrigade will add related posts thumbnails after the post. This Related Posts Plugin allows to customize thumbnail sizes, display settings and type of relation.

By default it uses generated by WordPress thumbnail for the first image appeared in the post, that was uploaded on the server with sizes as set in Media settings. You can select between ‘thumbnail’ and ‘medium’ size options. In addition if your theme supports Post Thumbnails feature introduced in WordPress 2.9 you can specify custom thumbnail size. You can also specify post custom field name to be used as thumbnails source.

Thumbnails are arranged in columns under the post with related posts title/excerpt under each post thumbnail. Colors of background, border, text, text sizes, background on mouse over, title and excerpt length can be customized. See screenshot.

You can specify number of related posts to display, start date, categories to show on and to include, top text, style settings, default image URL. You can select type of relation – categories, tags, categories and tags, random or custom taxonomies. You can specify where to display related posts – choose page type (main or single), post type and select categories. You can turn off automatic appending to the end of post and use php tag in the Loop of your theme. Related Posts thumbnails sidebar widget is also available. You can use [related-posts-thumbnails] shortcode in the post body.

** This Related Posts plugin has Gutenberg block **

• Thanks to Adnan for giving life to this plugin.

• This plugin has Russian version
• Thanks to Li-An this plugin has French version
• Thanks to Gidibao this plugin has Italian version
• Thanks to Kuzu this plugin has Turkish version
• Thanks to Mirko this plugin has German version
• Thanks to Bejana for Indonesian translation

Screenshots

• Related Posts Gutenberg Block
• Plugin in action
• Plugin settings page

Blocks

This plugin provides 1 block.

• Related Posts Thumbnails Plugin for WordPress

Источник

How to Show Related Posts with Thumbnails in WordPress?

So you want to know how to show related posts with thumbnails in WordPress? Well, we have the answer for you.

The bloggers and writers among you offer plenty of content. And it can be quite hard for a new user to navigate through the great content you are offering to the reader. Maybe your readers are interested in something more from your site.

Related posts are a great way to offer them just that!

When you have related posts after each blog post, it ignites a sense of enthusiasm and curiosity among the user, leading them to go through some extra content on your site. This engagement puts you in a position where your work appears at the top position of search results.

Today’s discussion will be about showcasing related posts with thumbnails to your readers. As always, we will be showing you some versatile ways to showcase related posts with the PostX plugin.

Also, we will show you the manual methods for showing related content with thumbnails on your WordPress site. Also, we will be sharing answers to some important questions along the way.

Let’s get started!

How to Show Related Posts with Thumbnails in WordPress [Ways to do It!]

There are a couple of ways you can show related posts with thumbnails in WordPress. You can use the PostX Gutenberg blocks plugin to show related posts very easily. It takes all of the hard work out of the equation, allowing you to focus on your creativity.

The next option is the manual way (but we will show it to you in unison with PostX). And that’s where you use widgets to showcase your related posts with thumbnails.

The final option is to use code to showcase related posts to your WordPress content. This can be a bit hard considering the fact that some of you may not be coding wizards. And sometimes it can get complicated.

So, let’s explore each of the options to showcase related posts and their thumbnails with WordPress.

Show Related Posts Using the PostX Plugin

The PostX plugin, as we mentioned earlier, has a lot of unique features. And all of these features are geared toward helping the average user bring out the best of their creativity.

And the best thing is, you can easily create the best possible experience for the users using this one-of-a-kind plugin.

Now if you are not using a block-level theme, then you can use widgets to showcase related posts with the associated thumbnails. We will show you how to do that in a later section.

Note: You can certainly show related posts with thumbnails in single WordPress posts. Unfortunately, the process is not intuitive. Also, there are very few options for customizations, which isn’t ideal considering the level of usability you are getting with PostX. We are not saying it’s impossible, but there are too many caveats to deal with here.

For now, let’s see how you can show related posts with PostX.

In order to show related posts to the bottom of a single blog post (with thumbnails of course), you need to:

• Navigate to the post content from your WordPress dashboard.
• Scroll to the bottom of the post.
• Click on the blocks library (at this point, we are assuming that you have PostX installed on your WordPress website. If not, you can take a look at this resource to install the plugin).

• Choose a block design you like.
• Click on import.

Once you click import, the design will be imported to your WordPress website. As the goal is to show thumbnails with related posts, PostX has all the options to showcase post thumbnails and edit them to your needs.

But before that, here’s a quick note on showing the ‘right’ related posts. Because you don’t just want all the posts on your website as ‘related’ to a particular post.

You need to use the PostX Quick Query Builder to show the most ‘related’ posts with thumbnails. The taxonomy section and the ordering capabilities of the Advanced Query Builder are crucial for helping you showcase the right ‘related’ posts for a specific piece of content.

Here’s what you need to do:

• Choose the block you imported to show the related posts.
• Go to the ‘Settings’ section of the block. Here you will find the ‘Query’ setting.

Under the quick query setting, you will find the taxonomy setting. That particular has 2-more associated options. One is the taxonomy value and the other is the taxonomy relation.

In order to show some specific posts as the related posts with thumbnails (that is the goal of course), you can do the following:

• Choose the post ‘category’ as the taxonomy.
• Choose the category taxonomy values (choose the post categories).
• Select the relation of the taxonomy.

If you’re not clear about these terms, then make sure to take a look at the relevant resources below.

There are further options available in the Advanced Query Builder. For instance, you can use the slider to show the number of posts in the block you choose to show the related posts.

How do I show the image thumbnails?

Once you choose a ready-made block from the PostX blocks library, you can set the image thumbnail settings from the ‘Settings’ section of the blog. All you have to do is click on the block and navigate to the ‘Image’ setting of that particular blog. There, you can set the image to be a thumbnail, or change the size of the image from the ‘Large Image Size’ setting.

Also, there are other settings for you to explore as well.

Do I have to do this for all of my single posts?

This is where you use widgets to showcase related posts with thumbnails.

The answer is yes, you will need to showcase related posts for each particular post. However, there is a quick way to do this. Here’s how:

• Click on the block settings.
• Choose “Add to Reusable Blocks”.

• Give the block a name and save it.

Once you save it as a reusable block, you can use it in other posts as well. All you have to do is search for the block with the relevant name and add it to the post.

How to show related posts with thumbnails in the sidebar?

Great question. We may have given you a hint about this earlier!

If it’s not a block-level theme, just use widgets. It’s the easiest way to showcase related posts with thumbnails. All you have to do is:

• Go to ‘widgets’ from the theme settings on your WordPress dashboard.
• You will have specific widget settings for specific themes. For instance, if you use the ‘GeneratePress’ theme, you will have options for each sidebar section.

• Add a PostX ready-made block just like before.
• Finally, click on update.

Note: You may have to deal with different settings for different themes. For instance, with the GeneratePress theme (a great theme by the way for PostX, but you can check out other recommended themes for PostX as well), you have the option to show the widget sidebars from the theme customization settings. There’s also the option to show/hide sidebars in the content’s menu as well.

There’s one last thing we would like to mention before moving on to the next part. And that’s pagination. Yes, PostX does have this feature within its arsenal of features. You can easily activate it from the PostX blocks settings menu.

Note: By the way, we used the post grid and post list block style to show you the examples. You can explore the PostX blocks library to see which block is the right choice for you to show related posts with thumbnails.

How to Show Related Posts with Thumbnails in the Twenty Twenty-two Theme

As mentioned earlier, there are some issues with the twenty twenty-two block-level theme. There isn’t too much to do in terms of the design. But you can show related posts in single posts with thumbnails.

We will be using the twenty twenty-two WordPress theme for this purpose. All you have to do is:

• Go to a particular post from your WordPress dashboard.
• Go to the settings of the post.
• Under the ‘page template’ section, click on edit.

Once you click edit, you will be taken to the single post template. Here you can add a related posts block layout from the default WordPress library.

Note: The problem here is the fact that the built-in layouts don’t really allow for a proper view of your related posts. Not only is there a lack of proper layouts and blocks, sometimes the built-in blocks for related posts can look broken as well.

Here’s a quick resource to help you learn more about the latest twenty twenty-two WordPress themes:
WordPress Full-site Editing

We have a solution for that as well. And it’s a quick and easy solution that requires you to use the PostX plugin (it features excellent compatibility with the latest version of PostX and block-level themes like the twenty twenty-two).

But it will require you to add the related posts block individually. The plus side here is the fact that you don’t have to worry about changing the templates or anything. You can also make the block reusable as well.

Here’s a quick look:

How to Show Related Posts with Thumbnails in WordPress Using Code

Of course, you can use code to show related posts on your WordPress website. You have some caveats here as well.

First of all, if you don’t have any prior coding knowledge, then it is probably a good idea not to go on this path. It may cause potential issues for your WordPress website. Going with one of the earlier methods is probably the best way for you.

But, the one flip side is that you don’t have to use any plugins. Unfortunately, plugins like PostX have a lot of cool features. So, you can use code (especially if you are a seasoned professional). It will keep your site fast and smooth.

However, functionality will be limited!

Why Do You Need to Show Related Posts?

The reason behind it is simple.

You want more users to interact with your site’s content. And this interaction will help you rise higher on the search engine results page.

Users generally spend time on content that solves a particular issue. While doing so, they like to spend some time moving through other relevant content on your website.

That’s where the effectiveness of the related posts comes in. Maybe there are contents similar to the one a user finds useful. Maybe you share tips on solving the issue further. Users would very much appreciate it as they are getting additional value from your site.

This interaction will work in your favor to bring your website up in the SERPs. And that is the ultimate goal, right?

Final Thoughts

We hope today’s post will help you understand how to show related posts with thumbnails in WordPress.

We agree the discussion for today was kind of one-sided. Still, the main goal for today was to showcase the way you can show related posts with thumbnails.

Sound off in the comments below to share your thoughts on the matter.

Источник

Плагин Related Posts Thumbnails, и его настройка

Приветствую друзья! Поговорим о плагине Related Posts Thumbnails, как и зачем его устанавливать и настраивать для себя. Данный плагин позволяет на блоге WordPress выводить похожие записи (перечень статей) в виде миниатюр с названием поста. Одним из преимуществ этого плагина, является то, что он дает внутреннюю перелинковку, а как вы знаете это очень полезно для SEO, и конечно же улучшает дизайн нашего блога. Ведь красочная картинка смотрится намного интереснее чем просто ссылка.

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

На многих сайтах я наблюдал работу плагина Related Posts Thumbnails, все выглядело красиво и к месту, но после того как установил его на свой блог я увидел некорректную работу плагина. Точнее он работал, свои функции выполнял, но вся красота свелась на нет. К примеру если я ставил к показу три записи, то справа оставалось свободное место, а попытка исправить ситуацию добавлением еще одного поста, приводило к тому что новая ссылка с изображением смещалась вниз вместо того чтобы встать в один ряд, что выглядело очень некрасиво. В настройках админки плагина Related Posts Thumbnails нету возможности скорректировать ширину изображения, поэтому будем редактировать код ручками, об этом расскажу ниже, а пока взглянем на основные настройки плагина Related Posts Thumbnails.

Установка и настройка

Процесс установки стандартный, скачиваем, устанавливаем, активируем, в административной панели во вкладке «Настройки» находим наш Related Posts Thumbnails и вот что мы видим:

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

1. Этот пункт автоматически добавляет блок вывода после статьи, если вас это не устраивает и вы хотите поменять месторасположение блока, снимаете галочку и путем копирования указанного кода справа

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

2. Следующий пункт «Режим разработчика» можно не ставить галочку все работает и так (если честно я не понял на что он влияет)

3. Данный пункт позволяет выводить блог с похожими в надписями например в сайдбаре, а не только в постах. Кстати забыл упомянуть, что с данным плагином устанавливается одноименный виджет. Например для установки в сайдбар надо убрать галочку и данный виджет перетащить в необходимую нам панель (надеюсь с виджетами все работать умеют). Если вы не используете виджеты, конструкцию из первого пункта надо добавить в файл sidebar.php.

4. Этот пункт отвечает за место где выводить блог с похожими записями, в постах, на страницах либо и там и там.

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

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

7. Здесь все понятно, указываем дату, и записи сделанные до данной даты не попадают в блок похожих записей, хотя по моему мнению старые записи тоже полезны для перелинковки.

8. Здесь пишется заголовок блока, то-то типа «Также по этой теме» или «Похожие записи». Заголовок пишется только тогда, если установлен чекбокс в пункте №1, то есть блок автоматически добавляется после поста.

9. Кол-во выводимых записей. Если вы решили выводить несколько столбцов по высоте, то желательно их делать кратным кол-ву в одной строке, это смотрится красивее.

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

11. В этом пункте настраиваем цвета, шрифт, стиль вывода блока, более подробно расписывать не буду, сами попробуйте как вам подходит под вашу тему.

12. Здесь настраивается по какому принципу будут формироваться похожие записи, как правило ставятся «категории», но вы можете выстроить свою логику показа записей.

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

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

А вот как выглядит этот же блок после редактирования кода, согласитесь намного симпатичнее.

Редактирование кода

Для изменения размеров выводимого блока поста, надо отредактировать файл related-posts-thumbnails.php, который находится на вашем хосте. С помощью Total Commander по FTP скачиваем файл себе на компьютер, путь по которому находится файл на хосте такой:

wp-content/plugins/related-posts-thumbnails/related-posts-thumbnails.php

Открываем файл на изменение, я это делаю с помощью Notepad++ и находим строки с 330 по 337, именно они отвечают за настройки стиля блоков.

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

1. Для изменения ширины блока постов в строке 332 редактируем параметр width: и height:, по умолчанию в них ничего не прописано, вам надо вставить свои размеры ширины и высоты, я подкорректировал только ширину, высоту блока оставил без изменения. Вот как выглядит оригинал и мой вариант:

оригинал

$output .= ‘ ‘;

после изменения

$output .= ‘ 2. Для изменения расстояния между блоками, надо отредактировать строку 331 — параметр margin: 0pt; по умолчанию стоит 0 , проставьте свое расстояние. Так же можете поэкспериментировать с другими параметрами, не бойтесь что-то испортить, всегда можно все вернуть на место переписав ранее сохраненный файл. На этом заканчиваю сей пост, надеюсь что помог вам разобраться с плагином Related Posts Thumbnails и теперь для вас не вызовет трудностей самим настроить вывод похожих записей у себя на блоге. Если что-то не понятно, пишите в комментариях, попробуем разобраться вместе. Было бы интересно узнать каким плагином пользуетесь вы для вывода похожих статей? P.S. Список самых необходимых плагинов для WordPress вы можете найти на моем блоге здесь. К слову сказать кто хочет расшириться свои знания в области HTML программирования и научится управлять таблицами стилей CSS обратите внимание на бесплатные курсы Евгения Попова. Данные курсы можно найти пройдя по ссылкам HTML и CSS. Жду Ваших комментариев. Подписывайтесь на обновления блога. Буду благодарен, если Вы поделитесь этим постом в социальных сетях! Источник Поделиться с друзьями Вам также может понравиться Картридж для принтера pantum m6005  Тонер-картридж Pantum PC-110 для Pantum P2000/P2050/M5000/M5005/M6000/M6005, черный. 00 Картридж для увлажнителя воздуха boneco 7136  Фильтры для очистителей BONECO Сменные фильтры для 00 Freebsd что такое vps  Настройка VDS FreeBSD: 5 шагов Данную статью можно 00 Canon 3540 замена картриджа  Замена картриджа на принтере Canon PIXMA MG3540 Замена 00 Политика конфиденциальности Правообладателям Контакты Adblock detector