Давненько я нічого не писав про WordPress. Тому сьогодні я поділюся з Вами тим, як можна вручну змінити форму коментування у ВордПресі. Думаю, що ці знання можуть стати в нагоді будь-якому блогеру-початківцю, адже форма коментування це, часом, єдиний засіб спілкування відвідувачів і автора. Не проходьте повз:)

Перед тим, як ми почнемо будь-які маніпуляції з кодом, хочу заздалегідь попередити, що ми будемо правити файли самого WordPress'a, а не файли теми. Так, це може бути здасться комусь небезпечним, комусь безглуздим, комусь просто не сподобається:) Але Я зробив це саме так і жодних проблем у мене не виникло. Раджу перед початком зробити бекап файлу, що редагується.
Щодо безпеки попередив, то тепер хочу показати результат, до якого я прийшов.


Як ми бачимо, було прибрано рядок «Ваш e-mail не буде опублікований. Обов'язкові поля позначені *». Не треба вважати відвідувачів безмозкими ідіотами. Вони розуміють, що потрібно заповнювати, а що ні. Також я сховав назви полів усередину самих полів. Навіщо ці жирні записи? Більшість відвідувачів вже і без назв полів може «на око» визначити, яке до чого стосується. Але внутрішні хінти все-таки мають бути присутніми. Та й підпис до поля коментаря втратив свою непотрібну жирноту. На мій погляд, так стало набагато краще та вільніше.

Тож давайте ж швидше все міняти! ;)
Йдемо в папку свого сайту та знаходимо у ньому файл wp-includes/comment-template.php. Шукаємо в ньому рядок 1522, та й саме його. Як я сам її знайшов це ціла історія, розповім про це трохи пізніше:)
Отже, відкриваємо файл на редагування і переходимо до 1522 рядка. Зараз вона і наступні (до 1529) приблизно такі:

$fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ", "url" => "

" . "

",);

Як усе й зрозуміло. Достатньо просто вирізати все зайве та трохи дописати. Дописувати буде параметр

Placeholder="Текст підказки" !}

Цей параметр дозволяє виводити усередині полів будь-який текст. Використовуємо його для виведення підказок:

"

" "

" "

"

Видалятимемо ж рядки:

"

" . "" . ($req ? " *" : "") "

"

Вони відповідають за виведення підписів над полями.
В результаті всіх цих маніпуляцій, отримуємо наступне:

$fields = array("author" => "

", "email" => "

", "url" => "

",);

Залишається лише видалити дурну підказку «Ваш e-mail не буде опубліковано. Обов'язкові поля позначені *». Для цього видаляємо рядок (приблизно 1537):

"comment_notes_before" => "

" . __("Your email address will not be published.") . ($req ? $required_text: "") .

",

Ось начебто б і все, тепер наша форма стала трохи привабливішою. Сподіваюся ця інформація комусь знадобиться:)

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

WordPress має кілька видів змісту, такі як записи, сторінки, коментарі. WordPress є дуже гнучкою платформою, Що дозволяє налаштовувати основні види змісту так, як потрібно для сайту. Можна змінити зовнішній виглядта функціонал. У цьому уроці ми покажемо, як змінити поведінку та зовнішній вигляд коментарів на сайті під керуванням WordPress.

Крок 1. Розбираємось у функцією comment_form та її аргументами

Розглянемо функцію WordPress comment_form. Вона відповідає за виведення форми коментарів, яка відображається на сторінці або запису. Виклик цієї функції в основному можна зустріти у файлі comments.phpу папці теми. Цей файлвключається у різних місцях, наприклад, у файлах single.phpі page.phpбезпосередньо або через виклик функції comments_template .

Опис функції можна знайти в кодексі WordPress.

Якщо використовувати функцію comment_form для виведення форми, то вона буде виводитися з використанням параметрів за замовчуванням і міститиме такі поля як ім'я, email (обидва поля є обов'язковими), веб-сайт і зміст коментаря. У темі за замовчуванням Twenty Eleven форма виглядатиме так.

Деякі важливі аргументи функції comment_form:

  • fields -з його допомогою можна керувати виведенням полів у формі коментаря.
  • comment_notes_before та comment_notes_after - використовуються для виведення інформації перед і після форми.
  • title_reply - використовується для зміни назви відповіді, яка за умовчанням має значення Leave a Reply.
  • label_submit – використовується для зміни тексту на кнопці відправки коментаря.

Крок 2. Налаштовуємо форму коментаря за допомогою функції comment_form

Тепер налаштуємо нашу форму коментаря за допомогою передачі аргументів на функцію comment_form .

Якщо нам потрібно налаштувати поля у формі коментарів, потрібно передати їх список у функцію comment_form . За промовчанням для функції використовується наступний список полів:

$fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ", "url" => "

" . "

",);

