Валидация плагина XTypo и Addthis в Joomla

{xtypo_quote}Валидация плагина XTypo и Addthis в Joomla{/xtypo_quote}{xtypo_dropcap}О{/xtypo_dropcap}чень часто можно услышать, что валидация не нужна и, якобы, все это удел только тех, кто хочет идеальной совместимости с XHTML. Тем не менее, считаю, что многим будет полезно узнать о правильном решении вопроса валидации популярного сервиса закладок Addthis.com, а также плагина Xtypo.

На примере одной из своих статей я покажу, как пройти валидацию на сервисе http://validator.w3.org/.

1. Валидация плагина XTypo:

Возьмем материал {xtypo_button2}Валидация XHTML{/xtypo_button2} и после проверки кода, он выдает нам 23 ошибки:

document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
…; display: block; height: auto; width: ;"><pre class="brush: xml;">&lt;head&gt;
?
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

перевод:

Тип документа не разрешает элемент "div" в данном месте; отсутствие одного из "object", "applet", "map", "iframe", "button", "ins", "del" начального тега...

Вышеуказанный элемент не может появляться в содержании, в котором вы его указали; другие вышеуказанные элементы являются одиночными и могут содержать указанные элементы. Это может означать, что вам нужен содержащий элемент, или, возможно, вы забыли закрыть предыдущий.

Еще одним из решений является то, что вы попытались вставить такой элемент, как "<p>" или "<table>" внутри inline элемента ("<a>", "<span>", or "<font>").

Открываем в редакторе Joomla статью в HTML коде (Toggle Editor), видим следующую картину:

{code class="brush: xml;"}

<p>{xtypo_ button2}<a title="форум" href="http://photolessons.org/forum/viewtopic.php?f=7&amp;t=47" target="_blank">обсудить</a>{/xtypo_ button2}</p>

{/code}

Нам нужно убрать <p> в начале и </p> в конце кода, сохраняем документ.

Теже действия нужно проделать и для тегов </br> и остальных, чтобы получился код:

{code class="brush: xml;"}

{xtypo_ button2}<a title="форум" href="http://photolessons.org/forum/viewtopic.php?f=7&amp;t=47" target="_blank">обсудить</a>{/xtypo_ button2}

{/code}

2. Валидация сервиса социальных закладок AddThis: При вставке кода, полученного с данного сервиса, получаем следующий вид:

{code class="brush: xml;"}

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f688ec27e456d1e"></script>
<!-- AddThis Button END -->

{/code} Для того, чтобы пройти валидацию, нам нужно просто убрать значения кнопок:

fb:like:layout="button_count" и

g:plusone:size="medium".

В результате получаем:

{code class="brush: xml;"}

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f688ec27e456d1e"></script>
<!-- AddThis Button END -->

{/code}

Проверяем на наличие ошибок в коде...

Если существуют ошибки, то находим главный файл используемого шаблона (у нас это index.php), и меняем:

{code class="brush: xml;"}

<html xmlns="http://www.w3.org/1999/xhtml">

{/code} на вид {code class="brush: xml;"}

<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:addthis="http://www.addthis.com/help/api-spec">

{/code}

Данным действием мы добавляем значения в статьи для сервиса AddThis, чтобы корректно отображалось содержимое на нашем сайте.

Наслаждаемся зеленым цветом на сервисе валидации после окончательной проверки:)

{tab=Форум}{xtypo_button2}обсудить{/xtypo_button2}{/tabs}