03
09
08

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

Рубрики: 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

rss Подпишитесь на RSS


Комментарии (75)

  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="Книга о верстке" />
    Добавит в коммент картинку книги о блочной верстке. Вот так:

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

  38. Taxidermyst 16.12.2008 00:07

    Здравствуйте Игорь. Прочитал ваш цикл статей. Огромное спасибо. Очень помогло в освоении вордпресса. Но вот у меня возник такой вопрос, на который мне никак не получается найти ответ. Мне нужно, чтобы на стартовой странице выводилась одна из статических страниц (напрмер “обо мне” или “Контакты”), а ниже собственно посты. Добрые люди подсказали что нужно сделать в индексной странице один цикл, который бы выводил бы одну из статических страниц, второй цикл, который бы выводил все посты. Но как это реализовать ума не приложу. В php я вообще 0. В кодексе покопался, и я так понял что нужно использовать , но организовать цикл никак не могу. Был бы очень очень признателен за какую либо помощь.

  39. Игорь Квентор 16.12.2008 00:16

    Вечер добрый! Чтобы не мудрить с циклами, можно поступить гораздо проще: до самого цикла (loop-а) разместить прямо в коде индексной страницы необходимую информацию. Оформить это обычными HTML тэгами. Тогда и со статичными страницами путаницы не будет никакой и ничего перенастраивать не понадобится.

  40. Taxidermyst 17.12.2008 02:07

    Большое спасибо за участие. Этот вариант я уже продумал (и хтмл пробовал и плагин специальный скачал, который может page вставлять вообще в любое место на сайте. НО! Это не подходит, т.к. идея моего шаблона такова, что есть несколько статичных страниц (все ссылки в меню именно на статичные сраницы), одна из которых весит под header`ом и изменяется в зависимости от выбранного пункта меню. При этом под страницей должны ВСЕГДА (из одной и той же категории) располагаться посты.
    ПОПРОБУЮ ПРОИЛЛЮСТРИРОВАТЬ

    HEADER

    Меню
    (все пункты ссылки на
    статичные страницы) ____________________
    СТАТИЧНАЯ СТРАНИЦА
    1.Маркетинг (например маркетинг)
    2.Фин и кред
    3.Право ________________
    СПИСОК РАБОТ
    (ОН ИЖЕ ПОСТЫ)

    Если использовать хтмл или плагин, то после выбора
    пункта меню статичная станица открывается, но без постов. А они должны быть “приклеены” к любой из выбранных статичных страниц.
    Пытаюсь решить эту проблему уже с месяц, и все ближе подхожу к выводу, что с помощью вордпресса реализовать мою идею не получится :(, хотя сама система мне очень понравилась.

  41. Taxidermyst 17.12.2008 02:09

    Прошу прощения, “рисунок” не удался.

  42. Игорь Квентор 17.12.2008 11:05

    Все верно. Это происходит потому, что для вывода главной страницы движок использует в качестве шаблона файл index.php (или home.php), а для вывода статичных страниц - page.php. Попробуйте из шаблона удалить этот page.php. Тогда движок будет использовать для статичных страниц файл index.php, в котором у вас будет прописана конструкция, указанная выше.

  43. Олег 23.12.2008 01:30

    Огромоное спсибо автору, перерыл чуть не весь инет,такого качества статей по-моему нет. Скажу честно-я “чайник”, но с Вашей помощью надеюсь одолеть науку ВП. Еща раз спасиба.

  44. Игорь Квентор 23.12.2008 11:53

    Олег, вэлкам! :) Будут вопросы - не стесняйтесь спрашивать. Чем смогу - помогу.

  45. Дмитрий 14.01.2009 23:29

    Игорь, спасибо за подробный труд. Всё получилось. Вот только запнулся на том как правый sidebar сделать левым. Кажется, что это проще пареной репы, но вот на этом забуксовал. Подскажете в каком файле редактировать последовательность блоков?

  46. Игорь Квентор 18.01.2009 20:29

    Дмитрий, редактировать в данном случае нужно файл стилей CSS. Там у центрального блока и сайдбара задано обтекание, соответственно:

    #noticias {
    float: left;
    margin: 0;
    padding: 0 0 20px 20px;
    width: 550px;
    }

    #sidebar {
    float: right;
    font-size: 11px;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    width: 170px;
    }

    Просто нужно поменять местами “флоаты”(float) у этих двух наборов правил.

  47. Дмитрий 27.01.2009 13:16

    Поскольку думал, что нужно срочно - пришлось самому догадаться. :) Но всё равно спасибо - убедился, что принял правильное решение и не напортачил в коде.
    Раз вы всё-таки заглядываете в эту тему, может подскажете ещё один вопрос на который я пока не нашел решения. Вот здесь: http://hot-design.grodno.ru/ (ссылку можете убрать) временно выложен сайт-портфолио, который я мастерю на основе темы Pool и ваших уроков :). Продвинулся далеко, но застрял на мелочи. Рубрики слева (сайдбар) - как сделать чтобы при переходе не другую рубрику она меняла цвет. Это кстати, проблема большинства шаблонов вордпресс - индикация рубрик не меняется при переходе и часто не понятно в какой из рубрик ты находишься.
    Вот здесь: http://interblog.org я нашел реализованным такой эффект. Полагаю, что это тоже всё должно редактироваться в style.css. Но где? :(

  48. Игорь Квентор 27.01.2009 15:45

    Дмитрий, это не сложно. ВП автоматом добавляет к текущей рубрике класс с именем .current-cat
    Поэтому достаточно прописать для этого класса в CSS соответствующие правила. например, в указанном вами сайте это выглядит так:

    #sidebar .current_page_item a,
    #sidebar .current-cat a {
    font-weight:bold;
    color:#FF3C00;
    }

  49. Дмитрий 27.01.2009 19:14

    Спасибо огромное!
    Уже реализовал. Кстати, оказалось, что для смены подчеркивания рубрик нужно также в этом классе прописывать. Что-то вроде этого:
    #sidebar .current_page_item a,
    #sidebar .current-cat a {
    font-weight:bold;
    color:#f15822;
    text-decoration: underline;
    }
    По сути все желаемые характеристики шрифта по новой.

  50. Макс 29.01.2009 21:42

    Товарищь Игорь, подскажите:
    1.<code></code> не работает, выдает ошибку!
    2. Как вставить в комментарии аватар пользователя… и главное, можно ли сделать так, чтобы зарегистрированый пользователь мог выбирать себе аватар?

  51. Игорь Квентор 29.01.2009 23:12

    Камрад Макс, подсказываю:
    1. Ошибок может быть миллион. Что именно выдает? Какую ошибку?
    2. Для вставки аватара, а еще правильнее - граватара, есть специальный плагин Gravatars2. Но начиная с версии ВП 2.5 эта функция встроена. Подробнее и с примерами можно почитать в Кодексе

  52. Макс 30.01.2009 12:13

    1. Я думаю Вы понили, что я хочу вставить, приведенный Вами код для подписки на комменты, так вот я его вставляю сразу после кнопки “Отправить” и мне выдает:
    Fatal error: Call to undefined function show_subscription_checkbox() in C:\Program Files\VertrigoServ\www\wordpress\wp-content\themes\pool\comments.php on line 67

    2. Я в английском не силен(вообще!), но понять как вставить аватар на страницу, я еще пойму, а вот как пользователь его будет менять не ясно, ведь в ВП нету никакого профиля или анкеты пользователя или я ошибаюсь)

  53. Игорь Квентор 30.01.2009 12:41

    Теперь понятно о чем речь. Во-первых, код нужно вынести за пределы формы, а не ставить после кнопки “Отправить”. Вот так:
    </form>
    <?php show_subscription_checkbox(); ?>

    Во-вторых, возможно вы еще не активировали сам плагин get-recent-comments.

    Что касается автатар, то попробуйте в Гугле поискать по слову “граватар”. Менять, как впрочем и создавать, картинки нужно на специальном сервисе gravatar.com, где необходимо зарегистрироваться. Картинка будет подставляться в комментарии из этого сервиса, ориентируясь на е-мейл комментирующего. За каждым зарегистрированным е-мейлом закреплена одна аватара.

  54. Макс 30.01.2009 12:48

    Спасибо, теперь понил…

    Еще есть вопрос, а как реализовать это:
    Антиспам. Решите: 6 + 9

  55. Игорь Квентор 30.01.2009 18:12

    Это выводит плагин math-comment-spam-protection. О нем я уже рассказывал здесь

  56. Viggo 03.02.2009 08:55

    Игорёк, такой вопрос: Какой шаблон лучше взять за основу, чтобы переделать его под себя? Понятно, что можно любой переделать или даже с нуля написать. Но, к сожалению, я не такой крутой мастер, да и зачем изобретать велосипед, когда его уже изобрели.

    Ты повидал множество шаблонов. С какого лучше начать, чтобы он был: простой и незаковыристый код, дружествен к сео, содержал все необходимые стандартные страницы, две колонки? Например, подойдёт ли дефолтная тема вордпресса? Один товарищ именно её и рекомендует кроить, а в одной студии мне ответили, что она хоть и простая, но жутко неудобная. Лично мне нравится autumn-concept (по цветовой схеме), но там до безобразия жуткий кучерявый код. Симпатичны шаблоны coffeebreak и mistylook.

    В любом случае, придётся делять винегрет. А на “писать с нуля” у меня не хватит знаний и способностей. Хотя может есть какие-нибудь общие конкструкции обязательные для всех шаблонов, но я с этим просто не знаком.

  57. Игорь Квентор 04.02.2009 14:13

    Володь, я для себя в качестве такого шаблона взял blueblog-10. Или, например, тема pool из цикла статей про 2-х колоночный шаблон. Там тоже все достаточно просто и прозрачно.
    Дефольтная тема довольно мудреная. Особенно ее файл function. Она специально заточена под возможные глюки с темами, чтобы при случае запускать сайт в режиме по-умолчанию.

  58. Viggo 04.02.2009 22:40

    Спасибо, теперь хоть дефолтную тему трогать не буду. Пока думаю над макетом и затрудняюсь с выбором размеров для картинки в шапке. Текущая 900х300 никак не влазит в пропорции 960Grid. А хочется сделать максимально широкую картинку. Есть красивые фотки, но проблема в том, что часто красивые природные пейзажи сняты панорамно - снимки длинные и узкие, а вот фото городских пейзажей короткие. Вот я и разрываюсь - либо под панарамные, либо под городские. К тому же хочу ротатор картинок в шапке сделать, чтоб там крутились разные фотки (природа, город). Даже по текущему размеру панорамные придётся резать. А всегда хочется найти золотую середину. Стоит ли делать 900х350/400, 880/800х300/350/400? Конечно, 20 пикселей погоды не делают, может корректней (по grid-правилам каким-нибудь) ширину сделать 880, но, если это не критично, то чем шире, тем лучше.

    Вероятно, здесь не может быть точного ответа (это на вкус владельца блога), но может быть, Игорёк, направишь в нужное русло размышлений, ведь сайт не из одной шапки (зато она на самом видном месте и для меня - это красиво и ширину всему контенту задаёт).

  59. Игорь Квентор 05.02.2009 01:24

    Я думаю, что лучше начать плясать как раз от контента. Картинки всегда можно порезать и поменять в размерах. И лучше подгонять их под все остальное, нежели наоборот. Попробуй набросать текст и содержимое сайдбара. Возможно в последнем появятся баннеры. Значит нужно и под них место резервировать. А что касаемо грида960 - так это лишь рекомендации. При желании всегда можно отступить от них и сделать чуть шире или чуть уже. К примеру, 3-х колоночные шаблоны все больше тяготеют к 1000 пиксельной ширине.

  60. Viggo 05.02.2009 10:23

    Появился ещё один вопрос. Обратимся опять к Гриду960. Там на демо-странице отображены столбцы разного цвета с пиксельными рамками. Я так понимаю, что они задают размеры для элементов шаблона (страницы)? Например, 40 пикселей свободный край, потом 20 пикселей для отступа контента, 220 пикселей ширина сайдбара, 20 пикселей отступ от границы между контентом и сайдбаром… и т.д. Или всёже можно кроить как хочешь - 235 пикселей сайдбар, 10 до контента и далее?

    Понятно, что можно как угодно, но ведь и рекомендации для чего-то существуют. Они определяют просто красоту восприятия пропорционального расположения элементов на странице (чтоб не размещали тесно контент к сайдбару, чтоб не лепили картинки вплотную к краям, например) или есть некие стандарты кодеров и верстальщиков?

  61. Макс 05.02.2009 12:09

    Здраствуйте, Игорь!
    Прошел по все Ваши шагам по переделки шаблона, и получилось на мой вгляд не плохо, вот взляните:
    http://films-on.ru
    Но если смотреть сайт с IE 7.0 появляеться нижний скролл, с чем может быть связанно, через оперу и лисичку такого нет. Если у вас есть ИЕ 7.0 глянь с него мой сайт, жду от Вас коснтруктивных советов, а я в свою очередь могу предоставить фрагменты кода, если нужно будет!

  62. Макс 05.02.2009 12:11

    Простите за опечатки, пишу с сабноута, кнопки очень маленькие))) А гостям как известно удалять и редактировать комменты нельзя!

  63. Игорь Квентор 05.02.2009 13:31

    Макс, у меня IE-6 показывает все нормально. Правда в IE баннер о создании баннеров лежит внизу экрана, а в Опере наоборот - в самом верху, закрывая кнопки навигации. Возможно в IE-7 траблы из-за него.

  64. Игорь Квентор 05.02.2009 13:42

    Володь, это скорее не к верстальщикам вопрос, а к дизигнерам :) Я думаю, сетка - это лишь шаблон, который каждый волен использовать по своему усмотрению. Все-таки сайт - это не картина и не художественная фотография, где приветствуются золотое сечение и иже с ним. Сейчас в сайтостроении гораздо бОльший акцент делается на удобстве пользования. Например, нет смысла делать 2-х колоночный шаблон шириной в 960 пикселей, если сайдбар будет всего в 150-200px. На широком поле для контента его просто неудобно будет читать. Комфортное восприятие столбца текста ограничивается максимум 10-12 словами.
    То есть, имеет смысл делать разметку так, чтобы самому было на своем же сайте удобно. Пожалуй, это первое, от чего нужно отталкиваться.

  65. Viggo 05.02.2009 21:01

    Игорёк, спасибо за советы. Но 3-х колоночные шаблоны меня напрягают жутко: необходимо время, чтобы соориентироваться в навигации, где что лежит и как туда попасть, поэтому 2 колонки самый раз. Да мне и блоги двухколоночные больше нравятся. К тому же я тут прикинул и оказалось, что у меня даже для одной колонки мало блоков: рубрики, облако тэгов, блогролл, возможно баннеры или ссылки рекламные, а также только на главной странице блок с фоткой автора и короткой подписью. Блоки похожих статей и последних комментариев, возможно, перенесу вниз контента перед футером. Но даже, если комменты в сайдбар перенести (как сейчас), то всёравно малова-то блоков.

    Итак, к чему я это. Меня смущает, что сайдбар будет содержать так мало блоков (рубрики, облако тэгов, блогролл, ссылки). По примеру других сайтов думается, что сайдбар должен быть насыщен информацией. У разных специалистов проблем нет, там такая куча всего, а я простой пользователь и блог мой персональный. Размещаю инфу больше для себя, поэтому не могу предложить достаточно большой разнообразной информации.

    Хотя соглашусь и с тем, что излишне перегружать сайдбар тоже не следует. Пусть там будет мало блоков. Если это нормально, это даже лучше. В последствии можно всегда добавить, если понадобится что-нибудь.

  66. Игорь Квентор 06.02.2009 00:01

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

  67. Viggo 18.02.2009 17:12

    Такой вопрос:
    В предполагаемом (который мне хотелось бы сделать) шаблоне некоторые элементы не совпадают по местоположению с темой, предлагаемой к взятию за основу (из статьи). Например, меню страниц под шапкой-картинкой я хотел бы поднять над картинкой-шапкой, над ней же и название блога, потом сама картинка-шапка и уже под ней идут посты и сайдбар.
    Стоит ли искать подобный шаблон или можно обойтись и этим? (согласен, что можно в любом шаблоне переписать код, но всё же)

  68. Игорь Квентор 18.02.2009 21:12

    Да, конечно можно! Тем и хороша блочная верстка, что можно смело переставлять блоки местами. В данном случае ничто не мешает перенести блок с меню над шапкой. И название из шапки можно смело вытаскивать и размещать в любом месте. Это как в любом конструкторе: детали можно переставлять местами, но сама суть деталей от этого не меняется.

  69. Rulaf 20.02.2009 00:49

    Игорь, подскажи по шаблону blueblog-10 :)

    Хотел поставить плагин related post, который нашел на Хабре, но я теперь не разберусь куда вставить в код строку:

    В теме blueblog-10 нету single.php. Куда в код вставить? :)

    И еще одно западло в теме. Убираются лишние пустые строки. Например: вставляю пару пустых строк после картинки или видео. После публикации, пустые строки удаляются.

  70. Rulaf 20.02.2009 00:51

    код пхп не показался в предыдущем коменте :)

    не разберусь куда в коде вставить строку:

    php comments_template();

    чтобы появились похожие посты

  71. Игорь Квентор 20.02.2009 08:35

    Rulaf, а точно эта строка? Ведь php comments_template(); на самом деле подключает к станице портянку с комментариями, а никак не плагин похожих записей.

    Если в шаблоне нет файла single.php, то вместо него используется файл index.php. Его и нужно править.

  72. Rulaf 20.02.2009 11:03

    Ошибся :) Строка:
    php related_posts()

    Я правил index.php, но тогда похожие посты видны на главной странице, а надо, чтобы были на внутренней странице.

  73. Игорь Квентор 20.02.2009 11:41

    Ну, в принципе оно так и задумано, чтобы и там и там отражалось. Но если нужно только на внутренних, то создай дополнительный файл идентичный index.php, и назови его single.php. Только не забудь из файла index.php удалить строку:
    <?php comments_template(); // Get wp-comments.php template ?>
    Пусть она останется лишь в новом файле single.php

  74. Алексей 09.03.2009 15:55

    Все сделал как написано в дримвивере но пишет кракозябры после изменения.кодировку проверял

    | In |

  75. Chupik 05.01.2010 14:19

    Игорь, спасибо за цикл статей! Они направили меня на правильный путь.
    Только я делал немного другим путём - всё версталось с нуля. :)

Трэкбеки

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