Якщо нам потрібно видалити поле, наприклад website, потрібно просто виключити його з масиву і передати масив у функцію comment_form.

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ",); $comments_args = array("fields" => $fields); comment_form($comments_args);

На додаток також змінимо назву форми на 'Please give us your valuable comment', а напис на кнопці на 'Send My Comment'.

Для виконання завдання передаємо у функцію comment_form такі аргументи:

$commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

" . "" . ($req ? " *" : "") . "

", "email" => " ",); $comments_args = array("fields" => $fields, "title_reply"=>"Please give us your valuable comment", "label_submit" => "Send My Comment"); comment_form($comments_args);

Тепер форма коментаря виглядатиме так:

Крок 3 Видаляємо поля з форми за допомогою гака

Також форма коментаря WordPress може бути змінена за допомогою гаків та фільтрів. Таке налаштування може бути особливо корисним при роботі з плагіном, коли потрібно налаштувати кілька елементів, але не змінювати файли теми. Фільтр для додавання йди видалення полів з форми - 'comment_form_default_fields'

Видалимо поле URL-адреси за допомогою фільтра. Наведений код можна використовувати у плагіні або файлі functions.phpактивну тему.

Function remove_comment_fields($fields) ( unset($fields["url"]); return $fields; ) add_filter("comment_form_default_fields","remove_comment_fields");

Крок 4. Додаємо дані у форму коментаря за допомогою гака

Ми можемо додати поля у форму за допомогою фільтра 'comment_form_default_fields'. Додамо поле віку автора за допомогою фільтра та збережемо дане поле додаткові дані та будемо їх виводити у коментарі.

Додаємо поле наступним чином:

Function add_comment_fields($fields) ( $fields["age"] = "

" . "

"; return $fields; ) add_filter("comment_form_default_fields","add_comment_fields");

#respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label background: #eee;-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); 0.8);color:#555;display:inline-block;font-size:13px;left:4px;min-width:60px;padding:4px 10px;position:relative;top:40px;z-index:1;

Тепер наша форма коментаря буде виглядати так:

Тепер вік зберігається як додаткова інформація. Потрібно використовувати гак в 'comment_post':

Function add_comment_meta_values($comment_id) ( if(isset($_POST["age"])) ( $age = wp_filter_nohtml_kses($_POST["age"])); add_comment_meta($comment_id, "age", $age, false); ) ) add_action ("comment_post", "add_comment_meta_values", 1);

Як тільки дані збережені, їх можна виводити в коментарі так:

comment_ID, "age", true); ?>

Крок 5 . Налаштування коментарів для певних типів записів

Іноді потрібно використовувати поля у коментарях лише для певних типів записів. Змінимо код для виведення поля віку тільки для запису типу book:

Function add_comment_fields($fields) ( if(is_singular("books")) ( $fields["age"] = "

" . "

"; ) return $fields; ) add_filter("comment_form_default_fields","add_comment_fields");

Крок 6. Створюємо зворотну функцію для виведення коментарів

Функція wp_list_comments використовується для виведення коментарів у записах. У кодексі WordPress функцію докладно описано.

wp_list_comments має аргумент 'callback' у якому можна визначити функцію, що викликається під час виведення коментаря.

У темі Twenty Eleven у файлі comments.phpможна знайти рядок:

Wp_list_comments(array("callback" => "twentyeleven_comment"));

Змінимо її на:

Wp_list_comments(array("callback" => "my_comments_callback"));

Функція my_comments_callback буде викликатись для кожного запису.

Крок 7. Стилізація коментарів

Тепер ми трохи змінимо стиль коментарів. Просто будемо виводити зміст запису та поле віку, яке було додано нами раніше. Ми також змінимо колір фону для коментарів.

Код функції 'my_comments_callback':

Function my_comments_callback($comment, $args, $depth) ( $GLOBALS["comment"] = $comment; ?>

  • id="li-comment-">

    comment_ID, "age", true); ?>

    __("Reply ↓", "twentyeleven"), "depth" => $depth, "max_depth" => $args["max_depth"])))); ?>
  • Змінюємо колір тла таким чином:

    Commentlist > li.comment ( background: #99ccff; border: 3px solid #ddd; -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 1.625em; padding: 1.625em; position: relative; )

    Нещодавно копався у файлах своєї теми WordPress, а саме правил шаблону виведення коментарів, попутно розбираючись у його пристрої та різних функціях, відповідальних за виведення коментарів на постах блогу. В результаті я змінив стандартний висновок, створив та підключив свій власний файл comments.php . Отриманий результат вирішив оформити у вигляді статті, оскільки добре розібрався у цій темі, і матеріалу вийшло чимало.

    Сподіваюся, що стаття виявиться корисною для власників блогів на WordPress, знайомих з HTML, CSS та PHP.

    ***

    У WordPress для підключення шаблону коментарів на пост або сторінку використовується функція comments_template() , яка приймає два параметри:

    • перший - шлях до файлу шаблону, за промовчанням це comments.php у папці з поточною темою
    • другий служить для поділу коментарів за типом (звичайні, трекбеки та пінгбеки), за замовчуванням false

    Вставимо comments_template() після виведення запису в шаблон посту single.php або сторінки page.php.

    Опис та аргументи функції comments_template() та інших згадуваних у статті шукайте в Кодексі WordPress .

    Підготовка шаблону

    Спробуємо розібратися в шаблонах коментарів WP і власноруч зробимо файл для виведення коментарів на пости та сторінки блогу. Як приклади для ознайомлення можна взяти шаблони зі стандартних тем WordPress. Створимо новий документв будь-якому текстовому редакторі, назвемо його comments.php та почнемо редагувати.

    • В принципі назвати файл можна як завгодно, а потім в comments_template() прописати шлях до цього файлу, проте краще дотримуватися стандартної назви
    • Редагувати файл можна і в адмінці WP, до речі
    • Найкраще звичайно писати код і відразу перевіряти його дію на своєму блозі або на локальному сервері.

    У WordPress можна заборонити коментарі для окремих постів, тому перед їх виведенням потрібно провести перевірку на «відкритість»:

    Це код-обгортка для наших подальших дій. Тепер підготуємо контейнер для блоку коментарів

    з семантично коректним класом або ідентифікатором (клас звичайно краще):

    Усередині

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

    буде для цього якраз:

    "

    Тут ми вказали одну з функцій WordPress— the_title() , результатом цієї функції стане виведення заголовка поточного посту або сторінки. Якщо ви не хочете виводити заголовок, можна написати просто «Коментарі читачів».

    Далі, як виводити коментарі, необхідно переконатися у тому наявності, тобто. провести перевірку, якщо є - вивести повний список, якщо ні - то можна показати користувачеві щось на кшталт «». Так відвідувачу вашого посту/сторінки буде зрозуміло, що ніхто ще нічого не писав, а мотивуюча фраза «Ви можете бути першим» збільшить ймовірність того, що вам швидше щось напишуть.

    Отже, після такої постановки завдання стає зрозумілим, що для реалізації нам знадобляться конструкції if/else та функція виведення кількості коментарів get_comments_number() . Якщо функція повертає 0 (нуль), то виводимо «Коментарів поки що немає…», інакше «Коментарі читачів…»:

    Коментарів поки що немає, але ви можете стати першим

    Коментарі читачів до статті"

    Обговорення закриті для цієї сторінки

    Висновок коментарів

    Відмінно, ми вивели заголовки в залежності від наявності або відсутності коментарів, тепер логічно вивести самі коментарі за це відповідає функція wp_list_comments() . Функція за замовчуванням містить усі коментарі у теги

  • тому слід додати обгортку
      з присвоєнням класу.commentlist:

      wp_list_comments() приймає масив аргументів, за допомогою яких можна гнучко налаштувати висновок коментарів. Наприклад, можна змінити розмір аватара, текст відповіді на коментар та інші налаштування, передавши ключове словота значення:

      $args = array("avatar_size" => 64, // розмір аватара 64*64px, за замовчуванням 32 "reply_text" => "Відповісти" // текст відповіді на коментар "callback" => "my_comments" // функція формування зовнішнього виду коментаря)

      На окремий розгляд заслуговує параметр callback , який набуває значення імені користувача функції виведення коментаря. З її допомогою можна гнучко налаштувати зовнішній вигляд кожного коментаря. Так виглядає стандартна функція виведення з файлу comment-template.php:

    1. id="li-comment-">
      "); ?> %s says:"), get_comment_author_link()) ?>
      comment_approved == "0") : ?>
      $depth, "max_depth" => $args["max_depth"]))) ?>

      Найпростіше взяти цю функцію і правити її під себе, а потім викликати як користувальницьку, прописавши її у файлі comments.php або functions.php.

      Після виведення списку коментарів можна змінювати їх зовнішній вигляд через стилі CSS. Деякі параметри wp_list_comments() дублюються в адмінці WP, вкладка Параметри → Обговорення, зокрема наявність деревоподібних коментарів, сортування за датою тощо.

      Форма відправлення коментаря

      Для додавання форми коментарів використовується функція comment_form(). Додамо її під список коментарів:

      Коментарів поки що немає, але ви можете стати першим

      Коментарі читачів до статті"

      1. 64, "reply_text" => "Відповісти", "callback" => "my_comments"); wp_list_comments($args); ?>

      Обговорення закриті для цієї сторінки

      За такого виклику comment_form() завантажить стандартний код із файлу WordPress comment-template.php . Функція приймає два параметри:

      Comment_form($args, $post_id);

      • $args - масив налаштувань виведення форми
      • $post_id — id посту, до якого буде застосована функція, за промовчанням поточний пост

      Давайте, наприклад, зробимо валідацію на HTML5 полям форми, додамо текстові підказки. Створимо масив $args для введення потрібних налаштувань:

      $args = array(); comment_form($args);

      У масив необхідно прописати ключі налаштувань:

      $args = array("fields" => apply_filters("comment_form_default_fields", $fields));

      Тепер нам необхідно заповнити змінну-масив $fields , яка включає поля форми. Найпростіше взяти стандартний код WordPress з comment-template.php і трохи його змінити:

      "

      " . ($req ? " *" : "") . "

      ", "email" => " ", "url" => "

      " . "

      "); $args = array("fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Тут значення параметрів author, email та url — html-код полів «Ім'я», «Пошта» та «Сайт відповідно». Ці значення потрібно редагувати.

      Для полів нам потрібно додати такі атрибути:

      • required — робить поля обов'язковим для заповнення, додаємо його для полів «Ім'я» та «Сайт»
      • placeholder — додає текстову підказку до поля
      • pattern="(3,)" для поля "Ім'я" - вказуємо ім'я літерами латинського або російського алфавіту і довжину не менше 3 символів
      • type="email" для поля "Пошта" - тим самим ми додамо валідацію HTML5 електронної пошти
      • autocomplete - включає автозаповнення для полів
      • type="url" для поля "Сайт"

      Не забудьте, що у старих браузерах нові атрибути HTML5 не працюватимуть. Ті браузери, які розуміють нові типи полів, просто виводитимуть їх як текстові, тобто. .

      До того ж я для свого блогу де-не-де поміняв місцями теги, додав класи для стилізації, в результаті у мене вийшов такий код масиву $fields:

      "

      ", "email" => " ", "url" => "

      "); ?>

      Ми змінили поля введення даних. Тепер підредагуємо саму форму коментарів

      " ?>

      Це стандартний код WordPress, я лише трохи видозмінив його — додав текстову підказку та прописав додатковий клас для стилізації.

      Ось що я в результаті отримав із застосуванням стилів CSS:

      Форма коментарів WordPress з використанням атрибутів HTML5

      Підсумок

      Насамкінець скину свій код comments.php:

      читачів статті"

      • Залишіть перший коментар - автор намагався
      1. id="li-comment-">
        "); ?> %s пише:"), get_comment_author_link()) ?>
        comment_approved == "0") : ?>
        $depth, "max_depth" => $args["max_depth"]))) ?>
        "Відповісти", "callback" => "verstaka_comment"); wp_list_comments($args); ?>
      "

      ", "email" => " ", "url" => "

      "); $args = array("comment_notes_after" => "", "comment_field" => "

      ", "label_submit" => "Надіслати", "fields" => apply_filters("comment_form_default_fields", $fields)); comment_form($args); ?>

      Обговорення закриті для цієї сторінки

      FAQ за коментарями

      Як виділити коментарі автора та користувача?

      Іноді дуже зручно задати окремий зовнішній вигляд для авторських коментарів, для цього є навіть спеціальні плагіни. Однак можна обійтися без усіляких плагінів - просто прописавши стилі для класу.bypostauthor у css-файлі. Аналогічно можна задати стилі для коментарів користувача — .bypostuser:

      Як встановити стилі для деревоподібних коментарів?

      Для включення деревоподібних коментарів потрібно зайти в адмінку WP, Параметри → Обговорення → Дозволити деревоподібні коментарі. Тепер дочірні коментарі матимуть деревоподібну структуру, їм можна задати окремі стилі, наприклад, зробити відступи. Все, що потрібно - встановити правила в css для списку з класом.

      Commentlist .children ( padding: 0 0 0 40px; /* відступ зліва для дочірніх коментарів */ )

      Стилі для парних та непарних коментарів

      WordPress за умовчанням дає непарним коментарям клас.even, парним.odd. Через ці класи легко ставити свої стилі:

      Commentlist .even ( /* стилі для непарних коментарів */ ) .commentlist .odd ( /* стилі для парних коментарів */ )

      Як закрити коментарі на окремому пості?

      Дуже легко - заходимо на сторінку написання посту, Налаштування екрана → Обговорення, під полем посту з'являється блок Обговорення, зняти виділення Дозволити коментарі.

      • При складанні власного шаблону коментарів можна користуватися файлами comments.php із стандартних та інших платних та безкоштовних тем WordPress
      • Альтернатива стандартним коментарям — сторонні плагіни форм коментування, наприклад, популярна DISQUS
      • Цілком можливо правити код прямо в самому файлі comment-template.php , проте у разі оновлення WordPress весь код буде перезаписаний - доведеться правити знову
      • Пам'ятайте - ідеального шаблону коментарів не буває

      Допомога проекту

      65 голосів, у середньому: 4,46 із 5)