Метка: WP

  • Как сделать форму обратной связи во всплывающем окне

    Как сделать форму обратной связи во всплывающем окне

    На многих сайтах устанавливаются формы обратной связи, чтобы пользователи могли оставить сообщение администратору не покидая сайт. Самым популярным, качественным и удобным в настройке и использовании является плагин Contact Form 7 — с его помощью можно создать любые контактные формы и не только. Поскольку плагин имеет большое количество различных форм и полей, то его можно использовать для многих задач. Я, например, использовал его для создания анкеты работодателя и соискателя на рекрутинговом сайте, для создания формы заказа товара на сайте по продаже только одной линии продукта, использовал этот плагин для создания сложной и объемной расчетной формы для строительного сайта, для самых различных форм обратной связи и прочих форм. Но речь не об этом, а о том, как же сделать, чтобы форма связи появлялась во всплывающем окне, чтобы можно было сделать кнопку вызова контактной формы на каждой странице, а не только на странице «Контакты»?

    Все на самом деле не сложно, но понадобится еще один плагин с эффектом FancyBox, мне лично нравятся эти два плагина: Easy FancyBox или FancyBox for WordPress, есть различные похожие плагины, но любой из этих подходит отлично и еще позволяет открывать в popup изображения.

    В общем, установлены два плагина: Contact Form 7 и Easy FancyBox, создана контактная форма, осталось добавить код в шаблон.

    од вставляется в шаблон сайта в файлы .php!

    Код с всплывающей контактной формой, установленный в коде файла шаблона:

    <a href="#contact_form_pop" class="fancybox">заказать звонок</a>
    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop">
            <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
        </div>
    </div>

    Это код самой кнопки вызова окна с формой, для этой кнопки можно задавать любые стили, и вставлять ее в любом месте шаблона:

    <a href="#contact_form_pop" class="fancybox">заказать звонок</a>

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

    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop">
            <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
        </div>
    </div>

     

    Чтобы вызывать на одной странице несколько форм, нужно использовать различные id для вызова формы.

    Пример вызова двух форм обратной связи в pop-up окне:

    <a href="#contact_form_pop_1" class="fancybox">Вызываем форму 1</a>
    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop_1">
            <?php echo do_shortcode('[ contact-form-7 id="420" title="Заказать звонок" ]'); ?>
        </div>
    </div>
     
    <a href="#contact_form_pop_2" class="fancybox">Вызываем форму 2</a>
    <div style="display:none" class="fancybox-hidden">
        <div id="contact_form_pop_2">
            <?php echo do_shortcode('[contact-form-7 404 "Not Found"]'); ?>
        </div>
    </div>

    В данном случае для вызова нескольких форм обратите внимание на эти части кода:

    <a href="#contact_form_pop_1" ...
    <div id="contact_form_pop_1"> ...
     
    и для второй формы:
     
    <a href="#contact_form_pop_2" ...
    <div id="contact_form_pop_2"> ...
    

     

  • 15 урок Безопасность WordPress

    15 урок Безопасность WordPress

    define(‘DISALLOW_FILE_EDIT’, true); wp-config.php

    Duplicator — резервное копирование файлов и бд сайта

    WP-Optimize — оптимизация бд

    iThemes Security 

    Советы по безопасности в целом

    Первые мои советы коснуться вопросу работы с паролями. Это основа основ, фундамент! Не ленитесь следовать изложенным ниже правилам:

    • используйте пароль длинной не менее 8 символов с буквами в разном регистре, числами и по возможности другими символами;
    • старайтесь обновлять его раз в пол года;
    • никогда не используйте в качестве пароля слово из словаря или сочетание таких слов;
    • никогда не сохраняйте пароли в браузере и ftp клиентах;
    • используйте разные пароли для почты, панели администратора WP, хостинга и так далее;

    1. Обязательно своевременно устанавливайте обновления WordPress и всех активных плагинов.

    2. Не забывайте делать резервные копии (backup) базы данных и файлов блога.

    3. Удалите сторонние ссылки из темы WordPress.

    4. Скройте используемую версию WP от глаз посторонних. Для этого откройте на редактирование шаблон header.php и удалите мета тег примерно следующего содержания:

    <meta content="WordPress<?php bloginfo ('version'); ?>" />

    Потом обязательно удалите из корневой папки блога на сервере файлы readme.html и license.txt. На работу блога никакого влияния они не оказывают.

    1. Плагин iThemes Security 

      Полный комплекс защитных мер от взлома

    Основные настройки безопасности

    Write to Files Разрешаем программе изменять файлы wp-config.php, .htaccess

    Notification Email – уведомления о безопасности

     Backup Delivery Email— резервные копии базы данных

    basic

    Blacklist Repeat Offender-Настройка бана пользователей

    Default Blacklist- добавить в черный список ссылки, пути с которых происходит частый взлом сайтов

    banned

    Enable local brute force protection — Защита от перебора паролей

    pass

    Max Login Attempts Per Host количество попыток входа

    Max Login Attempts Per User – количество попыток входа на одного пользователя

    Minutes to Remember Bad Login (check period) – количество минут ожидания, после неудачной попытки входаlogin

    Hide Backend – скрыть стандартную ссылку на форму входа в админки

    Login Slug – изменить ссылку входа в админку

    Enable Theme Compatibility – включить совместимость с темой, в случае если в теме возникнут ошибки из-за изменения пути входа в админку

     admin

    System Files — Защита системных файлов

    Directory Browsing — Отключить просмотр каталогов, Запрещает пользователям видеть список файлов в каталоге

    Long URL Strings — Ограничивает количество символов, которое можно послать в URL. Хакеры часто используют длинные URL-адреса, чтобы попытаться добавить запись в базу данных

    Uploads — Отключить выполнение PHP в папке для закачанных файлов. Это позволит предотвратить загрузку вредоносных скриптов во время добавления.

    basicsystem

     

    Comment Spam  — Уменьшить спам в комментариях

    FileEditor — Отключение редактор файлов для плагинов и тем, требующих, чтобы пользователи имели доступ к файловой системе, чтобы изменять файлы.После активации вам нужно будет вручную отредактировать тему и другие файлы, используя инструмент, кроме WordPress.

    Login Error Messages — Отключить сообщения об ошибках Войти. Предотвращает сообщения об ошибках отображается для пользователя при неудачной попытке входа в систему

    ызфь

  • 13 ведоурок. Плагины Custom Sidebars,  Black Studio TinyMCE Widget,  PHP Code Widget,  Request Call Back,  SumoMe

    13 ведоурок. Плагины Custom Sidebars, Black Studio TinyMCE Widget, PHP Code Widget, Request Call Back, SumoMe

    Плагины:

    1. Custom Sidebars — создание и добавление отдельного сайдбара на нужную страницу
    2. Black Studio TinyMCE Widget — визуальный редактор в виджетах
    3. PHP Code Widget — реализация php кода на страницах и записях wordpress
    4. Request Call Back — кнопка обратного звонка
    5. SumoMe — аналитика, email подписка и мн.др.
  • 12 урок. WordPress. Плагины: Форум, мультиязычность, водяные знаки, запрет  копирования и мн.др

    12 урок. WordPress. Плагины: Форум, мультиязычность, водяные знаки, запрет копирования и мн.др

    Как создать форум на сайте WordPress

    Форум на сайте нужен для обсуждения между посетителями форума различных тем, путём размещения сообщений внутри этих тем. Пользователи форума могут комментировать темы, задавать вопросы и получать на них ответы, а также сами отвечать на вопросы других пользователей.

    Форум может быть узкоспециализированным, а может быть и без специализации. Обычно тематика форума зависит от тематики сайта, и может быть очень разнообразной, охватывая все сферы жизни.

    Установка плагина bbPress

    Создавать форум в WordPress будем с помощью одного из самых популярных плагинов для создания форума — bbPress. И так, приступим!

     Устанавливаем и активируем плагин bbPress.

    Как создать форум на сайте WordPress

    Создание нового форума

    После установки, активации и перевода плагина можно приступить непосредственно к созданию форума. Все делается очень просто и интуитивно понятно!

    1. Для того, чтобы создать новый форум переходим в Форумы -> Новый форум.

    Как создать форум на сайте WordPress

    2. Создаем новый форум, указав при этом этом его название и описание.

    Как создать форум на сайте WordPress

    После того как Вы укажите название о писание форума, нажмите кнопку «Опубликовать».

    Вывод (отображение) форума на сайте

    После создания форума его нужно вывести на сайте. Для этого нужно сделать следующее:

    1. Создаем страницу «Форум» (Страницы -> Добавить новую).

    2. Вставляем на страницу шорткод [bbp-forum-index]

    Главная Форумы

    Если Вы увидели на форуме вопрос, на который знаете ответ или можете что-то порекомендовать — не поленитесь и поделитесь знаниями! Давайте помогать друг другу!

    и нажимаем кнопку «Опубликовать».

    Как создать форум на сайте WordPress

    Готово! Теперь на странице «Форум» будут отображаться все созданные форумы.

    В результате мы получим красивый и функциональный форум:

    Как создать форум на сайте WordPress

    В этом уроке мы с Вами провели базовую настройкой форума, которой достаточно для полноценной работы у Вас на сайте.

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

    Как защитить информацию от копирования на сайте WordPress

    Многие владельцы сайтов сталкиваются с проблемой воровства их контента. Часто можно заметить, как текст над которым сидел не один час появляется у конкурентов на сайте. Если Ваш сайт наWordPress — защититься от «копипастеров» можно очень просто.

    Защита от копирования информации с сайта WordPress

    Защищать сайт будем с помощью плагина WP Content Copy Protection.

    1. Установите и активируйте плагин WP Content Copy Protection.

     Защита контента сайта на WordPress

    2. Готово. После активации плагин не требует настроек и сразу начинает работать.

    Что именно делает плагин?

    • Отключает клик правой кнопкой мышки.
    • Отключает выделения текста.
    • Отключает возможность перетаскивать, выделять и сохранять изображения.
    • Отключает возможность копировать и выделять текст с помощью клавиатуры (Ctrl A, C, X) — только для Windows.
    • Отключает возможность печатать и сохранять страницу.
    • Отключает просмотр кода с помощью клавиши F12
    • Нет отрицательных побочных эффектов в SEO (поисковые системы могут прочитать содержание)

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

    Стоит упомянуть, что у плагина также есть премиум версия. Узнать о ее возможностях можно перейдя в Настройки -> WP Content Copy Protection (YOOPlugins).


     

    Как создать многоязычный сайт на WordPress

    Мультиязычность на сайте мы будем делать с помощью бесплатного и достаточно нового плагинаWPGlobus — Multilingual Everything!.

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

    Сразу хочу сказать, что из достаточно огромного количества плагинов для создания нескольких языковых версий сайта, именно WPGlobus мне понравился больше всех, в связи с чем, я Вам его и рекомендую!

    Как создать несколько языковых версий сайта WordPress

    1. Устанавливаем и активируем плагин WPGlobus — Multilingual Everything!.

    Как создать многоязычный сайт на WordPress

    2. После активации плагина переходим в WPGlobus -> Языки.

    Как создать многоязычный сайт на WordPress

    3. На этой странице настроек нужно указать, какие языки Вы хотите использовать на сайте. По умолчанию, сразу после установки плагина у Вас будет 3 языка: английский , русский и немецкий.

    Также можно добавить любой другой язык. Сделать это очень просто, нужно всего лишь выбрать из списка «Выберите язык» новый язык, после чего нажать кнопку «Сохранить изменения».

    Как создать многоязычный сайт на WordPress. Мультиязычный сайт WordPress. Несколько языковых версий сайта WordPress

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

    Как создать многоязычный сайт на WordPress. Мультиязычный сайт WordPress. Несколько языковых версий сайта WordPress

    Если же Вы хотите убрать какой-то язык — просто снимите флажок c языка который хотите убрать, и нажмите кнопку «Сохранить изменения».

    5. Теперь нужно выбрать способ показа переключателей языков в навигационном меню. Для этого в выпадающем списке «Способ показа переключателей» выбираем подходящий Вам вариант.

    Как создать многоязычный сайт на WordPress

    6. Далее указываем меню, в котором будет отображаться переключатель языковых версий сайта. Для этого в выпадающем списке выбираем нужное меню. Обычно меню на сайте одно, так что сложностей в выборе быть не должно :)

    Как создать многоязычный сайт на WordPress. Мультиязычный сайт WordPress. Несколько языковых версий сайта WordPress

    Не забудьте нажать кнопку «Сохранить изменения». После этого можно считать, что настройка плагина завершена.

    7. После такой простой и быстрой настройки плагина, можно смело приступить к переводунаполнения сайта на другие языки. Что для этого нужно сделать?

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

    Как создать многоязычный сайт на WordPress

    По аналогии делается перевод и остальных записей, рубрик и виджетов сайта.

    Вот таким образом выглядит переключатель языков в меню:

    Как создать многоязычный сайт на WordPress

    Также с помощью виджета «WPGlobus виджет» можно установить переключатель языков на сайдбар.

    Замечу, что для плагина WPGlobus есть несколько полезных бесплатных и платных дополнений, но это уже совсем другая история.


    Как добавить водяной знак на изображения в WordPress

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

    Думаю Вы согласитесь, что мало кто захочет выставлять у себя на сайте изображения с чужим логотипом или ссылкой на другой сайт

    Как поставить водяные знаки на картинки (фото) в WordPress

    Добавлять водяные знаки на изображения мы будем с помощью плагина Easy Watermark.

     1. Устанавливаем и активируем плагин Easy Watermark.

    Как добавить водяной знак на изображения в WordPress

    2. После установки и активации плагина переходим в Настройки -> Easy Watermark.

    Как добавить водяной знак на изображения в WordPress

    3. Настройки плагина разделены на 3 вкладкиОбщие, Изображение, Текст. Давайте поговорим более подробно о самых важных настройках каждой из этих вкладок.

    Общие настройки

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

    • Поставьте галочку в «Backup». После включения этой функции, все оригиналы загруженных изображений (без водяных знаков) будут сохраняться в отдельной папке, и их при желании можно будет восстановить. Очень полезная штука.
    • В «Размеры изображений» рекомендую оставить только «Fullsize». Это значит, что водяные знаки будут отображаться только на оригинале изображения (полном размере), а не на миниатюрах и т.п. Таким образом водяные знаки не будут постоянно маячить перед глазами, а большой размер изображения будет защищен.

    Как добавить водяной знак на изображения в WordPress

    Изображение

    На этой вкладке Вы можете сделать водяной знак из изображения. Для этого нажмите кнопку«Выбрать/загрузить изображение», после чего настройте его расположение (если необходимо).

    Как добавить водяной знак на изображения в WordPress

    Важно! Если Вы решили использовать изображения для водяного знака, укажите в общих настройках «Тип водяного знака» -> «Изображение».

    Как добавить водяной знак на изображения в WordPress

    Текст

    Для добавления текстового водяного знака перейдите на вкладку «Текст» и укажите желаемый текст для цифровой подписи.

    На этой же вкладке укажите выравнивание текста (нажав по прямоугольнику на изображении),смещение текста (если он не помещается или Вы хотите его сдвинуть), шрифт, цвет и размер текста. Также можно изменить наклон текста и его прозрачность.

    Как добавить водяной знак на изображения в WordPress

    Как видите, сложного в создании водяных знаков совершенно ничего нету. Плагин прост в использовании и интуитивно понятен.

    Как добавить водяной знак на изображения в WooCommerce

    Данный плагин также отлично работает с интернет магазином WooCommerce. Включить водяные знаки в магазине очень просто! Для этого на вкладке «Общие», в блоке настроек «Типы записей»отметьте галочкой «Товары».

    Как добавить водяной знак на изображения в WooCommerce

    Важно! Плагин WooCommerce должен быть активированный, в противном случае такой пункт в настройках просто не появится.

    Восстановление и массовое нанесение водяных знаков

    Восстановить оригинальные изображения (если включено их сохранение в настройках) как и массово нанести водяные знаки на все ранее загруженные изображения можно перейдя в Медиафайлы -> Easy Watermark.

    «Start» — нанести водяных знаки на все изображения.

    «Restore» — восстановить оригинальные изображения, на которых не будет водяного знака.

    Как добавить водяной знак на изображения в WooCommerce

    Результат

    Вот такой текстовый водяной знак получился из примера этого урока.

    Водяные знаки в WordPress


     

    Как обновить ссылки в WordPress после переноса сайта

    Обновление всех ссылок после переноса сайта на хостинг

    Для обновления ссылок мы будем использовать плагин Velvet Blues Update URLs.

    1. Установите и активируйте плагин Velvet Blues Update URLs.

    Как обновить ссылки в WordPress после переноса сайта

    2. После активации плагина перейдите в Инструменты -> Update URLs.

    Как обновить ссылки в WordPress после переноса сайта

    3. В открывшемся окне нужно сделать следующее:

    • вводим старый адрес сайта
    • вводим новый адрес сайта
    • отмечаем галочками все пункты

    После этого нажимаем кнопку «Update URLs NOW».

    Как обновить ссылки в WordPress после переноса сайта

    Готово!

    После нажатия на кнопку вы увидите сообщение с результатами обновлений.

    Как обновить ссылки в WordPress после переноса сайта

    Как видите, сложного ничего нету и обновить URL-ы на сайте можно всего за несколько минут!


    Append Link on Copy

    Facebook Page Promoter Lightbox

    Theme My Login

    WP jQuery Lightbox

    uLogin

  • 10 урок. Как перевести тему или плагин WordPress на русский язык

    10 урок. Как перевести тему или плагин WordPress на русский язык

    Приветствую Вас, друзья! В этом уроке мы поговорим о том, как можно перевести тему (шаблон) или плагин на русский (или любой другой) язык в WordPress.

    Я уверен, что многие из Вас сталкивались с ситуацией, когда нужные Вам плагины или темы сайта были на английском языке. В таких случая сразу возникает вопрос, как же перевести на русский или любой другой язык? Ответ на этот вопрос Вы найдете в этом уроке!

    Сегодня мы рассмотрим с Вами один из самых простых, понятных и надежных способовперевода шаблонов и плагинов WordPress.

    Как сделать перевод темы или плагина WordPress

    Для перевода мы будем использовать плагин Codestyling Localization. Он простой, интуитивно понятный и работать с ним одно удовольствие. Также с его помощью можно не только создать новый перевод, а и изменять уже существующий. И так, приступим!

    1. Скачайте плагин Codestyling Localization.

     2. Установите и активируйте плагин. О том, как правильно устанавливать плагины мы говорили в одном из прошлых уроков.

    3. После активации перейдите в Инструменты -> Локализация.

    Как перевести тему или плагин WordPress на русский язык

    4. Зайдите на вкладку «Темы», если Вы хотите перевести тему сайта. Если же Вы хотитеперевести плагин, переходите на вкладку «Плагины».

    Как перевести тему или плагин WordPress на русский язык

    5. После перехода на вкладку Вы увидите список плагинов или тем (в зависимости от выбранной вкладки). Нажмите кнопку «Добавить новый язык» напротив нужной Вам темы или плагина.

    Как перевести тему или плагин WordPress на русский язык

    Создаем перевод дня плагина YITH Woocommerce Compare

    6. В открывшемся списке выберите язык, на который Вы хотите сделать перевод и нажмите кнопку «Создать po-файл».

    Как перевести тему или плагин WordPress на русский язык

    7. Теперь напротив добавленного языка нажмите кнопку «Сканировать». В открывшемся окне еще раз нажмите «Сканировать», и после завершения сканирования нажмите кнопку «Завершить».

    Как перевести тему или плагин WordPress на русский язык

    8. После окончания сканирования нажмите кнопку «Редактировать».

    Как перевести тему или плагин WordPress на русский язык

    9. На открывшейся странице нажимаем «Редактировать».

    Как перевести тему или плагин WordPress на русский язык

    10. В открывшемся окне Вы увидите оригинальный перевод и поле, в котором нужно написать перевод. После того, как Вы указали перевод — нажмите кнопку «Save & Next».

    Как перевести тему или плагин WordPress на русский язык

    11. Когда Вы переведете все строчки, нажмите кнопку «Генерировать mo-файл».

    Как перевести тему или плагин WordPress на русский язык

    Перевод заработает сразу после генерации mo-файла. После этого перевод можно считать завершенным!

    Обратите внимание на то, что не обязательно переводить все строчки. Вы можете переводить только то, что Вам нужно.
  • 8 урок Шорткоды в WooCommerce

    8 урок Шорткоды в WooCommerce

    Здравствуйте, друзья! Сегодня мы поговорим о шорткодах интернет магазина WooCommerce. В этом уроке достаточно много нового и полезного могут найти те, кто не так давно создал интернет магазин с помощью плагина WooCommerce и еще не знают всех возможностей плагина.

    В WooCommerce по умолчанию и без каких-либо плагинов можно использовать встроенные шорткоды. Вставляя шорткоды на страницы или записи, Вы можете вывести списки популярных, новых или акционных (со скидкой) товаров, категории и т.п. И так, давайте начнем!

    Как вывести последние добавленные (новые) товары?

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

    1
    [recent_products per_page="12" columns="4"]

    Шорткод выводит 12 последних добавленных товаров в 4 колонки. Для того чтобы изменить количество товаров нужно всего лишь установить нужное цифровое значение в recent_products per_page. Аналогично и с количеством колонок.

    Результат:

    Шорткоды в WooCommerce

    Как вывести популярные товары?

    Для этого используйте шорткод:

    1
    [featured_products per_page="12" columns="4"]

    Этот шорткод работает точно так же, как и предыдущий, но отображает те товары, которые были отмечены звездочками «Рекомендуемый» в списке товаров:

    Шорткоды в WooCommerce

    Вывод одного товара по ID или артикулу (SKU)

    Для того, чтобы сделать вывод одного нужного Вам товара по ID используйте шорткод:

    1
    [product id="45"]

    ID (идентификатор товара) можно узнать при наведении на товар в списке товаров:

    Шорткоды в WooCommerce

    Для вывода товара по артикулу используйте:

    1
    [product sku="0001"]

    Где узнать артикул товара писать не буду. Уверен, что если он у Вас есть, то вы точно знаете ?

    Как сделать вывод нескольких товаров по ID или артикулу (SKU)

    При желании можно сделать вывод товаров по идентификатору (ID), для этого используйте шорткод:

    1
    [products ids="1, 2, 3, 4, 5"]

    Через запятую нужно указывать ID товаров которые Вы хотите вывести.

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

    1
    [products skus="0001, 0002"]

    По умолчанию товары будут отображаться в 4 колонки.

    Кнопка «Добавить в корзину» для определенного товара

    Еще один интересный шорткод. Он создает кнопку на которой отображается только цена указанного (по ID) товара и надпись «Добавить в корзину».

    1
    [add_to_cart id="40"]

    Вывод страницы товара на любой странице или записи

    Интересный шорткод, с помощью которого можно вывести страницу товара на любой странице или записи.

    Вывод по ID товара:

    1
    [product_page id="40"]

    По артикулу:

    1
    [product_page sku="0001"]

    Результат:

    Шорткоды в WooCommerce. Часть 2

    Как вывести товары из категории WooCommerce?

    Для вывода товаров из категории в WooCommerce есть шорткод:

    1
    [product_category category="kategoriya-1"]

    Замечу, что в скобках нужно указывать не название категории, а ее ярлык!

    Узнать ярлык категории можно перейдя в Товары -> Категории:

    Шорткоды в WooCommerce. Часть 2

    По умолчанию будет выводится 12 товаров в 4 колонки.

    Как сделать вывод категорий?

    Для того чтобы сделать вывод категории используйте шорткод:

    1
    [product_categories number="7" parent="0"]

    Значение number — количество выводимых категорий.

    С помощью шорткода ниже можно вывести категории(ю) по ID:

    1
    [product_categories ids="7,8" parent="0"]

    Результат:

    Шорткоды в WooCommerce. Часть 2

    Как вывести товары со скидкой?

    Для этого используйте шорткод:

    1
    [sale_products per_page="4"]

    Результат:

    Шорткоды в WooCommerce. Часть 2

    Как вывести топ рейтинговых товаров?

    Обычно рейтинги товару назначаются при добавлении комментария. На основе этих рейтингов можно сделать вывод товаров. Для этого в WooCommerce есть специальный шорткод:

    1
    [top_rated_products per_page="12"]

    Вывод товаров по свойствам

    С помощью шорткода ниже можно сделать вывод товаров по заданным свойствам. В примере ниже вы из свойства Цвет выводим все товары черного цвета.

    1
    [product_attribute attribute='color' filter='black']
  • 7 урок. Woocommerce. Установка, добавление товаров, настройка

    7 урок. Woocommerce. Установка, добавление товаров, настройка

    WooCommerce — мощный, расширяемый плагин eCommerce, который поможет вам продать что угодно. Красиво.

     

    Установка темы (шаблона) для интернет магазина

    Выбор темы (шаблона) — очень важный момент в создании интернет магазина. Вся проблема в том, что некоторые темы не поддерживают работу с плагином Woocommerce, что в свою очередь приводит к некорректному отображению элементов интернет-магазина. Поэтому в данном уроке я буду использовать бесплатный шаблон для интернет-магазина Storefront.

    Cкачать шаблон можно на официальном сайте woothemes.com или по прямой ссылке. Если вы вдруг забыли как изменить шаблон (тему) вашего сайта — нажмите сюда.

    Чтобы вставить валюту в интернет магазин, откройте wp-content/themes/тему_с_которой_вы_работаете и в файле function.php вставьте следующий код

    add_filter( 'woocommerce_currencies', 'add_my_currency' );
    
    function add_my_currency( $currencies ) {
         $currencies['ABC'] = __( 'Currency name', 'woocommerce' );
         return $currencies;
    }
    
    add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
    
    function add_my_currency_symbol( $currency_symbol, $currency ) {
         switch( $currency ) {
              case 'ABC': $currency_symbol = '$'; break;
         }
         return $currency_symbol;
    }

    Как создать сгруппированный товар в WooCommerce

    1. Нажимаем Товары -> Добавить товар.

    Как создать сгруппированный товар в WooCommerce

    2. Указываем название товара, категорию, миниатюру, описание и т.д. Делаем все тоже самое, что и при создании простого товара, но выбираем тип товара «Сгруппированный товар».

    Как создать сгруппированный товар в WooCommerce

    После этого нажимаем кнопку «Опубликовать».

    Таким образом мы создали с Вами сгруппированный товар. Теперь нужно привязать к нему товары, которые будут в нем отображаться. Попробую привести аналогию: сперва мы создаем «коробку», а потом складываем туда товары. Так вот сгруппированный товар и есть коробка, и после его создания нам осталось только добавить в него товары.

    3. Открываем любой из уже существующий товаров или создаем новый (но не вариативный) и переходим на вкладку «Сопутствующее». В поле «Группировка» указываемимя группированного товара, созданного в прошлом шаге.

    Как создать сгруппированный товар в WooCommerce

    Не забываем нажать кнопку «Обновить» для сохранения изменений.

    Указывая группировку в товаре, мы таким образом добавляем его в сгруппированный товар. Аналогичным способом укажите группировку на тех товарах, которые Вы хотите добавить в сгруппированный.

     

    Как создать вариативный товар

    1. Для начала нам необходимо создать свойства, которые мы будем использовать в качестве вариаций. В нашем случае их несколько, это цвет и размер.

    Для этого заходим в Товары -> Свойства и создаем свойство Цвет и Размер.

    Добавление вариативного товара в интернет-магазин WooCommerce

    Добавляем новые свойства товара

    2. Теперь нажимаем на созданное свойство Цвет и в открывшемся окне добавляем значения этого свойства. В нашем примере мы добавим белый, черный и красный цвет.

    Добавление цвета в свойства "Цвет"

    Добавление цвета в свойства «Цвет»

    По аналогии добавляем X, XL, XXL в свойство Размер.

    3. Далее нам нужно создать новый вариативный товар или изменить уже созданный товар на вариативный. При создании товара нужно указать то, что он будет вариативным.

    Для этого выбираем в выпадающем списке Вариативный товар (при создании по умолчанию стоит значение «Простой товар»). После этого переходим на вкладку Свойства.

    Выбираем "Вариативный товар" и переходим на вкладку "Свойства"

    Выбираем «Вариативный товар» и переходим на вкладку «Свойства»

    4. После перехода в вкладку Свойства выбираем из выпадающего списка свойство Цвет и нажимаем кнопку «Добавить».

    Добавляем свойство "Цвет "

    Добавляем свойство «Цвет «

    После добавления свойства Цвет и Размер необходимо выбрать значения, которые будут в вариации товара. Для этого при нажатии по полю с выбором значений выбираем цвета и размеры, которые соответствуют нашему товару.

    Важно!!! Обязательно ставим галочку в «Использовать для вариаций» и после добавления всех значений нажимаем кнопку «Сохранить свойства».

    Выбираем значения для вариаций Цвета и Размера

    Выбираем значения для вариаций «Цвета» и «Размера»

    5. Теперь переходим на вкладку Варианты и нажимаем Присоединить все варианты и в окошке которое появилось подтверждаем наше действия нажав ОК. После нажатия кнопки вы создадите все возможные комбинации свойств вариантов. Что это значит? Это значит что на каждый цвет будут все размеры, а на каждый размер — все возможные цвета. Такой способ является самым быстрымпри добавлении множества вариантов.

    Также можно создавать вариативные товары выбирая вручную на какой цвет у вас будут какие размеры. Для этого нужно нажать кнопку «Добавить вариант» и указать цвет и размер на добавленную вариацию.

    Я рекомендую добавлять все вариации сразу. Проще и быстрее удалить лишние вариации когда их видно все, чем их добавлять поштучно. В нашем же примере мы будем использовать все возможные комбинации вариантов.

    Добавление вариативного товара в интернет-магазин WooCommerce

    6. После того как все вариации добавлены нужно обязательно указать цену на всех вариация(если есть скидка, то и скидку). Также на этом этапе можно назначить миниатюру на нужную вариацию (или на все).

    Указываем обычную цену и цену со скидкой. Также задаем разные миниютюры.

    Указываем обычную цену и цену со скидкой. Задаем разные миниатюры для вариаций если необходимо.

    После того как вы добавите все цены, не забудьте обязательно сохранить изменения нажав кнопку«Обновить», а если товар новый то «Опубликовать».

    Как видите все достаточно просто и интуитивно понятно. Возможно в первый раз и кажется все немного запутанным, но после нескольких добавлений вариативных товаров это пройдет ?

    Вот так выглядит результат добавления вариативного товара из этого урока:

    Результат добавления вариативного товара

    Результат добавления вариативного товара в WooCommerce

  • 6 урок Похожие записи YARPP, размещение рекламы с New Adman,  AMR Shortcode Any Widget,  Magic Post Listing

    6 урок Похожие записи YARPP, размещение рекламы с New Adman, AMR Shortcode Any Widget, Magic Post Listing

    1. Похожие записи в WordPress с помощью плагина YARPP

    Очень полезный и важный плагин — выводит для каждой записи блога список похожих статей WordPress, которые могут быть интересны читателю.

    С установкой проблем не должно возникнуть. Скачайте свежую версию Yet Another Related Posts Plugin, разархивируйте и загрузите папку с файлами YARPP на ftp в директорию wp-content/plugins. Останется только активировать плагин.

    Настройки Yet Another Related Posts Plugin (YARPP) располагаются в разделе «Параметры» — «Связанные посты (YARPP)» админки WordPress.

    Настройки экрана

    Основные настройки располагаются в разделах Критерии похожести и Просмотр опций для вашего сайта. Если подобных опций не наблюдается, зайдите в настройки экрана и включите их отображение.

    Критерии похожести

    Критерии похожести

    • Порог похожести — плагин выводит только те записи, коэффициент похожести которых, превосходит установленный в этом пункте порог похожести. Другими словами установите порог похожести поменьше, чтобы выдавалось больше релевантных статей.
    • Заголовки, тексты, рубрики и метки — опции задают, будут ли рассматриваться соответственно заголовки статей, тексты, названии рубрики и метки для определения релевантности статей.
    • Display results from all post types — при отсутствии галочки для записи блога будут выводиться только похожие записи, а для страницы — только страницы. Не забывайте, что в WordPress существует деление на записи и страницы.
    • Показывать только предыдущие сообщения? — при наличии галочки, будут выводится только посты, опубликованные раньше данной статьи.

    Просмотреть опции

    Просмотр опций для вашего сайта.

    • Автоматически показывать связанные посты? — автоматически добавляет код для вывода похожих статей после текста одиночных записей блога. Обязательно поставьте галочку, чтобы не вносить необходимый код в шаблоны темы WordPress в ручную.
    • Максимальное количество связанных постов — даже и добавить нечего
    • Показывать с шаблоном пользователя — позволяет использовать для отображения списка похожих статей пользовательские шаблоны
    • Похожие статьи выдаются в виде списка и имеют соответствующий html код, который задается в следующих двух пунктах настроек YARPP — До/после связанных постов и До/после каждого связанного поста.
    • Показать выдержку? — для каждого похожего поста выводится выдержка из заданного в этом пункте количества слов.
    • Сортировка результатов — определяет по какому принципу будут сортироваться связанные посты.
    • По-умолчанию показывать, если пусто — текст выводится, если нет ни одной похожей страницы

    Помимо этого, плагин Yet Another Related Posts Plugin (YARPP) создает новый виджет — Related Posts (YARPP) c тем же функционалом.

     

    2.Плагин New Adman

    New Adman совершенно уникальный инструмент для размещения рекламы в постах. Лёгкий, практически не нагружающий сайт, плагин выводит указанные рекламные блоки в трёх основных позициях: перед контентом, в середине записи и в конце.

    Хотя плагин давно не обновлялся разработчиком, он без проблем устанавливается и функционирует на новых версиях WP. Это решение привлекает своим минимализмом в сочетании с набором должного инструментария:

    1. Есть возможность добавлять, а после и редактировать, рекламные блоки по всем позициям в отдельности;
    2. Можно настроить конкретное количество знаков, при котором любая из позиций будет отображаться. Меньшее же число будет исключать тот или иной рекламный блок;
    3. Есть возможность отключать вывод рекламы в определённых записях WordPress. Выглядит функция как соответствующий пункт в конце формы редактирования записи.
      disable-ads-on-page

    Установка и настройка плагина:

    Для начала установим плагин «NewAdman». Переходим в админ-панель и открываем раздел «Плагины», где кликаем по пункту «Добавить новый».

    В строке поиска введём название искомого: NewAdman, после чего жмём клавишу «Enter» и ожидаем результаты. И как видим, первый пункт «NewAdman», кликаем под ним ссылку «Установить» и ждём окончания процесса инсталляции.

    Далее щёлкаем «Активировать» и установка закончена! А в разделе «Настройки» (бывший раздел «Параметры») появился новый пункт «NewAdman».

    Открываем страницу установленного плагина, и знакомимся с опциями:

    new-adman-option

    • Сверху вниз располагаются 4 области ввода для рекламного кода:
      1. Ad-Code to appear on homepage only, before your first post: — позиция отображается на главной странице, только при отсутствии записей (не рекомендую);
      2. Ad-Code to appear before your post content: — позиция в начале записи, реклама выводится перед основным контентом. Одна из самых кликабельных позиций;
      3. Ad-Code to appear in the middle (calculated) or where you specify <!— adman —>: — средняя позиция, выводится в середине первой части контента – примерно после первых абзацев. Удобный блок, который при должной настройке отображается заодно с основным текстом;
      4. Ad-Code to appear after your post content – код за контентом, выводится сразу после записи. Полезная позиция, если посетители читают до конца;
    • Ниже, три значения для регулировки отображения:
      1. Minimal content length for top block inserting – количество знаков при котором выводится блок перед контентом. Если позиция уместно отображается в записях любой длины, то оставьте поле пустым;
      2. Minimal content length for middle block inserting – Количество знаков для средней позиции, лучше ограничить 2000 – 3000 знаками, чтобы не портить вид небольших текстов;
      3. Minimal content length for bottom block inserting – сколько знаков должна содержать запись, чтобы вывести рекламный блок после контента. Ограничивается также как и первый – по усмотрению.

    3. AMR Shortcode Any Widget

    Плагин AMR Shortcode Any Widget позволяет вставить любой виджет в необходимое место в запись или на страницу, используя простой шорткод.

    1. В меню админ панели выбираем “Внешний вид”, далее “Виджеты”.

    2. Устанавливаем нужный виджет: перетягиваем те виджеты, которые вы хотите отобразить в записи блога или на странице, в сайдбар под названием “Widgets for Shortcodes”.

     

    Чтобы активировать виджет, перетащите его на боковую колонку и нажмите на него. Чтобы деактивировать виджет  или удалить его настройки, перетащите его обратно.

    3. Переходим в окно редактирования записи или страницы и вставляем (пишем) шорткод в любое место вашего контента, там где Вы желаете разместить виджет:

    или

    Вместо widgetname, вставить называние нужного виджета.

    Вместо widgetid, вставить id нужного виджета.

    Например:

    или

    Если в названии виджета есть пробел, то название виджета нужно заключить в кавычки, вот таким образом:

    Готово!

    Убедитесь, что вы правильно указали название виджета или id виджета в шорткоде. Если неправильно, на странице в браузере появится следующее сообщение:

    You are admin: Try debug See a exclamation point ! above ?. Hover over to see error message.

    Нажмите  на ссылку Try debug

    Появиться следующая информация:

    DEBUG on: Is your widget in the widgets_for_shortcodes sidebar?

     

    widgets_for_shortcodes sidebar and widgets

    Sidebar: widgets_for_shortcodes: Widgets for Shortcodes has widgets with these ids:
    calendar-2

    Здесь указан правильный id нужного нам виджета (В вашем случае будет свой id), установка которого описана во 2 пункте данной записи. А именно: calendar-2, вот его нужно вписать в шорткод, будет так:

    amr shortcode any widget

    amr shortcode any widget

    4, Magic Post Listing — отображение на странице списка записей или страниц.

    После установки плагина, перейдите в виджеты и перетащите виджет Magic Post Listing в область amr shortcode. 

    mpl

    В виджете вы можете настроить способ отображения записей в виде списка, либо в виде слайдера. Настройки не сложные, поэтому описывать их не буду.

    После сохранения изменений, необходимо отобразить этот виджет на странице, для этого скопируйте шорткод виджета и разместите его там где это необходимо

    mpl 2 mpl3

  • 5 урок. Плагины Captcha, SEO by YOAST, WP-PostRatings

    5 урок. Плагины Captcha, SEO by YOAST, WP-PostRatings

    1. Captcha

    Позволяет добавить супер защиту к стандартным формам WordPress посредством математической логики. Полностью совместим с Contact Form, что позволяет создать отлично защищённую форму обратной связи.

    Преимущества:

    • Простота установки и использования.
    • Высокая читабельность.
    • Механизм проверки использует обычные математические действия: сложение, вычитание и умножение.
    • Наличие возможности использования словесного, цифрового или смешанного отображения элементов капчи.
    • Captcha от BestWebSoft доступна на 36 языках, и постоянно увеличивает количество переводов.
    • Полная совместимость с Contact Form.
    • Наличие PRO версии с поддержкой Contact Form 7 и BuddyPress (форма регистрации, комментариев, создания группы).
    • Наличие подробной документации, пошаговых видео-инструкций по настройке и установке, а также текстовых инструкций со скриншотами.
    • Возможность платной кастомизации.

    Недостатки:

    • Бесплатная версия несовместима с BuddyPress. Вы должны получить премиум-версию плагина для работы с BuddyPress и Contact Form 7.
    • Приоритетная техническая поддержка и гарантированный ответ в течении суток доступны только при покупке Captcha PRO. Запросы от пользователей бесплатных версий могут рассматриваются до пяти дней.
    • Каждые 6 месяцев необходимо продлевать лицензию на продукт. Если вы не продлите лицензию, вы сможете и дальше использовать PRO версию, но вам уже не будет доступна приоритетная техническая поддержка и дальнейшие обновления продукта.

    Вывод:

    Captcha от BestWebSoft — это лучшее решение для защиты от спама и ботов. Плагин очень прост в использовании, а ваше зрение не пострадает от попыток определить искажённые символы.

    Процесс установки происходит практически моментально, и пользователи сразу же могут приступить к использованию капчи, скопировав шорткод плагина на нужную страницу. Разработчики постоянно внедряют новые опции, а также оказывают помощь пользователям, у которых возникли вопросы.

    Все недостатки решаются при покупке и установке Captcha Pro. В ней больше возможностей по совместимости с BuddyPress и Contact Form 7. А также вы получаете приоритетную техническую поддержку и гарантированный ответ в течении суток.

    2. SEO by Yoast

    SEO by Yoast — это один из самых перспективных плагинов для СЕО оптимизации сайта. Он позволяет:

    1. Задавать заголовок (title) отдельно от заголовка поста.
    2. Указывать заголовки для архивов таксономий, пользовательских типов.
    3. Задавать мета описание description.
    4. Создавать XML карту сайта.
    5. Строить и выводить хлебные крошки.
    6. Создавать микроразметку для социальных сетей.
    7. Позволяет удалить «category» из URL категории и GET переменные с постов «?replytocom».
    8. Добавить слеш «/» в конец ссылки.
    9. Очистить от мусорных ссылок блок <head>.
    10. Проверить плотность ключевых слов.

    В плагине есть множество настроек для социальных сетей, а также подсказки по оптимизации поста.

    Плагин wordpress seo by yoast идеально подойдет для начинающих СЕО оптимизаторов и людей которые вообще не знакомы с СЕО. Для проффесиональных сеошников, он может показаться немного замудренным, ведь у него нет единой страницы для правок заголовков и описаний, а также он делает обрезание заголовков и описаний под поисковую систему гугл. Вообще, наверное стоит повторится, плагин WordPress SEO by Yoast заточен под все примочки поисковой системы Google, хотя вроде и неплохо подходит под Яндекс, с определенной долей коректировки.

    WordPress SEO by Yoast имеет хороший русский перевод, по этому не доставить неудобств для людей с плохим знанием английского языка. Все подсказки и настройки также переведены на русском языке.

     

    Пошаговая настройка WordPress SEO by Yoast

    К МЕНЮПлагин Yoast SEO, он же WordPress SEO by Yoast довольно не плохо оптимизирован под начинающих СЕОшников, по этому с его установкой не должно возникнуть проблем даже у новичков.

    1. Устанавливаем плагин SEO by Yoast на свой сайт. Для этого нужно зайти во вкладку «Плагины» — «Добавить новый» плагин wordpress seo by yoastи в поисковую строку справа в верху ввести вот такой текст: «Yoast SEO»:описание seo by yoast

    ну и нажать Enter.

    2. В результате у нас появится наш плагин и рядом с ним кнопка установить, на которую нужно нажать:установка Yoast SEO

    3. После установки нужно активировать плагин, он сам вам это предложить (все кликабельные картинки откроются поверх текста):wordpress-seo-by-yoast-5

    4. После активации плагин WordPress seo by yoast создаст в низу вот такой значок с настройками:настроить wordpress seo by yoast
    5. Можно ничего не трогать и сразу пойти менять заголовки и описания для поисковых систем, а можно для начала настроить плагин. Я конечно опишу каждый из пунктов, и так:

    Описание настроек wordpress seo by yoast

    К МЕНЮ5.1 «Общие» — тут можно сбросить настройки по умолчанию:wordpress-seo-by-yoast-7или же перейти во внутреннею вкладку «Инструменты вебмастера»wordpress-seo-by-yoast-8и подтвердить там права на сайт в разных поисковых системах, если конечно вам это нужно.

    Развернуть полное описание настроек

    6. Меняем заголовки и описание description для страниц и записей. Для этого нам нужно зайти в запись и опуститься в низ, там будет вот такой блок Yoast SEO

    wordpress-seo-by-yoast-15где мы сможем ввести заголовок / title поста и описание, как на примере выше. Блок «Фокусное ключевое слово» я оставил пустым, о нем расскажу дальше.

    Когда вы вводите СЕО заголовок и описание в форму ввода плагин WordPress SEO by Yoast автоматически показывает как будет выглядеть ваш сайт в окне поиска гугла.

    Если вам нужно сделать групповые действия над title или description вы можете это сделать по ссылке: вашсайт/wp-admin/admin.php?page=wpseo_tools&tool=bulk-editor , смотрите вкладку «SEO» — «Инструменты». Более детально я описывал в пункте 5.6

    7. Устанавливаем фокусное ключевое слово в плагине wordpress seo by yoast, для этого в поле ввода записываем слово или несколько слов. Я например напишу туда «SEO», вот что из этого получилось:wordpress-seo-by-yoast-16У нас появился выпадающий блок, который информирует о количестве вхождений нашего ключевого слова.

    Нужно обязательно нажать «Сохранить» или «Обновить» пост, чтобы плагин обновил остальные вкладки настроек.

    8. После обновления поста, мы можем просмотреть вкладку «Анализ страницы», «Дополнительно» и «Социальные сети», там вроде более менее понятно как ими пользоваться.

     

    К МЕНЮНа этом вроде все, настройка СЕО плагина WordPress SEO by Yoast завершена, до новых встреч.

     

    СЕО плагин WordPress SEO by Yoast на мультиязычных сайтах

    В качестве бонуса, плагин WordPress SEO by Yoast имеет дополнительный плагин, который называется WordPress SEO & qTranslate‑X и который служит для связки СЕО плагина с мультиязычным плагином. Проще говоря, для того, чтоб задать SEO заголовок и описание для каждого из языков, вам будет достаточно переключится на нужный язык и записать текст. Более подробно я описал работу с этим плагином в этой статье:

    Не работает WordPress SEO by Yoast. Пропали заголовки

    Разработчики плагина немножко намутили в новой версии плагина 3.0.3 и теперь поисковые запросы просто кешать текстом:

    • не работает WordPress SEO by Yoast;
    • как править заголовки;
    • изменить описание;
    • пропало описание description и SEO Title.

    В действительности никаких проблем нет. Просто разработчики плагина очень по умному решили создать механизм правки мета полей и заголовков.

    Для тех, кто не смог разобраться самостоятельно показываю скриншот, как правильно править заголовки и описание:настройка Yoast SEOНаводим на представления заголовка и у нас появляется редактор, можем смело редактировать.

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

    3. WP-PostRatings

    Реализация с помощью плагина WP-PostRatings

    https://youtu.be/LDtTXg2b71Q

    Имеется достаточное количества плагинов для вывода рейтинга на сайте под управлением WordPress, но решил использовать данное решение, так как оно работает и является самым популярным на рынке.

    После установки, вам потребуется определиться с местом, где вы хотите отобразить рейтинг со звездами, так как для его вывода нужно будет вставить следующий код в файл шаблона одиночной записи single.php.

    1
    
    <?php if(function_exists('the_ratings')) { the_ratings(); } ?>

    или используете shortcode записи [ratings]

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

    рейтинг сразу после текста статьи

    Это самый достойный вариант. Я же на начальном этапе решил разместить его в самом начале статьи (уже разместил в конце), чтобы привлекать внимание новых посетителей и делать зрительную точку захвата. В статье про оформление контента я писал, что когда посетитель зашел на ресурс, его нужно чем-то привлечь (изображение, видео и т.д.).

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

    Когда вы определились с местом размещения, открываете файл single.php и вставляете внутри его содержимого выше предоставленный код. После этого, если плагин WP-PostRatings активен, рейтинг уже должен отображаться на страницах записей. Можно размещать рейтинг на любых страницах, на которых он вам нужен.

    Теперь стоит перейти к настройка плагина, чтобы выставить важные параметры.

    Настройка WP-PostRatings

    Плагин добавляет новый пункт в админ-панель. Нужно перейти первым делом в «Ratings — Ratings options».

    настройка WP-PostRatings

    Первый пункт настоек позволяет выбрать визуальный вариант рейтинга. По умолчанию стоит вариан маленьких звезд, который вполне хорош. Но, чтобы вид был более привлекательный и заметный, предлагаю выставить первый вариант оформления «stars_crystal».

    выбор оформления рейтинга

    Далее идут множество мелких настроек, который я опишу по пунктам после скриншота ниже.

    настройки плагина PostRatings

    • Max Ratings — максимальное количество звезд, которое будет отображаться, то есть максимальное количество оценок;
    • Enable Google Rich Snippets — это тот пункт, ради которого мы и делаем данный рейтинг. Обязательно активируем, так как он добавляет мироразметку (микроданные) в исходный код плагина и звезды будут отображаться в сниппете после переиндексации страниц сайта;микроданные для рейтинга
    • Individual Rating Text/Value — в данном блоке настроек выставляет текстовые значения, которые будут соответствовать каждой звезде в рейтинге (будут видны пользователям при наведении на звезды). Также присваиваем числовые значения. На изображении можете видеть, как я решил обозначить их. Числовые значения оставил стандартными;

    следующие настройки

    • Show loading image with text — так как работа плагина основана на технологии Ajax, то данные настройки отвечают за поведения изменения рейтинга и его работу при использовании. Данная настройка отвечает за способность показывать загрузку звезд и текста рядом с ними в реальном времени без перезагрузки страницы. Для удобства обязательно оставляет включенной (Yes);
    • Show fading in and fading out ratings — будет ли происходить плавное появление и исчезновение рейтинга после проставления голоса посетителем. Если хотите, чтобы было все красиво, то также оставляем включенным;
    • Who is allowed to rate — кто может голосовать? По умолчанию стоит значение «зарегистрированные и гости». Так и оставляем, так как вариант подразумевает возможность голосования для всех пользователей;
    • Ratings logging method — по каким параметрами будет сохраняться рейтинг. Стандартный вариант запоминает куки и IP адрес пользователя и, чтобы ему произвести голосование в определенном материале, необходимо будет сменить ИП адрес и почистить куки браузера. Такой вариант позволяет уберечься от накручивания голосов. я его и оставил.

    После проделанных изменений обязательно сохраняем настройки и переходим в следующие настройки для русификации надписей в рейтинге.

    настройки русификации

    На странице этих настроек вы увидите множество полей с прописанным шаблонами, которые содержат в себе специальные коды для вывода звезд и текстовых значений оценки рейтинга. Коды можно не трогать, а вот изменить немного положение слов и сделать их перевод, нужно!

    Чтобы долго и муторно не объяснять, что и где необходимо заменить мы поступим следующим образом. К каждому полю я дам уже изменений код, который вы просто замените в своих настройках. Поехали.

    Шаблон Rating vote text (показывается, если вы еще не голосовали, но уже кто-то оставлял оценку).

    1
    
    %RATINGS_IMAGES_VOTE% (голосов: %RATINGS_USERS%, в среднем: %RATINGS_AVERAGE% из %RATINGS_MAX%)<br />%RATINGS_TEXT%

    Шаблон Rating voted text (показывается вам, если вы уже сделали оценку).

    1
    
    %RATINGS_IMAGES% (голосов: %RATINGS_USERS%, в среднем: %RATINGS_AVERAGE% из %RATINGS_MAX%, вы уже оставили свой голос)

    Шаблон Rattings no permission text (используется, если в настройках выставлен вариант голосования только для зарегистрированных пользователей).

    1
    
    %RATINGS_IMAGES% (голосов: %RATINGS_USERS%, в среднем: %RATINGS_AVERAGE% out of %RATINGS_MAX%</em>)<br />Для возможности голосования вы должны быть зарегистрированы.

    Шаблон Ratings none (если никто еще не голосовал).

    1
    
    %RATINGS_IMAGES_VOTE% (Еще нет голосов, оставьте первым)<br />%RATINGS_TEXT%

    Просто замените моими шаблонами стандартные и все будет отображаться на русском языке должным образом.

    Все. Когда вы произвели все настройки, плагин должен хорошо работать и все должно быть на русском языке. Теперь можете сам проголосовать и увидеть, как работает рейтинг. Нажмите на любую звезду.

    Последним шагом осталось убедиться, что рейтинг будет отображаться в сниппете, когда google просканирует страницы.

    Проверка расширенного сниппета в инструментах Google

    Переходим на эту страницу и вводим адрес любой страницы, где выводится рейтинг, сделанный в данной статье.

    проверка расширенного сниппета в google

    Если все сделали правильно, то увидите точно такую картинку. Но замечу, что рейтинг в сниппете будет отображаться при условии, что имеется хотя бы одна оценка. То, есть, чтобы сниппет каждой страницы был расширенный с рейтингом, нужно ей проставить оценку. Можете сами пройтись по каждому материалу и поставить оценку.

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

    На этой же странице проверки структурированных данных вы можете увидеть значения микроданных.

    микроданные