How to properly implement a CRM system: algorithm of actions and common mistakes. Simple commenting system using AJAX Poor staff training

In this lesson I will talk about how comments are made in HTML, CSS, PHP. Comments are text that is not visible on the web page. They are used for various kinds of explanations, reminders, and descriptions for webmasters, which allows you to structure the document. Comments are indispensable when debugging code; they allow you to quickly navigate the markup of a web page and find the desired block. Comments are often used to debug HTML code. For example, you can temporarily comment out specific block code so that it is not executed, and if necessary, it is easy to restore it.

In HTML, comments are formed using the characters: . Thus, any text between these characters is a comment. Let's look at an example:

Example of comments in HTML

Comments in CSS are created using the characters: /* and */. To create a comment, you simply need to place the web page code between these characters:

Comments in PHP can be single-line or multi-line:

1) Single-line comments in PHP are created using the characters: //. Simply put this character in front of the line and it will be commented out. This option is used in the case when the comment consists of only one line.

2) To implement multi-line comments, the following symbols are used: /* and */. This option is useful if the comment spans several lines.

So we learned to do

Nowadays, many popular sites are not only a source of information, but also a place where this information can be discussed with other users; sites often turn into centers around which a community is formed.

Now users come to you not just to read some news or article, but also to discuss it.

What is typical is that the reader could have found out the news itself in another place, but it is the community of interesting people, the opportunity to speak out and hear their opinions - that is what will lead to the fact that he will visit your site and go to the page with the news that he already knows.

Just ten years ago, the centers around which all life was in full swing were forums. However, nowadays this is no longer so convenient and popular; now most popular sites operate in blog format, and user communication occurs in comments.

Thus, comments are the factor that distinguishes ordinary sites from sites that are truly successful in their field. This applies to news sites, blogs, communities of interest, sometimes even online stores and various specialized sites.

It is also important to remember that comments are a source of feedback from readers, which allows you to find out what exactly they like and what readers react to. And the better and more interesting your site is for visitors, the more often they return to you and recommend it.

In addition, feedback is always a good motivation for the authors and administrators themselves, which almost instantly allows you to feel that people are interested in what you do and your site. A simple counter You won’t get that kind of visitors.

So what should be the “correct” comments on a modern website?

• Simple and understandable for readers.
• Convenient and functional for administrators.

What options does a webmaster currently have?

There is only one plus - there is a fairly high probability that the user is already logged in to the social network and therefore will not have to register.

Russian-language analogues are often completely paid and cannot boast of an attractive design.

The only exception here is the SV Kament system (svkament.ru), which is completely free and brings together the functionality of various Western commenting systems, but at the same time is focused on the Russian-speaking segment.

Let's take a quick look at what we'd like to see in our commenting system.

Tree-like comments with the ability to collapse individual discussion threads. They are very helpful in navigating the discussion when there are a lot of comments.

Social login greatly simplifies registration and, as a result, increases the number of comments. Western studies show that using a social login sometimes increases conversion by more than 60%.

Rating comments - firstly, it helps to highlight the most interesting and worthwhile comments, which is extremely convenient for readers, and secondly, it encourages users to write interesting messages.

Work in real time - the more convenient and faster the system works, the more people use it and the more often they write comments.

Email notifications - how often do we lose potential comments just because the user doesn't know that someone replied to their previous message.

• Management directly on the site.

• User information.

• A single comment control panel for the entire site.
• Ability to appoint moderators.
• Easy to install.

The SV Kament system also has a number of interesting features.

• Social broadcasts - allow you to “return” communication to your website from social networks. If you have a VKontakte group in which you post announcements of new articles on the site, then often part of the discussion of the articles remains in the comments on the post itself, and it would be great to broadcast these comments back to your site.

• User rating and status - allows you to highlight the most active and popular visitors, thus stimulating your users to visit more often, communicate more and write interesting messages to other people.

There is a fairly common practice to place several commenting systems at once, for example, a separate VKontakte widget, a separate Facebook one, and a separate one for everyone else.

