How to automatically add an Alt attribute to your WordPress blog's Img tags (where there aren't any). Custom menu design

Twitter

Automatic insertion of the title attribute makes it possible to reduce the time for optimizing images when inserting them into blog articles. Therefore, once again, you will not need to go into editing the image and add the title attribute manually. To do this, we need to do some actions and then enjoy the result.

title attribute

Wonderful. Now our “Title Attribute” will be inserted automatically and we will not need to insert it manually. Which will save our precious time when writing articles.

After we insert the picture.

Ready image with “Title attribute”

We see that the “title attribute” is inserted automatically (Fig. 8). This can be seen when you hover your mouse over the image, after which the description “Our picture” appears (item 1).

IN latest version WordPress when changed text editor There is no “title attribute” and it doesn’t work there, which is very sad. Since the “title attribute” is used to optimize the blog and the appearance of text when you hover over the image.

Although new editor quite interesting and reminds me of . Although of course you need to get used to it.

I use the old editor, because I think that the new one is still damp. In order to return to the old editor, you just need to Classic Editor and work in your usual editor. In which this code works great.

Well, you can use the new block editor when it is brought into proper condition.

Wonderful! Here we are with a great opportunity automatic insertion“Title attribute” fields.

Take advantage and save your time.

I will be glad to see your questions and comments

I wish you success
Sincerely, Vladimir Shishkov

Today, images account for quite a bit of all web content. great place. However, not all users optimize them for better ranking of the entire site as a whole. WordPress, among its other features, provides convenient tools to add alt text and image title to the appropriate tags. In this material we will look at the difference between attributes alt/title and areas of their application.

Why do we need the alt attribute in images?

Alternative text or alt is HTML-attribute added to the image insert tag . This text will be shown if the image for one reason or another is not loaded and displayed on the page. This move provides information search robots about what exactly is shown in the photo. Usually in the tag alt write short description Images. In addition, the attribute also serves to improve the accessibility of the site for people with limited vision or for those who use screen readers. The reader program will read the text part of the page, and when it reaches the image, it will also read the text located in alt. Thanks to this, users will always know what is drawn in the picture, even if they cannot see it.

How and where to fill alt in WordPress?

WordPress provides quite convenient tools for filling in the attribute alt. So, you can specify it already when loading the image. To do this, open a post or page, insert the cursor where the image was inserted and click the button Add media file.

After the button is pressed, a window will open Media libraries WordPress, where you will need to specify the local location of the image file. As a result, you will see a sidebar with the parameters of the downloaded file.

As you can see, there is a field on the panel alt attribute. By default, it is empty. The text in the attribute must be 2-3 words long, and they must accurately describe what is in the photo. To insert an image on the site, click the button Insert into post.

Why do we need the title attribute in images?

Title- another attribute HTML-image insertion tag . It is used for the title of the picture and usually indicates its title. Note also that the text inside title will not be shown to the user if the image is not displayed on the page.

How and where to fill out the title in WordPress?

The attribute is filled in after the image is uploaded to the site. For this purpose in Media library WordPress should highlight the image, after which a familiar image will appear side panel.

Title or the title needs to be set in a meaningful way depending on the information presented in the image. At the same time the text must be different from the attribute alt. The title can be written in Russian or used transliteration. Quite often site owners use it to SEO-optimization by pointing there keywords. You can also set the attribute while on the post or page edit page. To do this, you need to click on the picture, and on the additional toolbar that appears, click the edit button with the image of a pencil. In general, to optimize a site, it is recommended to use both attributes for images. Attribute alt has one advantage - it helps search engines find images on your site and display them in image search results. In this case, the site receives additional traffic from search engines. Another benefit of both attributes is improved site accessibility for people with special needs.

Hello, dear readers of the blog site. Html code validator and others will issue warnings if they find image tags on the page IMG without the ALT attribute specified inside.

My site and I, in order to quickly get out from under them, removed all the Alt and Title attributes in the IMG tags, because I suspected that it was because of their over-optimization that the filter was applied. Alas, this did not help and I had to spend five months not rewriting texts.

But I no longer have the strength to add ALT attributes back to articles. Now, when I update old materials, naturally, I also add ALT notes, but I don’t rewrite all the articles (I don’t get around to everything). That's why I thought about setting up a temporary structure.

Automatically add ALT to images that don't have it

The idea is very simple and the implementation is elegant. The script shown below (a feature for WordPress) simply looks for IMG tags in which alt attribute not at all. Having found such an outrage, she adds ALT and stupidly writes the title of the article in it (the contents of the Page Title tag).

Yes, the solution is not the most elegant, but it is simple and effective. The validator will stop swearing, and search engines will be able to at least somehow get their bearings on what they are talking about we're talking about in this image.

