Перейти до змісту

WordPress: робимо деревовидні коментарі

wordpress sign

У двигунці WordPress версії 2.7 і вище функціональність деревовидних коментарів вбудована у саму систему. Тому необхідність у додаткових плагінах, що пропонують подібну функціональність відпадає. То ж чому б нам не скористатись, тепер уже, базовими можливостями? ;) Ось вам покрокова інструкція "що і до чого", щоб додати функціональінсть деревовидних коментарів на ваш блог!

1.

Перше, що ви завжди повинні робити, перед тим як вносите зміни на свй блог - це бекап! Це дуже просто зробити з допомогою, наприклад, плагіна WordPress Database Backup чи подібних йому. Вибирати який - воля ваша. Я користуюсь вищезгаданим. 😊

На додачу до копії бази даних, настійливо рекомендую зробити копію файлів вашої теми для WordPress!. Це просте правило зберігає масу нервових клітин і запобігає стресу, що ви можете дістати у процесі 🤨

2.

Наступний крок - увімкнути функціональність деревовидних коментарів у адмінці. Для цього заходимо у Settings > Discussion і ставимо галочку у останньому пункті, як зображено на скріншоті:

threaded

Не ігноруйте цей пункт! Часто буває, що всі налаштування у файлах теми зроблені вірно, а ось про цей пункт користувач забуває, а відтак - нічого не працюватиме!

3.

Далі необхідно додати трішки коду у файл header.php вашої теми. Для цього, ви можете скористатись вбудованим редактором (зайшовши у Appearance > Editor) або скопіювавши файл на дом. комп'ютер відредагувати його спец. редактором, типу Notepad++. Я рекомендую саме останній спосіб! Моя рекомендація пов'язана не тільки із зручністю роботи у спец. редакторі, а й тим, що у ньому ви можете вибрати у якому кодуванні зберегти редагований файл (вбудований WordPress'івський редактор по замовчуванні зберігає у ANSI). Найкраще вибирати UTF without BOM. Тоді тема не буде "глючити" (найчастіше саме через отой ВОМ), та й кирилиця у файлі відображатиметься нормально, а не крякозябрами. 😉

Якщо "глюки" все ж "вилазять", то ще рекомендую переглянути ось цю мою статтю "Знайти ВОМ".

Довгий відступ, а ось і сам код, що необхідно додати:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Цей шматок коду необхідно вставити одразу перед або після конструкції:

<?php wp_head(); ?>

.
Це все. Зберігайте файл.

4.

Редагуємо файл comments.php. Щоб працювали деревовидні коментарі, нам необхідно додати у цей файл кілька ключових тегів WordPress. Ось вони:

<?php wp_list_comments(); ?>

та

<?php cancel_comment_reply_link(); ?>

Як і куди це зробити більш детально розписано ось тут. Я ж просто скопіював весь comments.php із default-теми WordPress і вставив у файл comments.php своєї 😁

Я не хотів бавитись із написанням коду цього файлу з нуля, бо, як виявляється, налаштування виводу самих коментарів у темі більше не відбувається у вищезгаданому файлі (тобто, у comments.php)! Тепер достатньо дописати аргумент callback до тега wp_list_comments, із зазначенням функції, у якій і прописані ті всі налаштування виводу коментарів (більше про аргументи цього тега читайте тут)! Отож у моєму випадку, цей тег повністю прописаний ось так:

<?php wp_list_comments('callback=mytheme_comment'); ?>

В даному випадку mytheme_comment - це функція, записана у файлі functions.php у якій, повторюсь, детально розписаний вивід (будова і те що повинно бути відображено) коментарів мого блога.

5.

Тепер про css-стилі коментарів. Якщо користуєтесь тегом wp_list_comments() без аргументів, то стилі коментарів будуть застосовуватись закладені по замовчуванні. Їх повний список ви зможете знайти ось тут. Користуватись просто: вибираєте потрібну назву стилю, додаєте його до файлу із стилями вашої теми (найчастіше це style.css) та оформлюєте на свій смак.

6.

Вже здогадались? Редагуємо файл functions.php! 🙂

Одразу скажу, що цей пункт не є обов'язковим! Якщо вам не потрібні додаткові "цяцьки", типу виведення аватара із заданим розміром, послідовність виведення дати, імені автора і часу коментаря, то нічого описаного у пункті 6 вам робити не потрібно. Достатньо зупинитись на пункті 5.

Пам'ятаєте? Моя функція називається mytheme_comment. А ось вона повністю як є у файлі functions.php:

<?php function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
	  <?php echo get_avatar( $comment, 48 ); ?>

	  <h3 class="commenttitle"><?php comment_author_link() ?> Коментує,</h3>

	  <p class="commentmeta">
	  <?php comment_date('F j, Y'); ?>
          @ <a href="#comment-<?php comment_ID() ?>" title="<?php _e('Пермалінк до коментаря'); ?>"><?php comment_time() ?></a> <?php edit_comment_link(' редагувати','',''); ?>
                    </p>

	  <?php if ($comment->comment_approved == '0') : ?>
		 <em><?php _e('Ваш коментар очікує на модерацію.') ?></em>
		 
	  <?php endif; ?>

	  <?php comment_text() ?>

	  <div class="reply">
		 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
	  </div>
   </li>
<?php
		}