In my opinion this is one of the worst decisions, however, it is important to understand exactly what goals are being pursued.

If you just need to collect user reviews, then this method has a right to life, although a simple guest book or even an email address may be enough for this.

If our goal is to create a community and stimulate communication between users, then this approach is extremely harmful, because by dividing comments, we divide the communication itself, so instead of a single dialogue, we get a bunch of unrelated messages.

What kind of comments do you use? Do you consider comments important to your site, and how convenient and effective do you find comments on your site?

To be honest, when I saw that they were writing about this and advising newcomers on other sites, I was a little horrified and decided to write down my note on this topic without a fatal flaw. Mostly I saw long sheets of code that implement adding comments to the site. Usually, for this purpose, they create a form, implement its processing, saving, as well as selections for display. But the advantages of this approach become less and less as time goes on.

In this post you will learn one of the simplest (but, subjectively, one of the most preferable) ways to add comments to a site - a simple example for beginners + options for more advanced webmasters.

Indeed, why reinvent the wheel and write a bunch of code that will still have to be supported, fixed, etc. in the future, if there is a bunch ready-made solutions from third-party services (we are talking about in social networks+disqus)?

But before we move on to implementation itself, let's look at the advantages/disadvantages of using ready-made solutions. (If you forgot about anything, write in the comments and we’ll expand the list)

Benefits of third-party solutions:

• Easy to implement.
• Protection against spam “out of the box” (in my solution I would have to additionally implement this, so, theoretically, it is related to the previous point).
• Less prone to errors, bugs, etc., since third-party solutions have been tested by millions of users (again related to the first: you can also write everything without bugs, but it will take additional time to debug).
• As a rule, services provide a ready-made admin panel, statistics, notifications for admins, sometimes moderation, several admins, pre-moderation, etc., which can take months, if not years, for a webmaster, especially a beginner, to implement.
• The user does not need to register, enter his name, etc. - it is assumed that he already has an account on a popular social network.
• Most likely, it will withstand a heavy load due to the fact that social. platforms are initially designed for heavy loads.

Flaws:

• Poor or complete lack of opportunity to change appearance block with comments.
• Indexing in search engines.

As you can see, there are many more benefits. The inability to change the appearance is most likely done in order to recognize the style of the comment service, thus creating unobtrusive advertising. (As one of the options). As for indexing, is it really that important, because not all comments carry meaning.

But enough theory, let's move on to practice.

1. The simplest option is to add comments using a selected social network.

For example, vk. Let's look at the documentation. We copy the provided code and add it to the page (pieces of code were taken from the docs at the link, they may change in the future, so always copy from the documentation site. Here is only a possible example):

1) Add to:

VK.init((apiId: 2951023, onlyWidgets: true));

2) Add in the place where we want to see the comments widget (for example, after a note, if we are talking about a blog):

VK.Widgets.Comments("vk_comments", (redesign: 1, limit: 10, width: "665", attach: "*"));

2. Add widgets from several services. For example, like on this resource. Switch tabs:

Add to the markup (twitter bootstrap must be connected for correct operation!) in the place where you want to display the comments widget:

• Discuss
• Vkontakte

But this option is not the best, although it is the simplest. The problem is that with this approach, all widgets will be initialized when the page is loaded, regardless of whether the user needs them or not.

This can be avoided by implementing lazy initialization of comment widgets. First the entire code, then an explanation:

