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

Создание 2-х колоночного шаблона WordPress

Продолжим затачивать наш макет под шаблон для такой замечательной CMS как WordPress (кто заявит, что ВП не 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, то в меню Формат установите галочку на соответствующем пункте. Иначе весь ваш русский язык будет отображаться в кракозябрах.

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

Создание 2-х колоночного шаблона для Вордпресс. Часть 1. Рисуем макет
Создание 2-х колоночного шаблона для Вордпресс. Часть 2. Состав шаблона
Создание 2-х колоночного шаблона для Вордпресс. Часть 3. Шапка
Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 5. Контент
Создание 2-х колоночного шаблона для Вордпресс. Часть 6. Контент (продолжение)
Создание 2-х колоночного шаблона для Вордпресс. Часть 7. Сайдбар (Навигация)
Создание 2-х колоночного шаблона для Вордпресс. Часть 8. Подвал
Создание 2-х колоночного шаблона для Вордпресс. Часть 9. Комментарии

29.07.2008

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

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