В този урок ще ви покажа как да направите коментари в HTML, CSS, PHP. Коментарите са текст, който не се вижда на уеб страница. Използват се за всякакви обяснения, напомняния, описания за уеб администратори, което ви позволява да структурирате документа. Коментарите са незаменими при отстраняване на грешки в кода, те ви позволяват бързо да навигирате в маркировката на уеб страница и да намерите желания блок. Коментарите често се използват за отстраняване на грешки в HTML кода. Например, можете временно да коментирате конкретен блок от код, така че да не се изпълнява, и ако е необходимо, е лесно да го възстановите.

Коментари в HTML

В HTML коментарите се формират с помощта на знаци:. Следователно всеки текст между тези знаци е коментар. Помислете за пример:

Пример за коментари в HTML

Коментари в CSS

Коментарите в CSS се създават с помощта на знаците: /* и */. За да създадете коментар, просто трябва да поставите кода на уеб страницата между тези знаци:

/* Начало на блок със стилове за Body*/ body ( background: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; ) /* Край на блока със стилове за тяло*/

Коментари в PHP

Коментарите в PHP могат да бъдат едноредови или многоредови:

1) Едноредовите коментари в PHP се създават с помощта на знаците: //. Достатъчно е само да поставите този знак пред реда и той ще бъде коментиран.Тази опция се използва, когато коментарът се състои само от един ред.

2) За реализиране на многоредови коментари се използват следните символи: /* и */. Тази опция е полезна, ако коментарът обхваща няколко реда.

Така се научихме да

Здравейте приятели и гости на блога! Днес ще ви разкажа как използвате PHP и MySQL. Ние също ще говорим за системи за коментиране на сайтаи изберете най-добрия за вашия сайт от тези, които предложих.

Въпрос първи: като се използва PHP и MySQL?

За да направите това, ние с вас първо трябва да създадем таблица в базата данни на вашия сайт, която ще се нарича - коментари. Тази създадена таблица ще съхранява коментари в полета със следните обозначения:

документ за самоличносте уникален идентификатор.
page_id- това поле ще съхранява идентификатора на страницата на сайта, на която се намира този коментар.
имее името на коментатора, оставил този коментар.
текстов_коментар- съответно това е текстът на настоящия коментар.

Следващата стъпка, след създаването на таблица за коментари в базата данни, трябва да внедрим специален кодза нашите бъдещи коментари в сайта. Този код на сайта ще позволи на нашите коментатори да добавят своите коментари към нашите статии. Ето кода:

Твоето име:

Твоят коментар:

Просто е HTML формакоментари за сайта. Поставяте го в сайта си на мястото, където е удобно за коментар към публикацията - естествено под самата публикация.

query("INSERT INTO `comments` (`name`, `page_id`, `text_comment`) VALUES ("$name", "$page_id", "$text_comment")");// Добавяне на коментар към заглавката на таблицата(" Местоположение: ".$_SERVER["HTTP_REFERER"]);// Пренасочваме ли обратно?>

Последната стъпка в създаването на формуляр за коментари за PHP и MySQL уебсайт е да покажем нашите коментари на страницата на уебсайта. Ето кода за това:

query("SELECT * FROM `comments` WHERE `page_id`="$page_id""); //Извличане на всички коментари за тази страница, докато ($row = $result_set->fetch_assoc()) ( print_r($row); //Отпечатване на коментари echo "
"; } ?>

Това е всичко! Нашата проста форма за коментари към уебсайта вече е готова и работи на уебсайта.

Но със сигурност не е за начинаещ, който няма да се рови из целия този HTML, PHP и MySQL код. Също така няма да научи как да създаде база данни. Има нужда от всичко наведнъж, бързо и без главоболие. Прав съм? Разбира се правилно!

След това нека преминем към следващия раздел от моя материал и да научим всичко за готовите системи за коментари за сайта и да изберем най-удобния, функционален и приемлив за вашия сайт ...

Системи за коментиране на сайта. Кое да избера?

Как да правите коментари в сайта- това е важен въпрос, защото коментарите в сайта играят важна роля не само за комуникацията между собственика на сайта и посетителя, но и коментарите са важни за seo промоцияи промоции.

С помощта на коментари в сайта се повишава позицията на сайта в резултатите от търсенето, поведенчески фактори, трафикът към сайта расте и съответно вашите приходи се увеличават. Виждате колко важни са коментарите за сайта!

Така че нека да разгледаме как да правите коментари в сайтаи какво система за коментиранеизберете най-добрия вариант?

Като цяло коментарите в сайтовете се показват по много начини. Това са специални добавки за wordpress двигатели и коментари от социални мреживсякакви неща, като напр Във връзка с, Facebook, Disqus. Има и независими услуги, които предлагат собствени системи за коментари за сайта, например.

Сега ще ви дам един таблет, който веднага ще постави всичко на мястото си и няма да има въпроси относно избора на система за коментари за сайта:

Тук всичко е ясно и ясно видимо коя система за коментари е най-добрата и няколко представени, които най-често се използват от уеб администраторите на техните ресурси. Мисля, че тук обясненията са излишни и изборът е само Ваш!

Стъпка 1 - XHTML

Първо, нека да разгледаме маркирането на коментарите. Даден кодгенериран от PHP с клас Коментирайте .

demo.php

див аватар съдържа връзка (ако потребителят е въвел правилния URL адрес при публикуване на коментара) и изображението на аватара, което получаваме от gravatar.com. Ще се върнем към генерирането на маркирането в стъпката PHP. В края следват див име див време и текст на коментар.

Друг важен елемент в XHTML е формата за коментар. Тя изпраща със ПУБЛИКУВАНЕ. Всички полета освен URL трябва да бъдат попълнени.

demo.php

