Сделайте вашу Собственную Тему для WordPress — Часть 1
7 03 2007Советуем почитать - про WordPress!
Оригинал статьи - .
После того, как я опубликовал свою первую тему для WordPress, я делаю другую тему для моего сайта, CypherFS Royale . Тогда мою голову посетила идея. Почему не написать обучающую статью о том, как сделать тему для WordPress? Я уверен, что есть много блоггеров, которые надеются сделать их собственную тему для их вебсайта. С вашего позволения, начнем!
Но прежде, чем мы продолжим, я хочу сказать Вам, что эта обучающая статья только рассказывает о том, как установить слои и тэги, функции, чтобы Ваша собственная тема для WordPress работала. Это является основным. Я не буду преподавать Вам html, css и php здесь. Вы должны изучить их. Есть много материалов, доступных в сети. Я уверен, что Вы сможете легко их найти.
птак, я разбил эту обучающую статью на 7 частей. Вот - некоторые детали для каждой части.
· Часть 1 - Слои (Layout)
· Часть 2 - Заголовок (Header)
· Часть 3 - пндекс (Index)
· Часть 4 - Комментарий (Comment)
· Часть 5 - Меню блога (Sidebar)
· Часть 6 - Нижний колонтитул - подвал (Footer)
· Часть 7 - Финиш! (Последние доводки и советы)
Давайте начнём: Часть 1 - Слои (Layout)
Лучшая вещь в использовании WordPress - мы можем разделить нашу тему на разделы. Например: header.php, index.php, и т.д. Но перед этим, мы должны создать наше размещение темы сначала. Чтобы сделать это, мы запускаем с пустого файла html. Кстати тема, которую мы сделаем, вот - тема на два столбца.
|
Заголовок (Header) - шапка блога |
|
| пндекс (Index) - основное содержание страниц | Меню блога (Sidebar) |
Теперь откройте Ваш любимый редактор текста, типа Notepad. Я использую EditPlus. Он удобен тем, что каждый тэг имеет каждый цветной код. После того, как Вы откроете ваш редактор текста, мы начинаем описывать слои. Напечатайте это в вашем редакторе текста и сохраните как index.html.
<html>
<head>
<title>My WordPress Theme</title>
</head>
<body>
</body>
</html>
Это основные элементы. Теперь мы будем создавать разделы в нашем index.html файле. Мы будем использовать <div> тэг здесь. Таким образом мы сможем украсить нашу тему при помощи CSS. Теперь мы вставили <div> тэги.
<html>
<head>
<title>My WordPress Theme</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div> <!– close header –>
<div id="content">
<div id="main">
main
</div> <!– close main –>
<div id="sidebar">
sidebar
</div> <!– close sidebar –>
</div> <!– close content –>
<div id="footer">
footer
</div> <!– close footer –>
</div> <!– close wrapper –>
</body>
</html>
Как видите, каждый закрывающийся тэг </div> снабжен комментарием, чтобы легче проследить концом какого форматирования (id=) он является.
Теперь у нас есть слои (разделы). Далее мы должны привязать каждый слой (раздел) к их собственному файлу PHP. Это позволит сэкономить наше время, если мы захотим редактировать нашу тему в будущем. Файлы PHP, которые мы создадим:
· header.php - содержит заголовок
· index.php - наш главный файл
· sidebar.php - раздел меню
· footer.php - наш файл нижнего колонтитула (подвала)
Теперь привязывайте разделы к их собственному файлу. Копируйте и вставляйте в свои файлы. Удостоверьтесь, чтобы они сохранились их в .php расширении. Файлы должны иметь такое содержание:
header.php
<html>
<head>
<title>My WordPress Theme</title>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div> <!– close header –>
<div id="content">
index.php
<div id="main">
main
</div> <!– close main –>
sidebar.php
<div id="sidebar">
sidebar
</div> <!– close sidebar –>
footer.php
</div> <!– close content –>
<div id="footer">
footer
</div> <!– close footer –>
</div> <!– close wrapper –>
</body>
</html>