(function(global, $) ( "use strict"; $(function() ( var $tabToggler, initComments, initialized; initialized = ( "#vk-comments": false, "#disqus_thread": false ); initComments = function (type) ( var discussUserName, disqus_config, pageUrl; if (initialized) ( return; ) pageUrl = "page_url"; switch (type) ( case "#disqus_thread": // You need to set this params using your platform"s appropriate way discussUserName = "discussUserName"; disqus_config = function() ( this.page.url = pageUrl; return this.page.identifier = "page_identifier"; ); (function() ( var d, s; ​​d = document; s = d.createElement("script"); s.src = "//" + discussUserName + ".disqus.com/embed.js"; s.setAttribute("data-timestamp" , +new Date()); return (d.head || d.body).appendChild(s); ))(); break; case "#vk-comments": VK.Widgets.Comments("vk-comments ", ( limit: 5, attach: "*", pageUrl: pageUrl )); break; default: return; ) initialized = true; ); $tabToggler = $(".comments-wrapper a"); $tabToggler.on ("shown.bs.tab", function(e) ( initComments($(e.target).attr("href")); )); initComments($tabToggler.closest(".active").find(" a").attr("href")); )); ))(window, jQuery);

Pay attention to the variables whose value you must prepare using the methods provided by your platform.

First, let's create a mapping of comment widget types, a variable initialized. Next, function initComments(type) allows you to initialize a comment widget, and it does nothing if it has already been initialized.

And the final touch is to initialize the default comment widget so that it appears immediately after the page loads.

Ready script for and coffeescript for gist. Example of work - below (code examples taken from this site)

Reading time: 55 min

Good day to all.

Now the time has come for the long-awaited material about micro markup.

I’ll say right away that this article will be quite difficult to understand at first, especially for beginners, since there are many options for micro markup and it’s difficult to get it all in your head at once. But I will try to describe the overall picture and at the same time focus on the most important and common things.

The material is quite voluminous, but I hope that it will help you create micro-markup on the site.

IN Lately I noticed that a lot of people are fixated on microdata. This happened after various SEO bloggers began to vigorously discuss it. But let's figure out why it is used at all and whether it is necessary to pay so much attention to it. Is the game worth the candle?

If you hear micro-markup or semantic markup of a page (site), then know that this means marking up a page using additional attributes (tags), which give search engines the idea of individual elements pages, indicating their content.

You must understand that regular page and so is marked up, but the usual generally accepted tags and attributes are used. This is quite enough for search engines and many sites still exist this way and are thriving quite successfully.

But, if we want to help search engines understand our site, point them to important areas of the page, understand its structure, pointing out the content of those areas that first need to be paid attention to, then it is necessary to implement micro-markup, that is, add certain tags and attributes that will indicate everything.

By doing this, we will not only help search engines, but also our site, since micro markup is used not only to understand the site structure and content, but also to build search results, forming functional and attractive snippets, which affects the click-through rate (CTR) of the site in issuance. And this is an increase in overall site traffic.

You can see a striking example of such snippets below.

On this image you can see, which complements and makes it more noticeable among the gray masses of other sites in the search results. I also used arrows to highlight the breadcrumb trail, which shows a clear structured path to the material on the site, rather than a simple unclear URL.

This navigation chain is quite simple. All you have to do is install them on the site.

Here is another option for rich snippets.

The same option allows the visitor to immediately understand what the site is about and what it can give him. If the snippet is constructed correctly in this case, then the user can immediately take the action you need, and as we know, each site must perform its own tasks (subscription, purchase, etc.).

Agree that such a snippet will be more noticeable in the search results than a regular page description, since it is much larger in size. Yes, and it looks more solid.

Let's now answer a question that may concern those who think that micro markup helps in increasing positions and is one of the ranking factors.

Does micro markup affect rankings? Should we expect an increase in positions after its implementation?

In order not to write our reasoning, let's turn to the help of the Yandex search engine. So, what does Yandex itself tell us about this? I quote:

Will my site rank better if I use markup?

Answer: Markup can make your site more visible in Yandex Search and thus attract more visitors belonging to target audience. Yandex is interested in users solving their problems using Search. One of the Search quality metrics is called “user happiness.” Websites that increase “happiness” rank higher.

We can conclude that markup does not directly affect positions, but only indirectly, since we can make a more attractive snippet, which in itself will bring more visitors to the resource. Then it's a matter of technique. More visitors means more accumulated good indicators about the pages (if the content is high-quality) and the positions will gradually increase.

It is also worth noting that by helping search engines understand the nature of the content, its type (information, meeting, product, etc.), we make the content more relevant search query and he should occupy higher positions. Maybe not directly, but indirectly - that’s for sure. Yandex confirmed this to us (see above).

So, let's make a short checklist of the benefits of having micro markup on the site. These are those points that indirectly or directly indicate the quality of the site, increase its position and help search engines.

So, I think the answer to the question has been given.

Is markup necessary at all? - Yes, I need it.

Of course, if there is a choice between the painful implementation of markup on the site and working on other aspects, then, of course, you should not focus only on semantic markup. It’s better to work on content, which is much more important than some technical detail among hundreds or thousands of other things. Moreover, now you can highlight your snippet in the search results without introducing markup into the template, but only by installing , which already provides rating markup.

Once we know the main benefits, we can move on to consider the main types of semantic markup.

Everything is quite complicated here. First, you need to understand that there are micro markup dictionaries and their syntaxes.

A dictionary can be understood as a micro-markup language that includes a set of classes and properties that indicate the essence of the page content. In each dictionary, each element on the site is identified using different tags. For example, in the Schema.org dictionary, the name of the document is indicated using the “name” tag, but microformats use a CSS class inside the block of the element that is worth marking up (Chamomile, where fn org is the title tag in this case).

Each dictionary and syntax has its own tags and attributes, which makes micro markup formats a so-called vinaigrette. It's really hard to figure everything out.

Syntax is understood as the way of using a particular language (dictionary) of semantic markup. The syntax determines which tags will be used to indicate the essence of objects and their properties on the page.

From the previous definition about syntax, the concept of essence was introduced. What does this mean applicable to the issue at hand?

Essence - simply put, this is the type of information (unit of content, information) that we point to search engines. For example, we need to point to announcements on the main page of the blog, that is, highlight the essence of this area with some tag, defining it as an announcement area. The same needs to be done with the post page, where you need to indicate the essence of the area where the content (article) is located, that is, highlight the text as a content area.

For almost every element of the page, you can define the essence, that is, indicate what it is: content or rating, or comments in general. Thus, entities can be specified on such pages (I’ll take a simple blog template like mine as an example):

• Home - list of announcements;
• Posts page - comments, content, rating (if available), breadcrumbs;
• A regular static page - content, comments (if any).

In addition, on each type of page you can designate the same element - site header, footer (footer), sidebar (side column), main menu.

Each entity has its own properties, for example:

• Content area on the posts page - article title, article text, description, article author name, publication date, category, images, videos and others;
• The area for the list of announcements on the main page, sections and archives is the same;
• Comment area - commentator name, date, comment text;
• The content area on a regular static page is basically the same as in posts;
• Site header area - title, description;
• Rating area on pages - maximum rating, current rating, number of ratings.
• Footer area (site footer) - year of copyright;
• Sidebar area (side column) - name of widgets;
• Main menu area - links.

There are other areas with properties, but I will not consider them, since in each markup dictionary there are several dozen of them, and in the markup from schema.org their number is generally in the hundreds.

We will look at what tags and attributes to use to indicate the entities and properties of each of them in the practical part of this article.

Now let's move on to the main idea of ​​the paragraph and consider the main formats of semantic markup. Short list Key vocabularies and syntaxes can be seen in the mind map below.

We will not consider all dictionaries and syntaxes, as this is pointless. You won't need them. Let's discuss only briefly the main markup formats:

• Schema.org;
• Open Graph;
• Microformats.

We will touch on some of the rest quite a bit.

The last step is worth noting another dictionary, namely Data Vocabulary, which was developed by Google and now its development has been suspended. All attention shifted to Schema.org. We can say that all the properties and entities that were in this markup language became prototypes for markup from schema.org.

As far as I understand, the Data Vocabulary dictionary can work with syntaxes: microdata and the RDF language, which can be very clearly seen in the Google help on breadcrumb micro-markup material. There are 2 markup options:

I'll get ahead of myself a little. In the first image you can see that microdata from Schema.org is used along with the Data Vocabulary. The fact is that breadcrumbs with schema are not supported yet. Therefore, a combined option is used.

I think you already know the question on this question, since in the description of each type of markup I gave an undeniable argument that search engines They themselves recommend the Schema.org markup dictionary. This is exactly what you need to use. But there can be a lot of options for implementing this micro markup, both from plugins and the introduction of entities and properties into design templates.

The last option is the most optimal, since this is a one-time job and micro markup will be on absolutely every page. All search engines will see it, since it will be built into the template. But beginners may have problems implementing it, since they need at least a minimum basic level understand the code of your template and see which tag displays the title of the article, where the code is for displaying the text, and so on. All these moments will need to be wrapped with micro markup tags.

This point also raises the issue of combining different dictionaries on one site. This is acceptable and in some cases it cannot be avoided. This is clearly seen in the example of breadcrumb markup, when a variant of the Data Vocabulary markup and microdata markup from Schema.org are combined. There's nothing wrong with that. Yandex itself speaks about this.

It's up to your discretion. If you find it easier to use microformats, then go for it. I personally will show the whole process on Schema.org micro markup, since I myself have implemented it and everything works with a bang without a single error.

Our task at this stage is to find out whether our template has some kind of markup format. This is quite possible, because most of the templates used are translated English-language themes that already contain some kind of semantic markup format. As a rule, this is markup in microformats, which is of no use to us at all. It is better if it is not there initially, as this will save us from the headache when it is removed.

To check the presence of markup, you can use both the micro markup validator from Yandex and the Google structured data verification tool. I prefer and strongly recommend that you use the Yandex validator, as it is much simpler.

After going to the Yandex validator, we enter the page address and click “Check”.

If it says “Micro markup not detected,” it means there is no third-party markup in the template. This is very good, since you don’t need to waste effort on removing it. But be careful, because on one type of page there may be no markup, but on another it will be present (for example, on an article page).

So, I’m analyzing the post page and it turns out that the template comments are marked with microformats (vcard is present). This is evidenced by different codes in the scan results.

We don't need microformats, so we should delete them. It may happen that your template is marked up in other markup formats. Then they should also be removed. And it is possible that markup from Schema.org will be immediately implemented. This also happens, but very rarely, since there are practically no worthwhile templates available for free. But bad ones are a dime a dozen.

Now let's look at the process of removing third-party markup.

Since in my case it turned out to be third-party markup using microformats, I will use its example to show this process. If you have some other markup, then the principle of deleting it will be similar.

It all comes down to removing the tags and their attributes from the markup that you have. The only difference between microformats and other types of micro markup will be that all types except microformats add new tags and attributes. Microformats do not add anything but are written inside a specific class attribute html element template (for example, the title of an article), as I wrote in the paragraph about the main types.

By the way, in point No. 6 of this article I give the comment markup code that needs to be inserted into the template function file functions.php. This code should cure these errors from third-party microformat markup. Therefore, if you have this problem is available, then I first recommend checking that code on your template. He should help. This will save you the unnecessary work of manual disposal. If nothing works out, then we do everything by hand, as I describe below.

Now let's move on to the process itself. So, earlier it became clear that I had extra markup from microformats. When checking in the validator, we were given the vcard tag, which creates errors.

Now we need to open the folder with the template to see all its files and then we turn to those files that are responsible for displaying those elements where the microformats are located. How to do this, see the list below:

I hope I explained it quite simply. Although, a beginner may have more confusion in his head.

This is how this piece of code with vcard originally looked in my template file.

After the change it became like this.

I also made changes to the styles.

Now there are no microformats and the design has been preserved in its original state.

So, when we have removed the standard markup (if it was present), we can embed new one from Schema.org. We are starting this process.

Let's start with a little explanation and theory, since you always need to prepare before practice.

First, it’s worth figuring out what files we need to point to the necessary entities and their properties. Now I’m talking about files for the WordPress engine. I won’t say anything about other engines, since I don’t work with them. The marking principle remains the same. You just need to determine the files where they are located required areas for marking.

• Single.php file (record file): entity - content area (article), properties - publication date, author, category, article title, images;
• Functions.php file (in my case - comment code markup): entity - comment, properties - comment text, date and name of the commentator;
• Files with a list of announcements index.php, category.php, archive.php (main, categories and archives, respectively): entity - list of announcements, properties - publication date, author, category, article title;
• File page.php (regular static page - optional): entity - content area, properties - text title and, if available, date, author and others;
• In the header.php file, also mark the header - the entity will be the header, and the properties will be the site title + description;
• File sidebar.php (side column): entity - the entire sidebar, property - the title of each widget;
• File footer.php (site footer): entity - the entire footer, property - copyright date + site name (I did not mark up the name);
• File header.php (top part of the resource): entity - main navigation menu, property - links + their anchors.

Now about the tags and attributes that correspond to each type of entity and their corresponding properties. First about the entities.

/***List of announcements***/ itemscope itemtype="http://schema.org/BlogPosting" /***Post page content***/ itemscope itemtype="http://schema.org/Article" / ***Comments***/ itemprop="comment" itemscope itemtype="http://schema.org/Comment" /***Regular static page***/ itemscope itemtype="http://schema.org/ Article" /***Sidebar (sidebar)***/ itemscope itemtype="http://schema.org/WPSideBar"> /***Footer (site footer)***/ itemscope itemtype="http:/ /schema.org/WPFooter"> /***Site Navigation (main menu)***/ itemscope itemtype="http://schema.org/SiteNavigationElement"> /***Images***/ itemscope="" itemtype="https://schema.org/ImageObject" /***Permanent link to the page***/ itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" /***Organization* **/ itemscope itemtype="https://schema.org/Organization" /***Address***/ itemscope itemtype="http://schema.org/PostalAddress"

Now the property tags.

• Page (text) title - itemprop="headline"
• Entry text - itemprop="articleBody" (can also be used for description if it is formed as part of the full text)
• Date of publication - itemprop="datePublished"
• Author - itemprop="author"
• Article category - itemprop="articleSection"
• Image - itemprop="image"
• Comment text - itemprop="text"
• Commentator name - itemprop="creator"
• Comment date - itemprop="datePublished"
• Link (applies to main menu and image) - itemprop="url"
• Copyright year in the footer - itemprop="copyrightYear"
• date last change pages - itemprop="dateModified"
• Address - itemprop="address"
• Street - itemprop="streetAddress"
• Index - itemprop="postalCode"
• Address location - itemprop="addressLocality"
• Telephone - itemprop="telephone"
• Image length - itemprop="width"
• Image width - itemprop="height"
• Logo - itemprop="logo"

These are the main properties that we will now use.

Further steps to markup the template are quite simple.

Each area that needs to define an entity and property using the tags provided above is wrapped in some kind of common tag. This could be a div block tag, an article tag, a span tag, an H1 header, and others. To make it easier to understand, the title is almost always wrapped in an H1 tag, which is how it should be. There will be 2 tags: opening and closing. And so with every element of the site, and not just with the headers.

The idea is that each required element will need to be given an entity tag (specify the content type: article or comment, or list of announcements, etc.) and properties inside its opening tag.

Now practice. For example, there is a single post (article) file single.php. Let's start with its marking.

Let's start by defining the entity. The template has a common tag that wraps the entire content area of ​​the post (both the text of the article and the title and comments) and it is different for everyone. For some it may be a div block. I have this article. Naturally, this tag opens at the very beginning, where all the content begins, and ends somewhere when the content ends.

And it is at the very beginning, inside the opening article tag, that I need to insert the entity tag of the content area on the post page (I gave the codes a little higher). I’ll give you an image (clickable) of the final markup of the single.php recording file, and then I’ll explain what happened and what happened in the end, if it’s not clear to anyone. The image is large, but clickable, so you can click on it and view it in a larger size, or open it in a new tab and view it in full size.

Initially, the entire content area of ​​the post is opened using the article tag. It was like this:

And it became like this:

As you can see, the post entity tag is included inside the opening article tag. Now the search robot will understand that this is an area that contains content. Will perceive this area as an object. It is very important.

By the way. Many people set article ratings without a plugin, and after checking the page in a Yandex or Google validator, they are told that the object of the review is not specified. This is due to the fact that the rating is posted on its own. You need to place it inside this area, which in turn must be defined by a markup tag as the content area (or review object). Then the rating will belong to the object, that is, the article. After this there will be no errors.

Let's get back to the process. First, we placed the essence of the object (we wrapped the entire main area with a common tag), and then we marked its properties, that is, secondary data: date of publication, author, body of the article (the text itself), information about the publisher (address, organization, logo), date last page modified, address home page and so on. Everything is exactly the same - inside each opening tag required element indicate the appropriate parameters. Below I provide an explanation of what happened before the changes were made and what happened after.

Initially, we copy 2 lines of code immediately after the opening tag that wraps the entire content area. For me this is an article tag with an entity inside it that was placed earlier in the text.

Publication date. Was:

Konstantin Khmelev

Konstantin Khmelev

".$current_category_name."

".$current_category_name."

Article text. Was:

here is third party code

here is third party code

You should do almost the same thing yourself. The only differences will be in the tags, inside which you need to place the entity and property tags. Their order may also be different. Or it may be that something will not be there at all, for example, there will be no publication date or link to the category. Then you will have to add this data to the template.

In the penultimate paragraph of the article, I will give you codes that you can use if you are suddenly missing something.

So, now we must check our page in Yandex and Google validators.

In Google's validator it will be almost the same. There should be no errors in this data. The only nuance concerns the micro-tagging of images, which is what we are moving on to.

You can mark up each image manually, wrapping it in the essence of the images and specifying the necessary properties, but this is quite inconvenient when there are several dozen images in each post. Let's use the following code.

Function micro_images_captions ($a , $attr, $content = null)( extract(shortcode_atts(array("id" => "", "align" => "alignnone", "width" => "", "caption" = > ""), $attr)); if (1 > (int) $width || empty($caption)) return $content; $caption = html_entity_decode($caption); if ($id) $id = "id ="" . esc_attr($id) . "" "; return "" . do_shortcode($content) . "

" . $caption . "

Now you don't have to add an image markup tag to every article. We go to the validator, check the page with at least one picture, and see the next picture.

There shouldn't be any errors. Everything is clear. Each image should be wrapped with markup, just like in the screenshot above.

Here you need to wrap the code that displays the list of announcements with the entity tag of the announcement list. This is done exactly the same way. Inside the general tag that wraps all the code in the template, we place the desired tag (the essence of the list of blog posts is blogposting, or you can do it by analogy with the post page -article). See the image (clickable).

As you can see, my list of announcements is displayed using the li list tag, that is, each announcement is enclosed in it. Inside the list is almost the same as inside the entry itself - there are dates, author's name, title of sections, address, logo, publisher, and so on. You can clearly see this on the blog pages. The structure is similar, only the text of the article is not complete. In general, the markup is exactly the same as for the post page, with the exception of the blogposting announcement entity tag.

It is also necessary to use a slightly different image markup code for the announcements page, since it displays not just pictures, but thumbnails. Micro-marking of thumbnails will be carried out using almost similar code. If previously they had to be marked by hand, now there is no point in doing so. Here is the code (we also place it in the functions.php file).

Function micro_thumbnail($content) ( $ar = "!!si"; $br = ""; $content = preg_replace($ar, $br, $content); return $content; ) add_filter("post_thumbnail_html", "micro_thumbnail ");

We contact the validator and check the home page. I showed you only 2 announcements, because... the full screen will be very large.

There will be as many such blogposting entries as there are announcements on this page. If you used article instead of blogposting, then you will have several articles depending on the number of announcements.

Because home page Since its structure is similar to the pages of sections and archives, their micro-markup is identical. Lists of announcements are displayed on all types of pages.

So, all that remains is to parse the comment markup, which is a rather complicated process for a beginner. There are also regular static pages left. The principle of their markup is similar to records, so I won’t show it.

So, comments. Let's simplify the task to inserting one code into the functions.php file and modifying the function that displays comments on the site pages. First, take the following code and place it inside the functions.php file at the very beginning, right before the opening tag< ?php. Если будет выдавать ошибку, можно попробовать его разместить после закрывающего тега?>at the very end of the file.

There is also a placement option when you need to remove the opening of the php code in this code at the very beginning (remove< ?php) и в самом конце его закрытие (удалить?>). Then you need to place the code not before or after the opening (closing) php tag, but inside these tags next to all other functions. Sometimes I encountered a problem when this particular placement option works.

The code does not work on all templates!

id="comment-">

The full output line of this function may be different, but its essence is the same. There should be comments_number inside.

For me, this function has the following complete form along with the wrapping tag.

< ?php comments_number("Комментариев пока нет. Будьте первым!","1 Комментарий","Комментариев: %") ?>

Depending on the template, you need to find the location of the function. Typically, everything is in the same comments.php file. In my template, this function was located in the single entry file single.php before displaying the comment form. Since my function was wrapped in a span text tag, I insert the commentCount property inside it.

We contact the validator.

Important. You only need to wrap the number of comments without any inscriptions or words. The markup only accepts numbers!

Attention: I am not the author of the functions. The functions for automatically marking comments and images are taken from the site http://seo-mayak.com/. I just changed the names a little + corrected something a little somewhere.

Open the header.php file of the design template and look for the opening header tag. We paste inside it:

Itemscope itemtype="http://schema.org/WPHeader"

• Heading - itemprop="headline"
• Description - itemprop="description"

Here is the finished version in the image.

It will be displayed in the validator like this.

Everything is simple here too. We open the file that is responsible for the output of the side column, as a rule, this is sidebar.php. We find a block or tag that wraps the entire content of the entire side column and inside it we place the tag of the entity corresponding to the sidebar.

Register_sidebar(array("name" => __("Area for inserting widgets into the sidebar", "xmarkup"), "id" => "primary-widget-area", "description" => __("", "xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

Of interest are the last 2 lines (before_title and after_title), which determine what will be displayed before and after the widget title, respectively. As you can see, I have indicated that there will be a span text tag before and after. You may have something empty there or some other tags, such as a div block tag. If it’s empty, I recommend adding a span tag similar to my version and specifying the name property (itemprop="name") inside the opening tag (before_title line). You will get the following construction:

Register_sidebar(array("name" => __("Area for inserting widgets into the sidebar", "xmarkup"), "id" => "primary-widget-area", "description" => __("", "xmarkup "), "before_widget" => "", "after_widget" => "", "before_title" => "", "after_title" => "",));

Depending on the template, there may be several such parts of code. Then all the parts will need to be finalized. After the changes, we check the sidebar markup through the Yandex validator and the following picture should be obtained.

Depending on the number of widgets, the corresponding number of rows will be shown when checking.

Open the footer.php file and look for a common block that wraps all the contents of the footer, including copyrights. Inside the opening tag we place the entity tag itemscope itemtype="http://schema.org/WPFooter".

And inside the opening tag, which contains the copyright date, we place the property tag itemprop="copyrightYear".

It is very important that inside the copyrightYear tag there is only a date in the form of a number. No extraneous words or symbols, otherwise it will generate an error.

In working condition, you will see the following in the validator.

Here, too, everything is extremely simple, but this option will not work for everyone, since the structure of constructing and displaying the menu in the templates is different.

The code that displays the menu is in the header.php file. We go there and look for the following content:

< ?php wp_nav_menu(array("theme_location" =>"header-menu-top","container" => "")); ?>

The line may be slightly different. The main thing is to find the line that includes wp_nav_menu. It will be wrapped in tags. For me and in most other topics the principle is similar. The nav tag is used. Inside the opening nav tag we insert a tag that shows the essence of this element, namely the main menu:

Itemscope itemtype="http://schema.org/SiteNavigationElement"

Next, you should make sure that the itemprop="url" attribute is added to each link in the menu, which will indicate that this is a link. If you have a simple site where each menu item is created by hand, then implement this attribute inside the tag of each link. If you have a website on WordPress and the menu is formed in the functions.php file in a standard way, you should place the following code in the same file, which will automatically insert this attribute to each menu item.

Function nav($content) ( $pattern = "