So, the shown code fragment needs to be added to the function.php file (I wrote about it in detail) of the theme you are using (be sure to backup it). Look where similar constructions are already inserted there and try not to shove it inside some other function (it is better to insert it before the function of another function, so as not to make a mistake:

Function add_alt_tags($content) ( global $post; preg_match_all("/ /", $content, $images); if(!is_null($images)) ( foreach($images as $index => $value) ( if(!preg_match("/alt=/", $value)) ( $new_img = str_replace(" post_title.""", $images[$index]); $content = str_replace($images[$index], $new_img, $content); ) ) ) return $content; ) add_filter("the_content", "add_alt_tags" , 99999);

Now look at the source code of some page on your blog where ALT attributes were not previously specified. Naturally, this should not be a page from the cache (served by your caching plugin), but an updated page that includes the changes you just made.

In its code you will find ALT-you, although identical, are still present.

Anything is better than nothing. IMHO.

On the pages where the alts were registered, nothing will change:

How to Add Alt and Title Attributes to Thumbnails in WordPress

And one more thing on the topic. Thumbnails in WordPress are displayed with empty Alt tags (like alt="") by default. If you don’t like this, you can add the names of the articles from which they were taken as an alternative to the thumbnails. At the same time, you can add the Title attribute to the Img tag:

//adding alt and title for post thumbnails start function wph_alt_title_for_thumbnail($html) ( $post_title = esc_attr(get_the_title()); //adding alt $html = preg_replace("/(alt=")(.*?)(" )/i", "$1".$post_title."$3", $html); //add title $html = str_replace("/>", "title="".$post_title."" />", $ html); return $html; ) add_filter("post_thumbnail_html", "wph_alt_title_for_thumbnail", 10, 1); //adding alt and title for post thumbnails end

If you want to add only violas to the miniatures, you can use the following code:

//adding alt and title for post thumbnails start function wph_alt_title_for_thumbnail($html) ( $post_title = esc_attr(get_the_title()); //adding alt $html = preg_replace("/(alt=")(.*?)(" )/i", "$1".$post_title."$3", $html); return $html; ) add_filter("post_thumbnail_html", "wph_alt_title_for_thumbnail", 10, 1); //adding alt and title for post thumbnails end

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to

");">

&after=

✈ 1 time = 0.005307s = So slow| 50000 times = 2.55s = fast| PHP 7.1.2, WP 4.7.3

There are no hooks.

Returns

null/string. null when the result is printed to the screen (echo=true). Header when the result is returned (echo=true).

Usage

$args (array/string)

Parameters as an array or string. You can pass the following parameters:

before (line)
Text/HTML code to be placed before the heading.
Default: ""

after (line)
Text/HTML code to be placed after the title.
Default: ""

echo (logical)
Print to screen (true) or return for further processing (false).
Default: true

post (number/object)
ID or object of the entry.
Default: current entry

Default: ""

Examples

#1. An example of using a function in the title attribute of a tag .

Since this attribute is not allowed using html quote tags and other things, then we cannot use the_title() function there. Instead we use the_title_attribute() :

" title=""Permalink to: ", "after" => "")); ?>">

The title attribute code: wp-includes/post-template.php VER 5.1.1

"", "after" => "", "echo" => true, "post" => get_post(),); $r = wp_parse_args($args, $defaults); $title = get_the_title($r["post"]); if (strlen($title) == 0) ( return; ) $title = $r["before"] . $title . $r["after"]; $title = esc_attr(strip_tags($title)); if ($r["echo"]) ( echo $title; ) else ( return $title; ) )

) is an important and convenient thing in many ways.

One of the options for using it is to create a block of links, each of which has its own design, for example, this Categories:

Block of links with unique icons

A similar feature is available in many premium themes; I believe there are also plugins that create a similar menu. My solution will be suitable for any WP theme, it will not be redundant or carry any additional load on the server, as is sometimes the case with plugins. To implement it, you need minimal knowledge of css and html ( you can read about it here – htmlbook.ru) and some html editor, for example, the free notepad++ ( offsite – notepad-plus-plus.org).

So, the first thing you need to do is create a custom menu – Console > Appearance > Menu ( hereinafter, the path in the officially localized version of WP). Then, if you are using a custom menu widget Console > Appearance > Widgets, drag the widget to the sidebar block and select the custom menu you created earlier. I think that these steps are simple and do not require screenshots. For the “Twenty Ten” theme ( wordpress.org/extend/themes/twentyten) the result will look like this:

Appearance of a custom menu in the “Twenty Ten” theme

To style items, not much is required, just the icons themselves, pre-loaded into the images folder of the theme used and small edits made to the theme’s style file - style.css. Pictogram icons can be found like this: google.com/search?q=free+icons. The style file is usually located in the root of the theme folder.

To personalize links, you need to somehow highlight each of them, i.e. make it unique according to any of the attributes available for selection using CSS. In the WordPress console, you can add a title attribute (htmlbook.ru/samhtml/ssylki/atributy-ssylok) to custom menu links. It is this attribute that I propose to use. To determine the value of this attribute, you need to fill in the “Title Attribute” field when editing the link Console > Appearance > Menu > Your custom menu, see screenshot:

Field “Title attribute” in which you need to enter a unique value

When filling out the value of this field, it is important to use only Latin characters!

For the “Posts” item I use the value “posts”, i.e. So:

The “Title attribute” field is filled in

It remains to change the properties of this element; to do this, write the following in the style.css file:

Widget_nav_menu a ( list-style: none; background: url(images/posts.png) no-repeat left center; )

Let me explain. .widget_nav_menu – custom menu class; a – link selector with a title attribute whose value is posts; list-style: none; – remove the menu item marker; background: url(images/posts.png) no-repeat left center; – we determine the background image – the icon of this particular item, i.e. Let's personalize it. The last property and its values can be found at the link - htmlbook.ru/css/background, I’ll just explain that images/posts.png is a relative link to the icon file that you want to see for this link, and left center is the rules for the location of this icons.