Чудо торти by julia Hevchuk

Игорь Квентор

Создание 3-х колоночного шаблона для Вордпресс (Wordpress)

Оглавление Благодарности ........................................................................................................... 3 Введение .................................................................................................................... 4 Рисуем макет.............................................................................................................. 6 Состав шаблона....................................................................................................... 14 Шапка (header.php) .................................................................................................. 18 Контент (файл home.php) ........................................................................................ 29 Сайдбары (файлы l_sidebar.php и r_sidebar.php) .................................................. 36 Подвал (файл footer.php)......................................................................................... 45 Комментарии (файл comments.php) ....................................................................... 48 Остальные страницы (файлы index.php, 404.php, page.php, search.php) ............ 57 FAQ ........................................................................................................................... 61

Благодарности От всего сердца благодарю всех тех людей, кто своими вопросами, пожеланиями и советами помогал мне в написании данной книги. Особая благодарность моей музе — Ольге Травинке (http://www.nicedom.com/), ибо без нее вряд ли что получилось бы вообще. Кстати, 3D-шная обложка книги — ее ручков дело. Спасибо, Оль! :-* Огромная благодарность Илье, Светлане (http://www.vseuch.ru) и Viggo (http://viggo.ru/) за активное участие и обсуждение плана книги. Так же хочу выразить мега респект читателям моего блога Вебсовет (http://www.websovet.com/) и читателям данной книги. Надеюсь, кому-нибудь она окажется полезной. Буду рад услышать отзывы и особенно вопросы, которые со временем пополнят FAQ в конце книги. Пишите в электропочту kventori@yandex.ru Enjoy! ☺

Введение Данная книга основана на цикле статей о создании 2-колоночного шаблона (темы) для CMS Wordpress (http://wordpress.org/), опубликованных мною на сайте Вебсовет (http://www.websovet.com/). Здесь будет подробно разобрано создание уже 3-х колоночного шаблона, начиная с разработки макета в Фотошоп® и заканчивая разбором полетов в, так называемом, FAQ-е. Книга рассчитана на читателей, уже знакомых с такими понятиями как: блочная верстка, HTML, лист стилей CSS, правила CSS, id, class и т.п. Если вам все это в диковинку, то предварительно рекомендую изучить книгу «Блочная верстка веб-сайта», которую вы сможете скачать там же на Вебсовете. Но вначале несколько слов о том, что такое CMS вообще и Wordpress (Вордпресс или ВП) в частности. CMS (Content-Management-System) — Система Управления Контентом. Это PHP-скрипт, или как его еще называют — движок, который позволяет очень быстро развернуть рабочий сайт практически без знания основ HTML, верстки и вообще всего того, из чего состоит внутреннее устройство сайта. Задумано это благое дело было для облегчения жизни как самих веб-мастеров, так и огромной массы пользователей, которым недосуг разбираться в хитросплетении кода, а нужно чтобы установил раз — и все заработало, как телевизор из магазина. В самом общем виде любая CMS состоит из двух функциональных частей: непосредственно сам сайт, который является видимым любому посетителю, и административная часть, видимая только рулевому (администратору, автору, редактору и т.п.). Это то, что касается отображения на экране монитора. Набор файлов системы также разделяется на рабочие, административные и шаблонные. Удобство системы в том, что не задевая содержимого (контента) уже работающего сайта, можно легко менять внешний облик путем замены шаблонов. Причем устроено все так, что добавление нового шаблона происходит очень просто, буквально в один клик мыши. Всевозможных CMS на сегодняшний момент существует уже довольно много. Принцип работы у них схож. Любая из систем позволяет из административной части легко пополнять сайт новыми текстами, изображениями, мультимедийными файлами, в общем всем тем, из чего состоит современный сайт. Почему именно Вордпресс? Как известно, любой кулик хвалит собственное болото и по сути он прав. Мне нравится Вордпресс. Это очень доступная и интуитивно понятная система, на которой можно построить вполне полноценный сайт, хотя и находятся противники, утверждающие, что Вордпресс вовсе даже и не CMS, а так, что-то сильно облегченное и несерьезное. Возражать не стану, каждому — свое. Однако хочу заметить, что для Вордпресса существует уже не одна сотня плагинов (расширений), позволяющих увеличить функционал движка, и работают эти плагины зачастую не в пример лучше схожих блоков, встроенных изначально в других системах. О простоте установки и настройки Вордпресса и говорить не приходится. Хочу сразу предостеречь: не путайте скрипт Вордпресса с одноименным сервисом бесплатных блогов Wordpress.com (http://www.wordpress.com/). На сервисе вы можете зарегистрировать аккаунт (впоследствии он вам все равно пригодится, если пожелаете создать отдельный блог) и получить страничку вида: 4

marusyashkvarkina.wordpress.com. Скрипт же можно скачать с Wordpress.org (http://wordpress.org/), затем залить его на платный хостинг и получить свой собственный сайт вида: marusyashkvarkina.com. Разница, думаю, очевидна. На своем собственном «островке» вы можете творить что угодно и какими угодно способами, выбирать не из двух десятков, а из нескольких тысяч готовых шаблонов, а при желании создать и свой собственный. Чем мы с вами как раз и займемся на страницах данной книги. Наверное, вы обратили внимание, что я употребляю то слово «сайт», то «блог». На самом деле большой разницы между этими понятиями уже нет. Когда-то блог был прерогативой журнально-настроенного товарища и выглядел довольно поспартански. Теперь же можно любой блог превратить чуть ли не в портал, используя все те же плагины. Так что оба термина вполне уместны. Есть даже такие сайты, которые собраны на Вордпресс, а в главном меню у них есть пункт «Блог», который может вести на другой, установленный на поддомене Вордпресс, где автор ведет небольшие записи-заметки, используя его как записную книжку. Что в этой книге будет, а чего не будет совсем? Будет. Как нарисовать макет в Фотошоп®? Как нарисованное порезать на отдельные изображения? Куда все это положить? Как привязать все это к файлам шаблона? Как выбирать размеры блоков, чтобы они не расползались и не уплывали один под другой? Что такое «шапка» и на что ее надеть? Что такое контент и с чем его едят? Что такое сайдбар? Что такое два сайдбара? Как запихнуть в сайдбар три десятка баннеров, дюжину кнопок-счетчиков и фото любимой бабушки? Как добавить облако тэгов? Что такое подвал и нужно ли в него лазать? Как оформить комментарии? Как защититься от спамеров? То есть, кроме чисто творческой задачи — создания собственного шаблона для Вордпресс, мы разберем также и тонкую настройку файлов шаблона и поговорим немного о необходимых для нормальной работы плагинах. Не будет. Как установить Вордпресс? Что такое база данных? Как зарегистрировать домен? Как купить хостинг? Как заливать на хостинг файлы? Как активировать плагины? Что такое вообще этот чертов плагин? А кормить будут? А как быстро заработать на этом денег? И еще, как быстро вылезти в топ всех поисковиков? Как пригнать на сайт сто тысяч посетителей за пол часа? и т.п. В общем, понятно. Подразумевается, что читатель уже в общих чертах знаком с системой Вордпресс и знает основы веб-мастеринга, такие как: домены, хостинг, фтп, и пр. Если же вы совсем новичок, но очень хочется, милости прошу на мой блог Вебсовет (http://www.websovet.com/). Там есть цикл статей под общим названием Ипонамат (http://www.websovet.com/category/delaem-dengi), где как раз все растолковано с самого начала. В конце книги, как я уже упоминал, будет небольшой (а может и большой, все в процессе) FAQ, в котором я поделюсь полезными советами и наработками, а так же ответами на вопросы, которые касаются данной темы и которые довольно часто возникают в комментариях и письмах читателей моего блога Вебсовет. Книга распространяется бесплатно! И если вы приобрели ее за деньги у бесчестного барыги, то смело требуйте свои кровные назад. Можете даже сослаться на сайт автора (http://www.websovet.com/), где ясно написано, что данная книга бесплатна. 5

Рисуем макет С чего начать? С конкретики. Макет не рисуется просто так, от фонаря, лишь бы было круто или просто красиво. Всегда есть четкая задача и точка старта. Это может быть, например, имя домена, или уже имеющийся лого компании (если малюете шаблон для какой-нибудь инет-лавки), или общая идея блога. Вот от них и следует отталкиваться. Для своего примера я придумал не какой-то гипотетический блог, а конкретную тему, а именно: обзор кульных креативных идей, воплощенных в различных предметах. Это могут быть как крутые и стильные девайсы: мебель, техника, изображения, фотографии, так и те же шаблоны Вордпресс. Следом появилось название: ice pepper. В этом, противоречивом на первый взгляд, названии есть что-то цепляющее. Далее я зарегистрировал одноименный домен icepepper.net и уже после этого только появилась образная идея, каким этот шаблон должен быть. Это, конечно же, не догма. Каждый волен творить по собственному сценарию, но все же придерживайтесь конкретики, а не абы как. Прежде, чем открывать замечательную программу Фотошоп®, я настоятельно рекомендую взять листок бумаги А4 и обычной шариковой ручкой набросать хотя бы примерный план того, что потом превратится в макет. Пусть даже вы не изобразите ничего выдающегося. Суть не в этом. Когда вы сделаете бумажный набросок, то потом вам будет легче начать рисовать в Фотошопе®. Исчезнет так называемая "боязнь белого листа". Для своего проекта я сделал вот такой простенький рисунок:

Поясню вкратце, что тут есть. Во-первых, ширина макета 960 пикселей. Выбрана она неслучайно. Есть уже устоявшиеся пропорции, с которыми я очень рекомендую ознакомиться на сайте 960 Grid System (http://960.gs/) и скачать себе PDF файл с примерами разметок (всего 180 кБ). В двух словах: ширина блога должна выбираться исходя из следующих размеров — 960, 880, 800, 720 пикселей (меньше нет смысла). Первые два подходят для 3-колоночной верстки, вторые два — для 2-колоночной. Во-вторых, в небольшой по высоте шапке я разместил лого, название блога, ниже описание и справа — список страниц в столбик. Рисуя шапку, как впрочем и все остальное, сразу прикидывайте как вы все это богатство будете верстать. Потому что можно намалевать такое, что потом придется долго ломать голову как все это правильно уложить, да чтобы еще во всех браузерах показывало одинаково, а не задом наперед. К примеру, в нашем рисунке можно в шапке сразу выделить три области: лого, заголовок с описанием, список страниц. То есть уже можно прикинуть, что будет один общий блок с идентификатором #header, в котором будут вложены заголовок первого уровня h1 и три других блока: .logo .description #menu В-третьих, ширина сайдбаров. Да, именно так! Я рекомендую начать с них, а не с основного содержимого (контента) по той простой причине, что здесь кроме навигации будут всевозможные баннеры, кнопки, окно поиска и пр. Даже если вы не собираетесь сейчас цеплять какие-либо баннеры и вообще не желаете иметь с ними ничего общего, то не факт, что в будущем вам не захочется это сделать. А потому нужно заранее озаботиться местом под них. Существуют стандартные размеры баннеров. В сайдбар обычно помещают небольшие, 125х125 пикселей или 100х100. Я выбрал второй размерчик и задал ширину левого сайдбара в 210 пикселей, чтобы можно было поместить рядом 2 баннера 100х100. Ну и плюс 10 пикселей запас. Кроме того, размещение блоков в сайдбарах тоже отнюдь не случайно. В левом будут свежие посты, свежие же комментарии и облако тэгов. В правом — окно поиска, рубрики (категории), архив и плюс какие-нибудь пузомерки-счетчики. Почему именно так? Заголовки постов, выдержки из комментов и облако тэгов — сами по себе довольно объемные объекты. А наименования рубрик, года или месяцы из архива и всякие счетчики обычно небольшие по ширине и занимают немного места. Поэтому под правый сайдбар я выделил всего 160 пикселей по ширине. В результате под основное содержимое у нас осталось 590 пикселей — вполне достаточная ширина, чтобы разместить приличного размера фотографии и тексты. В-четвертых, подвал или иначе — футер (footer). Обычно его делают во всю ширину шаблона. На вкус и цвет, как говорится, волк свинье не товарищ. Я сделал подвал лишь номинально, по ширине блока с контентом, и разместил там ссылку на домен, плюс копирайты и плюс ссылочку на дизайнера, то есть, на себя же любимого ☺ Правилом хорошего тона считается дублирование в подвале пунктов главного меню. Но это на ваше усмотрение.

Как видим — ничего сложного. Однако уже есть на что опереться. Да, кстати, шаблон я изначально решил делать на английском языке. Просто потому, что название ice pepper blog смотрится и звучит лучше, нежели Блог Ледяного Перца. Ну и, соответственно, раз заголовок на английском, то и все остальное нет смысла писать по-русски, дабы не выглядело "наполовину-переведеннойбуржуйской-темой". Однако для лучшего понимания темы, в книге я некоторые участки кода буду писать с русскоязычными вставками. Думаю, разберетесь, что к чему ☺ Открываем Фотошоп® ! Ну а теперь самое время открыть программу Фотошоп® и таки начать творить! У меня получился вот такой макетик (уменьшено до 600 px по ширине):

Создаем новый документ размерами 960х800 пикселей с белым фоном. Если у вас до сих пор еще не включено отображение линеек в Фотошоп®, то рекомендую сделать это немедля: View – Rulers (установить флажок). В настройках линеек нужно выставить пикселы: Edit – Preferences – Units & Rulers в окошке Rulers выбрать слово pixels. Теперь у вас в рабочем окне программы сверху и слева появились линейки с делениями в пикселах. Заметьте, что верхний левый угол документа расположен точно напротив нулевых отметок линеек:

Теперь наводим мышку на левую вертикальную линейку, нажимаем левую клавишу и «вытягиваем» тонкую цветную вертикальную полоску, перемещая ее на наш документ. При этом смотрим, чтобы эта полоска на верхней горизонтальной линейке совместилась с отметкой в 590 пикселей. Готово! Одну линейку мы установили. Точно так же поступаем и с другими (этих полосок из линеек можно вытянуть до бесконечности много).

Что у нас в результате должно получиться? Если смотреть на макет слева направо, то разметка должна быть такая: 590px, 210px, 160px. Что касается размеров по высоте, то тут все на ваш собственный вкус. Шапка может быть как 100 пикселей по высоте, так и все 300. Подвал тоже. Руководствуйтесь здравым смыслом и таким соображением: шапка — это «лицо» блога, поэтому должна всетаки быть заметнее, нежели подвал. Хотя возможно вы захотите сделать все наоборот. Дерзайте! Я намеренно не стану рассказывать во всех подробностях о творческой стороне работы в программе Фотошоп®, полагая, что читатель уже знаком с основными инструментами этого замечательного редактора и умеет рисовать простейшие фигуры. Иначе моя книга превратилась бы в толстый фолиант и далеко ушла бы от основной темы. Ваше внимание я хочу заострить на том, как порезать готовый макет на отдельные картинки, ибо как раз об этом чаще всего и возникают вопросы. Как была нарисована шапка в нашем макете? Для начала я просто перелопатил кучу сохраненных файлов с классными дизайнами буржуйских сайтов и нашел один очень подходящий градиент в темносиних тонах. Я запустил маленькую утилитку Pixie (http://www.nattyware.com), которой очень удобно находить код цвета просто нацелив указатель мыши на 9

любую точку понравившегося рисунка. Так я определил два нужных оттенка для будущего градиента в шапке: #2D3F49 и #15191C. Затем я выставил эти два цвета в палитре Фотошоп®, включил инструмент Gradient Tool, установил в нем режим Radial Gradient и провел мышкой от центра шапки к правому краю. Получился своеобразный эффект подсветки центра шапки, а края как бы ушли в тень. Затем на другом слое я обычной шейповой фигурой (Custom Shape Tool) нарисовал ярко-синий перчик, рядом сделал надпись из пары слов: ice и pepper, потом объединил все слои кроме фона и также затенил получившееся лого градиентом. Заголовок и описание набраны обычным шрифтом Arial, хотя буквы были сдвинуты ближе на -50. Список страниц справа был выделен, и на новом слое также залит светлым градиентом из нескольких пастельных цветов. Как потом реализовать эти цвета при верстке я расскажу позднее. Затем я выключил отображение слоев с логотипом, заголовком, описанием и списком страниц, оставив только фон. Если кто не помнит как выключить слой, подсказываю: в панели слоев Layers есть иконка глаза Кликнув по ней, мы данный слой выключаем. Соответственно, изображение данного слоя становится невидимым. Что нам и требуется. Далее при помощи инструмента Crop Tool мы выделяем всю шапку целиком, нажимаем клавишу Enter и получаем фон для шапки. Сохраняем его с именем bgheader в папку с именем images. Эта папка потом будет включена в состав шаблона. Важно! Имена изображений пишите английские и без пробелов! Правильно: bg-header, bg_header, bgheader. Неправильно: bg header, бг-хедер. После выполнения данной процедуры вернитесь в панели History на шаг назад, чтобы вернуть состояние макета к виду "до обрезания". Лирическое отступление: Рекомендую всем рисункам давать понятные и подходящие имена. Так как эта картинка шапки у нас будет играть роль фона у блока header, то и имя она получает соответствующее — bg-header. Кроме того, при сохранении (разумеется "для веб" — Save for Web) всегда выбирайте наиболее подходящий формат изображения. Например, все шрифтовые, шейповые картинки, а также плавный 2-цветный градиент более качественно и чисто сохраняется в формате GIF. Можно и в PNG, но вес будет довольно приличным. Все полупрозрачные картинки — однозначно в PNG, ибо "полупрозрачный" GIF выглядит безобразно. Многоцветные градиенты и фотографии лучше сохранять в формате JPG. И еще пару слов о так называемом "качестве сохранения" — Quality. При сохранении в GIF не всегда обязательно в окошке Colors оставлять, стоящее там по-умолчанию, число 256. Если рисунок однотонный, то можно без видимых потерь уменьшить количество цветов до 128, а то и до 64. Вес картинки существенно уменьшится. В формате JPG также лучше придерживаться качества High. В формате PNG-24 качество не выставляется. В любом случае, в окне предварительного просмотра увеличьте картинку до 400 – 800% и 10

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

Ширина же не критична. Вообще что касается линейных размеров: мы с вами делаем довольно простой по графике шаблон. Это означает, что точными размерами картинок, его составляющих, вполне можно пренебречь. Ну согласитесь, нет особой нужды вымерять то же самое лого по ширине, вылавливая буквально по пикселу границы. Именно потому, что тесных границ между изображениями нет. Это когда в макете присутствует довольно много разных элементов: всяких скругленных уголков, вертикальных и горизонтальных линий, то да, там придется очень четко разрезать макет на части и пользоваться уже инструментом Slice Tool

, а не Crop Tool

Основное содержимое (контент) и сайдбары. Фон у всех троих будет общий, а именно: узкая горизонтальная полоса шириной во все 960 пикселей и высотой в 5. Поле контента — просто однотонная заливка цветом #28363E, а оба сайдбара имеют градиент слева-направо от темного к светлому: #020202 — #2E3F47.

Сделать такую полоску проще простого: выбираем на макете свободный от шрифта и прочих украшательств участок, затем инструментом Crop Tool выделяем полоску по всей ширине макета и нажимаем клавишу Enter. Готово! Сохраняем эту картинку с именем bg-container. Кстати, на счет высоты полоски: не обязательно делать ее именно в 5 пикселов. Можно и 1 и 100. Тут тоже руководствуйтесь здравым смыслом. Слишком мельчить ни к чему, а слишком крупный может весить изрядно. В любом случае при верстке мы зададим заполнение фоном в блоке container по вертикали (repeat-y). В принципе можно поступить иначе: задать для блока контента фон цветом #28363E, а для сайдбаров нарисовать только полоску с градиентом и каждому из них в отдельности задать эту полоску фоном, также с повтором по вертикали. Но в этом случае у нас фон сайдбаров будет заканчиваться там, где кончается полезное содержимое сайдбара, то есть текст. Ниже будет снова однотонный фон, такой же, как и у блока с контентом. А это выглядит не очень красиво и даже неаккуратно. 11

Теперь нам в этой части макета осталось только вырезать иконку у заголовка поста, фон под поисковую форму (он у нас рисованный, с внутренней тенью, а не просто белый прямоугольник), иконку RSS-фида и еще одну иконку у заголовков блоков в сайдбарах. Пользуясь инструментом Crop Tool , так же последовательно вырезаем их всех и сохраняем в папке images.

Небольшая хитрость: иконку RSS-фида я специально сделал во всю ширину правого сайдбара. Дело в том, что разные браузеры по-разному высчитывают отступы, и слишком коротко обрезанную картинку потом трудно будет четко поставить на место. При использовании в качестве фона градиента, сдвиг хоть на 1 пиксель уже будет заметен, а это некрасиво. А так наша картинка четко "упрется" в края блока и никуда уже не денется. Напомню: размер правого сайдбара по ширине 160 пикселов, стало быть, и иконку RSS-фида делаем такой же. Подвал, он же — футер (footer). С подвалом поступим так же, как и с остальными изображениями, то есть вырежем. Но здесь хочу предупредить вот о чем: можно, конечно же, вырезать лишь небольшую картинку фона подвала. Например, так:

И потом сам блок #footer ужать до размеров блока с контентом и пристроить его следом за ним же внизу. Но вполне может случиться такая вещь: контента, как такового, будет на странице мало, а сайдбары наоборот слишком длинные. И тогда наш подвал будет подпирать блок с контентом где-то посередине экрана. Согласитесь, что это довольно глупо выглядит. Можно попытаться его уложить в самый низ, используя очистку clear: both; в листе стилей CSS, но поверьте на слово, подгонять все это чтобы было одинаково во всех браузерах — сущее наказание. Намного проще можно сделать, вырезав фон футера по всей ширине макета. Вот так:

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

Особенно если в подвале у вас в качестве фона нарисовано что-то с травкой, земелькой, жучками и прочими естественными объектами природы. На такой случай есть хитрый финт, который позволяет при любых условиях "придавить" футер к низу экрана монитора. Но об этом позже. По-ходу несколько советов: Совет 1. Каждую новую деталь макета рисуйте на новом же слое. Так вам будет удобнее ее корректировать. Совет 2. Фон всегда (!) оставляйте отдельным слоем. Не нужно на нем ничего рисовать. Возможно, вы в процессе работы захотите изменить цвет или заливку фона. И если у вас на нем будет какая-то деталь, то вы ее просто потеряете. Совет 3. Каждый слой не ленитесь именовать понятным словом. Не оставляйте кучу Layer 1,2,3… и т.д. Иначе сами потом запутаетесь. Совет 4. Рисуя макет, старайтесь сразу мыслить блоками. Представьте, что собираете общую картину из кубиков, и каждая деталь — это один из кубиков. Тогда у вас детали не будут наезжать друг на друга, и не придется ломать голову, как все это сверстать.

Состав шаблона Прежде чем преобразовывать наш фотошоповский макет в шаблон для Wordpress, необходимо разобраться из чего вообще состоит типичный шаблон. Если вы уже скачивали из сети различные шаблоны для WP, то заметили, что обычно они представлены папкой с именем шаблона, в которой лежит набор из нескольких php-файлов, лист стилей CSS (а то и несколько), картинка-превьюшка и вложенная папка с изображениями. Такой шаблон просто добавляется в папку themes на сайте, которая, в свою очередь, находится в папке wp-content. Затем из админской части этот шаблон активируется в один клик мыши, и вы получаете новый облик вашего сайта. Это просто. С листом стилей и папкой с картинками все понятно. Разберем теперь, что за phpфайлы находятся в папке шаблона и зачем они нужны. Типичный набор этих файлов может быть следующим: 404.php archives.php header.php home.php index.php sidebar.php comments.php footer.php page.php Либо вот такой вариант: 404.php archives.php header.php index.php single.php sidebar.php comments.php footer.php page.php Кто первым заметит разницу? ☺ Правильно, в первом варианте в наборе есть файл home.php, а во втором вместо него есть файл single.php. В чем отличие? В хозяйстве Вордпресс есть, так называемая, иерархия файлов (иначе это называется «иерархией шаблонов», имея в виду, что каждый php-файл — это шаблон. Например, header.php — шаблон шапки. Не путайте эти понятия с общим шаблоном темы!). Более подробно об этом вы можете почитать на блоге Sonika.ru (http://www.sonika.ru/blog/wordpress/template-hierarchy.htm). Согласно данной иерархии, Вордпресс радостно встречает любого посетителя блога и первым делом старательно ищет в текущей теме файл home.php, чтобы скорее явить его дорогому пришельцу. Если же он такового не находит, то следующим ищет файл index.php и выдает его.

Кто старательно ранее изучал принципы адресации в сети Интернет, тот знает, что при заходе на любой сайт, сервер выдает первым делом индексную страницу — index.html (или index.php, не суть важно). Вордпресс же немного перетасовывает карты и первым ищет все-таки файл home.php. Зачем нужна такая перестановка? Во-первых, появляется возможность задать различное отображение Главной страницы блога и его внутренних страниц. Ведь для всех внутренних страниц (если не указано иное) Вордпресс будет использовать шаблон index.php, а для Главной только home.php. Обратите внимание: index.php играет сразу 2 роли. Это и Главная страница сайта (при отсутствии файла home.php) и шаблон для всех остальных страниц, если не указано иное. Про иное — чуть позже. Во-вторых, такое разделение очень удобно использовать при необходимости различного наполнения блоков (шапки, сайдбара, подвала). Например, вам нужно, чтобы в сайдбаре блок Блогролл (Ссылки) показывался только на Главной странице, а на всех остальных его не было. Понятное дело, если блок просто вписать в файл сайдбара, то он будет на всех страницах без исключения. Ведь файл сайдбара один, общий для всех страниц. Вот тут как раз различное наименование шаблонов (home и index) позволяет в сайдбаре для нужного блока прописать Условия, по которым он будет показываться или не показываться. Об этих условиях я расскажу позже в главе Сайдбар. Все тоже самое можно сказать и о втором варианте набора файлов. Следуя все той же Вордпрессовской иерархии, если не будет найден файл home.php, то в качестве главной будет выдан файл index.php. А как же страница с отдельным постом? А вот как раз для нее движок будет сначала искать файл single.php. Если же не найдет, то в качестве шаблона так же предложит файл index.php. Это опять же позволит выдавать различное оформление Главной и внутренних, а также различное содержимое частей страницы. Можно сделать вывод, что при желании сильно упростить шаблон, можно смело выкинуть из него файлы 404.php, home.php, single.php, archives.php и page.php, оставив только: header.php index.php sidebar.php comments.php footer.php С этим разобрались. Теперь поговорим подробнее за каждый из файлов, для чего и зачем он нужен, и что в нем есть полезного. 404.php — данный файл выводит надпись «Ошибка 404 – такого файла здесь нет!» Или вариации этой записи. Это полезно, если кто-то зашел к вам через кривую ссылку, или по ссылке на страницу, которая была удалена. Текст вы можете написать тут любой. Главное — дать понять посетителю, что введенный им адрес ошибочный, чтобы он не мучался и не перелопачивал весь сайт в надежде таки найти того, чего нет. Очень рекомендую оформлять эту страницу в 15

одном стиле со всем сайтом, а не бросаться в посетителя громадным красным шрифтом сообщения, что он таки чайник. Кроме того, очень полезно на этой странице разместить ссылки на другие разделы или посты вашего сайта. Возможно тут же подсыпать горку тэгов на похожую тематику (как это реализовать — рассказывать не буду, ибо в задачу книги не входит). archives.php — как следует из имени — это архивы. Специально под них и заточен этот файл. Чаще всего выглядит так же, как и файл index.php, только отличается контентом. Здесь прописаны специальные коды, которые выводят списки постов по определенному принципу: по рубрикам, по месяцам, по годам, по векам, и даже по авторам, буде таковых несколько. В нашем шаблоне мы его не будем использовать, архивы будут выводиться при помощи файла index.php. header.php — выводит на всех страницах сайта шапку. В состав этого файла входят такие части обычного html-кода как доктип (DOCTYPE), тэги <html>, <head>, <body>, метатэги с описанием кодировки, привязки листа стилей css, привязки rssфида, и пр. Сюда же обычно выводят название сайта (заголовок), описание (description), и часто верхнее горизонтальное меню, а также окно поиска. Здесь стоит сразу сказать пару слов о том, что значит «выводит». PHP — штука динамичная, то есть, собирает страницу сайта «на лету», словно из деталей конструктора. Это на самом деле очень удобно. Например, захотели что-то изменить в шапке сайта, поменяли это всего лишь в одной «детали» — файле header.php. И это изменение коснется всех страниц сайта. Ведь шапка у всех общая. «Выводит» — в данном случае означает, что в файле index.php, например, в нужном месте прописан определенный код, который говорит: «сюда надо положить файл header.php». В коде это выглядит так: <?php get_header(); ?>

Точно так же выводится на странице сайдбар: <?php get_sidebar(); ?>

И подвал (футер): <?php get_footer(); ?>

В общем виде файл index.php может выглядеть так: <?php get_header(); ?> <div id="content" > …… тут содержимое этого самого контента……. </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

Общий смысл, думаю, понятен.

index.php — универсальный файл. Как видно из сказанного выше, может выполнять множество ролей, быть как главной страницей, так и просто шаблоном для всех остальных. Именно здесь происходит сборка полной страницы из разрозненных деталей. Если шаблон темы сильно упрощенный и для всех страниц существует в качестве шаблона лишь один файл index.php, то в нем прописаны последовательно все необходимые части кода: для вывода ленты постов на главной, для вывода отдельного поста, для вывода архива, если нужен, для вывода постоянных страниц типа «О сайте», «Контакты» и т.п. Вордпресс уже сам определяет, что и где показывать. Умный он. Подробнее об этом будет рассказано в соответствующей главе. single.php — «сингловая» страница. То есть, выводит один конкретный пост при переходе по заголовку-ссылке поста с главной страницы или откуда-нибудь из архива. Сюда же обычно прикрепляют код вывода комментариев — файл comments.php. sidebar.php — это боковая колонка навигации, куда чаще всего выводится список последних сообщений, рубрики (категории), блогролл (список ссылок на друзей или еще куда), архив (только список, например месяцы и года) и Meta (управление) — ссылка для входа/выхода, всякие валидаторы, а так же напоминание о том, что это Вордпресс и т.п. Кроме указанных, сюда можно добавить и другие блоки. Часто это сделано в виде виджетов — динамично добавляемых блоков из админки блога. Сайдбаров может быть один, и два, и даже три. В нашем шаблоне будет два, названные соответственно левым и правым — l-sidebar.php и r-sidebar.php. comments.php — этот файл внедряет на страницу с постом список комментариев, которые также идут в виде ленты. В отличие от постов на Главной, комменты следуют сверху вниз в обратном порядке: самые старые вверху, а самые свежие — внизу. Хотя при желании это можно переиграть. Правда выглядит такая перестановка довольно глупо. Меня она всегда сбивает с толку. Привычка, понимаете ли. page.php — «пага», она же статичная страница. То есть, это практически такая же страница, как и индексная, только «замороженная». Она никуда не уходит, а висит себе постоянно на одном месте, и добраться до нее можно через главное меню. Чаще всего это такие страницы сайта как: О сайте, Контакты, Карта сайта, Об авторе и т.п. Соответственно, множества постов здесь быть не может, а выводится лишь одна постоянная запись. footer.php — футер, он же подвал. Выводит на всех страницах нижнюю часть сайта. Сюда обычно пишут копирайты, название сайта, оформленное ссылкой, ссылки на дизайнера, на сам Вордпресс.орг, 20 – 25 счетчиков от различных сервисов статистики (ливинтернет, спайлог и пр.), с десяток продажных ссылок, скрытый текст и ссылки на порнушку… Сорри, увлекся что-то. Кроме того, в современных темах ВП сюда часто выводят некоторые блоки из сайдбара. Например, свежие записи, комменты, популярные посты и пр. Последнее, я считаю, есть смысл творить при 2-колоночной верстке шаблона, когда имеется всего лишь один сайдбар, и в него все просто не впихнуть без излишнего растягивания страницы по высоте. ———————————————— 17

Вроде ничего не упустил. Есть, конечно же, и множество других файлов в шаблоне для Вордпресса. Каждый автор шаблона может по своему усмотрению наплодить их массу. Особенно если шаблон богат на, всякого рода, подключаемые социальные фишки и прочие сторонние ресурсы. Об этом мы говорить не будем. Я специально также не упомянул о файле functions.php, который есть практически в каждом шаблоне ВП. К верстке он не имеет никакого отношения, и лазать в него без знания программирования на PHP нет смысла.

Шапка (header.php) Шапка, или иначе — хидер (header), задается в шаблоне файлом header.php. Кроме самого изображения шапки, этот файл также содержит массу полезных вещей, а именно: 1. Доктип (DOCTYPE). Для надежной обработки отображающими устройствами любой веб-страницы, она — страница — должна соответствовать некоторому стандарту. Для этой цели в свое время был задействован механизм определения типов документов по имени DTD (Document Type Definition). Не вдаваясь в подробности, скажу лишь, что браузеры активно используют эту конструкцию, чтобы точно знать, чего это им подсунули на съедение и переваривание. Если такой записи в коде страницы нет, то браузеры считают ее жутко древней и заточенной под браузеры наших дедушек и бабушек. А посему и отображать их надо по минимуму, безо всяких современных фишек и возможностей. Сильно подозреваю, что именно по этой причине сайт студии А. Лебедева (http://www.artlebedev.ru/) до сих пор игнорирует стандарты и не размещает на своих страницах указание доктипа. Мы же пойдем правильным путем и пропишем в самой верхушке файла header.php вот такой доктип (полный текст файлов см. в конце каждой главы): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Это не самый строгий стандарт. Круче только Strict, но он не позволяет некоторых вольностей, которые вполне допускает Transitional. Рекомендую прогуляться по ссылке из этого доктипа и посмотреть, что он из себя представляет. Ну, это так, для всеобщего ознакомления. НЕ РЕКОМЕНДУЮ удалять эту ссылку и не жмотничать. Ваш ПР=10 от этого не убудет. Кроме того, без указания доктипа вы не сможете проверить документ на валидацию в W3C (http://validator.w3.org/). 2. Далее у нас идет открывающий тэг <html> с добавочной записью в виде xmlобъявления. Это добавление не является обязательным, но рекомендую так же и его не удалять. Вполне вероятно, что без него в будущем сайт просто не откроется, ибо это есть тоже стандарт. 3. Следом идет открывающий тэг <head> (не путайте с хидером (шапкой), это разные вещи!), в пределах которого (до закрывающего </head>) раполагается невидимая посетителю, но очень нужная всем браузерам информация о странице. В первую очередь тут прописаны так называемые мета-тэги — 18

служебная информация о кодировке страницы (Content-Type), об используемом языке (language), описание (description) и список ключевых слов (keywords). Кроме того, здесь есть тайтл (title) — заголовок страницы, который отображается в самой верхушке браузера, и текст которого выдается в результатах поиска поисковыми же сервисами вроде Гугла или Яндекса. Также здесь прописались несколько служебных ссылок для подключения к странице листа стилей CSS, иконки favicon для адресной строки браузера, а также отсылка к RSS-фиду и обработчику пингбэков. Рассмотрим все эти служебные штуковины по-порядку. Замечу сразу, это не стандартное наполнение, встречающееся в большинстве шаблонов, а несколько оптимизированное. Советую использовать его именно в таком виде. Первым мета-тэгом у нас будет прописана кодировка документа. Обычно в шаблонах ВП он выглядит так: <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

То есть, определение кодировки отдается на откуп движку Вордпресс, заставляя его отвлекаться на такие мелочи и делать лишние телодвижения. Когда уже давно и всем на свете известно, что ВП использует кодировку UTF-8. Спрашивается, оно вам таки надо? Это все равно, что на вопрос о вашем имени, вы полезете смотреть его в собственный паспорт. Поэтому мы заменим данную строку конкретным указанием на кодировку: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Прошу обратить внимание: мета-тэги относятся к тем тэгам, у которых нет закрывающего тэга (</meta> — такого не существует в природе, как и закрывающего тэга у изображений — </img>). Стандарт 1.0 Transitional хоть и не предельно строгий, но все же требует, чтобы даже у таких тэгов была своя собственная «закрывашка». Поэтому в конце строки перед закрывающей угловой скобкой обязательно должен быть прописан пробел и слэш / Следующий мета-тэг указывает на используемый язык: <meta name="language" content="ru" />

Он не обязателен, но все же пусть будет. Ну… мало ли к вам в гости заглянет Мбганга Мбвамбутта из далекого Конго. Почешет репу, глядючи на непонятные закорючки, потом догадается заглянуть в код и воскликнет: — Йоу! Да это ж русские! И полезет в Гугль-переводчик, уже зная с какого языка придется переводить. Следом идут метатэги описания (description) и ключевых слов (keywords): <meta name="description" content="Icepepper — cool design in devices, wallpapers, photo, art, installation and themes for Wordpress" /> <meta name="keywords" content="cool design, creative, devices, wallpapers, photo, art, installation, themes, Wordpress." />

Если хотите понравиться поисковикам, то хорошенько продумайте текст описания и особенно ключевики. Кстати, некоторые владельцы блогов используют плагин «All-in-One SEO pack», который позволяет, кроме всего прочего, оперативно добавлять ключевые слова при написании поста. Плагин затем добавляет их как раз в виде соответствующего метатэга. То же самое делает и плагин «Simple Tags». Но я все же рекомендую выписать основные ключевики самостоятельно. Ничего страшного не произойдет, если у вас будет два метатэга с ключевыми словами. Много, как говориться, не мало. Только не уподобляйтесь чайникам, пишущим и в дескрипшн и в ключевики одно и то же. Описание — есть описание, ключевики — всего лишь слова через запятую. Далее у нас будет прописан Тайтл (title). Как я уже упомянул, это есть заголовок страницы для браузера. Не тот, что виден посетителю посередине монитора: «Здрассь, я Вася, это мой саит», а тот, что находится в самом верху браузера на синей полосе (если у вас стандартная расцветка панелей Виндовз). Нужнейшая в хозяйстве вещь. Довольно часто начинающие веб-мастера ошибочно пишут туда имя файла (index, about и т.п.) или вообще ставят порядковый номер. Тайтл нужно прописывать с умом, если хотите чтобы Гугль и прочие иные вас уважали. Обычно в шаблонах код вывода тайтла не самый подходящий. Часто на первом месте в строке идет название браузера, которым пользуется посетитель, затем название сайта, а уж затем (если не забыли вписать) заголовок текущей страницы. Допустим такую гипотетическую ситуацию, будто бы Яндекс проиндексировал все ваши страницы и выдал их упорядоченным списком: 1. Сайт Василия Кузьмича Неробейко о печных работах. | Кладка обычной русской печи. | Фундамент. 2. Сайт Василия Кузьмича Неробейко о печных работах. | Кладка обычной русской печи. | Первый ряд. 3. Сайт Василия Кузьмича Неробейко о печных работах. | Кладка обычной русской печи. | Второй ряд. и т.д. Как видим, меняется лишь хвостик строк. Если первая часть строки будет достаточно длинной, то этот хвостик совсем может обрезаться за многоточием, и мы получим в выдаче совершенно одинаковые строки. Получится довольно бестолково. Поэтому есть смысл перевернуть строки задом наперед. Вначале указать наименование главы, потом название темы, а уж потом название самого сайта: 1. Фундамент. | Кладка обычной русской печи. | Сайт Василия Кузьмича Неробейко о печных работах. Для этого мы код тайтла пропишем следующим образом: <title><?php wp_title(' '); ?> | <?php if(wp_title(' ', false)) { echo ' | '; } ?><?php bloginfo('name'); ?></title>

Далее в метатэгах идет ссылка на иконку сайта, именуемую иначе — фавикон (favicon.ico): <link rel="Shortcut Icon" href="<?php echo get_settings('home'); ?>/favicon.ico" type="image/xicon" />

Это та самая маленькая иконка, что появляется в адресной строке браузера перед адресом сайта. Например, знаменитая красная буква «Я» у Яндекса или синяя «g» у Гугла. Назначение данной иконки чисто визуальное. Она выгодно отличает сайт от многих других и служит неким «маяком» для узнавания посетителями. Кладется такая иконка обычно в корень сайта. Указанная ссылка как раз туда и ведет. Вместо <?php echo get_settings('home'); ?> Вордпресс сам подставит полный адрес домена: http://www.icepepper.net. Но никто не мешает вам вписать адрес сразу, опять же не загружая ВП лишней работой: <link rel="Shortcut Icon" href="http://www.icepepper.net/favicon.ico" type="image/x-icon" />

Следующая ссылка ведет на RSS-фид сайта. По-умолчанию это выглядит так: <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

Если вы уже слышали про сервис доставки фидов FeedBurner (http://www.feedburner.com/) и даже там зарегистрировались, и уж тем более если зарегили свой блог и получили адрес фида вроде: http://feeds.feedburner.com/icepepper, то нужно указанный выше код соответственно исправить на: <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/icepepper" />

Совет! Если переделываете чужую тему и обнаружите там ссылки на фиды вроде Atom 0.3 или RSS .92 — смело их удаляйте, ибо это уже старье и практически не используется. Про следующую ссылку рассказывать много не буду: <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Скажу только, что она реализует отсылку пингбэков к другим блогам. Подробнее о механизме пингбэков можно почитать (на английском) у hixie (http://www.hixie.ch/specs/pingback/pingback). Далее в коде присутствует ссылка на лист стилей CSS: <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Здесь менять ничего не нужно. Разве что указание для кого предназначено отображение стилей. В нашем случае это все мониторы — screen. Хотя, есть один нюанс: в некоторых браузерах при нажатии на клавишу F11 для разворота на весь экран, вся красивость стилей может поломаться и вообще пропасть. Лечится

сие простым способом: вместо слова screen впишите слово all, то есть для всех типов устройств вывода. И завершает состав территории тэга <head> вот такой кусочек php-кода: <?php wp_head(); ?>

Зачем он нужен? Это так называемый "хук" (hook) — перехватчик. Когда вы активируете какой-либо плагин, который должен автоматически добавить в код страницы кусок собственного кода (например тот же «All-in-One SEO pack» — свой собственный набор ключевых слов), то как раз этот самый хук радостно машет флажками и кричит: "Сюда! Сюда ложьте!" То есть, понятно, что это такой своеобразный крючок в коде, за который может цепляться дополнительный код. С тэгом <head> покончили и закрыли — </head>. Далее с открытием тэга <body> уже начинается все то, что вылезает на экран монитора в виде готового сайта. Прежде чем углубиться непосредственно в верстку и подробный разбор файла CSS, скажу несколько слов о самой структуре нашего шаблона. Если вы когда-либо в далеком отрочестве игрались в кубики, то наверняка у вас была специальная коробка, куда родители заставляли вас складывать свои игрушки после игры. Игрушек было много, и нужно было тщательно укладывать их, чтобы уместились все. Сборка шаблона чем-то напоминает этот процесс. У вас есть воображаемая коробка-контейнер, в который вы блок за блоком как кубики складываете различные части: шапку, сайдбар, поле контента, подвал. Сам контейнер тоже валяется не где-нибудь, а установлен строго посреди монитора (забудьте о «резиновой верстке», я вас умоляю). В качестве такого контейнера мы используем блок, который так и назовем — #container. Поэтому сразу за тэгом <body> пишем код этого блока: <div id="container">

В самом верху у нашего макета имеется шапка. Так давайте ее и положим на место! Пишем следом: <div id="header">

В состав шапки у нас входят: логотип, название блога в виде заголовка первого уровня (h1), описание блога (оно вполне может повторять текст дескрипшена из мета-тэгов) и список страниц. Пропишем сначала для них код, а потом немного разберем его: <a href="http://www.icepepper.net/" title="Icepepper"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="Icepepper" /></a> <div class="description"><h1><?php bloginfo('name'); ?></h1><br /> <?php bloginfo('description'); ?></div> <ul id="menu"> <li><a href="http://www.icepepper.net/">Home</a></li> <?php wp_list_pages('title_li='); ?> </ul></div>

Итак, что мы имеем. Вначале мы положили на место картинку лого, сделав ее ссылкой на наш домен. Картинке мы задали класс "logo", которому в листе стилей CSS пропишем размеры самой картинки и обтекание float: left; чтобы логотип "плавал" у левого края шапки. Далее идет блок с классом "description", в который вошел заголовок первого уровня h1 с названием нашего сайта и само описание. Здесь можно поступить двояко: либо оставить как есть, и тогда имя сайта посредством вот этого кода — <?php bloginfo('name'); ?> — будет автоматически подгружаться из админской части, где название было прописано еще при установке самого Вордпресса. Либо можно вместо кода вписать просто название: ice pepper blog. Это будет то же самое. Если вы делаете шаблон для себя, то можете смело поступить вторым способом. Но если на сторону, то придется писать кодами. То же самое можно сказать и в отношении описания сайта. Следом у нас идет список страниц, который мы запихнули в блок #menu. Обратите внимание: в коде мы не стали добавлять еще один "див", а вписали соответствующий id прямо в тэг <ul>. Таким образом можно облегчить код, избавившись от массы ненужных "дивов". Не забывайте об этом. Обычно в шаблонах в списке страниц всегда первым номером идет пункт со ссылкой на главную страницу: <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>

Ссылку опять же подставляет сам ВП. Но мы можем ему помочь и переписать эту строку уже с адресом сайта: <li><a href="http://www.icepepper.net/">Home</a></li>

А вот дальше идут пункты списка, в который автоматически добавляются страницы сайта, когда вы их создаете в админской части (Написать – Создание страницы): <?php wp_list_pages('title_li='); ?>

Но, если вы помните, в нашем макете пункты списка страниц разноцветные. Как можно задать эти разные цвета, если самих страниц еще не существует? Ведь нельзя заранее Вордпрессу сказать: вот для этой страницы ссылку сделаешь красной, а вот для этой синей. На самом деле этот казус легко обойти. При создании статичной страницы (а мы сейчас говорим именно о статичных страницах, а не о постах), каждая из них получает свой адрес вида: http://www.icepepper.net/about, или http://www.icepepper.net/contact и т.д. Этот хвостик в конце можно самому прописать при создании новой страницы. Для этого в админской есть специальная панель под названием "Короткая ссылка". Вот туда и пишем нужное короткое английское(!) слово. Получаем вполне приличные и удобоваримые адреса. И ничто не мешает нам переписать код в списке вот таким образом:

<ul> <li><a href="http://www.icepepper.net/">Home</a></li> <li><a href="http://www.icepepper.net/about">About</a></li> <li><a href="http://www.icepepper.net/author">Author</a></li> <li><a href="http://www.icepepper.net/contact">Contact</a></li> <li><a href="http://www.icepepper.net/map">Map</a></li> <li><a href="http://feeds.feedburner.com/icepepper">RSS</a></li> </ul>

И чтобы получилось уж совсем красиво, каждому пункту припишем свой собственный класс, которым в листе стилей CSS можно будет задать что угодно: <ul> <li class="main"><a href="http://www.icepepper.net/">Home</a></li> <li class="about"><a href="http://www.icepepper.net/about">About</a></li> <li class="author"><a href="http://www.icepepper.net/author">Author</a></li> <li class="contact"><a href="http://www.icepepper.net/contact">Contact</a></li> <li class="map"><a href="http://www.icepepper.net/map">Map</a></li> <li class="rss"><a href="http://feeds.feedburner.com/icepepper">RSS</a></li> </ul>

Да, но теперь у нас не получится автоматически добавлять страницы из админской части. Ничего страшного. Создаете их тем же макаром, с короткой ссылкой и потом вручную добавляете ссылку в этот список. На самом деле ведь не так часто меняется состав постоянных страниц. И потом, мы же затачиваем шаблон для себя любимых, а тут уж грех не постараться. Зато выглядеть будет необычно, на зависть другим пользователям ВП. Не забудьте только в конце кода добавить парочку закрывающих "дивов": один для закрытия блока навигации, второй — для закрытия блока шапки. Готовый файл сохраняем в папке нашего будущего шаблона, который обзовем icepepper. Файлу зададим имя header с расширением php. Ну, а теперь самое время начать создавать файл листа стилей CSS. Открываем новый документ и строчим следующий текст, спрятанный в комментарии: /* Theme Name: Icepepper Theme URL: http://www.icepepper.net/ Description: 3 column theme for WordPress. Author: Igor Kventor Author URI: http://www.dizweb.ru/ Version: 1.0 */

Это не форс бандисткий, а необходимая самому ВП инфа. После загрузки новой темы в папку themes, Вордпресс первым делом лезет в этот файл и прочитывает данный комментарий. И тогда уже выдает в списке установленных тем: название, описание, версию, ссылку на автора и пр. Комментарием этот текст называется по той причине, что закрыт знаками комментария /* */. То есть, скрыт от браузеров и 24

не является непосредственно кодом CSS. А вот уже дальше начинается настоящий код. Пока мы запишем правила только для контейнера, шапки и некоторые общие: *{ border: 0; margin: 0; padding: 0; } body { background: #15191c; color: #AAC6D2; font-size: .75em; font-family: Arial, Helvetica, Verdana, Sans-Serif; } #container { background: #27363E url(images/bg-container.gif) repeat-y; width: 960px; margin: 0 auto; } a, a:visited { text-decoration: none; } a:active { outline: none; }

#header { background: #15191c url(images/bg-header.jpg) no-repeat; width: 960px; height: 124px; margin: 0 auto; }

#header .logo { width: 144px; height: 124px; float: left; } #header h1 { color: #4AA0CF; font-size: 3.1em; font-weight: normal; letter-spacing: -2pt; } #header .description { width: 380px; color: #4F6B78;

margin: 0 0 0 150px; padding: 5px 0 0 0; font-size: 1.5em; letter-spacing: -1pt; float: left; }

Разберем сначала этот код, а потом возьмемся за меню, которое тоже входит в состав шапки. Самый первый набор правил — это так называемые "глобальные правила". Звездочка не является ни тэгом, ни вообще каким-либо осязаемым объектом. Но любой браузер понимает ее как "для всего документа". Здесь мы задали нулевые значения для всех отступов, полей и рамок, буде таковые случайно или неслучайно попадутся в коде страниц. Или, говоря иначе, заранее их обнулили, сделали сброс. Это нужно для того, чтобы некоторые браузеры (не будем показывать пальцем) не лепили эти самые рамки и не высчитывали отступы где ни попадя. А там где надо, мы сами зададим и то, и другое, и третье. Следующий набор правил — для body (тушки). Тут мы, во-первых, задали общий фон для всей страницы цветом #15191c. Если кто еще помнит, то градиент в шапке задан тем же цветом по краям. Это тот самый фон, который будет за пределами контейнера с сайтом. Во-вторых, прописан основной цвет шрифта — #AAC6D2. Затем общий размер шрифта, а также его семейство. В нашем случае — первым в списке идет Arial. Тут все просто. Затем мы выписали набор правил для контейнера. Прежде всего, мы задали фон в виде картинки bg-container.gif с повтором по вертикальной оси (Y). Ширина блока — 960 пикселов. А вот правило margin: 0 auto; устанавливает контейнер строго по центру монитора без каких-либо отступов сверху и снизу (значения auto и 0 соответственно). Следующие два набора правил задают отображение ссылок. В первом мы убрали подчеркивание, а во втором указали отсутствие каких-либо декораций у активной ссылки. То есть, той, на которую наведена мышь и нажата (и удерживается) левая кнопка. Браузер Firefox, например, любит в такие моменты выделять ссылку пунктирной линией. Может с обычной ссылкой оно и ладно бы, но он точно так же выделяет и рисунки-ссылки, а это уже выглядит некрасиво. Следующие четыре набора правил предназначены для шапки. Картинка-фон нашей шапки имеет размеры 960х124 пиксела. Поэтому в первом наборе правил мы так и указали: фон — картинка bg-header.jpg без каких-либо повторов, размеры по ширине и высоте 960 и 124 соответственно, выравнивание опять же auto и 0. Последнее не обязательно, так как в коде страницы шапка все равно вложена в контейнер и никуда за его пределы не вылезет. Но многие веб-мастера предпочитают все равно прописывать это правило. Причем, с подвалом мы потом поступим так же. Мало ли… Запись #header .logo означает, что класс .logo является дочерним классом селектора #header. Можно было бы сам селектор не писать. Все равно у нас на странице больше не будет никаких других лого. Данная запись просто является более "окультуреной". 26

В этом наборе правил мы прописали размеры картинки-логотипа и "плавание" оной слева. Следом выписаны правила для названия блога, который у нас заключен в тэги заголовка первого уровня h1. Здесь интересно вот такое правило: letter-spacing: 2pt; Если помните, то рисуя макет в Фотошоп, мы у заголовков и описания блога сжимали текст на вкладке Character на минус 50 (не помню только в каких там единицах, но это не суть). Чтобы сделать то же самое в коде CSS, нужно использовать указанное правило. Правда, так как здесь в качестве единиц измерения применяются "пункты" (pt), то они должны быть целыми числами. Лирическое отступление: Пару слов о распределении по странице заголовков разных уровней. Довольно часто приходится наблюдать (и не только в шаблонах для ВП) как веб-мастера весьма вольно используют уровни, похоже не особенно вникая в суть и зная лишь о различии в размерах последних. И тогда на страницах можно наблюдать по нескольку заголовков первого уровня, тучку заголовков второго, еще больше — третьего, а более мелкие — 4, 5, 6 вообще используются для каких-то служебных вещей типа отображения даты. На самом деле это нонсенс. Заголовок первого уровня на странице может быть только один. И это самый главный заголовок. А что у нас самое главное? Верно! Название сайта. Заголовки страниц или постов в блоге должны быть набраны тэгами второго уровня (h2). Заголовкам блоков в сайдбаре можно задать третий уровень (h3). Этот же уровень, либо следующий (h4) можно использовать в тексте постов, когда надо выделить менее значимые заголовки частей одной статьи. Во всех остальных случаях нужно использовать обычный текст с тэгом абзаца (p), которому при помощи различных классов можно задать какие угодно параметры (цвет, толщину, размер и т.п.) Последний набор правил для шапки выписан для класса .description. Прошу обратить внимание: в коде страницы у нас заголовок блога в тэгах h1 входит в состав блока description. Это значит, что правила для description так же являются правилами и для h1. В частности, у блока задан размер по ширине в 380 пикселов. Представьте себе такой прямоугольник, в котором вверху лежит заголовок, а ниже описание. Заданная жестко ширина не дает тексту описания "расползаться" и заставляет его хвост перейти на следующую строку. Правило margin: 0 0 0 150px; отодвигает блок от логотипа на 150 пикселей, а последнее правило float: left; делает весь блок так же плавающим слева. Далее у нас идет весьма любопытный набор правил для списка страниц (блок #menu), который, как я уже и говорил, так же входит в состав шапки, но расположен в ее дальнем правом уголке, никому не мешая и не требуя ничего. Хотя нет, кой-чего все-таки он потребует. А именно, целой вереницы классов, чтобы у каждого пункта-ссылки был свой цвет. Сделать это на самом деле несложно. Но обо всем по-порядку. Для начала мы указали, что у списка отсутствуют маркеры list-style-type: none; Затем задали размер блока по ширине в 100 пикселов. Этого вполне достаточно, так как названия страниц у нас состоят всего из одного слова и набраны довольно 27

мелким шрифтом. Поля padding:15px 25px 0 0; отодвигают содержимое блока на 15 пикселей сверху и на 25 от правого края шапки. Обратите внимание: если вы вместо этого правила пропишите отступы — margin:15px 25px 0 0; то в Опере разницы не заметите, а вот в ИЕ блок будет отодвинут от правого края дальше. Это происходит как раз потому, что ИЕ по-другому высчитывает отступы. Тут же мы прописали выравнивание для текста по правому краю, и всему блоку — плавание справа. Теперь настала очередь разноцветных ссылок. В коде страницы, в списке, мы уже прописали для каждого пункта свой класс. В листе стилей мы каждому из них зададим нужный цвет, а в конце напишем общее правило для всех ссылок списка в состоянии hover, то есть, когда на них наведен указатель мыши. Вот, собственно, и все. Шапка нашего шаблона уже готова. Перейдем теперь к файлу home.php, в котором находится контент. Тут придется изрядно попотеть и приложить максимум усилий, чтобы разобраться во всех деталях. Но оно того стоит, уж поверьте ☺ Полный код файла header.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="language" content="ru" /> <meta name="description" content="Icepepper — cool design in devices, wallpapers, photo, art, installation and themes for Wordpress." /> <meta name="keywords" content="cool design, creative, devices, wallpapers, photo, art, installation, themes, Wordpress." /> <title><?php wp_title(' '); ?> | <?php if(wp_title(' ', false)) { echo ' | '; } ?><?php bloginfo('name'); ?></title> <link rel="Shortcut Icon" href="http://www.icepepper.net/favicon.ico" type="image/x-icon" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/icepepper" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php wp_head(); ?> </head> <body> <div id="container"> <div id="header"> <a href="http://www.icepepper.net/" title="Icepepper"><img class="logo" src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="Icepepper" /></a> <div class="description"><h1><?php bloginfo('name'); ?></h1> <?php bloginfo('description'); ?></div> <ul id="menu"> <li class="main"><a href="http://www.icepepper.net/">Home</a></li> <li class="about"><a href="http://www.icepepper.net/about">About</a></li> <li class="author"><a href="http://www.icepepper.net/author">Author</a></li> <li class="contact"><a href="http://www.icepepper.net/contact">Contact</a></li>

Обратите внимание: div контейнера остался незакрытым. А закроем мы его уже в файле footer.php.

Контент (файл home.php) На самом деле в этом файле собирается вся Главная страница целиком. Но так как шапка, оба сайдбара и подвал идут пристежкой, то основной код отражает непосредственно контент. То есть, ваши статьи с картинками, ссылками, вставками видео и прочими радостями. Все просто. Начинается сей файл со вставки шапки. За это отвечает вот такой кусочек кода: <?php get_header(); ?>

Это очень удобная штука. Можно таким образом собирать любого вида страницу, подключая различные php-файлы. Код говорит нам, что вот в этом месте нужно прицепить файл header.php. Все просто и понятно. Следом за этой вставкой открывается блок контента: <div id="content">

И сразу за ним начинается так называемый луп (loop): <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Если кто-то пытался музицировать на компьютере, используя виртуальные сэмплеры, тот уже слышал о понятии loop. В переводе с буржуйского — это петля. То есть, некоторая закольцованная конструкция, у которой хвост и начало соединены как куплеты в пестне. ВП использует такую петлю чтобы выводить записи в виде ленты: старая запись (пост) сдвигается вниз, а на ее месте появляется новая. У лупа есть три основных детали, без которых луп вовсе не луп, а просто недоразумение какое-то. Это последовательно: <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_content(__('Читать полностью'));?> <?php endif; ?>

То есть, начало, сам контент и конец. Между ними может быть различное наполнение, но эти три части обязательны. В нашем шаблоне сразу за открытием лупа идет заголовок поста в тэгах заголовка второго уровня (h2):

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

Слово permalink означает постоянную ссылку на пост. Это именно та ссылка, при клике на которую мы попадаем на отдельную страничку со статьей. Эту же ссылку мы скармливаем всевозможным соц. сетям и закладочникам (bookmark), а при наведении на нее мыши, всплывает подсказка с текстом ссылки (title). Далее, вставка контента содержит словосочетание "Читать полностью". Эта приписка используется в тех случаях, когда на главной странице мы выводим не весь пост целиком, а только его анонс (при написании поста в нужном месте вставляется тэг <more>). Следом мы добавили очистку: <div class="clearfloat"></div>

Зачем она нужна? Дело в том, что если в посте будет картинка с обтекающим текстом справа, то при малом количестве текста, лежащая ниже строка с датой, названием рубрики и количеством комментов "подтянется" вверх и заполнит это свободное место. Выглядит это довольно бестолково. Поэтому мы и добавили очистку. Для этого дива мы в листе стилей в самом конце прописали короткое правило: .clearfloat { clear: both; }

Дальше идет блок, выводящий дату написания поста, наименование рубрики, где он размещен, и количество комментариев, если они есть: <div class="post-date">Дата: <?php the_time('d.m.') ?><?php the_time('Y') ?> | Рубрика: <?php the_category(', ') ?> | <?php comments_popup_link('Оставить комментарий', '1 Комментарий', 'Комментарии (%)'); ?> </div>

Сюда также часто добавляют вывод имени автора. Но если автор только один, то имеет смысл просто сделать соответствующую статичную страничку, которую так и озаглавить — Автор. Понятно, что все посты пишете вы сами. В нашем случае дата, рубрика и комменты разделены знаком | . Это не какой-либо код, а просто удобный разделитель. Вместо него можно вписать любой другой значок. Дата выводится в виде числа 01.01.2008. Подробнее о php-кодах вывода даты можно почитать на официальном сайте поддержки этого движка (http://ru.php.net/date). С рубрикой все понятно, тут просто выводится название той, в которую вы определили данный пост. А вот с комментами интереснее. Движок сам определяет количество написанных комментов и выводит соответствующее словосочетание из представленных трех. Последнее, как видите, имеет в конце знак процента в скобках (%). Этот знак выводит цифру, если комментов более одного. Данная запись наиболее удобоваримая, потому что русские количественные словосочетания имеют разное окончание и, например, 3 комментариев или 5 комментария — выглядит бестолково. А так любое число в скобках будет к месту. После вывода этого блока мы снова добавили очистку. И для этого тоже есть причина. Дело в том, что у нас блок с выводом даты не имеет жестко заданной 30

ширины. Последующий за ним пост хоть и начнется так же с заголовка 2 уровня (а заголовки имеют обыкновение занимать всю строку), однако вполне может своим началом забраться в хвост предыдущего поста, а именно на территорию с датойрубрикой-комментами. И даже если внешне такое не происходит и вроде бы все в порядке, то достаточно добавить ссылке заголовка поста подчеркивание, и в ИЕ можно заметить, как частично это подчеркивание появляется в конце предыдущего блока с датой. Далее у нас идет малопонятная вставка вида: <!-<?php trackback_rdf(); ?> -->

Не вдаваясь в подробности, скажу лишь, что этот код упрощает и автоматизирует доставку трэкбэков, а так же их нахождение. В старых шаблонах до сих пор можно встретить ссылку вида: "Вы можете отправить трэкбэк…" Подразумевалось ручное копирование данной ссылки. Теперь же все происходит на автомате. Если вас это пугает, то можете данный код смело удалить. Следующей строкой добавляется некоторое доп.условие: <?php endwhile; else: ?>

Со строкой текста о не найденном чем-то. Эта строка появляется в результатах поиска, если последний был неуспешным. И, наконец, кусок кода: <?php endif; ?>

закрывает луп. После него мы прописали постраничную навигацию: <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

Обычно в шаблонах она выглядит иначе. Там есть пара ссылок, типа: право-лево, или вперед-назад, или предыдущая-следующая и т.п. Мы же добавили в папку плагинов замечательный плагин wp-pagenavi, а в файле home.php прописали вот этот самый код вывода страниц. Работает он очень просто. В админской части блога, в Настройках, можно выставить количество постов на главной странице. Когда количество написанных постов превысит эту цифру, то они (посты) будут собираться уже на следующей странице, а внизу, на главной, появится строка с цифрами-ссылками. По ним можно быстро переходить к нужным страницам. Внешний вид этих цифр-ссылок можно настроить в листе стилей самого плагина — pagenavi-css.css. Далее идет закрывающий </div>, означающий конец блока #content. А следом за ним к странице пристегиваются оба сайдбара: <?php include(TEMPLATEPATH."/l_sidebar.php");?>

<?php include(TEMPLATEPATH."/r_sidebar.php");?>

Данный вид пристежки очень удобно использовать для добавления любых блоков. Например, можно вписать такое: <?php include(TEMPLATEPATH."/author.php");?>

Соответственно в шаблон добавить новый файл с именем author.php, в котором прописать об авторе всякое. И этот файл будет автоматически добавляться в нужном месте, где вы разместите, указанный выше код. Все просто. И завершает код файла home.php вставка футера: <?php get_footer(); ?>

Теперь мы снова вернемся к листу стилей CSS и разберем правила для контента. Сначала просто их выпишем: #content { width: 580px; float: left; padding: 0 0 20px 10px; } #content p { padding: 0px 0px 10px; } #content a { color: #4AA0CF; } #content a:hover { color: #4B5A69; } #content h2 { background: url(images/h.gif) no-repeat 0 50%; color: #4AA0CF; font-size: 2em; font-weight: normal; line-height: 1em; letter-spacing: -1pt; padding: 10px 0 10px 30px; } #content ol{ margin: 0 0 15px 20px; } #content ul{ list-style-type: square; margin: 0 0 15px 20px; } blockquote{

background: url(images/bquote.gif) no-repeat 95% 0; color: #8AA1AB; font-style: italic; padding: 10px 50px 10px 15px; } .post-date { color: #728790; font-size: .8em; margin: 10px 0 15px; }

Первым правилом для блока #content мы задали его размер по ширине, плавание слева и поля. Последние отодвигают содержимое блока от нижнего края на 20 пикселей, а от левого на 10. Но почему же ширина 580, когда мы в макете рисовали все 590? Если честно, то ответа на эту загадку я так до сих пор и не нашел. Проверить, что поле контента на самом деле занимает 580 пикселей можно очень легко. Добавьте (временно) в этот набор правил следующее: border: #fff dotted 1px;

Цвет для пунктира выбирайте контрастный, чтобы было лучше видно. Пунктир полностью обведет блок с контентом, и мы таки увидим, что он четко ложится в границы фона именно для контента, не шире и не уже. На следующей картинке показан пример, когда ширина блока задана в 590 пикселей. Как видите, блок выползает за правый край как раз на 10 пикселей:

Можете сами убедиться, что с размерами картинок мы ничего не напутали. Загрузите сайт http://www.icepepper.net/ и сохраните в отдельной папке вместе с картинками. Затем откройте в Фотошоп рисунок фона контейнера (или футера) и выставите линейки на границах разделения областей. Поле контента будет занимать ровно 590 пикселей. Такое несовпадение является частой причиной сползания блоков один под другой, когда ширина для каждого выбирается впритык. Потому всегда оставляйте небольшой резерв, чтобы было куда потесниться. В нашем случае это не критично. Ну подумаешь, будет уже на 10 пикселей текст, да фотки тоже чуть поуже будут. На самом деле не страшно. Контент — штука гибкая и уместить можно все. Продолжим разбирать код файла стилей. Правила для абзацев и для ссылок просты, поэтому говорить о них не станем. Присмотримся лучше к набору правил для заголовка второго уровня (h2), которым оформлено название статьи. Здесь первым правилом мы задали фоновый рисунок (три цветных квадратика, если кто помнит):

background: url(images/h.gif) no-repeat 0 50%; Повтор нам, понятное дело, не нужен, а вот последние две цифры позволяют очень точно позиционировать картинку относительно самого заголовка. Первое значение — выравнивание по оси X, второе — по оси Y. Выравнивание происходит в пределах того блока, к которому приписано данное правило. То есть, в нашем случае это участок с заголовком. Отсчет идет о левого края по оси X и от верхнего края по оси Y. Обратите внимание на ряд правил: font-size: 2em; font-weight: normal; line-height: 1em;

Здесь нет никакой ошибки. Размер шрифта взят в 2em, тогда как размер высоты строки всего в 1em. Это нужно для того, чтобы сжать по высоте строки заголовка, буде он достаточно длинным. Толщина шрифта указана как normal, то есть, нормальный. По-умолчанию браузеры стараются все заголовки сделать жирным шрифтом. Следующие два набора правил для списков, если таковые будут присутствовать в ваших постах: #content ol{ margin: 0 0 15px 20px; } #content ul{ list-style-type: square; margin: 0 0 15px 20px; }

Первый нумерованный, второй — маркированный. Для маркированного мы задали маркеры в виде квадратов (square). При желании вы можете нарисовать свой маркер в виде gif-картинки и задать его вот таким правилом: list-style-image: url(images/bullet.gif);

Заметьте, что в отличие от фоновых рисунков здесь не требуется указывать отсутствие повтора (no-repeat). Далее в листе стилей идет набор правил для цитат (blockquote). Обычно их принято как-то выделять, дабы они отличались от основного текста. Наилучший способ — изменить начертание шрифта на наклонное и прилепить изображение крупной двойной кавычки. В нашем шаблоне мы так и сделали: нарисовали эту кавычку обычной картинкой и добавили ее в качестве фона к данному набору: blockquote{ background: url(images/bquote.gif) no-repeat 95% 0; color: #8AA1AB; font-style: italic; padding: 10px 50px 10px 15px; }

Тут тоже у картинки задано позиционирование (95% 0). При помощи него и полей можно добиться оптимального расположения картинки относительно текста цитаты. Однако заметьте, что если вы сделаете картинку, скажем, 500х500 пикселей, на которой шрифтом Georgia в 400 пикселей изобразите гигантскую кавычку, то как бы вы ее не позиционировали, у вас все равно будет показываться лишь верхняя краюшка этого рисунка. Потому что размер блока цитаты по высоте задает сама цитата, а не рисунок. И если у вас там лишь пара строк, то сами понимаете. Последний набор правил (.post-date) задает отображение даты поста. Здесь нет ничего сложного. Полный код файла home.php: <?php get_header(); ?> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <?php the_content(__('Читать полностью'));?> <div class="clearfloat"></div> <div class="post-date">Дата: <?php the_time('d.m.') ?><?php the_time('Y') ?> | Рубрика: <?php the_category(', ') ?> | <?php comments_popup_link('Оставить комментарий', '1 Комментарий', 'Комментарии (%)'); ?> </div> <div class="clearfloat"></div> <!-<?php trackback_rdf(); ?> --> <?php endwhile; else: ?> <p><?php _e('По вашему запросу ничего нет.'); ?></p> <?php endif; ?> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> </div> <?php include(TEMPLATEPATH."/l_sidebar.php");?> <?php include(TEMPLATEPATH."/r_sidebar.php");?> <?php get_footer(); ?>

Сайдбары (файлы l_sidebar.php и r_sidebar.php) Сайдбар или боковая колонка навигации — это то, без чего не обходится ни один блог. Первые шаблоны ВП имели один сайдбар со стандартным набором функций: календарь, блогролл (список ссылок), архив и Мета (Управление). Сейчас появилась масса новых блоков. Например, из архива можно выделить список свежих постов, к ним добавить список свежих комментариев. Плюс до кучи набросать облако тэгов (меток), список самых популярных постов, список самых активных комментаторов и т.д. Не говоря уже о всяких баннерах и счетчиках статистики. Понятно дело, что в один сайдбар все это добро не уместить. Поэтому появились шаблоны с двумя и даже с тремя сайдбарами. Располагать их можно как угодно, хоть справа, хоть слева, хоть по обоим сторонам контента. В нашем шаблоне оба сайдбара находятся справа. Современные шаблоны делаются с поддержкой виджетов. То есть, блоков, добавляемых через админскую блога путем простого перетаскивания из общей кучи в панель сайдбара. Мы же сделаем простые сайдбары без такой поддержки. На это есть парочка причин. Во-первых, я сам виджетами не пользуюсь. Мне проще добавить нужный блок в код сайдбара, чем рулить все это через админку блога. Во-вторых, виджеты упрощают жизнь тем, кто с кодом не знаком, но может его скопировать и вставить. Мы же все верстаем самостоятельно, а потому нечего филонить. Итак, откроем для начала файл левого сайбара — l_sidebar.php. Начинается он у нас с объявления, что это таки левый блок #l_sidebar. Далее идет блок с баннерами. <div class="ads"> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a></div>

Если помните, мы левый сайдбар заранее предусматривали как носителя рекламных баннеров размерами 100х100 пикселей. По два в ряд. Для примера я в коде прописал четыре таких баннера в два ряда по два. Но что делать, если рекламодатели пока не спешат облагодетельствовать наш блог своими рекламными предложениями? Лепить туда заглушки в виде пустых картинок с надписью "Тут могла бы быть ваша реклама" — выглядит довольно жалко и неубедительно. Лучше на время вообще убрать этот блок. Для чего просто сохраните файл в таком виде где-нибудь в сторонке, а затем здесь удалите данный блок. При желании вы потом всегда сможете его добавить. Либо не удаляйте, а возьмите в комментарии (), тогда его так же не будет видно на экране. Далее у нас идет блок со свеженькими постами: <h3>recent entries</h3> <ul> <?php get_archives('postbypost', 10); ?></ul>

Вместо recent entries можете так и написать "Свежие записи". Не советую писать "Последние записи". Звучит мрачно. Цифра 10 в скобках обозначает количество выводимых заголовков. Можете менять ее на свое усмотрение. Следом идет блок со свежими комментами: <h3>latest comments</h3> <ul><?php get_recent_comments(); ?></ul>

Здесь вы так же можете заменить слова latest comments на Свежие комментарии. Количество и внешний вид их настраивается в админской блога. Далее идет блок с облаком тэгов: <h3>tag cloud</h3> <p class="tags"><?php wp_tag_cloud('smallest=8&largest=18&number=0'); ?></p>

Здесь чуть подробнее. В скобках есть парочка знакомых английских слов — smallest (наименьший) и largest (наибольший). И числовые значения 8 и 18. Это градация по частоте использования тэгов. Если какой-то тэг используется чаще, то он, соответственно, крупнее остальных. Строку мы взяли в тэги абзаца (р), которому приписали класс "tags". В листе стилей зададим ему нужные свойства. Обратите внимание: тэги HTML, которые мы используем в верстке, и тэги — ключевые слова из постов, суть — разные вещи. Прошу их не путать. Заканчивается файл l_sidebar.php закрывающим тэгом </div> Рассмотрим теперь правый сайдбар, код которого находится в файле r_sidebar.php. Он также начинается с открытия блока #r_sidebar. Здесь у нас находится поисковая форма, блок рубрик (категорий), блок архива, блок ссылок (блогролл) и блок статистики со счетчиками. Рассмотрим по-порядку каждый их них. Поисковая форма. Код ее выглядит следующим образом: <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"><input type="text" name="s" id="s" value="Поиск" onblur="if(this.value=='') {this.value='Поиск';}" onfocus="if(this.value=='Поиск') {this.value='';}" /></form>

Я настоятельно рекомендую использовать его именно в таком виде и вот почему. Этот код весьма упрощенный, но вместе с тем довольно функциональный. Я намеренно не использую кнопку "Пуск" или "Искать" или просто даже "ОК", ибо если в качестве фона используется картинка для данной кнопки, то возникает масса проблем с тем, чтобы выровнять ее как по высоте, так и по позиционированию относительно поля ввода. Тут разные браузеры отрываются по-черному и показывают все это дело, как им вздумается. Ловить все эти размеры — сущее наказание. Поэтому ну ее нафик эту кнопку. Любой (почти) пользователь и так знает, что достаточно набрать слово в строке и нажать клавишу Enter. 37

Кроме того, в самой строке ввода уже присутствует слово "Поиск" (или близкое по смыслу). Это дает понять посетителю, что данное окно существует для поиска, а не для получения денег, славы или того и другого одновременно. Чтобы это слово не мешалось при наборе текста, код прописан таким образом, что при установке курсора в окне, слово автоматически исчезает. Заметьте, что слово "Поиск" прописано в коде три раза. Если захотите вписать свое слово, то меняйте все три и следите, чтобы они были написаны одинаково. Сразу за поисковой формой мы вставили картинку RSS-фида: <a href="http://feeds.feedburner.com/icepepper"><img class="rssicon" src="<?php bloginfo('template_directory'); ?>/images/rss.jpg" alt="rss-icon" /></a>

Как и в файле header.php, где мы в мета-тэгах сразу прописали адрес фида, полученный нами в сервисе Feedburner, здесь мы тоже указали этот адрес. Тут можно возразить: а на кой мы снова добавляем ссылку на фид, да еще и с картинкой? Ведь у нас уже есть в шапочном меню ссылка на RSS. На это можно ответить только одно: это уловка, чтобы привлечь посетителя подписаться на наш фид. В шапке лишь маленькая ссылочка, которую он, возможно, и не заметит. А тут такая красота. Грех не кликнуть ☺ Это еще что! До кучи мы добавим эту ссылку еще раз в виде счетчика от того же Фидбурнера в блоке статистики. Пусть все видят, сколько у нас уже подписчиков имеется. Если вам по каким-либо причинам не захочется отдавать ссылочный вес на сторону, то можете в ссылке добавить параметр rel="nofollow", который отбивает нюх у Гугля и не дает ему перейти по такой ссылке. Выглядеть это будет так: <a rel="nofollow" href="http://feeds.feedburner.com/icepepper"><img class="rssicon" src="<?php bloginfo('template_directory'); ?>/images/rss.jpg" alt="rss-icon" /></a>

Далее идут блоки рубрик и архива: <h3>categories</h3> <ul> <?php wp_list_cats('sort_column=name'); ?> </ul> <h3>archives</h3> <ul> <?php wp_get_archives('type=monthly'); ?> </ul>

Здесь ничего сложного. Рубрики выводятся в алфавитном порядке по имени (name), а архивы по месяцам (monthly). Можно менять эти параметры довольно широко. К примеру, рубрики можно выводить не по имени, а по ID — идентификационному номеру, выданному рубрике самим ВП при ее создании. Более подробно по настройке вывода рубрик и архивов можно почитать в Кодексе ВП: По рубрикам: (http://codex.wordpress.org/Template_Tags/wp_list_cats) По архивам: (http://codex.wordpress.org/Template_Tags/wp_get_archives) А вот дальше у нас идет блок вывода ссылок (блогролл), который обрамлен интересным кодом: 38

<?php /* If this is the frontpage */ if ( is_home() ) { ?> <h3>blogroll</h3> <ul> <?php get_links(-1, '<li>', '</li>', ' - '); ?> </ul> <?php } ?>

Первая строка этого кода называется условием. Если помните, ранее я говорил о необходимости иметь в шаблоне почти одинаковые файлы home.php и index.php. Так вот, данное условие позволяет выводить блок ссылок только на главной странице блога, а на всех остальных его не будет. Причины тут могут быть у каждого свои. Если вам важен pr вашего блога, то вы знаете, о чем речь. Что же это за условие? Данный код говорит, что все, что лежит в пределах условия: <?php /* If this is the frontpage */ if ( is_home() ) { ?> ……………… <?php } ?>

Будет отображено только на главной странице, которая использует шаблон home.php — if ( is_home(). Если нам, например, нужно наоборот исключить содержимое из главной страницы, но разместить на всех остальных, то мы перед is поставим восклицательный знак: <?php /* If this is the frontpage */ if ( !is_home() ) { ?> ……………… <?php } ?>

Таким образом, можно создавать различные условия и даже цепочки условий, что весьма удобно. Последний блок в правом сайдбаре у нас выводит статистику. Тут тоже все просто: регистрируетесь в соответствующих сервисах, получаете от них код и вставляете в этот блок. Так как это не список и не абзацы текста, то чтобы кнопки не теснились одна к другой разделяйте их знаками переноса <br />. Если вписать подряд два таких знака, то получится пропуск размером примерно как между абзацами. Важное замечание! Блоки совершенно безболезненно можно как переставлять местами, так и переносить их из одного сайдбара в другой. Только не теряйте при этом куски кода и закрывающие тэги, где они есть. А теперь разберем код в файле CSS для наших сайдбаров: #l_sidebar { color: #8AA1AB; float: left; width: 207px; font-size: 95%; padding: 0 0 20px;

} #l_sidebar h3, #r_sidebar h3 { background: url(images/bull.gif) no-repeat 0 80%; color: #819CA8; font-size: 1.5em; letter-spacing: -1pt; margin: 0 0 10px 15px; padding: 10px 0 0 15px; } #l_sidebar ul, #r_sidebar ul { list-style: none; padding: 0 5px 10px 15px; } #l_sidebar ul li, #r_sidebar ul li { padding: 5px 0 0; } #l_sidebar ul li a, #r_sidebar ul li a { color: #BCB8D7; } #l_sidebar ul li a:hover, #r_sidebar ul li a:hover { color: #4B5A69; } #r_sidebar { color: #8AA1AB; float: right; width: 160px; font-size: 95%; padding: 0 0 20px; } .ads { margin: 10px 0 0 3px; } .tags { line-height: 16px; font-weight: bold; padding: 0 5px; } .tags a { color: #8DB38D; } .tags a:hover { color: #4B5A69; } .counters { margin: 10px 5px 10px 15px; }

При описании правил для сайдбаров мы применили сокращенную запись. К примеру, совершенно очевидно, что у нас и заголовки и оформление списков в обоих сайдбарах одинаково. Поэтому мы записали наименования соответствующих селекторов заголовков через запятую: #l_sidebar h3, #r_sidebar h3

и записали общий для них набор правил. Так же и для списков: #l_sidebar ul, #r_sidebar ul

и для пунктов этих списков: #l_sidebar ul li, #r_sidebar ul li

и для ссылок соответственно: #l_sidebar ul li a, #r_sidebar ul li a #l_sidebar ul li a:hover, #r_sidebar ul li a:hover

По сути, у нас различаются только основные правила для обоих сайдбаров: #l_sidebar { color: #8AA1AB; float: left; width: 207px; font-size: 95%; padding: 0 0 20px; }

и #r_sidebar { color: #8AA1AB; float: right; width: 160px; font-size: 95%; padding: 0 0 20px; }

Это понятно. Один имеет размер в 207 пикселей (почему не 210 — расскажу позднее), а второй 160, один плавает левее, второй правее. Общий фон для обоих (как и для контента) задан еще в блоке контейнера. Тут ничего сложного нет. А вот в следующем наборе правил для заголовков блоков есть кое-что интересное: #l_sidebar h3, #r_sidebar h3 { background: url(images/bull.gif) no-repeat 0 80%; color: #819CA8; font-size: 1.5em; letter-spacing: -1pt; margin: 0 0 10px 15px; padding: 10px 0 0 15px; }

Тут мы к заголовкам добавили в качестве фона картинку разноцветного квадратика. Мелочь, а приятно. Без повторов, разумеется, и с позиционированием, о котором уже рассказывал ранее. Остальные правила интуитивно понятны. Спискам ul мы указали отображение без маркеров (list-style: none;). Но почему же все-таки у нас левый сайдбар вышел меньшего размера, чем планировалось изначально? Как я уже и говорил, в блочной верстке, когда по горизонтали (то есть, как бы на одной строке) идут подряд несколько плавающих блоков, нельзя задавать размеры, что называется, "впритирку". Небольшой запас всегда нужно иметь для зазоров. Лирическое отступление: Вопрос этот спорный, и я уверен, что найдется немало строгих ревнителей чистоты верстки, которые обругают меня распоследними словами и скажут, что нужно делать все идеально. На это я ничего возразить не могу, но скажу лишь вот что: время летит быстро, стандарты меняются еще быстрее, а различия в работе браузеров столь переменчивы, что ни о каком постоянстве и речи быть не может. Кроме того, в верстке и без того хватает сложностей, чтобы размениваться на подобные мелочи. В конце концов, не столь важно будет ли наш левый сайдбар в 210 или в 207 пикселей по ширине. Главное, что он никуда не сползает и одинаково отображается во всех браузерах. А точнейшая, пиксель в пиксель состыковка блоков нам не требуется. Правый же блок у нас строго заданного размера в 160 пикселей. Так как картинка RSS-фида тоже такой же ширины, то мы не можем менять размер этого блока, как нам заблагорассудится. И, в частности, именно из-за этого нам пришлось немного урезать левый сайдбар на 3 пикселя. Иначе правый "убегал" вниз, ему просто не хватало места. Продолжим разбирать код CSS: Следующие два правила отображают форму поиска: #searchform { overflow: hidden; } #s { background: url(images/search.gif) no-repeat; width: 131px; height: 21px font-size: 1em; padding: 2px 5px; margin: 10px 0 0 15px; }

Правило overflow: hidden; предназначено для того, чтобы содержимое блока не выползало за его пределы, если, например, текст не умещается в нем. Когда мы вводим в поисковую строку длинное предложение, то его начало "прячется" за левым краем окна. 42

Селектор #s мы прописали непосредственно у поля ввода, которое в форме называется input. Для него мы задали нашу картинку в качестве фона и заодно прописали размеры по ширине и высоте. Все остальное достаточно просто и понятно. Следующий блок с классом .ads предназначен для вывода баннеров 100х100, о которых мы уже говорили. .ads { margin: 10px 0 0 3px; }

Далее три правила предназначены для оформления вывода тэгов. Им мы задали другие цвета ссылок и жирный шрифт: .tags { line-height: 16px; font-weight: bold; padding: 0 5px; } .tags a { color: #8DB38D; } .tags a:hover { color: #4B5A69; }

Последнее правило для сайдбаров предназначено для оформления размещения счетчиков: .counters { margin: 10px 5px 10px 15px; }

На этом с сайдбарами покончим. Полный код файла l_sidebar.php: <div id="l_sidebar"> <div class="ads"> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/100.gif" alt="banner" /></a></div> <h3>recent entries</h3> <ul> <?php get_archives('postbypost', 10); ?> </ul> <h3>latest comments</h3>

<ul><?php get_recent_comments(); ?></ul> <h3>tag cloud</h3> <p class="tags"><?php wp_tag_cloud('smallest=8&largest=18&number=0'); ?></p> </div>

Полный код файла r_sidebar.php: <div id="r_sidebar"> <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"><input type="text" name="s" id="s" value="search" onblur="if(this.value=='') {this.value='search';}" onfocus="if(this.value=='search') {this.value='';}" /></form> <a href="http://feeds.feedburner.com/icepepper"><img class="rssicon" src="<?php bloginfo('template_directory'); ?>/images/rss.jpg" alt="rss-icon" /></a> <h3>categories</h3> <ul> <?php wp_list_cats('sort_column=name'); ?> </ul> <h3>archives</h3> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> <?php /* If this is the frontpage */ if ( is_home() ) { ?> <h3>blogroll</h3> <ul> <?php get_links(-1, '<li>', '</li>', ' - '); ?> </ul> <?php } ?> <h3>statistic</h3> <div class="counters"> <a rel="nofollow" href="http://feeds.feedburner.com/icepepper"><img src="http://feeds.feedburner.com/~fc/icepepper?bg=15191c&amp;fg=AAC6D2&amp;anim=0&a mp;label=readers" alt="feedburner" /></a><br /><br /> <script type="text/javascript"><!-document.write("<a href='http://www.liveinternet.ru/click' "+ "target=_blank><img src='http://counter.yadro.ru/hit?t25.10;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet: показано число посетителей за"+ " сегодня' "+ "border=0 width=88 height=15><\/a>")//--></script></div> </div>

*код счетчиков вы пишете свой собственный! Здесь представлен код только для ознакомления (синего цвета).

Подвал (файл footer.php) Подвал — штука нужная и полезная. Сюда кроме копирайтов, названия блога и всяких ссылок можно вынести много чего. Кто-то даже переносит сюда часть блоков из сайдбара. Мы же не станем мудрить и покажем самый минимум. Для блога с двумя сайдбарами этого вполне достаточно. Итак, откроем файл footer.php и посмотрим, что там есть. Вначале опять идет очистка: <div class="clearfloat"></div>

Чтобы не повторяться, скажу лишь, что все описанное для блока контента применимо и здесь. И даже если наш подвал в листе стилей задан по ширине всего контейнера (в 960 пикселей), все равно стоит добавить эту очистку. Подвал может быть и не станет забираться на территорию сайдбаров, но в ИЕ, например, может возникнуть неприятный эффект, когда при наведении мыши на любую из ссылок подвала, его фон как бы подпрыгивает вверх. Вот чтобы такого не случалось, мы и добавили очистку. В любом случае не помешает. Следом идет открытие блока с селектором #footer. Посмотрим, что там есть: <div id="footer"> <p>&copy; <a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>, 2008 | all right reserved | design by <a href="http://www.dizweb.ru/">dizweb</a></p> </div>

Да, в общем-то, ничего сверхъестественного. Значок копирайта, затем ссылка на блог (ее посредством вот этого кода <?php echo get_settings('home'); ?>/ выводит сам ВП), год вы указываете сами. Все остальное — по вкусу. Можно сюда же переместить счетчики статистики. В конце добавим еще один закрывающий </div>. Таким образом, мы закроем блок #container, открывающий тег которого был еще в файле шапки. Не забудьте парочку закрывающих тэгов </body> и </html>. В стилях для подвала так же нет ничего сложного: #footer { background: #15191c url(images/bg-footer.gif) no-repeat; width: 960px; height: 44px; color: #43728B; font-size: .9em; margin: 0 auto; } #footer p { padding: 15px 0 0 140px; } #footer a, #footer a:visited { color: #4AA0CF;

text-decoration: none; } #footer a:hover { color: #43728B; text-decoration: underline; }

В качестве фона мы использовали подготовленную картинку bg-footer.gif с размерами 960х44 пикселя, и такой же размер задали всему блоку. Текст подвала у нас взят в тэги абзаца (р), которому мы задали поля padding: 15px 0 0 140px; Обратите внимание: если вы перепутаете и впишете вместо полей (padding) отступы (margin), то получите жуткую картинку в ИЕ. У вас справа вылезет кусок фона как у подвала, так и у правого сайдбара. Так что бдите! Все остальное просто как 2х2. —————————————— Как придавить футер к низу? А теперь, как и обещал, расскажу каким образом можно прижать футер к низу экрана монитора, когда у нас мало контента и он (футер) плавает где-то посередке. Идею подсказал веб-мастер с кувалдой (http://webmolot.com/prizhimaem-futer-k-nizu/), за что ему вечный респект! Принцип тут следующий: нужно вначале вынести блок футера из общего контейнера, затем обоим задать относительное позиционирование, блоку контейнера добавить внизу блок-распорку по высоте равную высоте футера, а футеру, в свою очередь, задать отрицательный верхний отступ на то же значение. Получится, что контейнер у нас распространяется на всю высоту экрана. Но чтобы подвал не потерялся за нижним краем монитора, мы его "подтягиваем" вверх на отрицательную высоту. То есть, чтобы проделать этот трюк, надо заранее знать, какой высоты будет подвал. Ну, а так как мы это уже знаем, то нет ничего проще. Смотрим, как это делается. Вначале вынесем подвал за пределы контейнера. Зайдем в файл footer.php и просто передвинем последний закрывающий </div> вверх, над блоком #footer. Кроме того, еще чуть выше добавим блок-распорку с классом .empty. Должно получиться следующее: <div class="clearfloat"></div> <div class="empty"></div> </div> <div id="footer"> <p>&copy; <a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>, 2008 | all right reserved | design by <a href="http://www.dizweb.ru/">dizweb</a></p> </div> </body> </html>

Далее забираемся в файл CSS, где в самом верху добавим несколько правил: 46

html, body { width: 100%; height: 100%; } * html #container { height: 100%; } .empty { height: 44px; }

Первое правило понятно, пляшем по всему полю. Второе — это так называемый "хак", специально для браузера ИЕ, чтобы он верно отображал нашу задумку. Третье — код для блока-распорки, которому мы задали высоту в 44 пикселя. Если помните, наш подвал точно такой же высоты. Кроме этого, блоку #container добавим парочку новых правил: #container { position: relative; background: #27363E url(images/bg-container.gif) repeat-y; width: 960px; margin: 0 auto; min-height: 100%; }

Здесь появилось относительное позиционирование (position: relative;) и указание на минимальную высоту блока в 100% (min-height: 100%;). Набор правил для подвала исправим таким образом: #footer { position: relative; background: #15191c url(images/bg-footer.gif) no-repeat; width: 960px; height: 44px; color: #43728B; font-size: .9em; margin: -44px auto 0; }

Здесь мы так же добавили относительное позиционирование, а отступы переписали в виде margin: -44px auto 0; (сверху минус 44, по бокам авто, снизу 0). Вот и все! Теперь у нас подвал при любом количестве контента на странице всегда будет лежать внизу экрана.

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

Оформление комментариев — штука тоже довольно интересная и творческая. Для интереса посмотрите, какие могут быть варианты: Комментарии: (http://www.smileycat.com/design_elements/blog_comments/) Формы: (http://www.smileycat.com/design_elements/blog_comment_forms/). Вариаций может быть бесконечно много. Для нашего шаблона я нарисовал небольшую картинку с градиентом и расположил ее вверху списка комментариев. Получилась своеобразная подсветка

Но обо всем по-порядку. Открываем файл comments.php и смотрим, что в нем есть. Все, что лежит выше строки  лучше не трогать и даже не сдвигать с места. Ниже, как сама за себя говорит данная строка, вы можете уже что-то редактировать. Комментарии размещаются в блоке с идентификатором id="commentblock". Схема проста и незамысловата: вначале идет список самих комментов, оформленный нумерованным списком <ol>, ниже располагается форма для заполнения. Чтобы не вдаваться в излишние подробности, расскажу лишь о том, что нам непосредственно понадобится при создании собственного шаблона. Большая же часть php-кода в этом файле практически идентична от шаблона к шаблону, и его мы будем просто использовать "как есть". Итак, начнем с вывода комментариев. <p class="comments"><?php comments_number('Комментариев нет', 'Один комментарий', 'Комментарии (%)' );?> на запись &#8220;<?php the_title(); ?>&#8221;</p>

Данная строка выводит над комментариями сообщение о количестве комментов, если таковые имеются. Что-то похожее нам уже попадалось в файле home.php. В принципе эту строку можно безболезненно удалить. Считается, что чем больше число комментов, тем привлекательнее пост для последующих комментаторов. Возможно, оно так и есть. Добавлю лишь, что код вида &#8220; и &#8221; — не что иное как двойные кавычки, а то, что расположено между ними — <?php the_title(); ?> — это заголовок поста. В чем вы можете убедиться на представленном выше скриншоте. Следом за списком идет заголовок <h3>Трэкбеки</h3>. И далее опять же список, только уже немаркированный (<ul>). Зачем это нужно? Дело в том, что трэкбэки по сути так же являются чем-то вроде комментов. Во всяком случае, в большинстве шаблонов они так и выводятся — вместе с обычными комментариями. Но выглядят при этом не совсем казисто — с квадратными скобками, многоточиями и т.п. В нашем шаблоне мы, во-первых, вывели трэкбэки вниз, после всех комментов живых человеков, а во-вторых, придали им более удобоваримый вид вот при помощи этой строки: <li><?php comment_author_link() ?></li>

И теперь у нас трэкбэки выводят не кусок выдранного текста из чужого поста, а заголовок страницы, где этот текст находится. То есть, из титла. Выглядит как красивая и понятная ссылка. Далее в нашем файле идет предложение оставить комментарий, оформленное обычным абзацем. И добавочный абзац с предложением зарегистрироваться на блоге, чтобы оставить коммент. Этот добавочный абзац появится в том случае, если вы в админской блога укажете необходимость регистрации. Это понятно. А вот дальше идет код формы для заполнения. По обыкновению здесь имеется три строки: автор, мыло и сайт, и текстовое поле для комментария. Кроме того, мы сюда же добавили еще кусок кода, взятый из плагина "math-comment-spamprotection": /****** Math Comment Spam Protection Plugin ******/ if ( function_exists('math_comment_spam_protection') ) { $mcsp_info = math_comment_spam_protection(); ?> <p><input type="text" name="mcspvalue" value="" size="22" tabindex="4" /> <label for="mcspvalue"><small>Антиспам. Решите: <?php echo $mcsp_info['operand1'] . ' + ' . $mcsp_info['operand2'] . ' ' ?></small></label> <input type="hidden" name="mcspinfo" value="<?php echo $mcsp_info['result']; ?>" /> </p> <?php } // if function_exists... ?>

Этот плагин очень хорошо помогает справиться с роботами-комментаторами, предлагая решить простейшую арифметическую задачу на сложение. Этот код добавляет в форму еще одну строку, в которую необходимо вписать решение. Сам пример располагается рядом. Здесь есть небольшая хитрость. Само собой разумеется, что плагин необходимо прежде скачать (http://sw-guide.de/wordpress/plugins/math-comment-spamprotection/), добавить в папку плагинов и активировать. Но сразу он работать отказывается и выдает в форме ошибку. Для того, чтобы это поправить, нужно 50

зайти в Настройки, далее в раздел Math Comment Spam и там просто нажать кнопку Update Options. Хотя при желании можете заодно перевести пару строк с буржуйского на русский. Думаю, сами разберетесь, там все просто. Следом за кодом плагина математической капчи идет вот такая закомментированная строка:

Ее по-умолчанию не видно. Если вы хотите сообщить комментатору, что он может использовать в комменте некоторые разрешенные html-тэги, то просто удалите знаки комментирования . Должно остаться так: <p><small><strong>XHTML:</strong> Вы можете использовать эти теги: <?php echo allowed_tags(); ?></small></p>

Вот, в общем-то, и все, что можно сказать о коде файла comments.php. Теперь обратимся к набору правил в листе стилей CSS, которые отвечают за оформление списка комментов и внешний вид формы. #commentblock { width: 520px; background: #15191c url(images/bg-comment.jpg) no-repeat; color: #74848D; float: left; padding: 20px 20px 10px 20px; margin: 10px 0 0; border-top: 5px solid #000; border-bottom: 2px solid #7B848A; } #commentblock ol{ list-style-position: inside; margin: 0; padding: 0 0 10px; } .comments { font-size: 1.5em; font-weight: bold; } .approve { font-style: italic; } .commenttext { background: #000; width: 500px; margin: 3px 0 10px 0; padding: 20px 10px 5px 10px; clear: both; }

#commentform input, #commentform textarea { background: #27363E; border: 1px solid #7B848A; color: #819CA8; font-size: 1.2em; padding: 1px 5px; } #commentform textarea { scrollbar-base-color: #15191c; }

Первый набор правил предназначен для блока комментариев в целом. Здесь мы задали ширину блока в 520 пикселей (понятно, что шире контентной части он быть не может). Также задали цвет фона и картинку без повтора. Так как ширина картинки тоже 520 пикселей, то она встанет четко на место:

Чтобы еще больше подчеркнуть эффект свечения, мы добавили сверху контур черного цвета в 5 пикселей. Внизу блока наоборот выделили границу светлой полоской в 2 пикселя. В следующем наборе правил для нумерованного списка (#commentblock ol) мы задали отображение порядковых чисел "внутри" (inside): list-style-position: inside;

Если этого не сделать, то номера могут вылезти за границу блока и даже вообще исчезнуть из поля видимости. Набор правил, .comments служит для оформления строки о наличии и количестве комментов. А .approve — предназначен для строки сообщения, что комментарий находится на модерировании. Следующий набор правил указывает на оформление текста комментария: .commenttext { background: #000; width: 500px; margin: 3px 0 10px 0; padding: 20px 10px 5px 10px; clear: both; }

Чтобы как-то его выделить на общем фоне, мы задали ему собственный цвет фона — черный. Слишком пестрить тоже ни к чему. Ширина его немного меньше самого блока комментов. Очистка (clear: both;) нужна затем, чтобы комменты не наползали один на другого, если предыдущий, например, состоит всего из пары слов и занимает недостаточно места. Теперь рассмотрим набор правил для формы комментирования. Строки для записи имени, мыла, адреса сайта и решения антиспамерской задачи в коде форме оформлены тэгами <input>. Обратите внимание: этот тэг, так же как и тэг изображения (<img>) не имеет закрывающего тэга. Поэтому в конце перед закрывающей угловой скобкой обязательно должен быть пробел со слэшем / Так как все эти строки у нас одинаковые, то мы написали несколько правил непосредственно для тэга input, не "утяжеляя" его никакими классами и, тем более, "дивами". Единственное, что мы указали более конкретно, так это к какому блоку относятся данные "инпуты" (ведь у поисковой формы тоже есть свой "инпут") — #commentform input. Сам набор правил уже понятен. Если вы не пропишете для "инпутов" никаких правил, то они по-умолчанию будут отображаться как стандартные элементы формы: с белым фоном и без какихлибо рамок. Все то же самое можно сказать и о текстовом поле для записи комментария — textarea. И потому мы объединили его вместе с "инпутами" в одном наборе правил: #commentform input, #commentform textarea { … и т.д. }

Последний набор правил для нашей формы предназначен для вертикальной полосы прокрутки, который по-умолчанию всегда есть у текстового поля textarea с правой стороны. И так же по-умолчанию он светло-серого цвета. На темном фоне это смотрится слишком пестро. Поэтому мы прописали для этой полосы свой цвет фона: #commentform textarea { scrollbar-base-color: #15191c; }

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

Полный код файла comments.php: <?php // Do not delete these lines if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die (''); if (!empty($post->post_password)) { // if there's a password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie ?> <p>Эта запись защищена паролем. Введите пароль для просмотра комментариев.</p> <?php return; } } /* This variable is for alternating comment background */ $oddcomment = 'alt'; ?>  <div id="commentblock"> <?php if ($comments) : ?> <p class="comments"><?php comments_number('Комментариев нет', 'Один комментарий', 'Комментарии (%)' );?> на запись &#8220;<?php the_title(); ?>&#8221;</p> <ol> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type == 'comment') { ?> <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>"> <?php comment_author_link() ?> <?php if ($comment->comment_approved == '0') : ?> <p class="approve">Ваш комментарий ожидает подтверждения.</p> <?php endif; ?> <?php comment_date('d.m.Y') ?> <?php comment_time('H:i') ?> <?php edit_comment_link('редактировать','',''); ?> <div class="commenttext"> <?php comment_text() ?> </div> </li> <?php /* Changes every other comment to a different class */ if ('alt' == $oddcomment) $oddcomment = ''; else $oddcomment = 'alt'; ?> <?php } /* End of is_comment statement */ ?> <?php endforeach; /* end for each comment */ ?>

</ol> <h3>Трэкбеки</h3> <ul> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type != 'comment') { ?> <li><?php comment_author_link() ?></li> <?php } ?> <?php endforeach; ?> </ul> <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?>  <?php else : // comments are closed ?>  <p class="nocomments">Обсуждение закрыто.</p></div> <?php endif; ?> <?php endif; ?>

<?php if ('open' == $post->comment_status) : ?> <p id="respond"><strong>Оставить комментарий</strong></p> <?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p>Вы должны <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">войти</a>, чтобы оставить комментарий.</p> <?php else : ?> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?> <p>Привет, <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wplogin.php?action=logout" title="Выйти">Выйти &raquo;</a></p> <?php else : ?> <p><label for="author">Имя <?php if ($req) echo "(обязательно)"; ?></label><br /> <input type="text" name="author" value="<?php echo $comment_author; ?>" size="40" tabindex="1" /></p> <p><label for="email">Email<?php if ($req) echo "(обязательно)"; ?></label><br /> <input type="text" name="email" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" /></p> <p><label for="url">Сайт</label><br /> <input type="text" name="url" value="<?php echo $comment_author_url; ?>" size="40" tabindex="3" /></p> <?php endif; ?> <?php

/****** Math Comment Spam Protection Plugin ******/ if ( function_exists('math_comment_spam_protection') ) { $mcsp_info = math_comment_spam_protection(); ?> <p><input type="text" name="mcspvalue" value="" size="22" tabindex="4" /> <label for="mcspvalue"><small>Антиспам. Решите: <?php echo $mcsp_info['operand1'] . ' + ' . $mcsp_info['operand2'] . ' ' ?></small></label> <input type="hidden" name="mcspinfo" value="<?php echo $mcsp_info['result']; ?>" /> </p> <?php } // if function_exists... ?>  <p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Отправить" /> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p> <?php do_action('comment_form', $post->ID); ?> </form> </div> <?php endif; // If registration required and not logged in ?> <?php endif; // if you delete this the sky will fall on your head ?>

Остальные страницы (файлы index.php, 404.php, page.php, search.php) В этой главе я объединил оставшиеся 4 файла нашего шаблона, которые соответственно выводят 4 вида страниц: отдельный пост, страницу ошибок (ошибка №404), постоянную страницу и страницу результатов поиска. Объединил по одной простой причине: все они достаточно просты для понимания, если вы внимательно прочитали весь предыдущий текст. Но начнем по-порядку. index.php. Как я уже упоминал, данный файл практически идентичен файлу home.php. В нашем наборе файлов он служит для вывода страниц с отдельными постами. И по этой же причине мы в коде просто добавили "пристежку" вывода комментариев и сам заголовок третьего уровня <h3>Comments</h3>. Ничем другим этот файл от home.php не отличается. При желании вы можете разместить здесь баннеры или изменить что-то из оформления, и все эти отличия будут видны только на страницах с отдельными постами, но не на главной. Надеюсь, это понятно. 404.php. Этот файл в шаблоне наиболее простой. Тут все так же, как и в файле home.php, за исключением вывода постов. Вместо этого мы просто добавили небольшой абзац, поясняющий посетителю, каким образом он тут оказался. Но зачем нам терять посетителя? Того и гляди еще обидится и совсем не придет больше. Лучше не просто сказать ему, что ошибочка вышла, а предложить что-то полезное до кучи. Вот мы и вставили кусочек следующего кода: <ul> <?php get_archives('postbypost', 50); ?> </ul>

Ничего не напоминает? Да ведь это обычный список последних записей из архива! Точно такой же (почти) кусок кода есть в нашем левом сайдбаре, если помните. Только там мы в скобках ставили значение 10, а тут все 50. А чего мелочиться? Пусть будет список подлиннее. Все равно на этой странице ничего больше нет. А так, возможно, посетитель все-таки чем-то заинтересуется. Кроме списка здесь можно также разместить все, что сами найдете нужным, хоть баннеры, хоть форму поиска от Гугля. Важно дать понять посетителю, что ошибка — это еще не конец истории. page.php. Файл выводит постоянные, то есть, статичные страницы. Мы о них уже говорили, но на всякий случай повторю: статичные страницы — это обычно: О сайте, Об авторе, Контакты, и т.п. Они выводятся списком в главном меню, сами никуда не "уплывают" как посты, а висят все время там, куда их прицепили. Код этого файла очень похож на код home.php или index.php за одним исключением: тут нет кода, выводящего дату, наименование рубрики и количество комментов. Ну, это понятно. Зачем на странице Об Авторе, например, указывать когда она написана? Комменты там тоже ни к чему. А уж про рубрики думаю объяснять совсем не стоит, ибо постоянные страницы с ними никак не соотносятся. Соответственно, здесь нет также и пристежки для вывода комментариев.

search.php. Файл выводит страницу с результатами поиска. Он так же очень похож на файлы home.php и index.php, но у него есть все же небольшое отличие. Если посмотрите внимательно на представленный ниже код, а потом сравните его с похожим участком в указанных файлах, то возможно заметите эту разницу: <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <?php the_excerpt(__('Читать полностью'));?>

Чтобы не томить читателя, подсказываю: обратите внимание на последнюю строку в этом коде. Слово the_excerpt означает, что в этом месте появится не полный текст, найденный по заданному слову или предложению, а лишь выдержка (excerpt) из него. Во всем остальном нет ничего нового или незнакомого. ————————————————————————— Вот мы и разобрали весь наш шаблон и прикрутили к нему собственноручно нарисованный дизайн. Осталось только сделать с него скриншот (обычный размер — 300 пикселей по ширине и около 240-250 по высоте) и добавить его в папку шаблона с именем screenshot.jpg. Все, что я мог упустить или намеренно не внес в текст книги, я поместил (и буду пополнять периодически) в FAQ. Буду рад вашим отзывам, а еще более — вопросам, которые вы можете смело направлять в мыло kventori@yandex.ru мне, Игорю Квентору. Спасибо за ваше внимание! Полный код файла index.php: <?php get_header(); ?> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <?php the_content(__('Читать полностью'));?> <div class="clearfloat"></div> <div class="post-date">Дата: <?php the_time('d.m.') ?><?php the_time('Y') ?> | Рубрика: <?php the_category(', ') ?> | <?php comments_popup_link('Оставить комментарий', '1 Комментарий', 'Комментарии (%)'); ?> </div> <div class="clearfloat"></div> <!-<?php trackback_rdf(); ?> --> <h3>Comments</h3> <?php comments_template(); // Get wp-comments.php template ?> <?php endwhile; else: ?>

Полный код файла 404.php: <?php get_header(); ?> <div id="content"> <h1>Не найдено, Error 404</h1> <p>Страница, которую Вы ищете, видимо, удалена или не существовала ранее.</p> <p>Однако вы можете попробовать поискать необходимую информацию в следующих статьях:</p> <ul> <?php get_archives('postbypost', 50); ?> </ul> </div> <?php include(TEMPLATEPATH."/l_sidebar.php");?> <?php include(TEMPLATEPATH."/r_sidebar.php");?> <?php get_footer(); ?>

Полный код файла page.php: <?php get_header(); ?> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <?php the_content(__('Читать полностью'));?> <div class="clearfloat"></div> <?php trackback_rdf(); ?>

<?php endwhile; else: ?> <p><?php _e('По вашему запросу ничего нет.'); ?></p><?php endif; ?> </div> <?php include(TEMPLATEPATH."/l_sidebar.php");?> <?php include(TEMPLATEPATH."/r_sidebar.php");?>

<?php get_footer(); ?>

Полный код файла search.php: <?php get_header(); ?> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2> <?php the_excerpt(__('Читать полностью'));?> <div class="clearfloat"></div> <!-<?php trackback_rdf(); ?> --> <?php endwhile; else: ?> <p><?php _e('По вашему запросу ничего нет.'); ?></p><?php endif; ?> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> </div> <?php include(TEMPLATEPATH."/l_sidebar.php");?> <?php include(TEMPLATEPATH."/r_sidebar.php");?> <?php get_footer(); ?>

FAQ 1. Каким текстовым редактором пользоваться при написании и редактировании кода? Я рекомендую специальный бесплатный(!) редактор, разработанный программистами для программистов же. Но при этом он весьма удобен и для верстальщиков, коими мы в данный момент и являемся. Называется редактор PSPad, скачать его можно вот по этой ссылке: http://www.pspad.com/ru/. При работе с файлами шаблона ВП не забудьте в настройках этого редактора, в разделе Формат выставить пункт UTF-8, иначе вместо кириллицы получите на выходе кракозябры. 2. Я писал(а) код в Блокноте, и у меня весь шаблон расползается после установки. Что делать? Вы не послушались моего первого совета и решили использовать Блокнот, прослышав где-то, что Старые Верстальщики были героями и использовали самое простое и доступное средство. Возможно, когда-то так оно и было, пока не появился PHP. Дело в том, что Блокнот добавляет в свои текстовые файлы куски невидимого глазу кода. Вам кажется, что вы все верно записали, но на самом деле код имеет эти скрытые знаки. А движок Вордпресс (как впрочем и любой другой скрипт php) более проницательный товарищ, и все скрытое не любит и не переваривает. Поэтому смотри пункт 1. 3. Вот вы пишете, что используете для создания макета Фотошоп. А вы пользуетесь лицензионной версией? А как же! 4. А если у меня нет денег на лицензионный Фотошоп, то как мне быть? На самом деле для отрисовки макета вовсе не обязательно использовать дорогие и сложные программные продукты. Для этих целей так же подойдут всевозможные бесплатные графические редакторы. Например, GIMP (http://www.gimp.org/). Последняя версия 2.6, весит около 15,5 Мб. 5. Я все-таки не понял(а) как нарисованный макет порезать на отдельные картинки. Кто-то говорит, что надо использовать инструмент Slice Tool в Фотошоп. "Способов поймать рыбу столько же, сколько и самой рыбы!" (старая индейская поговорка). Можно разрезать макет и этим инструментом. Особенно, если сам макет состоит из множества мелких деталей, которые нужно точно подгонять друг к другу, а так же линий, закругленных уголков и прочего добра. Наш макет довольно прост. И, кроме того, просторен. Я мог бы вырезать из него лого как в 153 пикселя шириной, так и во все 200, благо места справа от него вполне достаточно. Поэтому я просто использовал инструмент Crop Tool. Вырезал одну деталь — вернулся на пару шагов назад, вырезал другую — сделал то же самое. Лично мне так проще.

6. В файле CSS я прописал(а) для шапки картинку в качестве фона, а в ИЕ (Internet Explorer) ее почему-то не видно. В чем дело? Самая распространенная и весьма часто встречающаяся ошибка. Происходит такое потому, что в наборе правил неверно записана строка для фона (background). Ошибка практически незаметна, всего лишь один пробел, но именно поэтому ИЕ отказывается "видеть" картинку. Смотрим внимательно, показываю вначале неправильную запись, а потом верную: background: #fff url(images/header.jpg)no-repeat; background: #fff url(images/header.jpg) no-repeat;

Кто первым заметит разницу? Верно! Во второй строке между закрывающей скобкой и словом no-repeat есть пробел. Именно он, вернее его отсутствие, является ошибкой для ИЕ. Кто не догнал, повторю: пробел нужен! 7. Я не забыл(а) вставить пробел (см пункт выше), однако у меня ваще не показывается ни одной картинки, даже те, что просто добавлены в код страниц с тэгом img. Что за фигня? Проверьте, с какими именами вы сохраняете картинки в папке images. Очень часто начинающие вебмастера не видят разницы между записью названий картинок на русском и на латинице. Порой изображения сохраняют вообще с целыми предложениями в имени, причем с пробелами, запятыми и прочими вопросительно-восклицательными знаками. Я не шучу! Уж поверьте на слово, попадалось и такое: Картинка шапки с синим фоном и дефкой посредине.jpg Кто еще не осознал, "Картинка шапки с синим фоном и дефкой посредине" — это было имя изображения. Естественно, что браузеры не станут показывать эдакую страсть, ибо и за картинку это даже не посчитают. Так что только латиница и без всяких пропусков (пробелов) и прочих излишеств. Если вам так дорога эта "дефка" посредине да на синем, то пишите хотя бы так: cartinka_shapki_s_sinim_fonom_i_defkoy-posre-dine.jpg 8. После установки шаблона появились жуткие надписи вида "Parse error!" вместо сайдбара (футера, контента и т.п.). В чем ошибка? Такое возникает обычно по двум причинам: а) Вы добавили в порушенный файл кусок кода какого-либо плагина, но сам плагин еще не активировали. Как, например, в нашем шаблоне: если не установить и не активировать(!) плагин антиспамерсой капчи, то вместо комментов вы увидите сообщение об ошибке. б) Вы так увлеклись редактированием файла, что потеряли кусок php кода. Обычно теряют "хвостики" вида <?php } ?> или <?php endif; ?>. Внимательно проверьте весь код, буквально по буквам. Ведь даже потеря одной закрывающей угловой скобки делает код неработоспособным. 62

9. У меня уже активированы некоторые плагины Вордпресс. Надо ли мне после установки собственного шаблона заново их активировать? Нет, не надо. Плагины работают независимо от шаблона. Другое дело, что если какой-либо из плагинов требует добавления некоторого кода в шаблон для своей работы. Вот тогда придется внимательно почитать описание к плагину (читайте readme — это всегда полезно) и разместить указанный код в нужном месте. 10. Мне нужно гораздо больше статичных страниц, чем у вас в шаблоне. Что делать, если они не умещаются в шапке? Статичные страницы обычно выводятся при помощи вот такого кода (в нашем шаблоне он несколько видоизменен): <ul> <li><a href="<?php echo get_settings('home'); ?>">Главная</a></li> <?php wp_list_pages('title_li='); ?> </ul>

Никто и ничто не помешает вам взять этот кусок и поместить его, например, в одном из сайдбаров. Тогда список статичных страниц будет выводиться там. Ну а в сайдбаре, сами понимаете, можно этот список писать в столбик до бесконечности. 11. Почему в вашем шаблоне (в сайдбаре) нет блока Меtа, в котором должны быть ссылки для входа/выхода на сайт? Я не использую этот блок, потому что обычно являюсь единственным "входящим/выходящим" на свои блоги, и мне совершенно ни к чему показывать эти ссылки кому-либо другому. Чтобы войти в админскую, я использую простую ссылку: http://www.мой_сайт.ru/wp-login.php которая находится у меня в браузере в виде обычной закладки. 12. Я все вычислил(а) и отмерил(а) с микрометром, но у меня все равно сайдбар уполз вниз в ИЕ, а в Опере показывает нормально. В чем дело? Браузер ИЕ очень своеобразный товарищ, и многие вебмастера втайне мечтают как бы его придушить во сне. Однако сим браузером пользуется достаточно большое количество посетителей, и приходится смиряться с его выходками. В частности, ИЕ отличается иным способом вычисления отступов (margin). Поэтому совет такой: не тесните блоки что называется "впритирку". То есть, если ширина контейнера 800 пикселей, и вам нужно вложить в него 2 подряд блока с шириной по 400 пикселей каждый, то либо раздвиньте сам контейнер на 10-20 пикселей, либо уменьшите блоки соответственно. Всегда оставляйте небольшой запас. Если все-таки нужно очень точно состыковать блоки (например, чтобы совпали края каких-то фоновых рисунков), то либо не используйте отступы вообще (в CSS первым набором правил со звездочкой * обнуляем их для всего сайта), либо не мельчите с нарезкой фона, а кладите его общей картиной, либо внедряйте в 63

блочную верстку кусок кода с таблицей. Но думаю, те, кто читает данную книгу, не станут воротить сразу мега-шаблон со сложной графикой. Кроме того, сползание сайдбара может быть вызвано вставкой слишком широкой картинки или крупного и длинного (одно очень длинное слово) заголовка блока, который (заголовок) сам по себе не сделает орфографический перенос с дефисом вроде "Наисвежайшейней-шие записи". 13. Снова траблы с ИЕ. Во всех браузерах показывает как надо, а в ИЕ между блоками лишний просвет в 1-2 пикселя. Как быть? В некоторых случаях бывает необходимо конкретно для Internet Explorer указать несколько иной набор правил в CSS. Какому-либо из блоков добавить или убрать пару-тройку или даже 1 пиксель. Для этого можно применить так называемый "хак" — условие, которое явно говорит: "если используется браузер IE, то брать вот это правило, или вот этот файл CSS". Чтобы это сработало, нужно в метатэгах (в файле header.php шаблона), следом за ссылкой на основной файл CSS, добавить вот такой кусок кода:

И, соответственно, добавить в шаблон еще один файл CSS, который так и назвать — ie.css. А уже в нем отдельно для ИЕ прописать необходимый набор правил. Причем заметьте: нет нужды писать в нем заново все остальные правила. Только тот, что нужно изменить. Все остальное ИЕ "возьмет" из основного файла стилей. 14. Я хочу кое-чего поменять в своем шаблоне, но при заходе из админской блога в раздел редактирования шаблона вижу запись: "Если бы этот файл не был защищен от записи, вы могли бы его отредактировать". Как быть? Чтобы редактировать файлы шаблона из админской блога, необходимо выставить на них разрешение на запись — 777. Но учтите, что поступая таким образом, вы открываете потенциальную возможность для взлома блога, ибо не только вы сможете воспользоваться этой лазейкой. А потому либо правьте файлы у себя на локальном компьютере и потом перезаливайте их заново на хостинг, либо меняйте разрешения на три семерки, правьте код, а потом восстанавливайте разрешения до их прежнего значения. 15. Я осилил(а) предыдущий текст, но не нашел (не нашла), где эти разрешения поменять. Разрешения на файлы вы можете поменять в своем аккаунте на хостинге. Заходите туда, используя свои логин и пароль, ищете раздел "Менеджер файлов" или что-то похожее, там последовательно гуляя по папкам, забираетесь в папку с шаблоном, кликаете на нужном файле и ищете (если панель DirectAdmin, то внизу таблички, если CPanel, то справа вверху) Set Permission или Change Permissions и меняете числа соответственно. Вполне вероятно, что после изменения разрешения на конкретный файл, вы в админской блога все равно увидите ругательную запись о невозможности 64

редактирования файла. Тогда придется сменить права и у папки с шаблоном, и у папки wp-themes, и даже у самаглавной папки — public_html так же. 16. Где я могу проверить правильность написанного кода? Для этого существуют, так называемые, валидаторы. Как для кода страниц, так и для файла CSS. Первый находится вот по этому адресу: http://validator.w3.org/ , а второй здесь: http://jigsaw.w3.org/css-validator/ Проверить вы можете как страницы из сети, то есть уже находящиеся на хостинге, так и со своего собственного компьютера. Но учтите, что валидатор будет проверять не конкретно файл home.php или index.php, а уже "собранную" сервером полностью страницу. Когда эта страница приходит с хостинга, то все в порядке, а когда проверяете со своего компа, то вам придется вначале запустить у себя Денвер, потом открыть страницу сайта, затем сохранить ее в какой-нибудь папке в виде отдельного файла html, и только после этого показывать валидатору. Надеюсь, это понятно. Валидаторы кроме указания на ошибки подсказывают, как нужно их исправлять. В этом есть большой плюс. Кроме того, валидатор, проверяющий файл стилей CSS, после списка ошибок выдаст исправленный код, который вам останется только скопировать и заменить им существующий у вас. 17. Где я могу проверить, как мой сайт отображается в разных браузерах? Понятное дело, что если вы не собираетесь посвятить всю свою оставшуюся жизнь верстке шаблонов Вордпресс, то и устанавливать на своем компе тучу разных браузеров для проверки вам нет смысла. Однако вы краем уха слышали, что браузеры могут вредничать и показывать одну и ту же страницу по-разному. Хотелось бы подстраховаться, не так ли? На такой случай можно воспользоваться сервисом http://browsershots.org/. Добавляете ваш сайт в очередь на проверку и через некоторое время получаете пачку скриншотов, показывающих, как выглядит ваш сайт в разных браузерах. 18. Хочу стать продвинутым дизигнером. Где еще можно найти кучку полезного для Неутомимого Создателя Тем Для Вордпресс? Похвальное стремление. Вот несколько полезных ссылочек: 1. http://habrahabr.ru/blogs/wordpress/41296/ — шпагалка по ВП (на русском и англ.). Шпаргалка включает в себя следующие разделы: Описание файлов шаблонов Функции подключения файлов Цикл (с большой буквы) Иерархия шаблонов Примеры шаблонов Функции шаблонов (много разных) И снова полезные ссылки ☺ 2. http://solutoire.com/tagstention/ — для тех, кто пользуется визуальным редактором Dreamweaver от Macromedia, специальный плагин для работы с тэгами ВП.

3. http://fleek.org/instrumenty-dlya-sozdaniya-temy-wordpress/ — Необходимы инструменты для создания шаблонов ВП. В набор входит три инструмента: 1) Плагин для Dreamveawer 8. Позволяет одним клацанием мыши вставлять нужные вордпрессовские теги. 2) Шпаргалка по тегам (на русском языке). 3) Шпаргалка по структуре шаблонов вордпресса. Сам я этот набор не смотрел, но предполагаю, что первые две ссылки входят в этот же состав.