Приветствую всех посетителей моего блога.
Сегодняшний пост посвящен древовидным (вложенным) комментариям.
В более свежих версиях WordPress, уже установлены древовидные комментарии, в Консоли своего блога заходите в Обсуждения и ставите галочку разрешить древовидные комментарии. Но к сожалению не все шаблоны WordPress поддерживают древовидные комментарии.
Содержание статьи:
Ну а у кого в темах не присутствуют Древовидные комментарии, для тех эта статья.
Древовидные комментарии можно установить двумя способами, с помощью плагина и без плагина с помощью кода.
Установка древовидных комментариев с помощью плагина
Скачиваем плагин WordPress Thread Comment, устанавливаем его и активируем. Обновляем и смотрим, в Консоли блога, нажимаем на кнопку Settings видим что в самом низу появилась ссылка Древовидные комментарии. Заходим в нее и настраиваем под себя.
В Тексте добавления ответа, слово “Reply” заменяем на слово “Ответить”. В настройки вида ответов, производим замену слова “Reply” на “Ответил” и “At” на “В”. В стилях можно поменять цвета на ваш вкус.
Ну и все, ничего сложного.
Смотрим что у нас получилось, если не работает кнопка «Ответить», значит вашу тему плагин не поддерживает.
Ничего страшного, сейчас я вам покажу как это устранить.
Если плагин не сработал…
В Редакторе вашего блога находим файл comments.php Заходим и перед закрывающимся тегом </form>, вставляем вот этот код:
1 2 3 4 5 6 7 |
<?php echo '<div id="reroot" style="display:none;"><small><a href="javascript:void(0)" onclick="movecfm(null,0,0);" style="color:red;">Отменить написание ответа</a></small></div>'; echo "<p><input type='hidden' id='comment_reply_ID' name='comment_reply_ID' value='0' />"; echo "<input type='hidden' id='comment_reply_dp' name='comment_reply_dp' value='0' /></p>"; echo "<script type=\"text/javascript\">\n/* <![CDATA[ */\nvar commentformid = \"ID-ВАШЕЙ-ФОРМЫ\";\nvar COOKIEHASH = \"". COOKIEHASH . "\";\n/* ]]> */\n</script>\n"; echo "<script type=\"text/javascript\" src=\"http://<strong>URL-ВАШЕГО-САЙТА</strong>/wp-content/plugins/wordpress-thread-comment/wp-thread-comment.js.php?jsver=common\"></script>\n"; ?> |
В коде заменяем: ID-ВАШЕЙ-ФОРМЫ — Это i d формы для ввода комментариев и URL-ВАШЕГО-САЙТА — Адрес Вашего сайта. Не забудьте что ID-ВАШЕЙ-ФОРМЫ, в вашем коде и в настройках плагина должны соответствовать.
Обновляете и видите что кнопка «Ответить» работает.
Установка Древовидных комментариев с помощью кода
В Консоли вашего блога во Внешнем виде, находите Редактор, заходите в него и в Заголовке(header.php) перед wp_head вставляем код:
1 |
[stextbox id="grey"]if (is_singular() AND comments_open() AND (get_option(‘thread_comments’) == 1)) wp_enqueue_script(‘comment-reply’);[/stextbox] |
В Функции темы (functions.php) в самом низу добавляем код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[stextbox id="grey"]<?php function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id=»li-comment-<?php comment_ID() ?>»> <div id=»comment-<?php comment_ID(); ?>»> <div> <?php echo get_avatar( $comment->comment_author_email, 64); ?> <?php printf(__(‘<cite>%s</cite> <span>пишет:</span>’), get_comment_author_link()) ?> </div> <?php if ($comment->comment_approved == ’?) : ?> <em><?php _e(‘Ваш комментарий появится после проверки’) ?></em> <br /> <?php endif; ?> <div><?php printf(__(‘<small>%1$s в %2$s</small>’), get_comment_date(), get_comment_time()) ?><?php edit_comment_link(__(‘<div></div>’),’ ‘,») ?></div> <div> <?php comment_text() ?> </div> <div> <?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘max_depth’ => $args['max_depth']))) ?> </div> </div> <?php } ?>[/stextbox] |
Заходим в Комментарии (comments.php) и между тегами <ul class=»commentlist»> и </ul> заменяем все на код:
1 |
[stextbox id="grey"]<?php wp_list_comments(‘callback=mytheme_comment’); ?>[/stextbox] |
Теперь чтобы у нас было все аккуратно и правильно, заходим в Таблицу стилей (style.css) и в самом низу заливаем вот этот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
[stextbox id="grey"]#author, #email, #url { margin:3px 10px 3px ; float:left; height:25px; color:#555; padding: 12px 12px; background-color:#dedede; font-size:16px; border:1px solid #bbb; border-radius:12px; -o-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -ms-border-radius:12px; width:150px; box-shadow: 1px 1px #fff; -moz-box-shadow: 1px 1px #fff; -webkit-box-shadow: 1px 1px #fff; -o-box-shadow: 1px 1px #fff; -ms-box-shadow: 1px 1px #fff; } #comment { width:95%; color:#555; padding:12px; background-color:#dedede; border:1px solid #bbb; border-radius:12px; -o-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -ms-border-radius:12px; box-shadow: 1px 1px #fff; -moz-box-shadow: 1px 1px #fff; -webkit-box-shadow: 1px 1px #fff; -o-box-shadow: 1px 1px #fff; -ms-box-shadow: 1px 1px #fff; margin:3px 3px ; font-size:16px; font-family:Tahoma, Arial; } #author:focus, #email:focus, #url:focus, #comment:focus { box-shadow: 5px #007efd; -moz-box-shadow: 5px #007efd; -webkit-box-shadow: 5px #007efd; -o-box-shadow: 5px #007efd; -ms-box-shadow: 5px #007efd; border:1px solid #777; color:#555; } ul.commentlist { font-size:14px;font-family:arial;list-style:none;padding:;text-indent:;margin-bottom:20px;} ul.commentlist li { border:1px dashed #d3d3d3; background:#eee; padding:5px 5px 5px 5px; margin:5px ; border-radius:12px; -o-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -ms-border-radius:12px; } ul.commentlist li.comment { padding:10px 10px 10px 10px; } ul.commentlist li div.comment-author { font-weight: bold; } ul.commentlist li div.vcard cite.fn a.url { text-decoration: none; } ul.commentlist li div.vcard cite.fn a:hover.url { color: #313131; text-decoration: none; } ul.commentlist li div.vcard img.avatar { border:1px solid #d6d6d6;width:50px;height:50px;float:left;padding:3px;background:#f4f4f4;margin-right:10px; } ul.commentlist li div.comment-meta { font-family:arial;color:#818181;font-style:oblique;text-shadow:0 1px 0 #fff; } ul.commentlist li p { color:#606060; clear:both;margin:20px 0 10px 0; } ul.commentlist li ul { list-style:square; } ul.commentlist li ul.children { list-style:none; text-indent:; } ul.commentlist li ul.children li.bypostauthor { background:#e3e3e3;border:1px dashed #aaa;} ul.commentlist li.pingback { } ul.commentlist li.bypostauthor { } ul.commentlist li.thread-odd { border:1px dashed #d3d3d3; margin:5px 5px ; border-radius:12px; -o-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -ms-border-radius:12px; } .comment-text { padding:5px 10px ; display:block; } .comment-text p { padding:5px 10px ; display:block; font-size:16px; } #respond input#submit { color:#444; font-weight:bold; margin:10px 10px ; padding:5px 8px 5px 8px; border:1px solid #888; border-radius:12px; -o-border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px; -ms-border-radius:12px; background: #c1c1c1; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #c1c1c1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(%,#eeeeee), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* IE10+ */ background: linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeeeee’, endColorstr=’#c1c1c1?,GradientType=0 ); /* IE6-9 */ } #respond input#submit:hover { color:#666; background: #e3e3e3; /* Old browsers */ background: -moz-linear-gradient(top, #e3e3e3 0%, #ccc 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(%,#e3e3e3), color-stop(100%,#ccc)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* IE10+ */ background: linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e3e3e3?, endColorstr=’#cccccc’,GradientType=0 ); /* IE6-9 */ } [/stextbox] |
В стилях можете подобрать другой цвет и т.д.
Но прежде чем начать эксперименты в редакторе, сохраните все компьютер или на носитель.
На сегодня все.
Если вам понравилась статья, поделитесь ею в соц сетях.
С Уважением, Игорь Александрович
Привет Игорь.А я слышал что использование древовидных комментариев увеличивает количество дублей блога на WP.
Правда это или нет?
Привет Олег.Да увеличивает.Но это не проблема,можно в роботсе закрыть и все решено.
Либо я не различаю, что формы комментирования бывают разные, либо…короче, не вполне понимаю, что значит — древовидные комментарии.
Спасибо большое! Все получилось, УРА!!!
Спасибо. Пригодилось для моего блога.
Что не говори — интересный пост!
Спасибо
Очень интересно. Еще бы картинок или фото по теме добавить, шикарно было бы
Линия производства молока tessa Линия производства. Оборудование для SPA салонов
Хорошо.приму к сведению.
Спасибо за честность,но я пишу то,что считаю правильным.
А что не так то?
Давайте.
Я вашими статьями как всегда восхищена
надо почаще статьи писать, редко блог обновляете
Не всегда время свободное есть.
У меня впечатление, что автор о чем то промолчал
В каком смысле?
Похоже,что этот комментарий писал не человек, а робот.
Взял себе тоже-пригодится
За статью благодарю, интересно описано и подробно.Многие используют вложенные комментарии
Интересный пост, надо занести в закладки. Позже изучу
У меня вопрос обычного чайника:мне нравится комментировать блоги,но почему в комментарии нельзя вставлять картинки или фото?
Вставить можно,но это сложно,с помощью HTML кода.
Можно просто ссылку кинуть на фото или картинку.
Татьяна, здравствуйте! Если вы будете пользоваться редактором Александра Каратаева, то у вас будет такая возможность…У меня на блоге он стоит, можете посмотреть…С уважением, Анна.
А я видела, что иногда картинки и фото и в комментариях встречаются.
На некоторых сайтах в комментариях я встречала возможность вставить фото. В основном это кулинарные сайты или сайты по вязанию и рукоделию.
А разве от темы сайта зависят его функциональные возможности? Вроде как все сайты одинаковы.
что-то я не понял про деревовидные комменты пишите, а у себя их не реализовали, как это понять?
Когда писал статью,были древовидные.
Но потом решил не создавать дубли.
Вы меня извините, но зачем вы по центру все выравниваете, очень не удобно читать, лучше уже по левому краю!
На днях исправлю.
Игорь, у меня к вам просьба. У меня на блоге перестала работать кнопка "Ответить" почему-то…И теперь я не могу ответить комментатору сразу, а только внизу всех комментариев…Короче, ерунда какая-то получается…Я не знаю, понятно ли я объяснила свою проблему…Вы не могли бы мне что-то посоветовать, чтобы исправить ситуацию? Потому что пока на комментарии не отвечаю, а это для меня очень плохо, так как я никогда не нарушала своего правила сразу отвечать на комментарии…Древовидные комментарии включены…С уважением, Анна.
Да ситуация понятная.Только я сейчас к вам на блог забегал,у вас все работает.
Игорь, это я писала на хостинг и восстанавливала блог, поэтому кнопка заработала…С уважением, Анна.
И ещё одно хочу у вас спросить. Я читала, что это уже очень старый плагин, WordPress Thread Comment, которым создатель не занимается…Когда хотела скачать, то написано, что он уже 5 лет не обновлялся…Как вы к этому относитесь? …С уважением, Анна.
Ну незнаю,я буквально полгода назад от него отказался.
Код установил,а плагин меня устраивал
Игорь, мне кажется, что у вас не работает топ комментаторов…Комментарии не добавляются, а застыли в одном количестве…Проверьте, пожалуйста…С уважением, Анна.
Все работает.Еще раз повторяю,я включил полную модерацию.
Я поняла что такое древовидная структура комментариев.
Это на много лучше и понятнее к кому обратились, а так было бы все штатно и непонятно
А мне ещё потребуется на большое количество блогов зайти, чтобы точнее увидеть — где древовидная структура комментариев, а где — нет.
Да в принципе ничего сложного не вижу. На некоторых блогах нет древовидных комментариев и там не понятно кому адресован комментарий, потому что они идут друг за другом
У меня слава богу они работают нормально.