?>

Як бачите, у мене по порядку: спочатку аватар розміром 48х48 пікселів; далі ім'я автора і одразу за ним дата і час, що одразу є пермалінком для конкретного коментаря; потім текст, потім кнопка "Відповісти".

Важко пояснити, чому все так, а не інакше. Хоча якщо спробувати, то найпростішим буде - бо мені так подобається. 🙂 Вам варто детальніше ознайомитись із тегами пов'язаними з коментарями, що пропонує WordPress. Крім того, вам варто замінити назви класів стилів на свої власні, бо ці у вас не працюватимуть (хіба якщо назви співпадають.. 😗 ).

За підтримки:
Диета для похудения и про то как похудеть без диет читайте на украинском женском портале!

Выделенные сервера от msm.ru это надежность и качество!

Коментарі (7)

  1. Роман

    Цікава стаття.
    Може порадите. Мені треба щоб стаття показувалась в переліку статей вкороченою до якоїсь кількості символів. А внизу вкроченої статті посилання типу "читати далі" .

    1. Psiho

      я думаю, що у цьому випадку треба користуватись excerpts + додати вiдповiдний тег до шаблону головноi сторiнки
      це цiлком реально, жаль не маю змоги зараз дeтальнiше пояснити...

  2. letrodectus

    корисний допис :) давно хочу таке впровалити, але руки не доходять. може завдяки твоїй статті таки і зроблю :)
    у мене в пункту 3 де має бути код - порожньо, в пункту 4 - аналогічно. код з 6-го пункту відображається нормально. це тільки в мене так?

    1. Psiho

      Яно, навiть не знаю... 😕 Я зараз переглядаю сторiнку iз зовсiм iншого десктопа, не мого домашнього, i наче все гаразд. Код бачу.
      Знаю точно про проблему iз рiдером - там код, що виводиться у мене з допомогою syntax highlighter рiже нещадно. Чому так - не знаю. 😵

      П.С. Одразу прошу вибачення у вiдвiдувачiв за несвоeчаснiсть i неповноту вiдповiдей на коментарi. Я зараз на вiдпочинку i далеко вiд дому. 😇 😎

      П.П.С. Ага, ага... кусочок коду у пунктi три все ж пропав.. Тепер вивiв його через той таки синтакс хайлайтер. Дякую!

  3. Роман

    Може дасте лінк на excerpts щоб я ознайомився. Дякую

  4. Дмитро

    Дякую за допис, давно цікавило, як це зробити Не те, щоби дуже зрозуміло - але то мабуть, треба самому один раз пройти, тоді проясниться.

  5. Юрко Червоний

    Я використовую просто функцію wp_list_comments() , задоволяняє стандартний вивід коментарів.