Сейчас я расскажу как поставить на сайт так называемый «социальный замок» и увеличить активность своих пользователей в социальных сетях. Это просто и бесплатно.
Архив рубрики: WordPress
Защита от спама сайтов на WordPress.
Ошибка 403 при установке плагинов WordPress
После установки плагина iThemes Security часто возникает ситуация, когда новые плагины больше не хотят устанавливаться, выдавая ошибку.
Как установить красивые кнопки «лайков» со счётчиками от Social Likes
Всем привет! Не так давно я установила себе кнопки социальных сетей со счетчиками, которые выполнены в едином стиле. Хочется отметить, что сервис Social Likes предоставляет возможность установить одним блоком кнопки лайков со счетчиками от самых популярных социальных сетей: Вконтакте, Одноклассники, Twitter, Facebook, Мой мир, Google+.
Раньше у меня выводились кнопки Вконтакте, Twitter, Facebook, Google+ в одну строку, но для каждой использовался свой скрипт, который генерировался на официальном сайте. Как добавить такие кнопки Вконтакте, Twitter, Facebook я писала в статьеhttps://inetsovety.ru/kak-dobavit-knopki-vkontakte-facebook-i-twitter/ Сейчас я занялась ускорением блога. Анализируя свой блог на скорость загрузки, я заметила, что загрузка каждой из этих кнопок оказывает влияние на суммарную скорость загрузки страницы. Было принято решение найти альтернативный способ вывода. К сожалению, разновидностей кнопок со счетчиками, да еще и в классическом стиле оформлении не так много.
Не смотря на обилие вариантов вывода кнопок соцсетей, таких как разнообразные плагины и сервисы, ни один из мне не нравился. Плагины оказывают влияние на загрузку сайта, а некоторые сервисы притормаживают сайт.
На многих моих сайтах стоят кнопки от share42.com, в частности в статье https://inetsovety.ru/plavayushtaya-panel-knopok-sotssetey/ Но у этих кнопок нет счетчиков. Но мне нравится способ их вывода. На самом сервисе я выбираю оформление кнопок, потом скачиваю архив с двумя файлами, которые потом загружаю на хостинг. Загрузка кнопок осуществляется с моего хостинга. Принцип работы кнопок соцсетей от Social Likes похожий.
Установка кнопок Social Likes
- Первым делом переходим на сайт
- Подбираем оформление кнопок. Вариантов оформления несколько. Мне больше всего понравилось классическое оформление. Кстати, кому не нужны счетчики возле кнопок лайков, отключите их. Можно выбрать положение кнопок: горизонтальное, вертикальное и одной кнопкой. Также можно указать, кнопки каких соцсетей будут выводиться.
- Посмотреть, как выглядят кнопки можно в самом верху. После того, как Вы определились со стилем кнопок, нажимайте на большую оранжевую кнопку с надписью «Скачать кнопки».
- Сделайте резервную копию шаблона перед дальнейшей установкой кнопок.
- Нужно распаковать скачанный архив. В нем будет 3 файла. Файлы social-likes.min и social-likes_classic мы будем копировать на хостинг в папку сайта, а из файла index возьмем код вывода кнопок. Тот же самый код показан на сайте Social Likes над кнопкой «Скачать кнопки»:
- Состоит код вывода кнопок из двух частей. Отмеченная цифрой 1 на картинке выше часть кода добавляется в файл header.php до закрывающего тэга шапки </head> . Обратите внимание на следующий момент. Нужно указать правильный адрес к файлам social-likes.min и social-likes_classic, которые Вы загрузили на хостинг. Я эти файлы загрузила в папку social-likes в корневой папке сайта. Соответственно адрес к файлу у меня такой: https://inetsovety.ru/social-likes/. Вот мой код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://inetsovety.ru/social-likes/social-likes.min.js"></script> <link rel="stylesheet" href="https://inetsovety.ru/social-likes/social-likes_classic.css" type="text/css" media="screen" />
Также, если в файле header.php уже есть код с содержанием jquery, то еще раз добавлять его не нужно. Значит библиотека jquery уже подключена.
- Вторую часть кода добавляем в файл single.php в то место, где будет выводиться блок кнопок. Вот пример моего кода:
Собственно на этом процесс установки закончен. Откройте любую свою запись и проверьте работоспособность кнопок Social Likes. Если кнопки не отображаются, проверьте не совершили ли Вы ни одной из следующих ошибок:
- не правильно указан адрес к файлам;
- два раза подключается jquery. В одном из бесплатных шаблонов, у меня jquery подключался следующей строкой:
<script src="http://code.jquery.com/jquery-latest.js"></script>
если Вы добавили код вызова файлов кнопок выше строки вызова библиотеки, то кнопки не будут отображаться (будет просто текст).
Надеюсь у Вас получится быстро установить кнопки. Если возникнут вопросы, пишите в комментариях. Попробуем разобраться вместе.
2014-08-05T12:33:19
Блог на WordPress
Плагин WordPress Post Tabs — красивые вкладки (табы).
Иногда требуется разместить большой материал на одной странице. Но как это сделать максимально удобно, чтобы не приходилось бесконечно листать страницу в браузере и при этом вся информация индексировалась на одной странице? Сейчас расскажу.
Как внедрить микроразметку Schema.org для WordPress блога
Приветствую всех читателей! Для удобства и повышения качества восприятия сайта поисковыми система была разработана микроразметка. Она представляет собой разметку страницы сайта специальными атрибутами. Помогает структурировать информацию на сайте для робота, чтобы он лучше понимал Ваш сайт.
Для интернет магазинов, порталов фильмов или музыки, внедрение микроразметки оказывает положительное влияние в плане привлечения посетителей. Сайт с микроразметкой становится кликабельнее в поисковой выдаче.
Интернет магазины, внедрившие микроразметку, в результатах выдачи выделяются. В сниппете прописывается описание товара, а не набор выделенных жирным ключей, как у других, а также указывается цена товара:
Что такое микроразметка сайта
Рекомендую Вам посмотреть видео, что говорит сам Yandex о микроразметке:
В 2011 году крупные поисковые системы Яндекс, Google, Bing обьявили о внедрении семантической разметки данных. Семантическая разметка должна помочь роботам точнее обрабатывать и структурировать, определять и понимать информацию на сайтах. Чтобы потом представлять ее пользователям в результатах поиска.
В HTML-код страниц сайта добавляются специальные атрибуты, которые указывают роботам на тип обрабатываемой информации.
Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.
Микроразметка дает возможность сайту добиться лучшей релевантности страницы в поисковой выдаче. Пример результатов поисковой выдачи, приведенный на картинке ниже, показывает, что у сайтов с микроразметкой показывается не только описание товара, но и телефон, адрес, время работы, ссылка на карту, другие разделы сайта:
<img class="aligncenter wp-image-5618 size-full" title="как выглядят интернет-магазины в результатах поиска после внедрения микроразметки" src="https://readmag.ru/wp-content/uploads/2014/07/mikrorazmetka-schema-9.png" alt="как выглядят интернет-магазины в результатах поиска после внедрения микроразметки" width="592" height="573" />
Разработанная микроразметка Schema.org использует микроданные для описания сущностей и обьектов на страницах сайта. Подробнее о ней Вы можете прочесть у Яндекса
Валидатор микроразметки Яндекс и Google
Проверить микроразметку в Яндекс можно из панели Яндекс Вебмастер. Как зарегистрироваться в ней я писала в этой статье https://inetsovety.ru/yandex-webmaster/
Заходите в панель вебмастера, справа внизу ищите ссылку «Проверить микроразметку». После клика по ней откроется страница проверки:
У Гугла свой инструмент проверки структурированных данных, находится он по адресу
Как сделать микроразметку сайта на WordPress
Сейчас я приведу Вам пример микроразметки сайта. Я буду внедрять микроразметку на одном из своих сайтов, на котором стоит бесплатный шаблон. Важно перед установкой разметки schema.org проверить нет ли на сайте какой-то дугой разметки. Если Ваш шаблон сделан на заказ, то скорее всего в нем ничего такого не будет. А вот с бесплатными шаблонами посложнее, тут как повезет. Для проверки берез запись с оставленными в ней комментариями. На одном из моих сайтов с бесплатным шаблоном какая-то микроразметка была, а на другом выдавалось сообщение: «Микроразметка не обнаружена =(«:
Вот такая вот «кривая и не поддерживаемая Яндексом» микроразметка найдена в бесплатном премиум шаблоне. Если в Вашем шаблоне нашлось что-то подобное, необходимо его удалить. Микроформат hCard служит для описания человека. Т.е. роботу говорится, что этот участок текста оставлен человеком и вот информация о нем. В данном примере, fn указывает фамилию, nickname — ник, photo — аватар. Главный минус микроформата hCard — роботу не указывается дата оставления комментария и его содержание. 
Из-за того что у Вас разные шаблоны, я не могу Вам показать, где в Вашем случае находится разметка hCard. Я приведу схему поиска свойства vcard, который потом мы переименуем. Бесплатные шаблоны генерируются программами, которые и внедряют vcard, как стиль оформления для какого-то блока. Наша задача найти его и переименовать.Забегая наперед скажу, что чаще всего он встречается в комментариях, поэтому я рекомендую Вам проверять валидатором микроразметки статью с комментариями. Проверка статьи без комментариев покажет, что микроразметка не найдена, а на самом деле она есть на сайте.
Действуем так:
- Открываете любую из своих статей, нажимаете одновременно CTRL и U. Откроется исходный код страницы. Жмете комбинацию клавиш CTRL и F, внизу появится строка поиска по странице, в нее вставляете vcard и смотрите, где он нашелся. В моем случае он находится у блока div class=»comment-author vcard«.
- Теперь необходимо найти свойство vcard в файлах темы. Обязательно скопируйте файлы темы Вашего блога перед редактированием. В моем случае vcard нашелся в таблице стилей (style.css) и в файле комментариев (comments.php). Я заменила vcard на vca везде, где он встречался. Теперь проверка микроразметки показывает, что таковая на сайте не найдена.
Если Вам не удается найти самостоятельно vcard ни в одном из файлов шаблона, обращайтесь к фрилансерам за помощью. Бесплатные шаблоны хорошо тем, что они бесплатны 
На этом все их преимущества заканчиваются, а начинаются проблемы с их редактированием и внедрением различных фишек.
Когда проблема с микроразметкой решена, приступаем к внедрению микроразметки schema org.
Размечать мы будем те участки сайта, на которых мы хотим акцентировать внимание поисковых роботов. На своем блоге я разметила файл header.php и single.php.
Файл header.php отвечает за вывод данных в шапке сайта. Я хочу, чтобы поисковые роботы адекватно воспринимали название сайта и его описание.
В файле header.php ищем тег header, пример из моего шаблона <div id=»header» class=»out»> , добавляем внутрь следующий атрибут:
itemscope itemtype="https://schema.org/WPHeader"
После добавления этого атрибута код примет вид:
<div id="header" class="out" itemscope itemtype="https://schema.org/WPHeader">
Обратите внимание куда я вставила атрибут. Не правильная вставка в код может привести к тому, что шаблон перестанет работать.
Теперь в том же файле header.php ищем строчки, отвечающие за вывод названия сайта и его описания:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
Функция <?php bloginfo(‘name’); ?> выводит заголовок сайта, <?php bloginfo( ‘description’ ); ?> соответственно его описание.
Добавляем атрибут itemprop=»headline» к заголовку, а itemprop=»description» к тегу описания. Вот коды этих атрибутов
itemprop="headline" itemprop="description"
Вот так выглядит мой код с данными атрибутами:
<h1 itemprop="headline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2 itemprop="description"><?php bloginfo('description'); ?></h2>
Теперь проверка микроразметки Яндекс показывает, что поисковый робот понимает, что в шапке сайта мы прописали для него заголовок сайта headline и ого описание description. Для моих сайтов показывается предупреждение, что описание сайта короткое и должно быть длиннее 250 символов. Какие влияние оказывает короткое описание сайта на продвижение, я пока не знаю. Время покажет
Микроразметка поста (статьи) в WordPress
Шапку сайта в файле header.php мы разметили. Приступим к микроразметке постов блога. Мы покажем роботу, что вот тут начинается статья, вот это дата, это автор, а это сам текст. Начнем. Открывайте файл single.php, который отвечает за вывод статей. В некоторых шаблонах из файла single.php идет подключение к другому файлу, название может быть подобным content-single.php. В таком случае редактировать придется его. Главное, чтобы в нем Вы нашли теги, о которых я напишу ниже.
Ищем функцию отвечающую за вывод контента <div id=»content»>. Добавляем внутрь атрибут:
itemscope itemtype="https://schema.org/Article"
Получится примерно так:
<div id="content" itemscope itemtype="https://schema.org/Article">
Укажем поисковикам на начало статьи добавив атрибут itemprop=»articleBody». В моем шаблоне за вывод поста отвечает entry, у Вас может быть другое название класса.
<div class="entry" itemprop="articleBody">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?>
<?php the_content('Читать далее »'); ?>
Несколькими строчками выше будет код, который выводит заголовок статьи, автора и дату публикации:
<h2 class="title"><?php the_title(); ?></h2>
<div class="postdate">
<?php the_time('d.m.Y в G:i:s') ?>
<?php the_author() ?>
</div>
В теге заголовка h2 функция <?php the_title(); ?> отвечает за вывод заголовка поста. Ее мы помечаем атрибутом itemprop=»name». За вывод даты публикации отвечает функция <?php the_time(‘d.m.Y в G:i:s’) ?>. В большинстве шаблонов формат даты не поддерживается микроразметкой schema, поэтому Вам придется его изменить. Непосредственно внутрь <?php the_time(‘d.m.Y в G:i:s’) ?> мы не можем вставить атрибут itemprop=»datePublished», шаблон перестанет работать. Заключаем функцию даты и автора в тег <span> </span>.
<h2 class="title" itemprop="name"><?php the_title(); ?></h2>
<div class="postdate">
<span itemprop="datePublished"><?php the_time('Y-m-d') ?></span>
<span itemprop="author"><?php the_author() ?></span> </div>
Проверяем и видит результат:
В бесплатном шаблоне вывод рубрики был после статьи. Чтобы акцентировать внимание роботов на названии рубрики добавьте ей следующий атрибут:
<div class="postmeta">
Опубликовано в рубрике <span itemprop="articleSection"><?php the_category(', ') ?></span>
</div>
Вот список кодов всех атрибутов, которые мы используем для разметки поста:
itemprop="articleBody" itemprop="name" itemprop="articleSection" itemprop="datePublished" itemprop="author"
Еще раз обратите внимание внимание на правильный формат даты, чтобы не выскакивало предупреждение при проверке микроразметки.
Картинок
Вот этот атрибут отвечает за микроразметку картинок:
itemprop="image"
Как его добавить его в код шаблона, чтобы каждой картинке на блоге автоматически присваивался, я не знаю. На сегодняшний день я пока его добавляю вручную к каждой картинке. Делаю я это следующим образом: перехожу в режим «Текст» и добавляю к каждой картинке этот атрибут:
Размечать вручную каждую картинку — это совсем не благодарное дело. Особенно, если на блоге написано сотни статей и в каждой по несколько картинок. Так еще и глюк появляется. Если позже снова отредактировать статью, то ручная микроразметка картинок слетает. Разметить все картинки в статьях поможет код, который нужно добавить в файл функций:
/*--------------------------------------*/
/* микроразметка картинок*/
/*--------------------------------------*/
function micro_image($content) {
global $post;
$pattern = "<img";
$replacement = '<img itemprop="image"';
$content = str_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'micro_image');
Я добавила этот код в конец файла functions.php до закрывающего тэга ?> .
Микроразметка комментариев в Wordpress
Выполнить микроразметку комментариев для меня оказалось сложнее всего. Если в шаблоне на этом блоге, который создавался на заказ, я разобралась что к чему минут за 15, то ни в одном из бесплатных шаблонов мне не удалось сделать микроразметку комментариев. Видно, что код вывода комментариев генерировался программой и понять в нем что-либо сложно.
Сейчас я дам Вам атрибуты, которые нужно прописать для разметки самих комментариев, а Вы уже или сами, или при помощи фрилансеров программистов, добавите их в код шаблона.
itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/Comment" itemprop="commentCount" itemprop="creator" itemprop="dateCreated" itemprop="text"
Атрибут в первой строчке размечает блок комментариев; второй — подсчитывает количество комментариев к статье; третий — имя комментатора; четвертый — время (не забывайте, что формат должен быть таким ‘Y-m-d’ ); пятый — сам комментарий.
! Обратите внимание.
В июне 2015 произошло обновление микроразметки, старые атрибуты вызывают ошибку в валидаторе:
ПРЕДУПРЕЖДЕНИЕ: поле interactionCount не определено в спецификации https://schema.org/Article
Поле comment содержит некорректный тип данных https://schema.org/UserComments
Если вы используете эти атрибуты срочно измените их на те, что выше:
itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/UserComments"
itemprop="interactionCount"
itemprop="commentTime"
itemprop="commentText"
Контактных данных
Много расписывать не буду, приведу лишь код:
<div itemscope itemtype="https://schema.org/PostalAddress"> <span itemprop="name">Прописываем название блога</span> <span itemprop="postalCode">Ваш индекс</span> <span itemprop="addressLocality">Город, в котором Вы живете</span> <span itemprop="streetAddress">Адрес</span> <span itemprop="telephone">Телефон</span> <span itemprop="email">Электронная почта (желательно, чтобы в адресе фигурировал домен)</span>
Ну вот собственно и все, что я на сегодняшний день знаю о том, как сделать микроразметку на сайте WordPress. Если что-то узнаю новенькое, буду дополнять статью. Если кому-то известно больше, дополняйте в комментариях.
2014-07-11T14:58:11
Блог на WordPress