Создание WordPress тем — Часть 1: макет

5 Июл
2008

Источник: www.redswish.co.uk

Введение как обычно 🙂

Добро пожаловать в первый урок из трёх где я вам попытаюсь рассказать как создать свою собственную тему WordPress. 2 вопроса приходят на ум относительно во время чтрения этой статьи. Во-первых — почему WordPress? Хорошо самая простая причина — то, что WP весьма удобен при ПОДГОТОВКЕ ТЕКСТОВ — я использую в большинстве моих вебсайтов когда клиент хочет построить блог или просто ему нужна возможность редактировать их собственный сайт. Так же самое главное  это CMS с открытым исходным кодом. Во-вторых — да что тут думать!

Продолжим!

Мы создадим очень простой макет с дизайном, полностью использующим CSS. Во второй части я покажу вам как реализовать дизайн в макете. Хотя, конечно вы обычно создавали дизайн раньше чем переводили на HTML и CSS. Этот урок требует от вас как простейших знаний ручного кодинга шаблонов и вёрстки шаблона для WordPress. Если вы уже редактировали свои собственные тему и загружали их через FTP до этого, то понять изложенное ниже вам будет не сложно. Типичный WordPress шаблон может иметь различное число файлов. Обычно это от 5 до 12. Пять файлов это базовая часть шаблона. Если вы посмотрите на любой существующий(работающий) шаблон, то вы обнаружите следующие файлы:

index.php — центральная страница блога которая просто вызывается WordPress-ом всегда для отображения шаблона.

header.php — обычно содержит стандартный набор тэгов заголовка страницы(<head>), а также элементы дизайна верха страницы( сюда входит навигация, лого, баннер).

footer.php — как ясно из названия — здесь находится нижняя часть страницы.

sidebar.php — сайдбар(колонка, боковой столбец) содержит меню, категории блога, архивы или заголовки.

style.css — а это стили страницы. Он подключается в сайт как в любой обычный сайт — через тэг <link> в секции <head> в файле header.php.

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

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

Index.php

Ваши файлы темы могут быть созданы в Блокноте(Notepad) или Dreamweaver или любом другом HTML-редакторе, который вы желаете использовать прежде, чем вы загрузите их на сервер. Оттуда они могут быть изменены через панель управления WordPress. Простой индексный файл требует три php команды чтобы подключить другие секции шаблона — заголовок, боковое меню и нижний колонтитул. Здесь всё предельно просто. Нужен заголовок? Пишем : get_header();. Боковая панель: get_sidebar();. Нижняя часть страницы(футер) : get_footer();. Итак получаем:

<?php get_header(); ?>
<div id=”content”>
<p>Это центральная часть страницы. Здесь будет то, ради чего создаётся сайт: новости, страницы, картинки, посты блога и т. д.</p>
</div><!– end div content –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Header.php

Используется для отображения всей <head> информации, меню, лого и т. п. Пример файла:

<!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 profile=“http://gmpg.org/xfn/11″><meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ />

<title>Test Theme</head>

<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<div id=”logo”>

<a href=”/” title=”Logo”>Logo</a>

</div><!– end div logo –>

</div><!– end div header –>

Footer.php

Нижний колонтитул вообще весьма прост. Только удостоверьтесь, чтобы закрыть любые элементы, которые Вы, возможно, открыли или в header.php или в index.php файлах.

<div id=”footer”>

<p>Создано используя мое собстенное воображение, © 2008</p>

</div><!– end div footer –>

</div><!– end div wrapper –>

</body>

Sidebar.php

Боковое меню содердержит меню, категории и т.д. Его мы подключали через вызов команды <? get_sidebar(); ?>. Ради это этого урока я создам очень простое меню:

<div id=”sidebar”>

<ul>

<li><a href=”http://4wordpress.ru” title=”Ссылка”>Ссылка</a></li>

<li><a href=”http://4wordpress.ru” title=”Ссылка”>Ссылка</a></li>

<li><a href=”http://4wordpress.ru” title=”Ссылка”>Ссылка</a></li>

<li><a href=”http://4wordpress.ru” title=”Ссылка”>Ссылка</a></li>

</ul>

</div><!– end div sidebar –>

Всё! HTML-код свёрстан! Теперь осталось всё это украсить через  CSS. Это конечно, простой CSS. С него вы можете начинать создание любого своего шаблона.  Вы можете редактировать и добавить отступы, поля, цвета и т. д.  Когда я создаю файл CSS, я в основном работаю от вершины до низа страницы визуально или от внешней стороны до самых внутренних областей — всегда начинающийся с <body>. А вот содержимое файла стилей style.css:

body {
margin: 0;
padding: 0;
vertical-align: top;
}

#wrapper {
margin: 0 auto; (это центрирует div в браузере)
width: 800px;
border: 1px solid #999; (создает светлосерую границу вокруг #wrapper)
}

#header {
width: 800px;
height: 119px; (120px — 1px для border-bottom)
float: left;
display: inline;
border-bottom: 1px solid #999;
}

#logo {
width: 200px;
height: 120px;
float: left;
display: inline;
}

#content {
width: 599px; (600px — 1px для border-right)
float: left;
display: inline;
border-right: 1px solid #999;
}

#sidebar {
width: 200px;
float: left;
display: inline;
}

#footer {
width: 800px;
height: 39px; (40px — 1px для border-top)
float: left;
display: inline;
border-top: 1px solid #999;
}

Как не удивительно, но написав так мало кода мы уже получаем простую страничку! Вот что у нас вышло:

Загрузка Вашей Темы

Ваши файлы темы — index.php, header.php, sidebar.php, footer.php и sidebar.css сохраните в директорию WordPress:

/wp-content/themes/createfolderhere/

Когда Вы создаете свою папку, убедитесь, что это — простое, однословное название, потому что оно будет названием вашей темы к WordPress.

Чтобы активизировать вашу тему войдите в панель управления WordPress в раздел Presentation.

Здесь Вы можете активизировать свою тему и редактировать ее во вкладке ‘Theme Editor’, экономя усилия на загрузку файлов на ФТП.

Вторая часть урока будет в течение следующей недели. Но Вы не должны ждать — поиграйтесь с вашей темой изменяя стили CSS — добавьте цвета фона, изображения, различные начертания шрифта и т.д. С CSS ваши возможности фактически безграничны!

Откомментируй!

наверх