Донецкий техникум промышленной автоматики

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

  1. Вступ
  2. AnyComment: плагін коментарів з авторизаций через соц. мережі
  3. Плагін для VK коментарів
  4. функції
  5. Додаємо код віджету VK
  6. Створюємо функцію в functions.php
  7. Додаємо коментарі в comments.php
  8. висновок

Якщо ви користуєтеся WordPress, то найімовірніше вам набридли стандартні коментарі, так як вони не дуже зручні і швидше за все вам приходить купа спаму. Звичайно є купа плагінів, щоб позбутися від спаму, але іноді хочеться спробувати якусь нову систем коментарів. У цьому записі, я розповім як поставити коментарі ВКонтакте на WordPress, а так же покажу плагін, який зробить всю роботу за вас.

Вступ

У цьому записі я розгляну два способи:

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

Перший варіант кращий, так як ви за лічені секунди встановіть плагін, налаштуєте його і коментарі від VK вже буду готові до використання.

AnyComment: плагін коментарів з авторизаций через соц. мережі

Пропоную вам прибрати всю головний біль і встановити AnyComment Пропоную вам прибрати всю головний біль і встановити AnyComment .

На це є кілька причин:

  • безкоштовний
  • авторизацію через ВК, Facebook, Twitter, Google, Github (скоро будуть однокласники, Dribble і ін.)
  • залишити коментар без перезавантаження сторінки
  • статистика коментарів

докладніше можна почитати тут

Детальна установка плагінів описана під заголовком нижче, лише в даному випадку вводите «AnyComment» в пошуку для установки цього плагіна.

Плагін для VK коментарів

Давайте встановити плагін коментарів ВКонтакте безпосередньо через панель адміністратора.

Інструкція до установки:

Це мій особистий плагін і я буду вам вдячний якщо ви залишите хороший відгук або «5 зірок» :)

функції

  • Повністю замінити коментарі від WordPress на ВК
  • Поставити віджет VK коментарів разом зі звичайними коментарями. У цій разі, ви можете встановити позицію віджета, «вище», «нижче» стандартних коментарів або «під заголовком".
  • Перегляд всіх коментарів залишених користувачами через VK віджет в адмін центрі
  • Всі настройки які є у VK віджета коментарів, є в адмінці
  • Попередній перегляд віджету коментарів прямо під настройками

Код. Інструкція із встановлення

  • заходимо на сторінку з віджетами і вибираємо «Коментарі» (або клікніть тут ).
  • У випадаючому списку «Сайт / додаток» вибираєте «Підключити новий сайт» або вибираєте поточний сайт (якщо ви вже додавали). При додаванні вам потрібно вказати «назва сайту», «адреса», «основний домен» і вибрати тематику. У моєму випадку вибираю і вводжу наступне: «Bologer.ru - мій блог», «http://bologer.ru», «bologer.ru» і «ІТ (комп'ютери та софт».
  • Далі вибираємо «Кількість коментарів» для відображення. Якщо ви виберете, наприклад, п'ять коментарів, а у вас вже додано більше, то спочатку при завантаженні сторінки здасться 5 коментарем і далі ви можете натиснути натиснути «Показати ще», щоб довантажити інші.
  • Вибираємо потрібно вам «Медіа» чи ні. Це наприклад додавання графіті, фото, аудіо відео та посилання.
  • Встановлюєте ширину блоку коментарів.

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

Ми не будемо просто вставляти код, так як це не правильно. Я покажу вам як це робити в стилі 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>

І все готово! Коментарі повинні бути успішно встановлені.

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

висновок

Підключення коментарів від контакту не такий складний процес як вам швидше за все це здавалося. Це все займає не більше п'яти хвилин.

Js?
Js?
А навіщо нам потрібно вантажить сайт зайвими скриптами?
Вірно?