Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

03.09
2008

Рубрики: WordPress |

addcoment.jpg

Когда я говорил от том, что в шаблонах вордпресс нет отдельного дизайна для внутренних страниц, то немного лукавил. Некоторое отличие все же есть, ибо на «сингловой» (single.php) странице с отдельно-взятым постом прикреплены комментарии, которых не видно на главной странице сайта. Вот как раз оформление этих самых комментариев и формы для их добавления мы сегодня разберем.

За вывод комментариев отвечает файл comments.php. Прикрепляется он к сингловой (иногда к индексной, как в нашем шаблоне) странице при помощи такой вставки:

<?php comments_template(); ?>

Общая схема вывода комментов противоположна выводу постов на главной странице. Если посты идут последовательно сверху вниз начиная со свежего, то комменты наоборот — начинаются с самого старого. Кто первый встал, как говорится, того и мокасины.

В файле comments.php есть свой заголовок второго уровня:

<h2 id="comments"><?php comments_number(__('No Comments yet'), __('1 Comment'), __('% Comments')); ?>

в котором мы, как и прежде, исправим английский текст на русский:

<h2 id="comments"><?php comments_number(__('Нет комментариев'), __('1 комментарий'), __('Комментариев (%)')); ?>

Далее идут подряд две ссылки на rss-фид комментариев и на трэкбэк к посту.

Лирическое отступление.

Что есть трэкбэк? В двух словах это ссылка, которую любой другой блоггер может скопировать и вставить у себя в посте, если например он пишет пост на ту же тему, что и вы. Тогда у вас в комментариях появится автоматический коммент-цитата, с небольшим куском текста с того, другого блога. Изначально сделано это было пользы блоггерской ради, чтобы любой читатель мог глянуть в комменты и сказать: «О! У того парня тоже че-та по этой теме есть. Пойду гляну..». В настоящее время этим инструментом злоупотребляют спамеры и говноблоггеры. Ведь что может быть проще — накатал у себя что-то и дал трэкбэковую ссылку на серьезный и уважаемый блог. А там появится обратная сссылочка.
В виду сего безобразия некоторые блоггеры просто отключают данную функцию в своих блогах. Это легко можно сделать в админской. Кто-то выделяет трэкбэки в отдельный список и обрамляет их ноуфоллами и ноиндексами. В общем, штука любопытная. Кстати, трэкбэком может служить и просто ссылка, взятая из заголовка поста.

Далее в файле comments.php начинается сам ряд комментов, оформленный нумерованным списком <ol></ol>

<ol id="commentlist">

В нашем случае этот список оформлен нетипично: комменты через одного меняют цвет фона. Это удобно на самом деле. Сразу четко и визуально можно отделить один коммент от другого. Как это реализовано? А вот при помощи такого куска кода:

<?php $i++; /* For different background colors */
($i % 2 == 1) ? $bg_comment = 'class_comment1' : $bg_comment = 'class_comment2';
?>

Соответственно, в листе стилей CSS для коммента_1 и коммента_2 заданы различные фоны:

