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

29.07
2008

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

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

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

Читать полностью

Создание 2-х колоночного шаблона для Вордпресс. Часть 4. Шапка (продолжение)

21.07
2008

Рубрики: WordPress | Комментарии (6)

Продолжим оформлять шапку нашего шаблона для Вордпресс (см. ранее части 1, 2, 3).
В этой части будет много кода, так что будьте внимательнее.

Откроем файл header.php. Сразу за тегом <body> начинается основной блок по имени content. Если посмотреть внимательно, то внизу этого файла мы не найдем закрывающего тэга </div> для него (кому интересно, можете пересчитать последовательно открывающие и закрывающие «дивы»). Он появится много позднее, в файле footer.php. Таким образом, весь шаблон состоит из отдельных деталей-файлов. Это очень удобно, однако можно потеряться в «дивах». Так что бдите!

Следом за открытым тэгом блока content идет блок header вот с такой прилепленной конструкцией:

<div id="header" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;">

(напомню, что мы разбираем готовый шаблон pool и пытаемся переделать его под наш макет)

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

<div id="header">

Читать полностью

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

20.07
2008

Рубрики: WordPress | Комментарии (6)

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

Если внимательно посмотреть на макет, то станет очевидным, что конкретно рисованных объектов там не так уж и много. У нас это: логотип с перекрещенными кистью и карандашом, значок подписки на RSS-фид и фон под окно поиска. То есть, всего три изображения. Все остальное на самом деле можно оформить в листе стилей CSS. Таким образом, нам нет необходимости «пилить» макет при помощи инструмента Slice Tool («ломтики»). Достаточно объединить все слои макета и затем при помощи прямоугольного выделения Rectangular Marquee Tool выделить поочередно все три изображения и скопировать каждый в отдельный слой. После этого можно просто выключать остальные слои и сохранять по одному каждый слой с необходимым изображением.

Особо с размерами не заморачивайтесь. Не суть важно, сколько лишних пикселей фона будет по краям каждой картинки. Макет у нас довольно просторный, поэтому нет смысла вымерять все до последнего пикселя.

Из нашего макета получим вот такие три картинки, которые назовем logo.gif, rss-feed.gif, search-bg.gif:

Читать полностью

Стр. 6 из 19« 1...«3 4 567 8 9 »...Посл. »

Теперь вы можете скачать эту книгу в формате PDF (540кБ в архиве ZIP). Как всегда - совершенно бесплатно! :) Книга расширена Полезняшками и Приложением, а также исправлены некоторые неточности и более подробно описаны некоторые фишки.

Новая книга о создании 3-х колоночного шаблона для Вордпресс - от начального рисунка и до последнего винтика. Скачать вы ее можете так же совершенно бесплатно. Книга в формате PDF.
В ZIP-архиве (895 Кб) вместе с ней лежит полностью готовый шаблон для Wordpress.
Enjoy!