Thumbnails of articles on the WordPress plugin page. Connecting WordPress thumbnails, setting them up and using them. Checking required plugin installation

Hello! Today I will tell you about super plugins for displaying WordPress posts. These plugins will help you display stylish post announcements on any page or post on your website. In the announcement, you can show the image of the post, title, excerpt, author, date, category. You will be able to display announcements not only of posts, but also of pages.

An excellent plugin for displaying announcements of posts and pages. Display by categories or tags. 4 display styles to choose from. Ability to customize appearance. You can display the names of categories on the announcements page so that when you click on a category, only posts from that category are displayed. How to configure the plugin –

Super widget for displaying post announcements. Display by categories, tags, authors. Customize appearance, image size. You can add date, author, category. Wide and flexible settings. The best widget for displaying posts! How to configure the plugin –

Stylish announcements of posts in the form of tiles. Displaying entries by category. You can choose the color of the tiles. You can display a list of all site categories on the page, so that when you click on a category name, posts from this category are shown in Ajax mode. How to configure the plugin –

5. Post Grid

Super stylish, adaptive post grid! Selecting hover effects, selecting the background color of posts. Output by category, etc. How to configure the plugin –

//Output the first image from a post function first_post_image() ( global $post, $posts; $first_img = ""; ob_start(); ob_end_clean(); $output = preg_match_all("/ /i", $post->post_content, $matches); $first_img = $matches ; if(empty($first_img))( $first_img = "/wp-content/themes/THEME/images/noimages.jpg"; / / specify the path to the image that will be displayed by default ) return $first_img )

The script pulls the first image from the post, but if it is not there, it puts the default image. To display a default image you must create it, calling it noimages.jpg and place it in the folder images. In line 11, enter the path to the image.

1. We enable the function of displaying the first image in the topic

The thumbnail is included in all files where records are displayed in a loop - this is index.php, content.php, archive.php, category.php, single.php etc,
To connect, you need to insert the following code after the loop definition, which looks something like this:

The output code of our function itself:

" title="!}"> " alt="!}" />

But in the recording you need to display a non-clickable image. To do this you need to single.php add code without link

" alt="!}" />

Now there will be no posts in your topic without thumbnails.

As I wrote above, now you don’t need to add thumbnails to posts (it still doesn’t display them), just insert a picture at the beginning of the post or where you need it. The first one will automatically become a miniature.

Another small addition to the article.

If you need a thumbnail to be displayed, and if it is not there, the first picture from the recording, then you need to insert a condition of the following type instead of the output timeline as above:

" alt="!}" />

Of course, you add your style classes and decorate them in CSS. Then your thumbnails will look the way you need.

That's all, thanks for your attention :)

Amazing feature in WordPress!

I'll start from scratch. So first you need to understand the difference between thumbnails and regular post images. A thumbnail is something like a preview of a post; it may not even be used in the post itself.

Suppose you have some kind of category, and on the page of this category, before some posts (and maybe before each) there is some kind of picture, which is essentially a preview of the post, i.e. miniature. If we go to the page of one of the posts, we may or may not find this picture in its content.

In general, okay, in a nutshell, a thumbnail is a preview image for posts that:

• may or may not be used in post content,
• can be displayed along with a link to the post on the pages of categories, tags, archives, etc.,
• can be automatically adjusted to a certain size (I mean image resolution),

In fact, you can even use it as a website background, i.e. each entry has its own background.

Step 1: Enable Thumbnail Support for Your WordPress Theme

In order to use thumbnails on your site, you must first enable them, because by default this functionality is turned off.

All we need to do to activate the thumbnails is paste the following line of code into your functions.php file (there can be many files with this name - we need the one that is located directly in the folder with your current theme).

If you don't want to use thumbnails in all of them at once, you can connect them, for example, only for posts:

or only for posts and only for pages:

Is it possible to assign a thumbnail to a WordPress taxonomy?

By standard means - no. You can use any of the plugins that add for (including categories and tags), or write the image URL in the description of your specific taxonomy element.

Step 2. How to set a thumbnail for a post?

In general, there are two ways to install thumbnails through the admin panel. They are not particularly different from each other - you can use the one that seems more convenient to you.

Method 1. Metabox “Post Thumbnail”

He's like this:

This example displays post titles (function) and post thumbnails with links (function) to the post itself.

The same example for the function:

Getting the thumbnail URL using wp_get_attachment_image_src() and get_post_thumbnail_id()

If you need help with your website or maybe even development from scratch - .

We'll talk about wordpress thumbnails. Or, as they can also be called, image previews. In this article, you can find out what a WordPress thumbnail is, how to connect it to your theme if it is not connected, how to configure its display, and also in what cases it can be used on your site?

And so as not to delay, we will immediately begin to analyze all the issues listed above.

What is a WordPress thumbnail and where can I use it?

A WordPress thumbnail is a smaller copy of an image on a website that uses the Wordpress engine for administration; otherwise it can be called an image preview or a mini picture.

It can be used both in article announcements, instead of standard images, and in other areas of the site, for example, when using popular or similar WordPress posts with a picture. There are also plugins that can use image previews to display various information. In addition, a mini picture can be added to the RSS feed of our website for a more attractive appearance of article announcements. In general, the scope of miniatures is quite wide, and questions related to this type of image arise quite often.

For example, very often questions arise related to the fact that some plugin or display code uses thumbnails, but they do not appear on the site, which makes the appearance completely different from what was expected. In this case, you need to check the support of thumbnails in our theme, and if it is missing, enable it.

