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

29.07
2008

Рубрики: WordPress |

Продолжим затачивать наш макет под шаблон для такой замечательной CMS как Вордпресс (кто заявит, что ВП не CMS — идет лесом). Итак, с шапкой мы разобрались, теперь возьмемся за «тушку». То есть, за непосредственно основную часть шаблона, где выводится контент. А выводится он практически одинаково как для главной страницы, так и для остальных и архива в том числе. Одинаково в смысле дизайна.

Если вы только взялись за изучение основ построения сайтов, то наверняка читали о том, что Главная страница чем-то отличается от внутренних. Так вот, на Вордпресс такого различения практически нет. Разница в текстовом содержимом, но не в дизайне. Поэтому в этой части я расскажу сразу о всех трех страницах файлах шаблона: index, page, archives.

Сначала несколько слов о верстке. «Донорский» шаблон (напомню, что он называется pool) практически один в один подходит для нашего макета. Смотрим: тот же голубой шрифт для заголовков статей, а под заголовком идет строчка с данными о дате и авторе, а так же ссылка на комментирование. Правда сам текст слишком светлый, и читать его не удобно. Сделаем несколько косметических исправлений:

Сначала несколько укрупним сам заголовок. Открываем лист стилей CSS и правим вот этот кусок:

#noticias h2, #noticias h2 a {
color: #0090DA;
font-size: 18px;
font-weight: normal;
margin: 50px 0 0 0;
padding: 0;
text-decoration: none;
}

Исправляем следующим образом:

#noticias h2, #noticias h2 a {
color: #0090DA;
font-size: 24px;
font-weight: normal;
margin: 20px 0 0 0;
padding: 0;
text-decoration: none;
}

То есть, размер шрифта был 18 пикселей, стал 24, а верхний отступ уменьшился с 50 до 20 пикселей. Цвет шрифта текста у нас был задан в тэге body. Вот таким #727070. Это слишком светлый серый цвет и на белом фоне он читается довольно плохо. Поэтому исправим его на #333 — темно-серый. Уже лучше. Однако теперь получилось, что текст статьи слишком прижат к строке с автором, датой и ссылкой на комменты. Чтобы так их не теснить, добавим к набору правил для абзаца отступ сверху. Скажем, в 15 пикселей:

#noticias p, #noticias ul, #noticias ol {
font-size: 13px;
line-height: 1.6em;
padding: 15px 0 0 0;
}

Прошу заметить попутно:

в этом наборе правила заданы одновременно как для абзацев, так и для обоих видов списков (ненумерованного и нумерованного). Такая запись является сокращенной и удобна, когда одинаковые правила требуется прописать для разных тэгов. Но в нашем случае, например, совершенно бестолково будут смотреться списки, у которых каждый пункт имеет отступ в 15 пикселей. Поэтому, если вы все таки будете использовать в статьях списки, то перепишите для них правила отдельно, без этого отступа.

Вот, в общем-то, и вся правка. Теперь немного поизучаем содержимое файла index.php и кое-где переведем на русский язык. Заголовок статьи (поста) обычно задан тэгами h2. Разбирать жуткую строку с пхп-шными кодами мы не будем. Исправим лишь вот этот кусочек:

title="Permanent Link to

на русское

title="Постоянная ссылка на

При этом не теряем кавычки!

Следом идет строка в тэгах small:

<small><?php the_time('F j, Y \o\n\ g:i a'); ?> | In <?php the_category(', ') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></small>

Тут остановимся чуть подробнее. Строчка:

<?php the_time('F j, Y \o\n\ g:i a'); ?>

задает дату и время написания статьи. Все эти буквы: F, j, Y, и т.п. являются кодировкой из мира PHP. Они универсальны. Используются в различных пхп-шных движках. Например, на форумах тоже. Если интересно, то можете ознакомиться более подробно с ними на официальной страничке сайта ru.php.net. Мы же немного подправим эту строку на:

<?php the_time('F j, Y \в\ g:i'); ?>

Посмотрите разницу и поймете где тут «собака порылась» (с).

Предлог In заменим на слово Рубрика и поставим двоеточие. Следующую строку в скобках — (’No Comments’, ‘1 Comment’, ‘% Comments’) перепишем таким образом:

(’Нет комментариев’, ‘1 комментарий’, ‘Комментариев (%)’)

Последняя часть — ‘Комментариев (%)’ — выведет на страничке слово Комментариев, а в скобках вместо знака процента будет показано количество комментов. Такая запись, имхо, самая логичная. Ибо в русском счислении склонение постоянно меняется и, например, «4 комментариев» звучит довольно бестолково. А в нашем варианте выходит вполне удобоваримо.

В следующей строке:

<?php the_content("Continue reading ".the_title('', '', false)."..."); ?>

Исправим “Continue reading ” на “Читать далее… “. Эта строчка появляется в конце текста в том случае, если вы при написании статьи специально ограничили количество выводимого на главную страницу текста специальным тэгом . Поставив этот тэг после какого-либо абзаца, вы тем самым обрежете текст в нужном вам месте.

Следующая запись показывает внизу количество страниц, если ваша статья слишком длинная и вы разбили ее постранично. Соответственно, слово Pages: меняем на слово Страниц:

