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

wordpress sign

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

1.

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

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

2.

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

threaded

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

3.

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

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

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


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

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

4.

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


та


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

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


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

5.

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

6.

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

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

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


   
  • id="comment-">

    Коментує,

    @

    comment_approved == '0') : ?>
    $depth, 'max_depth' => $args['max_depth']))) ?>
  • Як бачите, у мене по порядку: спочатку аватар розміром 48х48 пікселів; далі ім’я автора і одразу за ним дата і час, що одразу є пермалінком для конкретного коментаря; потім текст, потім кнопка “Відповісти”.

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

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

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

    Яценюки, Тимошенки, Януковичі… головне хвіст!

    Яценюки, Тимошенки, Януковичі… головне хвіст!

    Одна хвилина невігластва

    Одна хвилина невігластва

    Новіший допис

    There are 7 comments

    1. Роман

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

      1. Psiho

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

    2. letrodectus

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

      1. Psiho

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

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

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

    3. Роман

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

    4. Дмитро

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

    Коментування вимкнено.