How to Add a Title Attribute to a WordPress Navigation Menu. Custom menu design
Most web content contains images, but few website owners optimize images for better search rankings. WordPress provides the ability to add alt text and image title to the appropriate tags. Let's look at the difference between the alt and title attributes and how to use them to work with images on the site.
What is an alt tag for images - description of pictures
Alt, or alternative text, is an attribute added to the image insertion tag in HTML code. Such text appears inside the image container when for some reason it cannot be displayed on the page. It helps search engines understand what is shown in this graphic element.
alt attribute also used to improve website accessibility for people with disabilities poor eyesight or those who use screen reading devices. The reader program will read the text article, and when it comes to the image, it will read the text located in the alt attribute. This will allow users to know what is in the picture even if they can't see it.
Virtual website hosting for popular CMS:
Recommendations for filling out this tag, what to write in WordPress
WordPress allows you to add an alt attribute to images when loading them using the built-in media uploader. When creating a page or post, the “Add media file” button is available on the toolbar. When you click it, the built-in library window opens, where you need to load or simply drag the desired picture with the mouse.
When you upload an image using the built-in WordPress content uploader, there are several fields available on the right side of the window for you to fill in the image attributes. The title field should not be confused with the title attribute, which is used inside an image tag. The title added during upload is used only by the WordPress media library to display a list of media files.
Set the alt attribute in the appropriate field - it usually consists of 2-3 words and should directly describe what is shown in the picture. If you wish, in the same upload window you can fill in the fields for a signature and description of the image.
What is the title caption attribute for images in WordPress
Title is another attribute that can be added to an image tag in HTML code. It is used for the title graphic element and indicates its name. The title is shown in a tooltip when the user hovers over the image. The text entered inside the title will not be shown to the user if the image is not displayed on the page.
The title should be given meaningfully depending on the information presented in the image. At the same time, this text must be different from what is contained in the alt attribute. The title title can be written in Russian or used transliteration, often added to it for SEO optimization keywords.
title attribute is added to an image in WordPress after it has been inserted into the text. If you are using visual editor To design the page, click on the picture. On the appeared additional panel tools, click the edit button with a pencil icon.
As a result, a pop-up window will open to configure image parameters, in which you need to open the “ Additional settings" A field will appear to add a title attribute, where you need to enter the name of the image. In the same window, you can configure the alt attribute in case you forgot to enter it when loading the image. Adjust both fields and click the Update button.
For those users who know how to edit HTML code, just switch from visual to text editor and add title and alt attributes to the corresponding image tag.
To optimize your site, it is recommended to use both the alt and title attribute for images. Obvious advantage The purpose of this step is that it helps search engines find the images on your site and display them in image search results.
In this case, the site receives additional traffic from search engines. Another valuable factor is that these attributes improve the accessibility of your site for people with special needs.
) 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 own design, for example, here is the 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 to 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, 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 the items, not much is required, 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 those available for selection using css signs. 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 in 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 we 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 define background picture– an 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 relative link to the file of the icon that you want to see for this link, and left center is the rules for the location of this icon.
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 a short description of the image. 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 sidebar.
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 indicating keywords there. 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. At the same time, the site receives additional traffic from search engines. Another benefit of both attributes is improved site accessibility for people with special needs.
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 the text editor was changed, there is no “title attribute” and it does not 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! So we got acquainted with the wonderful possibility of automatically inserting the “Title Attribute” field.
Take advantage and save your time.
I will be glad to see your questions and comments
Good luck to you
Sincerely, Vladimir Shishkov
Receives tag of the image of the specified attachment (attached to the file post).
If the attachment could not be found, an empty string will be returned.
If the attachment is an image, then a code corresponding to the specified size will be returned for it (see the $size parameter).
For attached files of a type other than images (.zip, .xls, .flv), an icon corresponding to this type will be returned (automatically detected by WordPress). By default, this icon is not displayed; in order for it to be displayed, you need to set the 3rd parameter ($icon) to true.
Hooks from a function
Returns
Line. HTML code of the image in tag.
Usage
$img = wp_get_attachment_image($attachment_id, $size, $icon, $attr); $attachment_id (number) (required) ID of the attachment whose image you want to get. $size (string/array)Picture size. Can be specified in the form:
- Strings thumbnail , medium , large , full or the name of the available size
- In the form of an array of 2 elements that determine the dimensions of the sides of the displayed image: array(32,32) .
Specifying dimensions through an array does not physically reduce the image; it is reduced only visually from the most suitable ready-made thumbnail (uploads).
Specifying sizes does not affect the size of displayed icons for files; they are always displayed in the original size (32x32).
Instead of using an array, sometimes it makes more sense to register new size images (add_image_size()) and use it along with the already installed ones (thumbnail, medium, large or full). This approach is more effective, since there is no need to constantly check which of the available sizes fits better.
Default: "thumbnail"
$icon (logical) Whether to use media icons to represent attachments. By default, for attachments of the file type (not images), the icon will not be displayed; if you want to display icons for these types of attachments, set this parameter to true.
Default: false$attr (array)
Any attributes for the tag in the array. For example:
Array("class" => "foo bar", "title" => "picture title",)
Examples
#1. We will display an HTML-ready image
Let's display the picture average size of attached image file 651:
It will output something like this HTML:
alt text will be filled in only if it is specified for attachment in a special field (alt text). The alt does not include text from the title, description or caption of the image...
#2. Example with a custom size
Let's display the picture specified size 20x20 pixels, for attachments of the “picture” type and the corresponding icon for other types of attachments (3rd parameter):
ID, array(20,20), true); ?>
$post->ID - dynamic transmission of ID within the loop. You can create such a loop using the get_posts() function (get_posts("post_type=attachment")).
