Сделайте вашу Собственную Тему для 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>
большое спасибо за статью!!!Очень полезно!
Супер статья! Мне оч пригодилось! Большое спасиб!!!!!!!!
Классная статья, спасибо
Полезные скрипты, надо взять на вооружение. Спасибо! Больше бы таких интересных сайтов для людей.
Спасибо за материал. Отличный сайт. Автору - респект! =)