.class_comment1 { background: #E9E9EA; border: 1px solid #E0DEDE; }
.class_comment2 { background: #F4F3F3; border: 1px solid #E0DEDE; }

Все просто :) Естественно, эти правила можно менять как угодно и придать комментам очень привлекательный внешний вид.

Практически в самом низу файла расположен код формы для добавления комментариев. В форме для заполнения существуют:

1. Три строки для ввода соответственно имени, мыла и адреса сайта. Первые два обязательны для заполнения, последняя — по желанию.
2. Поле для ввода непосредственно комментария.
3. Кнопка для отправки комментария.

Строки и поля по обыкновению имеют собственные id, к которым в листе стилей CSS можно применять любое оформление. Для примера очень рекомендую посмотреть парочку подборок всевозможных дизайнов как для самих комментов, так и для форм. Перейдя по ссылке любой из понравившихся картинок, вы сможете загрузить страницу того блога и, сохранив ее у себя, рассмотреть внимательно как оформлен код и css.

В описаниях к строкам и кнопке отправки также меняем английский текст на русский. Однако будьте осторожны! Не все английские слова можно править на русские. Не «исправьте» ненароком части самого php кода. Например, в строке:

<label for="author"><small>Name <?php if ($req) _e('(required)'); ?></small></label></p>

вы можете смело заменить слово Name на слово Имя, но больше ничего тут трогать нельзя. В строке кода кнопки:

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /></p>

вы можете заменить Submit Comment на слово Отправить. Не теряйте кавычки!

Парочка советов напоследок:

1. Если вы хотите, чтобы ваш блог комментировали охотнее, не поленитесь поставить специальный плагин subscribe-to-comments — подписка на новые комментарии. При этом, если сразу после кнопки «Отправить» у вас не появится дополнительное окошко для установки галки, то в файле comments.php необходимо будет сразу после кода кнопки добавить такой кусок кода:

<?php show_subscription_checkbox(); ?>

2. Используя для переделки чужие темы, особенно русскоязычные переводы буржуйских тем, внимательно проверяйте код на присутствие/отсутствие посторонних ссылок и непонятных скриптовых вставок. Не буду показывать пальцем, но уже ловил пару раз в наших переводах тем такую уловку: ссылка на авторов перевода вставляется где-нить в строке «Автор …, Дата …, Рубрика: …», цепляясь к двоеточию или точке с запятой. Внешне практически не заметно, но работает исправно. И это еще в лучшем случае. А порой внедряют такое, что похлеще трояна будет. Кстати, обязательно проверяйте код поисковой формы. Часто туда тоже впихивают всякую гадость. Лучше всего форму поиска переписать так, как было показано в 7 части.

В качестве заключения:

На этом цикл статей по созданию собственного шаблона под Вордпресс можно считать завершенным. Основные вещи, не вдаваясь в подробности, я по возможности раскрыл. Более расширенное и, можно сказать, пошаговое руководство я в скором времени представлю в виде отдельной электронной книги. Кстати, в книге будет предложено создание уже 3-х колоночного шаблона. По многим причинам он сейчас более актуален.

Возможно, у вас уже появилась масса вопросов. Пишите в комменты или в мыло, я обязательно их рассмотрю и добавлю в книгу в качестве FAQ. Такой формат даже более предпочтителен. Знаю по себе. У меня гораздо проще и быстрее получается найти ответ на конкретный вопрос, когда листаю вопросник FAQ.

По здравому размышлению я решил не выкладывать здесь полностью переделанный шаблон pool для блога Кисы Воробьянинова. Основные моменты переделки были раскрыты, а всевозможные мелочи, вроде правки отступов и полей в правилах CSS все равно под любой шаблон сугубо индивидуальны. В книге же будет создан полностью работоспособный и приличный внешне 3-х колоночный шаблон, который можно будет смело предложить в качестве рабочего варианта. Вот тогда и упакую его в архивчик и предложу для скачивания.

Enjoy!

Вебсовет.

1 2 3 4 5 6 7 8 9

Digg it Bookmark it Stumble it add to technorati

Комментарии (37) на запись “Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии”

  1. Найкрис Кроули 03.09.2008 18:10

    Ух ты, новые темки постишь, а я думал ты пропал куда… думал, может в отпуске и отдыхаешь от е-жизни ;)

  2. Игорь Квентор 03.09.2008 19:04

    Да не, это просто я аську выбросил фтопку. Надоела, честное слово. Проку от нее мал-мала, зато шуму выше крыши. Теперь только по мылу и только по делу общаюсь.

  3. Илья 06.09.2008 15:41

    Ну вот вроде получилось, своя тема для блога на локальном смотрится неплохо. Заливаю на удаленный сервер, и вижу безобразие. Нужно внести изменения в CSS чтобы опустить блок ниже. А не получается. Никак не пойму, как сделать доступными для редактирования файлы темы WP? Подскажите, пожалуйста!

  4. Илья 06.09.2008 17:06

    Ура! Получилось! Оказывается беда была в том, что после изменения прав доступа к файлам в менеджере файлов в cPanel не было сделано действие “обновить”!
    Да, как много подобной “мелочи” портит настроение.
    А все-таки непонятна причина изменений. Неужели версия WP виновата?

  5. Игорь Квентор 06.09.2008 21:06

    Вполне возможно. Попробуйте на локалке поставить обе версии и проверить в каждой.

  6. Илья 07.09.2008 14:23

    Сейчас буду устанавливать WP2.6.1 на втором компьютере (Денвер уже встал). Пока не понимаю как можно ставить одновременно разные версии. А самая большая неприятность - при проверке не из дома, а с компьютера где IE6 стоит, оказалось что иконка подписки выглядит ужасно, вместо одного изображения целая кучка. Сейчас на всякий случай делаю поправку вставляя строчку с background-repeat:no-repeat; может быть поможет. Но чтобы проверить надо снова куда-то идти.
    Вопрос: как проверять результат преобразований в разных браузерах? Dreamweaver позволяет посмотреть в IE6 только html файлы, а php не хочет! Если через Денвер, то вход на сайт через строку браузера, т.е. надо иметь установленными много разных версий? Сколько их надо устанавливать?

  7. Игорь Квентор 07.09.2008 17:08

    Нет ничего сложного в уустановке разных версий ВП на локалке (как впрочем и на хостинге). Складываете каждую версию в отдельную папку. Только базы данные, естественно, создаете разные.
    Результаты работы я смотрю в трех браузерах: ИЕ6, Опера 9 и Фаерфокс. Как проверять? Запускаете Денвер, потом открываете все три браузера и в строке набираете: http://localhost/WP(папка с установленным ВП).

  8. Илья 07.09.2008 19:16

    Игорь, у меня проверка шла на IE7 и последних версиях Оперы и FF. Сегодня добавился Google Chrome. Все новые версии показывают сайт нормально. А беда в том, что более старые версии вид сайта искажают!
    IE6 дает лишний отступ сверху, круглая иконка RSS в формате png теперь сидит в сером квадратике, в картинке календарика тоже появился серый фон вместо прозрачного. Даже FF версия постарше тоже “хулиганит” по границам и полям. Как быть? Ну png поменяю на gif, раз так надо. Но как найти “золотую середину” в отношении свободного плавания блоков?
    Игорь, пожалуйста, включите в свой будущий сборник FAQ вопрос по подгонке темы для разных браузеров, это очень нужно.

  9. Игорь Квентор 07.09.2008 20:03

    Да, об этом тоже постараюсь рассказать в будущей книге. Пока могу лишь посоветовать где возможно отступы делать при помощи правила padding, а не margin. Потому как именно margin браузеры воспринимают по-разному. Что касается изображений формата png, то это давняя “болезнь” ИЕ. Есть варианты как заставить старые версии ИЕ правильно отображать этот формат, в основном с использованием Java-скриптов. Вот здесь неплохо рассказано как это можно сделать:
    http://artslab.info/?p=361

  10. Илья 08.09.2008 18:58

    Спешу поделиться: надо обязательно иметь ОДИНАКОВЫЕ версии WP на локальном и удаленном серверах, иначе от “косяков” избавиться практически невозможно, совсем по-разному получается!

    Вопрос для FAQ: база данных для WP созданная на локальном, она как-то может/должна связываться с базой данных на удаленном сервере, и отражается ли в ней оформление(тема)?

    Игорь, а этот антиспам - это какой плагин?

  11. Игорь Квентор 09.09.2008 19:34

    Привет, Илья.
    Нет, база на локалке никак не влияет на базу удаленного сервера, если только вы сами ее туда специально не экспортируете. Тема никак не отражается в базе. Именно поэтому возможна как любая правка темы “по ходу”, так и полная ее замена на другую тему без изменения контента.
    Да, вот пришлось поставить антиспамерский плагин, ибо автоспамеры - это просто бич блогов. Называется плагин math-comment-spam-protection

  12. Илья 10.09.2008 20:52

    Игорь, спасибо за ценные советы и подсказки. Пожалуйста, расскажите, как делается карта сайта, “ручками” или есть какие-то помощники?

  13. Игорь Квентор 11.09.2008 19:51

    Здесь на Вебсовете я пишу карту ручками, хотя есть вполне удобный и настраиваемый плагин Sitemap Generator (не путать с плагином google-sitemap-generator!). Однако он удобен, если только вы каждый пост помещаете только в одну какую-либо рубрику. Если в несколько, то и плагин вам выдаст на своей странице пост в нескольких рубриках одинаково. Выглядит не слишком красиво.

  14. Viggo 24.09.2008 12:09

    Привет, Игорь!
    Нашел много полезного, как раз задался целью сделать шаблон с нуля, т.к. бесплатные не во всем устраивают.
    Что касается статей о создании 2-колоночного шаблона, то хотелось бы увидеть эти статьи одним файлом, например в виде эл.книги как “блочная верстка веб-сайта”. С распечаткой, почемуто, работать приятней.
    Есть ли такой вариант и будет ли он?

  15. Игорь Квентор 24.09.2008 13:35

    Привет, Viggo! Как раз над книгой сейчас и работаю. Правда будет разобран 3-колоночный шаблон (для разнообразия), но общие принципы будут схожи.

  16. Viggo 24.09.2008 15:12

    Хочется сразу спросить когда будет готово сие творение? :) - через неделю, через месяц или уже на днях?

    Заметил, что в “свежих комментариях” у тебя не выводятся комментарии администратора. Я так понимаю намерено это сделано. Ты сам такое соорудил? Где об этом можно прочитать, возможно такую вещь я тоже прикручу к своему шаблону?

  17. Viggo 24.09.2008 15:35

    Тут Илья спрашивал:
    как проверять результат преобразований в разных браузерах?
    Могу предложить такой вариант: создать сайт на бесплатном хостинге и выкладывать там черновые работы по шаблонам, а затем используя спецсервисы просматривать как отображается сайт в разных браузерах. Сервисы - это такие сайты, где вставляешь урл и выбираешь галочками в каких браузерах показать, а их там штук 20. Ссылки на хостинг и севрвисы не привожу, чтоб не посчитали рекламой, но если Игорь не против, то могу привести.

  18. Игорь Квентор 24.09.2008 18:41

    Отвечаю по-порядку: :)

    1. Про сроки написания книги даже не думал. Пишется оная в промежутках между работой и другой работой и еще другой работой. Пока готов дизайн для нового 3-х колоночного шаблона.

    2. За вывод комментов в блоге на ВП отвечает плагин get-recent-comments. В разделе Настройки в админской есть подраздел Recent Comments, в котором можно выключить отображение комментов автора (поставить галку в пункте “Exclude comments by blog authors (your own comments)”).

    3. О сервисах для проверки отображения сайта я только За! Только в комментах эти ссылки затеряются. Хотя пусть будут, а потом я вынесу их в FAQ.

  19. Viggo 24.09.2008 18:56

    Чтож держи ссылки, Игорек, потом вставишь в FAQ книги

    browsershots.org
    Вот что об этом сервисе написано на сайте - “Browsershots делает скриншоты вашего сайта в разных браузерах. Это бесплатный open-source сервис, созданный Johann C. Rocholl. Когда вы отправляете нам адрес свого сайта, он добавляется в очередь. Несколько различных компьютеров откроют ваш сайт в своих браузерах. Затем они сделают скриншоты и загрузят их на центральный сервер.”
    Лично я пару раз пользовался этим сервисом, забавно.

    И позволю себе еще одну ссылку на бесплатный хостинг для блоггеров и не только - habahaba.org. Можно разместить на нем свой блог для теста, а результаты переносить на основной свой сайт.

  20. Игорь Квентор 24.09.2008 19:07

    Спасибо! Сделал их активными ссылками. Пусть будет.

  21. Viggo 26.09.2008 13:54

    Также хотел бы предложить добавить в FAQ книги в раздел “инструменты для разработки шаблона” (или что-то подобное) такую вещь как бесплатный текстовый редактор для web-разработчиков developer.freesh.ru. Сам пользуюсь для редактирования файлов вордпресса. О тех.возможностях здесь писать не буду, можно посмотреть на сайте.

  22. Viggo 26.09.2008 14:57

    инструментарий можно добавить двумя шпаргалками от wpcandy.com:
    Шпаргалка по структуре шаблонов вордпресса и Шпаргалка по тегам. (на русском языке), также можно добавить плагин для Дримвивера, если кто в нем делает пхп-файлы, этот плагин TAGStention создает вкладку в Дриме, которая вставляет спецкод вордперссовских функций, необходимых при написании шаблона. Качать здесь solutoire.com/tagstention
    Но все эти вещи есть в одном месте и в одном файле fleek.org/instrumenty-dlya-sozdaniya-temy-wordpress/
    Не обязательно именно эту ссылку давать, она для того, чтоб найти первоисточник и дать ссылку на него, если ты, Игорек, будешь использовать эти вещи в Фак-е.

  23. Игорь Квентор 26.09.2008 16:32

    Владимир, спасибо! Обязательно включу интсрументы в FAQ. Спасибо за ссылочки!

  24. Viggo 01.10.2008 15:21

    Игорь, вот еще одна ссылка habrahabr.ru/blogs/wordpress/41296/#habracut - шпаргалка для дизайнеров при создании шаблонов для вордпресса. Я ее предлагаю не с тем, чтоб вчистую вставить в книгу, а посмотри сам, может это станет примером для твоего собственного мануальчика.

    Тут по ссылкам, которые я набросал, собралось несколько подсказок по тэгам и функциям, может их как-то объединить в один из разделов FAQ книги или даже неким отдельным приложением в конце книги, чтоб не повторялись разные инструменты (файлы, ссылки) с одним и тем же набором подсказок и функций.

  25. Игорь Квентор 01.10.2008 18:51

    Окей! Спасибо за ссылочку. :) Книга уже пишется. В конце книги как раз будет FAQ, но думаю, что внесу туда только самые необходимые и легкие для понимания вещи. Перегружать книгу тоже не стоит.

  26. Илья 01.10.2008 18:54

    Да уж, пожалуйста, сделайте такой вариант, чтоб новички понять могли, а то к этой шпаргалке специальный толковый словарик нужен.

  27. Di 07.10.2008 19:57

    Отличный был цикл статей — очень помог))
    А ведь хотели когда-то бросить всё?) Хорошо что не бросили)))

  28. Игорь Квентор 07.10.2008 22:30

    Дааа… было дело :) Спасибо!

  29. Gremlin 12.10.2008 18:53

    > это просто я аську выбросил фтопку.
    )))) просто чаще чистить список и всё - просто мыло всё-таки реже просматриваеццо имхо…
    блин всё ломаю голову - статику или вп? хм, но всё же статику геморней переделывать - то есть, часто ньювсы добавлять, хотя можно php ленту новостей туда впихнуть… блин вариантов много, хз чё получиццо… а то домен и хост есть и простаиваиццо почём зря…. время всё никак нема….
    ещё рас СПАСИБО за Вашщу “Общественную” деятельность ))

  30. Игорь Квентор 13.10.2008 08:37

    :) Если одолели мучения душевные, ставьте Вордпресс и наслаждайтесь. Буде захочется прикрутить какой-то новый функционал - делается в пару шагов легко и просто.

  31. Viggo 13.10.2008 08:46

    Игорек, я шлю тебе письмо на мыло, а мне возвращается с ошибкой. Я здесь тебе вопрос задам, а ты мне потом скинь по контактам на моём сайте.

    Есть такой вопрос у меня - насколько ты силен в пхп?
    Всем известно, что длинные посты можно делить на страницы и урл принимает вид “название-поста.htm/2″ и далее.
    Существует ли такой механизм, чтобы разделять длинный пост на страницы, а урлы изменялись не прибавлением цифры через слэш, а добавлением цифры к названию поста (допустим через тире) вот такого вида “название-поста-2.htm”?
    Мне ответили на форуме Макса:
    “Да, но это очень заморочисто. Если php не владеете - забудьте.”
    http://forum.maxsite.org/viewtopic.php?id=5881

    Сможешь ли осилить такую задачу?

  32. Игорь Квентор 13.10.2008 15:56

    К сожалению они правы, это довольно заморочливо. В пхп я не силен, могу только использовать готовые фишки. Так а не проще ли вообще длинный пост заранее поделить на логические части и постить по-очереди? Как вот, например, я пишу свои циклы статей. Вполне сносно выходит.

  33. Рамиль 19.10.2008 15:18

    Такой вопрос. Необходимо отображать на странице 2 поста рядом друг с другом. Поясню, хочу слева текст на английском, а справа его перевод. Как думаете возможно ли такое в wp?

  34. Игорь Квентор 19.10.2008 18:49

    В принципе возможно все! :) Как вариант: в шаблонном файле CSS пишете 2 набора дополнительных правил. Скажем, .textru и .texteng. Соответственно у первого float: left, у правого float: right. Тут же задаете ширину обоих текстов, чтобы вписывались оба в контентную часть шаблона и никуда не вылезали. Затем пишете пост в режиме кода. Сначала текст на русском, затем ниже на английском. Оба текста берете в тэги div class=textru, div class=texteng (скобки и кавычки не привожу, думаю это понятно).
    Кроме того, есть плагин, который автоматом делает переводы на несколько языков. Криво конечно, но делает. Можно попробовать его настроить так, чтобы выводил второй текст в нужном месте. Но это будет довольно гиморно.

  35. Рамиль 22.10.2008 15:52

    Спасибо, получилось.

  36. Вася Ч Бранд 02.11.2008 13:18

    Привет Игорь
    А есть такие формы комментариев, в которые пользователь может вставлять картинки? Ответь плиз подробнее. Если есть, то подскажи где скачать.
    Спасибо

  37. Игорь Квентор 02.11.2008 15:54

    Привет, Василий.
    Про такой плагин не слышал. При желании можно добавить в коммент картинку обычным способом, используя html-тэги (если они разрешены автором). Например:
    <img src="http://www.websovet.com/wp-content/themes/websovet/images/booka-sm.gif" alt="Книга о верстке" />
    Добавит в коммент картинку книги о блочной верстке. Вот так:

    Книга о верстке

Трэкбеки

Оставить комментарий




Поиск

Рубрики

Архив



SMS.копилка

Пузомерки


PageRank





Blog Catalog

DMOZ

Каталог дизайнерских блогов