Зробіть вашу Власну Тему для Wordpress - Частина 1
Після того, як я почав підготовлювати нову тему для Wordpress під блог, мою голову відвідала ідея. Чому не написати навчальну статтю про те, як зробити тему для Wordpress? Я упевнений, що є багато блогерів, які сподіваються зробити їх власну тему для їх вебсайта. З вашого дозволу, почнемо!
Але перш, ніж ми продовжимо, я хочу сказати Вам, що ця повчальна стаття тільки розповідає про те, як встановити шари і теги, функції, щоб Ваша власна тема для WordPress працювала. Це є основним. Я не викладатиму Вам html, css і php тут. Ви повинні вивчити їх. Є багато матеріалів, доступних в мережі. Я упевнений, що Ви зможете легко їх знайти. Отже, я розбив цю навчальну статтю на 7 частин. Ось - деякі деталі для кожної частини.
- Частина 1 - Шари (Layout)
- Частина 2 - Заголовок (Header)
- Частина 3 - Індекс (Index)
- Частина 4 - Коментар (Comment)
- Частина 5 - Меню блога (Sidebar)
- Частина 6 - Нижня частина - підвал (Footer)
- Частина 7 - Фініш! (Останні доведення і поради)
Давайте почнемо: Частина 1 - Шари (Layout)
Найкраща річ у - це те що ми можемо розділити нашу тему на розділи. Наприклад: header.php, index.php, і т.д. Але перед цим, ми повинні створити наше розміщення теми спочатку. Щоб зробити це, ми запускаємо, з порожнього файлу html. До речі тема, яку ми зробимо є темою на два стовпця.
| Індекс (Index) - основний контент сторінок | Меню блогу (Sidebar) |
|
Нижня частина - підвал (Footer) |
|
Тепер відкрийте Ваш улюблений редактор тексту, типу Notepad. Я використовую Macromedia Dreamwaver. Він зручний тим, що підсвічує код. Після того, як ви відкриєте ваш редактор тексту, ми починаємо описувати шари. Надрукуйте це у вашому редакторі коду і збережіть як 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>
Як бачите, кожен тег , що закривається, забезпечений коментарем, щоб легко прослідкувати кінцем якого форматування (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>
Схожі посилання:
Wordpress Documentation
Loading ...
раджу перекласти ось цей туторіал: http://www.wpdesigner.com/2007/02….
там дійсно все розписано до дрібниць.
Ти використовуєш Dreamweaver лише через підзвічування коду??? Я думаю, що заради цієї функціональності платити $399 не варто, можна (і варто) скористатись безкоштовним і вільним редактором Notepad++, який має, крім підсвітки html чи php коду, підсвічування коду ще багатьох мов.
Дуже дякую за корисні лінки.
2Яна
Я вже почав цей цикл статтей тому відходити не хотілося б, але та стаття насправді інтересна та корисна.
2jin
Якось вже так склалося що використовую Dreamwaver.
Крім підсвітки мені дуже подобається на ньому писати html частину коду, яке через напівавтоматичність закриття html тегів дозволяє економити багато часу.
я власне і вчилася на тих статтях
як для повного новачка - то там досить доступно розписано 
єдиний недолік для більшості нашого народу - на англійській 
)
сподіваюся твої статті теж будуть не менш доступними та корисними
(я поки почекаю поки ти все напишеш, не люблю кусками читати
Дуже велике Дякую. Знаєте таке буває, коли щось тобі захотілося зробити (або треба зробити ) і ти думаєш де то знайт. А тут відкриваєш гугл рідер і ось - вирішення проблеми. Чекаю наступних уроків.
хм.. часом не я тебе до цього підштовхнув =)
Супер! До цього часу займався виключно редагуванням чужих шаблонів під свої потреби. А після такого пояснення можна замислитися і над створенням власної оригінальної теми. Щоправда для цього спершу не завадить підтягнути знання у PHP. Але то, як кажуть, справа техніки.
Я теж займаюся редагуванням чужих, але свої навіть і не пробую творити, тому що знань не маю в веб-дизайні, а верстка для мене це просто страх.
Дякую за статтю
Сподіваюся, що обов’язково зроблю свою тему