Checking WordPress theme support for thumbnails.

So, if we are not sure about the connection of thumbnails in the theme, this can be easily checked. To do this, you need to go to the WordPress admin panel and go to the editor of any of the posts, or select the “add new” post item.

If WordPress thumbnails are connected, then in the right column we will see a window called “Post Thumbnail”, with a link to “Set Thumbnail”.

If we don’t see this window, we should check that there is no option to add a thumbnail in the screen settings. To do this, in the upper right corner, you need to click on the “Screen Settings” tab. And check that the “Post Thumbnail” item is missing.

If this item is present, you just need to check the box next to the item and then a window will appear where we can set the article thumbnail. If this item is not available, then we need to enable thumbnail support in our template.

And please note that due to the way themes are translated, this option may be called differently, for example, “Characteristic image,” and the link to create a thumbnail may be like this: “Set a special image.”

Connecting a WordPress thumbnail and displaying it in the article announcement.

To connect WordPress thumbnails to our theme, you need to open the functions.php file in the admin panel, or using the NotePad++ text editor and at the very bottom, before?>, add the following code:

Add_theme_support("post-thumbnails");

After that, in the post editor we will have the opportunity to set a thumbnail. And if we don’t have a lot of articles, then we can set a WordPress thumbnail for each one manually.

Now how can I use it in an article announcement? To display a thumbnail on the main page, you need to write the code in the index.php or loop.php file in the right place:

If you have difficulty finding the right place, then just find this code:

Or like this:

And before it, insert the code for displaying the WordPress thumbnail.

After these steps and assigning a mini-image in the WordPress post editor, small copies of the images will appear on the main page. Plus, we can make this image a link to the continuation of the article. To do this, replace the standard code with this one:

" title="!}">

A little more detail about what this code consists of:

• 1. opening tag , and closing— a tag intended for creating links. It is he who will make the thumbnail a link.
• 2.href="" - link to the article.
• 3. title="" — тайтл (заголовок) ссылки, который будет виден, при наведении на нее курсора. Берется из заголовка статьи.!}
• 4. — mini-image output function.

Now it should be a little clearer how this works. All we have to do is design the appearance of the picture, depending on our needs. To do this, you need to add the following code to style.css if it is not there:

Img.wp-post-image(thumbnail styles here)

And between the brackets, instead of “here are the thumbnail styles,” add the necessary styles. This applies to normal, standard output, without using any parameters.

WordPress thumbnail options.

But this function has additional parameters for more flexible settings. Of course, we will not consider all the parameters, but will only touch on the assignment of sizes for mini pictures, since this may be needed when adjusting the appearance of the images. And when assigning parameters to the thumbnail display function, we will be able to change the sizes from the admin panel, which is more convenient than going into the code and editing it every time.

By default, we can use the following options for images:

The_post_thumbnail(); // standard output, without parameters, which we talked about above. the_post_thumbnail("thumbnail"); // a smaller copy of the image (default 150px x 150px). It is possible to configure from the admin panel, but the size should not exceed 150px the_post_thumbnail("medium"); // medium size (default 300px x 300px). Ability to configure from the admin panel. the_post_thumbnail("large"); // large size (default 640px x 640px). Ability to configure from the admin panel. the_post_thumbnail("full"); // full size (original image size). the_post_thumbnail(array(100,100)); // your sizes. It is possible to assign any width and height dimensions.

To use one of the options, it is enough to replace the standard code (without parameters) with any of the proposed ones.

And accordingly, for each parameter, there are selectors for the css style file.

Img.wp-post-image img.attachment-thumbnail img.attachment-medium img.attachment-large img.attachment-full

The choice of the direct selector depends on the choice of parameters for the thumbnail.

Automatically assign a WordPress thumbnail and display it in the article announcement.

But what if the site has a fairly impressive list of content and setting the thumbnail manually will be quite problematic. To do this, we can use another function that will automatically create a mini-image from the first image of the article. To do this, in the functions.php file, after ?> add the function:

/i", $post->post_content, $matches); $first_img = $matches; return $first_img; ) ?>

Now, to display a thumbnail in the announcement of the article, that is, on the main page, open the file index.php or loop.php and add the code with the function for displaying the thumbnail (the function from the previous example can be removed) in the same place as with standard output:

"src="" alt="" width="150" /> !}

Now, let's take a little look at what this code consists of.

• 1. Tag — in fact, it is this tag that will display the image, since the function itself only pulls out the link to the first image from the post.
• 2. title="" — тайтл (заголовок) изображения, который можно увидеть при наведении курсора на миниатюру записи wordpress.!}
• 3.src="" - a link to the image that will be displayed. As you can see, this is where the function is located, which is responsible for the link to the mini-image.
• 4. alt="" — альтернативный текст изображения. В случаях, когда в браузере отключена загрузка изображений, будет появляться alt, как бы описывая, что здесь должно быть за изображение.!}
• 5. width="150" — sets the width of the thumbnail. In this case, the image will be reduced in direct proportion, focusing on the specified width.

It is quite possible that when you insert this code, two images will appear on the main page for each announcement. The result of this error might be to use the standard output of the announcement:

And for this error to disappear, just replace it with:

After this, this problem should disappear.

The last thing we can do today is to make the WordPress thumbnail a link. To do this, simply wrap the code with the tag with a link to the article:

" >"src="" alt="" width="150" /> !}

Regarding the use of WordPress thumbnails in the article announcement, that’s basically it. But we may also need to design the appearance of the picture using the style.css file. Some people may have trouble deciding which selectors to use for styling.