Формулярът се изпраща с помощта на AJAX. Проверката се извършва във фонов режим submit.php. Всяко поле има съответен елемент етикет, със зададен атрибут за .

Стъпка 2 - PHP

PHP управлява комуникацията с базата данни MySQL даннии генерира маркирането за коментара. Той също получава край AJAX заявкаи вмъква данните за коментара в таблицата коментари.

demo.php

/* / Изберете всички коментари и попълнете масива $comments с обекти */ $comments = array(); $result = mysql_query("ИЗБЕРЕТЕ * ОТ коментари ПОРЪЧАЙТЕ ПО id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )

MySQL заявката избира всички записи от таблицата и попълва масива $коментариклас обекти коментар. Този масив се извежда допълнително, когато скриптът се изпълнява.

demo.php

/* / Отпечатване на коментари един по един: */ foreach($comments as $c)( echo $c->markup(); )

Всеки коментар има метод маркиране (), който генерира правилен HTMLкод, готов за показване на страницата. Следват дефинициите на класа и метода.

Класът получава ред от базата данни (получен с помощта на mysql_fetch_assoc()) и го съхранявайте в променлива $данни. Той е достъпен само за метода на класа.

comment.class.php - Част 1

клас Коментар ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( /* / Този методизвежда XHTML маркирането за коментара */ // Задайте псевдоним, така че да не се налага да го пишете всеки път $this->data: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"])( // Ако при добавяне на коментар е въведен URL адрес, // определяне на отварящите и затварящите тагове за връзка $link_open = ""; $link_close = ""; ) // Преобразуване на времето към UNIX формат: $d["dt"] = strtotime($d["dt"]); // Необходимо е за задаване на изображението по подразбиране: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; връщане" "; }

Скриптът използва gravatar за представяне на аватара в коментарите. Gravatar е много полезна услуга, която свързва аватар с имейл адрес. Изображението на аватара може лесно да бъде получено чрез предаване на кодираната функция md5()вашия имейл адрес на gravatar.com.

Скриптът определя URL адреса, на който се изпълнява и определя точния адрес на изображението default_avatar.gif. Това изображение се предава заедно с md5 хеша и ако не е намерен аватар за дадения имейл адрес, ще се покаже алтернативно изображение.

comment.class.php - Част 2

публична статична функция validate(&$arr) ( /* / Този метод се използва за валидиране на данни, изпратени чрез AJAX. / / Той връща true/false в зависимост от валидността на данните и попълва / масива $arr, който се предава като параметър с данни или */ $errors = array(); $data = array(); // Използвайте функцията filter_input, въведена в PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST ,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Моля, въведете валиден имейл."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL) )) ( // Ако в полето за URL е въведен невалиден URL адрес, // действайте така, сякаш URL адрес не е въведен: $url = ""; ) // Използвайте филтър с функция за обратно извикване: if(!($data[ "body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["body"] = "Моля, въведете текст на коментар."; ) if(!( $data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["name"] = "Моля въведете име."; ) if(!empty($errors))( // Ако има грешки, копирайте масива $errors в $arr: $arr = $errors; return false; ) // Ако въведеното е правилно, изчистете данните и копирайте го в $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // имейлът трябва да е в малки букви: $arr["email"] = strtolower(trim($arr["email"])); връща вярно; )

Метод валидиране ()(също част от клас) се определя като статичен. Това означава, че може да бъде извикан директно с конструкцията коментар::валидиране(), без да създавате клас обект. Този метод валидира данните, които се предават през AJAX.

Методът използва нова функцияфилтър, който стана достъпен през PHP 5.2.0. По този начин можем лесно да проверяваме и филтрираме данните, които се предават на скрипта. Например, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)означава, че проверяваме дали $_POST["url"]точно URL адрес. Ако е така, тогава функцията връща стойността на променливата, в противен случай връща стойността невярно.

Преди да се използва такава функция, беше необходимо да се използват регулярни изрази за валидиране на данни (използвайки серия от конструкции ако). Допълнително предимствое, че получаваме данните, преди да направим някакви специфични трансформации.

Също така е възможно да се дефинира функция, която ще извършва допълнителни модификации на данни.

comment.class.php - Част 3

частна статична функция validate_text($str) ( /* / Този метод се използва като FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. и т.н.) и преобразувайте // знака за нов ред в таг
: $str = nl2br(htmlspecialchars($str)); // Премахване на всички останали нови редове $str = str_replace(array(chr(10),chr(13)),"",$str); връща $str; )

Последен метод validate_textпредава като функция за връщане в две извиквания филтър_вход. Той преобразува всички специални HTML символи, което ефективно блокира XSS атаките. Също така заменя новите редове с тагове
.

submit.php

/* / Този масив ще бъде запълнен или с данни /, които се предават на скрипта, / или съобщения за грешка. /*/ $arr = array(); $validates = Коментар::validate($arr); if($validates) ( /* Добре, вмъкнете данни в базата данни: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", "".$arr["url"]."", "".$arr["email"]."", "".$arr["body"]."")"); $arr["dt "] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Данните в $arr са подготвени за mysql заявка, / но трябва да ги покажем, така че / подготвяме всички елементи в масива: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Отпечатване на маркировката на току-що вмъкнатия коментар: */ echo json_encode (array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Показване на съобщения за грешка */ echo "("status":0,"errors":". json_encode($arr).")"; )

submit.phpизвлича коментар от данните чрез AJAX заявка. Валидира го и извежда JSON обект, съдържащ или XHTML маркиране с вграден коментар, или списък с грешки. Свойство за използване на jQuery състояниеза да определите какво трябва да се показва - или съобщение за грешка, или добавяне на маркиране на коментар към страницата.

По-долу има два примера.

Успешен отговор

( "статус": 1, "html": "Html кодът на коментара идва тук...")

Имот htmlсъдържа кода на коментара.

Отговор за грешка

( "статус": 0, "грешки": ( "имейл": "Моля, въведете валиден имейл.", "body": "Моля, въведете текст на коментар.", "име": "Моля, въведете име." ) )

Когато има грешка, jQuery преминава през обекта за грешки и показва съобщения до полетата, които имат грешки.

Стъпка 3 - CSS

След като маркирането е правилно генерирано и показано на страницата, можем да преминем към стилизирането.

styles.css - Част 1

.comment, #addCommentContainer( /* Стил за коментари */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; / * CSS3 заоблени ъгли и сенки */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 0 #c2c2c2; -webkit-box- shadow:2px 2px 0 #c2c2c2; box-shadow:2px 2px 0 #c2c2c2; ) .comment .avatar( /* / Аватарът е позициониран абсолютно. / Външно отместване за коментар div /*/ height:50px; ляво:- 70px; позиция:абсолютна; width:50px; background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Центрирайте вертикално: */ margin-top:-25px; top:50%; -moz- box-shadow :1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; )

див .коментирайте И #addCommentContainer имат същия стил. Няколко CSS3 правила се използват за заобляне на ъгли и отразяване на сенки.

styles.css - Част 2

.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size:10px; padding:6px 0; position:absolute; right:15px; top:10px; color:#bbb; ) .comment p, #addCommentContainer p( font-size:18px; line-height:1.5; overflow-x:hidden; ) #addCommentContainer вход, # addCommentContainer textarea( /* Стил на въвеждане */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans -serif; ) #addCommentContainer textarea( width:300px; ) label( font-size:10px; ) label span.error( color:red; position:relative; right:-10px; ) #submit( /* Бутон "Изпращане" " */ цвят на фона:#58B9EB; граница:1px solid #40A2D4; цвят:#FFFFFF; курсор:показател; семейство шрифтове:"Myriad Pro",Arial,Helvetica,sans-serif; размер на шрифта:14px; шрифт -weight:bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #submit:hover(background-color:# 80cdf5; цвят на границата:#52b1e2; )

Във втората част задаваме стиловете за коментари и елементи на формата. Да отбележим селектора вход,който подчертава елементи в зависимост от даден атрибут Тип.

Стъпка 4 - jQuery

Сега нека да преминем към jQuery.

script.js

$(document).ready(function()( /* Следният код се изпълнява само след като DOM е зареден */ /* Този флаг предотвратява изпращането на множество коментари: */ var working = false; /* Улавяне на подаването на формуляра събитие: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; working = true; $("#submit").val("Working.. "); $("span .error").remove(); /* Изпратете полетата на формуляра към submit.php: */ $.post("submit.php",$(this).serialize(),function(msg )( work = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Ако вмъкването е успешно, добавете коментар / под последния на страницата с slideDown ефект /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / Ако има са грешки, преминете през обекта / msg.errors и ги изведете на страница /*/ $.each(msg.errors,function(k,v)( $("label").append(" "+v+""); )); ) ),"json"); )); ));

Използваме извикване на функция $(документ).готов() A, който свързва функция към събитието. Променлива работещдейства като флаг, който сигнализира, че се изпълнява AJAX заявка (като по този начин предотвратява дублирането на един и същ коментар).

Във функцията за връщане за заявката POST AJAX проверяваме свойството състояниеза да определи дали коментарът е бил вмъкнат успешно. Ако да, добавяме полученото маркиране към страницата след последния коментар с анимация плъзнете надолу.

Ако е имало проблеми, показваме съобщения за грешка, като добавяме педя грешка към съответния елемент етикет(атрибут на елемент етикетсъдържа документ за самоличноствъвеждане с грешка).

Готов!

Заключение

За да стартирате скрипта на вашия сървър, трябва да създадете таблица коментари във вашата MySQL база данни. Можете да го направите с SQL код от файл table.sql, който трябва да бъде въведен в раздела SQL в phpMyAdmin. След това трябва да зададете параметрите за връзка с MySQL база данни във файла свържете се.php .

Време за четене: 55 мин

Добър ден на всички.

И така, дойде време за дългоочаквания материал за микромаркирането.

Веднага трябва да кажа, че тази статия ще бъде доста трудна за първото разбиране, особено за начинаещи, тъй като има много опции за микромаркиране и е трудно да поставите всичко в главата си наведнъж. Но ще се опитам да опиша голямата картина и в същото време да се съсредоточа върху най-важните и често срещани неща.

Материалът е доста обемен, но се надявам, че ще ви помогне да направите микромаркиране на сайта.

Напоследък забелязах, че много хора са обсебени от микромаркирането. Това се случи, след като различни SEO блогъри започнаха бурно да го обсъждат. Но нека да видим защо изобщо се използва и дали е необходимо да му се обръща толкова много внимание. Играта струва ли си свещта?

Какво представляват микроданните и защо са необходими?

Ако чуете микромаркиране или семантично маркиране на страница (уебсайт), тогава знайте, че това означава маркиране на страница с помощта на допълнителни атрибути (тагове), които дават на търсачките представа за отделните елементи на страницата, посочвайки тяхното съдържание.

Трябва да разберете, че нормалната страница вече е маркирана, но се използват обичайните общоприети тагове и атрибути. Това е напълно достатъчно за търсачките и много сайтове все още съществуват и процъфтяват доста успешно.

Но ако искаме да помогнем на търсачките да разберат нашия сайт, да ги насочим към важни области на страницата, да разберем нейната структура, показвайки съдържанието на тези области, на които трябва да обърнете внимание на първо място, тогава трябва да въведете микро -маркиране, тоест добавяне на определени тагове и атрибути, които сочат към всичко.

Като направим това, ние не само ще помогнем на търсачките, но и на нашия сайт, тъй като микромаркирането се използва не само за разбиране на структурата на сайта и съдържанието, но и за изграждане на резултати от търсенето, формиране на функционални и атрактивни фрагменти, което засяга честотата на кликване (CTR) на екстрадирания сайт. И това е увеличение на общия трафик на сайта.

Можете да видите ярък пример за такива фрагменти по-долу.

На това изображение можете да видите кое допълва и го прави по-видим сред сивите маси на други сайтове в SERP. Също така подчертах веригата за навигация със стрелки, което показва ясен структуриран път до материала на сайта, а не обикновен неразбираем URL адрес.

Такава навигационна верига е доста проста. Всичко, което трябва да направите, е да ги инсталирате на вашия сайт.

Ето още една версия на богати фрагменти.

Същата опция позволява на посетителя веднага да разбере за какво става въпрос в сайта и какво може да му даде. Ако в този случай фрагментът е изграден правилно, тогава потребителят може незабавно да предприеме действието, от което се нуждаете, и както знаем, всеки сайт трябва да изпълнява своите задачи (абонамент, покупка и т.н.).

Съгласете се, че такъв фрагмент ще бъде по-забележим в резултатите от търсенето, отколкото обикновено описание на страница, тъй като има много по-голям размер. И да, изглежда по-солидно.

Нека сега отговорим на въпрос, който може да тревожи онези, които смятат, че микроданните помагат за увеличаване на позициите и са един от факторите за класиране.

Влияят ли микроданните на класирането? Да очакваме ли увеличение на позициите след прилагането му?

За да не пишем нашите разсъждения, нека се обърнем към помощта на търсачката Yandex. И така, какво ни казва Yandex за този акаунт. цитирам:

Моят сайт ще се класира ли по-добре, ако използвам маркиране?

Отговор: Маркирането може да направи вашия сайт по-видим в Yandex Search и по този начин да привлече повече посетители, принадлежащи към целевата аудитория. Yandex, от друга страна, се интересува от потребителите да решават проблемите си с помощта на Търсене. Един от показателите за качество на търсенето се нарича „щастието на потребителя“. Сайтовете, които увеличават „щастието“, се класират по-високо.

Можем да заключим, че маркирането не влияе пряко на позициите, а само косвено, тъй като можем да направим по-атрактивен фрагмент, който сам по себе си ще доведе повече посетители на ресурса. Следващото е въпрос на технология. Повече посетители - повече натрупани добри показатели за страниците (ако съдържанието е с високо качество) и позициите постепенно ще растат.

Също така си струва да се отбележи, че като помагаме на търсачките да разберат същността на съдържанието, неговия тип (информация, среща, продукт и т.н.), ние правим съдържанието по-подходящо за заявката за търсене и то трябва да заема по-високи позиции. Може би не пряко, но косвено - това е сигурно. Yandex ни потвърди това (вижте по-горе).

И така, нека направим кратък контролен списък на предимствата от наличието на микроданни на вашия сайт. Това са точките, които косвено или пряко показват качеството на сайта, повишават позициите му и помагат на търсачките.

1. Първо, можем да заключим, че доверието в сайта от страна на търсачките се увеличава, тъй като насочваме търсещия робот към основните елементи на сайта, без да се страхуваме, че нещо не е наред с нас и не се опитваме да скрием нещо от робот за търсене. В резултат на това е логично търсачките да си помислят, че ние им помагаме и им разкриваме „душата на сайта“, което със сигурност ще се отрази на качеството на индексирането на сайта, а в крайна сметка и на позициите;
2. Второ, с правилни настройки можем да подчертаем нашия фрагмент в резултатите от търсенето, което ще доведе до незабавно увеличаване на трафика към страниците с ресурси, без да променя позициите. В крайна сметка увеличаването на трафика ще доведе до увеличаване на отделните страници в изданието и на сайта като цяло;
3. Трето, повишаваме поведенческия фактор – CTR в SERP (click through rate). Тази точка е тясно свързана с предишната. Тъй като повече хора кликват върху нашия сайт, това означава, че сме помогнали по-точно на посетителя да разбере, че нашата страница е с по-добро качество, отколкото на други сайтове. И така – сайтът трябва да се повдигне малко във вашия SERP.

Така че мисля, че на въпроса е отговорено.

Изобщо необходимо ли е микромаркиране? - Да, трябва ти.

Разбира се, ако има избор между болезненото внедряване на маркиране на сайта и работа по други точки, тогава, разбира се, не трябва да се циклите само в семантично маркиране. По-добре е да работим върху съдържанието, което е много по-важно от някой технически детайл сред стотици или хиляди други неща. Освен това сега можете да маркирате своя фрагмент в резултатите от търсенето, без да въвеждате маркирането в шаблона, а само като го зададете, което вече осигурява маркирането на рейтинга.

Когато знаем основните предимства, можем да продължим да разглеждаме основните видове семантично маркиране.

Основните типове микроданни

Тук всичко е доста сложно. Първо трябва да разберете, че има речници за микромаркиране и техния синтаксис.

Речникът може да се разбира като език за маркиране, който включва набор от класове, свойства, които показват същността на съдържанието на страницата. Във всеки речник всеки елемент на сайта се идентифицира с помощта на различни тагове. Например в речника на Schema.org името на документа е посочено с помощта на тага "name", но микроформатите използват CSS клас вътре в блока на елемента, който трябва да бъде маркиран ( лайка, където fn org е заглавният таг в този случай).

Всеки речник и синтаксис има свои собствени тагове и атрибути, което прави така наречения винегрет от форматите за микромаркиране. Наистина е трудно да разбера всичко.

Синтаксисът се разбира като начин за използване на един или друг език (речник) на семантично маркиране. Синтаксисът определя кои тагове ще се използват за обозначаване на същността на обектите и техните свойства на страницата.

От предишното определение за синтаксиса прозвуча понятието същност. Какво означава това, приложимо към разглеждания проблем?

Същност - ако е просто, това е типът информация (единица съдържание, информация), която насочваме към търсачките. Например, трябва да посочим съобщения на главната страница на блога, тоест да подчертаем същността на тази област с някакъв етикет, определяйки я като област за съобщения. Същото трябва да се направи и с входната страница, където е необходимо да се посочи същността на областта, в която се намира съдържанието (статията), т.е. изберете текста като област на съдържанието.

За почти всеки елемент от страницата можете да дефинирате обект, тоест да посочите какво представлява: съдържание или рейтинг, или коментари като цяло. По този начин обектите могат да бъдат посочени на такива страници (взимам прост шаблон за блог като пример, като моя):

• Основен - списък с обяви;
• Страница с публикации - коментари, съдържание, оценка (ако има такава), навигация;
• Нормална статична страница - съдържание, коментари (ако има).

Освен това на всеки тип страница можете да посочите един и същ елемент - горния колонтитул, долния колонтитул (долния колонтитул), страничната лента (страничната колона), главното меню.

Всеки обект има свои собствени свойства, например:

• Област за съдържание на страницата с публикации - заглавие на статията, текст на статията, описание, име на автора на статията, дата на публикуване, категория, изображения, видеоклипове и други;
• Областта на списъка с обяви на главната страница, заглавията и архивите е същата;
• Област за коментари - име на коментатор, дата, текст на коментара;
• Областта на съдържанието на обикновена статична страница е основно същата като в публикациите;
• Област за заглавка на сайта – заглавие, описание;
• Зона за оценка на страниците - максимална оценка, текуща оценка, брой оценки.
• Footer area (футър на сайта) - година на авторското право;
• Област на страничната лента (странична колона) - името на уиджетите;
• Зона на главното меню - връзки.

Има и други области със свойства, но няма да ги разглеждам, тъй като във всеки речник за маркиране има няколко десетки от тях, а в маркирането от schema.org броят им обикновено е в стотици.

Какви тагове и атрибути да използваме, за да посочим обектите и свойствата на всеки от тях, ще разгледаме в практическата част на тази статия.

Сега нека да преминем към основната идея на параграфа и да разгледаме основните формати на семантичното маркиране. Кратък списък на основните речници и синтаксиси може да се види в мисловната карта по-долу.

Няма да разглеждаме всички речници и синтаксиси, тъй като е безсмислено. Няма да ти трябват. Нека просто обсъдим накратко основните формати за маркиране:

• Schema.org;
• отворена графика;
• Микроформати.

Някои от останалите ще бъдат засегнати доста.

Последната стъпка е да споменем още един речник, а именно Data Vocabulary, който е разработен от Google и сега неговото развитие е спряно. Цялото внимание се насочи към Schema.org. Можем да кажем, че всички свойства и обекти, които бяха в този език за маркиране, станаха прототипи за маркиране от schema.org.

Доколкото разбирам, речникът на данните може да работи със синтаксиси: микроданни и RDF език, което може да се види много добре в помощта на Google за микроданни за навигация. Има 2 опции за маркиране:

1. Маркиране на речника на данните с микроданни;
2. Маркиране на речника на данните с RDFa.

Ще изпреваря малко. В първото изображение можете да видите, че микроданните от Schema.org се използват заедно с речника на данните. Въпросът е, че докато навигационните трохи със схема не се поддържат. Затова се използва комбиниран вариант.

Кой формат за маркиране е най-добре да използвате

Мисля, че вече знаете отговора на този въпрос, защото в описанието на всеки тип маркиране направих убедителен аргумент, че самите търсачки препоръчват речника за маркиране на Schema.org. Това е, което трябва да се използва. Но може да има много опции за прилагане на това микромаркиране, както от плъгини, така и от вграждане на обекти и свойства в шаблони за дизайн.

Последният вариант е най-оптималният, тъй като това е еднократна работа и микромаркирането ще бъде абсолютно на всяка страница. Всички търсачки ще го видят, тъй като ще бъде вграден в шаблона. Но начинаещите може да имат проблеми с внедряването му, тъй като те трябва да разберат кода на своя шаблон поне на минимално основно ниво и да видят какъв етикет се показва заглавието на статията, къде е кодът за показване на текст и т.н. Всички тези моменти ще трябва да бъдат обвити с тагове за микромаркиране.

Този параграф повдига и въпроса за комбинирането на различни речници на един сайт. Това е приемливо и в някои случаи е невъзможно без него. Това ясно се вижда в примера за маркиране на навигационен път, когато маркирането на речника на данните и микроданните от Schema.org се комбинират. В това няма нищо ужасно. Самият Yandex говори за това.

Тук зависи от вас. Ако ви е по-лесно да използвате микроформати, тогава давайте. Аз лично ще покажа целия процес на микромаркирането на Schema.org, тъй като аз самият го внедрих и всичко работи с гръм и трясък без нито една грешка.

Как да проверите наличието на маркиране на сайта

Нашата задача на този етап е да разберем дали шаблонът ни има някакъв формат за маркиране. Това е напълно възможно, тъй като повечето от използваните шаблони са преведени англоезични теми, които вече съдържат някакъв вид формат за семантично маркиране. По правило това е маркиране на микроформат, което изобщо не ни е необходимо. По-добре е първоначално да не съществува, тъй като това ще ни спаси от главния, когато бъде премахнат.

За да проверите наличието на маркиране, можете да използвате както инструмента за проверка на маркирането на Yandex, така и инструмента за проверка на структурирани данни на Google. Предпочитам и силно ви препоръчвам да използвате валидатора на Yandex, тъй като е много по-прост.

След като отидем до валидатора на Yandex, въвеждаме адреса на страницата и кликваме върху „Проверка“.

Ако пише „Micromarkup not found“, това означава, че в шаблона няма маркиране на трета страна. Това е много добре, тъй като не е необходимо да харчите енергия за отстраняването му. Но бъдете внимателни, защото на един тип страница може да няма маркиране, но на друг ще присъства (например на страницата на статията).

Ето, просто анализирам страницата с публикацията и се оказва, че коментарите на шаблона са маркирани с микроформати (има vcard). Това се доказва от различен код в резултатите от теста.

Не се нуждаем от микроформати, така че трябва да ги премахнем. Може да се случи вашият шаблон да бъде маркиран с други формати за маркиране. След това те също трябва да бъдат премахнати. И е възможно маркирането от Schema.org да бъде внедрено незабавно. Това също се случва, но много рядко, тъй като практически няма стойностни шаблони в безплатен достъп. Но лошите са стотинка дузина.

Сега нека да разгледаме процеса на премахване на маркиране на трети страни.

Премахване на маркиране на трети страни

Тъй като в моя случай се оказа маркиране на трета страна, използващо микроформати, ще покажа този процес с неговия пример. Ако имате друга маркировка, тогава принципът на изтриването й ще бъде подобен.

Всичко се свежда до премахване на етикетите и техните атрибути от маркирането, което имате. Единствената разлика между микроформатите и другите типове микроданни ще бъде, че всички типове с изключение на микроформатите добавят нови етикети и атрибути. Микроформатите не добавят нищо, а се записват вътре в атрибута class на определен html елемент от шаблона (например заглавие на статия), както писах в параграфа за основните типове.

Между другото, в параграф 6 от тази статия давам кода за маркиране на коментари, който трябва да бъде вмъкнат във файла с функции на шаблона functions.php. Този код трябва да излекува тези грешки от маркиране на трети страни с микроформати. Ето защо, ако имате този проблем, първо препоръчвам да проверите този код във вашия шаблон. Той трябва да помогне. Това ще ви спести допълнителната работа по ръчно изхвърляне. Ако нищо не се случи, тогава правим всичко на ръка, както описвам по-долу.

Сега нека да преминем към самия процес. И така, по-рано стана ясно, че имам допълнително маркиране от микроформати. При проверка във валидатора ни беше даден таг vcard, който създава грешки.

Сега трябва да отворим папката с шаблона, за да видим всички нейни файлове и след това се обръщаме към тези файлове, които отговарят за изхода на тези елементи, където се намират микроформатите. Вижте списъка по-долу за това как да направите това:

Надявам се, че съм обяснил съвсем просто. Въпреки това, един начинаещ може да има най-много объркване в главата си.

Ето как първоначално изглеждаше тази част от кода с vcard в моя шаблонен файл.

След смяната стана така.

Направих промени и в стиловете.

Сега няма микроформати и дизайнът е запазен в оригиналния си вид.

Така че, когато сме премахнали стандартното маркиране (ако е било налице), можем да вградим новото от Schema.org. Ние започваме този процес.

Внедряване на маркиране на схема Schema.org

Нека започнем с малко обяснение и теория, защото преди практика винаги трябва да се подготвите.

Първо, струва си да разберем кои файлове трябва да посочим необходимите обекти и техните свойства. Сега говоря за файлове за двигателя на WordPress. За други двигатели няма да разказвам, защото не работя с тях. Принципът на маркиране остава същият. Необходимо е само да се определят файловете, където се намират необходимите области за маркиране.

• Single.php файл (записен файл): entity - област със съдържание (статия), свойства - дата на публикуване, автор, категория, заглавие на статия, изображения;
• Файлът functions.php (в моя случай маркиране на кода на коментара): entity - коментар, свойства - текст на коментара, дата и име на коментиращия;
• Файлове със списък с обяви index.php, category.php, archive.php (главен, съответно заглавия и архиви): entity - списък с обяви, свойства - дата на публикуване, автор, категория, заглавие на статията;
• Page.php файл (обикновена статична страница - по избор): обект - област със съдържание, свойства - заглавие на текста и, ако е налично, дата, автор и други;
• Във файла header.php също маркирайте заглавката - обектът ще бъде заглавката (заглавката), а свойствата ще бъдат заглавието на сайта + описанието;
• Файл sidebar.php (странична колона): entity - цялата странична колона, property - заглавието на всеки widget;
• Файл Footer.php (долен колонтитул на сайта): entity - целият футър, свойство - дата на авторското право + име на сайта (не съм маркирал името);
• Файл Header.php (отгоре на ресурса): обект - главно меню за навигация, свойство - връзки + техните котви.

Сега относно таговете и атрибутите, които съответстват на всеки тип обект и съответните им свойства. Първо, относно субектите.

/***Списък с съобщения***/ itemscope itemtype="http://schema.org/BlogPosting" /***Съдържание на страницата с публикации***/ itemscope itemtype="http://schema.org/ Статия" / ***Коментари***/ itemprop="коментар" itemscope itemtype="http://schema.org/Comment" /***Редовна статична страница***/ itemscope itemtype="http://schema .org/ Статия" /***Странична лента (странична лента)***/ itemscope itemtype="http://schema.org/WPSideBar"> /***Долен колонтитул (долен колонтитул на сайта)***/ itemscope itemtype="http :/ /schema.org/WPFooter"> /***Навигация на сайта (главно меню)***/ itemscope itemtype="http://schema.org/SiteNavigationElement"> /***Изображения***/ itemscope= "" itemtype="https://schema.org/ImageObject" /***Постоянна връзка към страницата***/ itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" /*** Организация* **/ itemscope itemtype="https://schema.org/Organization" /***Адрес***/ itemscope itemtype="http://schema.org/PostalAddress"

Сега тагове за собственост.

• Заглавие на страница (текст) - itemprop="headline"
• Текст на публикация - itemprop="articleBody" (може да се използва и за описание, ако е оформено като част от пълния текст)
• Дата на публикуване - itemprop="datePublished"
• Автор - itemprop="автор"
• Категория на статията - itemprop="articleSection"
• Изображение - itemprop="изображение"
• Текст на коментара - itemprop="текст"
• Име на коментиращия - itemprop="creator"
• Дата на коментар - itemprop="datePublished"
• Линк (отнася се за главното меню и изображението) - itemprop="url"
• Година на авторските права в долния колонтитул - itemprop="copyrightYear"
• дата последна промянастраници - itemprop="dateModified"
• Адрес - itemprop="адрес"
• Улица - itemprop="streetAddress"
• Индекс - itemprop="postalCode"
• Местоположение на адреса - itemprop="addressLocality"
• Телефон - itemprop="телефон"
• Дължина на изображението - itemprop="width"
• Ширина на изображението - itemprop="height"
• Лого - itemprop="лого"

Това са основните свойства, които ще използваме сега.

По-нататъшните стъпки за микромаркиране на шаблона са доста прости.

Всяка област, която трябва да дефинира обект и свойство, използвайки таговете, предоставени по-горе, е обвита в някакъв общ таг. Това може да бъде таг за блок div, таг за статия, таг за обхват, H1 заглавие и други. За по-лесно разбиране заглавието почти винаги е обвито в H1 таг, което и трябва да бъде. Ще има 2 етикета: отварящ и затварящ. И така с всеки елемент от сайта, а не само с хедърите.

Въпросът е, че на всеки задължителен елемент ще трябва да бъде даден етикет за обект (посочете типа съдържание: статия или коментар, или списък с обяви и т.н.) и свойства в неговия отварящ таг.

Сега тренирайте. Например, има файл с един запис (статия) single.php. Да започнем с неговото маркиране.

Маркиране на публикация (статии)

Нека започнем с дефинирането на обекта. Шаблонът има общ таг, който обвива цялата област със съдържание на публикацията (както текста на статията, така и заглавието и коментарите) и е различен за всеки. За някои може да е div блок. Имам тази статия. Естествено, този етикет се отваря в самото начало, където започва цялото съдържание, и свършва някъде, когато съдържанието свършва.

И в самото начало, вътре в началния таг на статията, трябва да вмъкна тага на обекта на областта със съдържание на страницата за публикация (дадох кодовете малко по-нагоре). Давам ви изображение (с възможност за щракване) на окончателното маркиране на входния файл single.php и след това ще обясня какво се е случило и какво е станало накрая, ако на някой не му е ясно. Изображението е голямо, но може да се кликне, така че можете да щракнете върху него за по-голям изглед или да го отворите в нов раздел за пълен изглед.

Първоначално цялата област на съдържанието на публикацията се отваря с помощта на етикета article. Беше така:

И стана така:

Както можете да видите, етикетът за обект на публикация е добавен в началния етикет на статията. Сега роботът за търсене ще разбере, че това е област, която съдържа съдържание. Ще възприеме тази област като обект. Много е важно.

Между другото. Много хора задават оценки на статии без плъгин и след проверка на страницата в валидатора на Yandex или Google им се казва, че обектът на преглед не е посочен. Това е така, защото рейтингът се публикува сам. Трябва да го поставите в даден регион, който от своя страна трябва да бъде дефиниран от маркер за маркиране като регион на съдържание (или обект за обратна връзка). Тогава рейтингът ще принадлежи на обекта, тоест на статията. След това няма да има грешка.

Да се ​​върнем към процеса. Първо поставихме обекта на обекта (обвихме цялата основна област с общ таг) и след това маркираме неговите свойства, тоест вторични данни: дата на публикуване, автор, тяло на статия (самия текст), данни на издателя ( адрес, организация, лого), дата на последната промяна на страницата, адрес на главната страница и т.н. Всичко е абсолютно същото - вътре във всеки отварящ таг на необходимия елемент посочваме съответните параметри. По-долу предоставям обяснения какво се е случило преди да бъдат направени промените и какво се е случило след това.

Първоначално копираме 2 реда код веднага след отварящия таг, който обвива цялата област със съдържание. Имам този етикет за статия с обект вътре в него, поставен по-рано в текста.

"/>

• Първият ред е отговорен за показването на ред, който сочи към адреса на страницата и казва, че тази конкретна страница е основната.
• Вторият ред е датата на последната промяна на страницата.

След това веднага на следващия ред даваме данни за издателя, т.е. който публикува съдържанието. Това включва няколко обекта наведнъж (Организация - адрес в нея, изображение - лого). Аз давам кода, вие само замествате подсказките в него с вашите данни. Дали е истинско или не, зависи от вас, но ако Google все пак го направи, за да подобри резултатите от търсенето и да покаже вашите данни, така че да ви се вярва, тогава бих посочил истинските. Като цяло тук е работа на всеки. Ето кода.

име на улица индекс държава, регион, град телефон

Ако забележите, тогава в горните кодове има таг за стил display: none, който казва, че тези данни не трябва да се показват на страницата, а само в изходния код, за да може търсачката да ги види. Всъщност това е, което ми трябва. Този етикет се намира на редове 2 и 9 и скрива показването на логото и адреса. Ако искате да покажете, премахнете тези стилове. В бъдеще ще направя това, когато радикално преработя блога, направя го в компактен красив блог, който ще се вписва добре в дизайна и ще дава информация за мен.

Що се отнася до логото, много просто го нямат. Предлагам да направите следното - или да създадете малко изображение и да напишете върху него името на сайта с адреса (най-лесният вариант за лого) или да качите своя снимка (най-мързеливият вариант). Имам лого, затова го регистрирах.

Така че сега маркираме следната информация. Тук ще е по-лесно. Просто трябва да намерите всички останали необходими кодове, които показват тази или онази информация (заглавие, категория, дата на публикуване, автор) и в техните отварящи тагове, в които са затворени, вмъкнете необходимите тагове за свойства на маркиране на schema.org.

Заглавие на записа. Беше:

Дата на публикуване. Беше:

Константин Хмелев

Константин Хмелев

".$текущо_име_на_категория."

".$текущо_име_на_категория."

Текст на статията. Беше:

ето кода на трета страна

ето кода на трета страна

Почти същото, трябва да направите същото. Разликите ще бъдат само в таговете, вътре в които трябва да поставите таговете entity и property. Техният ред също може да бъде различен. Или може би изобщо няма да има нищо, например няма да има дата на публикуване или връзка към категорията. След това трябва да добавите тези данни към шаблона.

В предпоследния параграф на статията ще ви дам кодове, които можете да използвате, ако изведнъж нещо ви липсва.

И така, сега трябва да проверим нашата страница в Yandex и Google валидатори.

В валидатора на Google ще е почти същото. Не трябва да има грешки в тези данни. Единственият нюанс се отнася до микромаркирането на изображения, към което се обръщаме.

Можете да маркирате всяко изображение с ръцете си, като го опаковате със същността на изображенията и предписвате необходимите свойства, но това е доста неудобно, когато във всяка публикация има няколко десетки изображения. Нека използваме следния код.

Функция micro_images_captions ($a, $attr, $content = null)( екстракт(shortcode_atts(array("id" => "", "align" => "alignnone", "width" => "", "caption" = > ""), $attr)); if (1 > (int) $width || празен($caption)) върне $content; $caption = html_entity_decode($caption); if ($id) $id = "id ="" .esc_attr($id). "" "; връщане "

".do_shortcode($content)."

". $caption. "

";) функция micro_image($content) ( $ar_mk = "! !si"; $br_mk = " "; $content = preg_replace($ar_mk, $br_mk, $content); return $content; ) add_filter("the_content", "micro_image"); add_filter("img_caption_shortcode", "micro_images_captions", 10, 3);

Сега не е необходимо да добавяте етикет за маркиране на изображение към всяка статия. Отиваме до валидатора, проверяваме страницата с поне една снимка и виждаме следващата снимка.

Не трябва да има никакви грешки. Всичко е чисто. Всяко изображение трябва да бъде обвито с маркиране, както на екранната снимка по-горе.

Оформление на основната страница

Тук трябва да обвиете кода, който показва списъка с съобщения, с етикета на обекта на списъка с съобщения. Това се прави точно по същия начин. Вътре в общия таг, който обгръща целия код в шаблона, поставяме желания таг (същността на списъка с публикации в блога е blogposting или по аналогия със страницата за публикация -статия). Вижте изображението (с възможност за кликване).

Както можете да видите, списъкът ми с обяви се показва с тага li list, тоест всяко съобщение е оградено в него. Вътре в списъка е почти същото като в самия запис - има дати, име на автора, заглавие, адрес, лого, издател и т.н. Можете да видите това много добре на страниците на блога. Структурата е подобна, само текстът на статията не е пълен. Като цяло маркирането е точно същото като за страницата за публикация, с изключение на маркера за обект за публикуване на блогове.

Също така е необходимо да използвате малко по-различен код за маркиране на изображението за страницата с обяви, тъй като там се показват не само снимки, но и миниатюри. Микромаркирането на миниатюри ще се извършва с почти същия код. Ако по-рано те трябваше да бъдат маркирани на ръка, сега няма смисъл. Ето кода (поставяме го и във файла functions.php).

Функция micro_thumbnail($content) ( $ar = "!!si"; $br = ""; $content = preg_replace($ar, $br, $content); върне $content; ) add_filter("post_thumbnail_html", "micro_thumbnail ");

Обръщаме се към валидатора и проверяваме начална страница. Показах ви само 2 обяви, т.к. цял екран ще бъде много голям.

Ще има толкова записи за блогове, колкото са съобщенията на тази страница. Ако вместо публикуване в блог сте използвали статия, тогава ще имате няколко статии в зависимост от броя на съобщенията.

защото Главна страницае подобна по структура на страниците на категориите и архивите, тяхното микромаркиране е идентично. Списъците с обяви се показват на всички видове тези страници.

Така че остава да анализираме маркирането на коментарите, което е доста сложен процес за начинаещ. Има и обикновени статични страници. Принципът на тяхното маркиране е подобен на записите, така че няма да го показвам.

И така, коментари. Нека опростим задачата до вмъкване на един код във функционалния файл functions.php и модифициране на функцията, която показва коментари на страниците на сайта. Първо, вземаме следния код и го поставяме във файла functions.php в самото начало, точно преди отварящия таг< ?php. Если будет выдавать ошибку, можно попробовать его разместить после закрывающего тега?>в самия край на файла.

Има и опция за поставяне, когато трябва да премахнете отварянето в този код в самото начало php код(Изтрий< ?php) и в самом конце его закрытие (удалить?>). След това трябва да поставите кода не преди или след отварящия (затварящия) php таг, а вътре в тези тагове до всички други функции. Понякога се натъквах на проблем, когато точно тази опция за разположение работи.

Кодът не работи на всички шаблони!

< id="коментар-">

%с:

"), get_comment_author_link()); ?>comment_approved) : ?>

$add_below, "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>

$add_below, "depth" => $depth, "max_depth" => $args["max_depth"]))); ?>