Добавляем виджет комментариев Вконтакте (VK) для WordPress

Добавляем виджет комментариев Вконтакте (VK) для WordPress

· WordPress · 3 мин чтения

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

Инструкция по установке

  • Заходим на страницу с виджетами и выбираем «Комментарии» (или кликните тут).
  • В выпадающем списке «Сайт/приложение» выбираете «Подключить новый сайт» или выбираете текущий сайт (если вы уже добавляли). При добавлении вам нужно указать «название сайта», «адрес», «основной домен» и выбираете тематику. В моем случае выбираю и ввожу следующее: «Bologer.ru — мой блог», «http://bologer.ru», «bologer.ru» и «ИТ (компьютеры и софт».
  • Далее выбираем «Количество комментариев» для отображения. Если вы выберете, например, пять комментариев, а у вас уже добавлено больше, то сначала при загрузке страницы покажется 5 комментарием и далее вы можете нажать нажать «Показать еще», чтобы подгрузить остальные.
  • Выбираем нужно вам «Медиа» или нет. Это например добавление граффити, фото, аудио видео и ссылки.
  • Устанавливаете ширину блока комментариев.

И далее у вас автоматически сгенерировался код для вставки на сайт.

Процесс создание комментарием VK

Мы не будем тупо вставлять код, так как это не правильно. Я покажу вам как это делать правильно с стиле WordPress.

Добавляем код виджета VK

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

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>

<script type="text/javascript">
  VK.init({apiId: XXXXXXX, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"});
</script>

Как вы можете заметить, он разделен на 2 части.

Первая — это скрипты (строки 1-6), которые вам нужно подгрузить для отображения комментариев. Вместе «XXXXXXX» у вас будет отображаться уникальный номер вашего сайта.

Вторая — это часть кода, которая понадобится для отображения комментариев.

Создаем функцию в functions.php

  • Копируем функцию, которая находится ниже и открываем файл functions.php, который находится внутри вашей темы.
  • Спускаемся в самый низ файла и добавляем следующую функцию.

Внимание! Вместо «ВАШ_ID» пишите ID который написан в вашем коде для вставки.

function vk_comments_api() {

  if( is_single() ) {
    echo '<script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>';
    echo '<script type="text/javascript">
        VK.init({apiId: ВАШ_ID, onlyWidgets: true});
      </script>';
  }
}
add_action('wp_head', 'vk_comments_api');

В этой коде я добавил два скрипта в <head></head> вашего WordPress сайта. Но я не просто их добавил. Я сделал условие, которые добавит скрипты только в том случае, если запись открыта полностью. А зачем нам нужно грузит сайт лишними скриптами? Верно?

Добавляем комментарии в comments.php 

Далее вам нужно открыть файл comments.php и найти строчку похожую на эту: <div id="comments" class="comments-area"> , которая говорит о начале стандартных WordPress комментариев.

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

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"});
</script>

И все готово! Комментарии должны быть успешно установлены.

Если у вас какие-то проблемы — пишите их в комментарии ниже к этой записи, буду рад помочь.

 Вывод

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

Комментарии