С trackback_rdf мы не станем заморачиваться. Далее идет код подключения файла comments.php, о котором я расскажу в следующий раз. Еще далее, тэгами h2 оформлен заголовок «Not Found» и следом строка «Sorry, no posts matched your criteria». Эта часть появляется на странице результатов поиска, если вы воспользовались соответствующей формой и задали искать какое-то слово или предложение. Правим их тоже на русские: «Не найдено» и «Я таки дико извиняюсь, но шо вам тут неймется?»

Еще ниже выводятся две ссылки на предыдущие и последующие страницы. Соответственно исправляем текст на русский тоже.

В самом низу идет код подключения футера (он же подвал).

С переводом в файлах page.php и archives.php я думаю вы справитесь сами. Там нет ничего сложного.

Парочка замечаний:

1. Я специально не останавливаюсь на всех подробностях шаблона. Иначе было бы «многабукаф» и трудноусвояемый текст. Мы лишь перекладываем свой макет из Фотошопа на скелет существующего шаблона, только и всего. Описанных здесь шагов вполне достаточно, чтобы сотворить свой собственный индивидуальный шаблон для Вордпресса.
2. Все исправления в файлах шаблона (в том числе и в листе стилей CSS) делайте в кодировке utf-8. Если используете рекомендованный мной текстовый редактор PSPad, то в меню Формат установите галочку на соответствующем пункте. Иначе весь ваш русский язык будет отображаться в кракозябрах.

Ту би континуед!

Вебсовет

1 2 3 4 5 6 7 8 9

Digg it Bookmark it Stumble it add to technorati

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

  1. Илья 03.08.2008 06:57

    Замечательные статьи, просто находка для меня!
    У меня есть материалы для сайта, который делался по книге о блочной верстке (точнее с материалов форума - сайтик про свинок), а теперь я изучаю WP.
    Можно ли будет как-то перенести уже готовые части текста, центральный блок с рисунками, а также навигацию, на WP?
    С оформлением шапки написано очень понятно,а по тексту не пойму: то, что делалось в кодировке 1251 для переноса на WP надо как-то переделывать, или достаточно просто поменять кодировку в установках? Работаю в программе Dreamweaver-8 и Top Style Lite, а PSPad показался сложным.

  2. Илья 03.08.2008 07:44

    Позвольте еще вопрос:
    В процессе работы по подгонке, где должны лежать все файлы, с которыми мы работаем? Обычно проверка результата или через браузеры прямо из Dreamveaver, или через Denwer. А тут нужен WordPress?
    У меня на компьютере установлена более старая версия, чем на хостинге. Обязательно ли нужно иметь одинаковые версии? Иными словами, как проверяется то, что мы делаем?

  3. Игорь Квентор 03.08.2008 10:55

    Да, Илья, можно конечно перенести макет со статичного сайта на Вордпресс. Именно об этом я сейчас и пишу цикл статей.
    Кодировка для ВП одна единственная - utf-8. В Dream-е вы верстаете целиком готовый статичный сайт со всеми страницами. Для Вордпресса же мы делаем лишь оболочку, шаблон, в котором пока ничего еще нет. Поэтому даже если у вас в Dream-е сверстан целиком весь сайт со всеми статьями, то при использовании Вордпресса вам все равно придется все статьи писать заново через админскую движка.
    В процессе работы, если вы установили Денвер у себя на компьютере, то соответственно результаты работы проверяете при запущенном сервере через установленный Вордпресс. Движок ВП ставится в одну из папок установленного Денвера, а именно:
    C:\WebServers\home\localhost\www\папка-с-вордпресс

  4. Илья 03.08.2008 15:48

    Спасибо! А можно уточнить? Для статичного сайта я все делаю на локальном компьютере а потом выгружаю на сервер для всеобщего обозрения. Можно ли так же сделать со статьями которые будут размещены на WP? То есть собрать все, а потом выгрузить? Вы пишете: “Поэтому даже если у вас в Dream-е сверстан целиком весь сайт со всеми статьями, то при использовании Вордпресса вам все равно придется все статьи писать заново через админскую движка.” Но можно ли сделать путем копировать-вставить, или надо полностью набирать заново? Это с кодировкой связано?

  5. Игорь Квентор 03.08.2008 23:01

    Да, Илья, конечно же можно простым “копипастингом” перенести все статьи. Более того, вы можете и на локалке, на установленном Вордпрессе написать статьи, а потом всю базу данных перенести на сервер хостинга. Но тут возможны как раз проблемы с кодировкой. Проще прямо на хостинге заново скопировать и вставить все статьи, благо времени это займет немного. Если, конечно, у вас не 1000 с лишним статей :)

  6. Илья 08.08.2008 15:13

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

  7. Игорь Квентор 08.08.2008 17:24

    Хорошо, Илья! В следующем посте расскажу и об этом тоже :)

  8. Андрей 10.08.2008 13:19

    спасибо таким авторам которые помогают в создании блогов

Трэкбеки

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




Поиск

Рубрики

Архив



SMS.копилка

Пузомерки


PageRank





Blog Catalog

DMOZ

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