Перш ніж верстати шаблон сайту HTML/CSS, його треба пропрацювати. Малювати дизайн прийнято у програмі Photoshop. Готовий макет зберігається у файл формату .PSD.

Як приклад створимо дизайн сайту на малюнку нижче.

1. Відкриваємо Photoshopі створюємо в ньому новий документ ( Файл -> Створитиабо Ctrl+N).

2. Встановлюємо початкові параметри.На практиці продумати дизайн з точністю до пікселя практично неможливо – у процесі верстки обов'язково потрібно буде щось змінити, перемістити, переробити. Тому розміри можна задавати приблизні, причому ширину і висоту документа бажано вказувати більше планованих розмірів сайту, щоб у макеті точно вмістилися всі елементи. Наш документ зробимо 1000 пікселів завширшки і 1500 пікселів заввишки. Зверніть увагу: пікселів, а чи не сантиметрів. Інші параметри можна не чіпати.

3. Включаємо лінійки.Під час роботи вони знадобляться, адже лінійки дають змогу дуже точно відміряти відстані. Перевірте, чи у вас включені лінійки. Якщо так, то ви побачите шкали поруч із лівою та під верхньою панеллю інструментів.

Якщо лінійок немає - увімкніть їх ( Перегляд -> Лінійкиабо Ctrl+R).

Лінійки мають показувати величину в пікселях. Щоб переключитися на них з іншого заходу довжини, клацніть на лінійці правою кнопкою миші і в меню встановіть відповідний прапорець.

4. Перевіряємо, щоб розмір шрифту був вказаний у пікселях, а не у пунктах. Якщо налаштовано не так, йдемо в Редагування -> Установки -> Основні, у вікні переходимо на вкладку Одиниці вимірювання та лінійки, у списку Текстобираємо Пікселіта натискаємо OK.

5. Відразу робимо підкладку сайту. У нас це градієнтна заливка помаранчевого, що переходить у жовтий колір. На панелі зліва вибираємо інструмент Градієнт.

На панелі, що з'явилася вгорі, тиснемо кнопку Дзеркальний градієнт, вибираємо колір на палітрі ліворуч.

Використовуючи інструменти вікна, що відкрилося. Редактор градієнтівВибираємо потрібні кольори. Щоб задати точний колір контрольної точки, натисніть на ній, натисніть кнопку Колірі у вікні палітри кольорів вкажіть його у форматі RGB, HSB, CSS або будь-якому іншому доступному.

Внаслідок маніпуляцій градієнт вийшов наступним.

Щоб застосувати градієнт до поточного шару, проводимо над ним покажчиком, утримуючи при цьому ліву кнопку миші.

6. Зберігаємо підкладку у файл. Те, що ми зробили, має відображатися під основною сторінкою і займати все вікно браузера цілком - свого роду підкладка. Наприклад, ширина сайту - 800 пікселів, а роздільна здатність екрана у користувача набагато більше. Простір, що залишився (все, крім тих самих 800px, які будуть зайняті блоком сторінки) заповниться градієнтним фоном.

Так як роздільну здатність екрана не можна передбачити, зі створеного фону можна вирізати смужку завтовшки в один піксель і зберегти як картинку. Браузер буде заповнювати заднє тло нею по всій ширині.

6.1. Вибираємо інструмент Прямокутна область.

6.2. Виділяємо смужку довільної ширини, але по всій довжині шару.

6.3. Копіюємо виділену область ( Ctrl+C).

6.4. Створюємо новий документ ( Ctrl+N), встановлюємо для нього ширину 1 піксель та вставляємо скопійоване ( Ctrl+V).

6.5. Зберігаємо файл у JPG-форматі.

7. Створюємо фон сторінки. Фон буде простий білий колір. Вибираємо інструмент Прямокутникі у вікні властивостей задаємо необхідні параметри. У нас вийшов прямокутник 800×1100 пікселів, лівий верхній кут якого лежить у точці 100,0.

8. Робимо тло шапки. Градієнтне заливання, схоже на підкладку, розмірами 780x80px.

Зберігаємо його окремим графічним файлом шириною один піксель, як робили це з підкладкою.

9. Створюємо верхнє меню. За допомогою інструмента Горизонтальний текст додаємо на макет перший пункт меню - Головна. Шар створиться і навіть автоматично перейменується, так що з ним можна нічого не робити.

Тут важливо, щоб усі пункти розподілилися рівномірно, тому рекомендується використовувати лінійки. Щоб витягнути вертикальну, проведіть покажчиком, утримуючи натиснутою кнопку миші, зліва направо. За допомогою лінійок відміряйте відстань з огляду на те, що кожен пункт меню повинен займати в нашому випадку 120 пікселів.

10. Аналогічно вставляємо інші пункти меню.

11. Додаємо логотип. У нас вже є готовий, тому його залишається акуратно вставити в макет. Для цього натискаємо Файл -> Відкрити, потім клацаємо на зображенні і, утримуючи кнопку миші, переміщуємо його на заголовок документа-шаблону, коли він відкриється, перетягуємо картинку в потрібне місце макета і відпускаємо кнопку миші.

12. Пишемо ім'я та слоган сайту. Вже відомим нам інструментом доповнюємо майже створений логотип написами.

13. Переходимо до бічної панелі. Для початку створимо і збережемо окремим файлом градієнтну заливку для її заголовків. З інструментами знайомі, пояснення не потрібні.

14. Додаємо на щойно створений градієнт текст-заголовок інформаційного блоку.

15. Малюємо обрамлення області. Для цього достатньо використовувати прозорий прямокутник із чорними лініями контуру. Вибираємо інструмент Прямокутник, задаємо тип заливки фігури Немає кольору, клацаємо значок Задати тип штриха фігури та вибираємо чорний колір, інакше ліній не буде. Якщо контур вийшов занадто товстим, встановлюємо ширину ліній значення 0,5 пункту.

16. Нижче додаємо заголовок блоку з градієнтною заливкою, як у п. 12-13.

17. Створюємо блок меню лівої панелі. Додаємо помаранчевий прямокутник шириною 100px із жовтим контуром 0,2 пт.

18. Додаємо на нього текст.

19. За допомогою дублювання шарів та лінійок створюємо ще п'ять пунктів меню лівої панелі.

20. Прописуємо текст в основній частині сторінки, використовуючи той самий інструмент .

21. Додаємо фото до більшості сторінок, як ми робили це з логотипом. Для копіювання зображення просто переміщайте його мишею, утримуючи натиснутою клавішу. Alt. Якщо зображення не підходить за розміром, використовуйте інструмент Трансформація ( Ctrl+T).

22. Малюємо фон нижньої частини сайту – помаранчевий градієнт довжиною 64 пікселі.

23. Зберігаємо смужку нижнього фону шириною 1 піксель в окремий графічний файл.

24. Зменшуємо висоту сторінки. Вийшло так, що всі елементи вже промальовані, а зайве місце залишилося. Ось тут нам і знадобилися осмислені імена верств. Серед інших вибираємо фоновий шар (у нас він так і називається – Фон) і за допомогою інструмента Трансформація зменшуємо висоту нашого білого прямокутника до нижнього краю футера сторінки.

25. Зберігаємо шаблон у файл формату .PSD (Файл -> Зберегти).

26. Результатом цього дійства і став ще простий, але вже нормально виглядає шаблон сайту.

Тепер із PSD-макета залишається засобами HTML/CSS згорнути шаблон сайту, але про це я розповім вже в наступній статті.

Цей туторіал покаже, як створити новий шаблон сторінки для WordPress Cherry Framework.

Увійдіть в адмін панель WordPress.

Відкрийте меню Сторінки -> Додати нову (Pages -> Add New)та створіть нову сторінку з новим шаблоном сторінки.

Введіть заголовок сторінки та збережіть зміни. У правій колонці в панелі ви можете вибрати один із шаблонів сторінки, що використовуються у вашій темі. Вам необхідно додати новий шаблон сторінки до цього списку. Всі ці шаблони знаходяться у папці на вашому сервері. Але вам необхідно додати новий шаблон сторінки до папки wp-content/themes/theme#####.

Створіть новий.php файл у будь-якому редакторі, наприклад, Dreamweaver або Notepad++, і назвіть його, наприклад, new.php . Додайте до цього файлу наступний код:

Збережіть файл і завантажте його до папки wp-content/themes/theme#####на ваш сервер.

Тепер поверніться до сторінки, яку ви створили в адмін панелі WordPress. У панелі Атрибути сторінки (Page Attributes)Ви можете вибрати новий шаблон сторінки під назвою “Custom”.

Знову відкрийте файл new.php і почніть додавати свій контент. Файл може містити все, що ви захочете, включаючи незмінний контент або елементи макета сторінки, які виводитимуть її контент.

Ви можете використовувати елементи коду інших шаблонів сторінки з папки wp-content/themes/CherryFramework, щоб створити специфічну сторінку

Давайте спочатку додамо хедер і футер до нового шаблону сторінки:

Якщо ви збережете зміни, зможете побачити їх на сторінці:



Тепер потрібно вибрати вид контенту, який ви хочете використати на цій сторінці. Припустимо, у вас немає окремого шаблону сторінки для постів користувача “Наша команда” (“Our Team”). І вам подобається дизайн шаблону сторінки Відгуків (Testimonials) і ви хотіли б використовувати цей дизайн для постів “Наша команда” (“Our Team”). Для цього в меню Дизайн -> Редактор (Appearance -> Editor)Ви легко знайдете файл, який містить код шаблону сторінки Відгуків (Testimonials). Його назва page-testi.php.



Відкрийте файл для редагування. Скопіюйте лише код контенту, оскільки ви вже додали хедер і футер (нижче наведено приклад даного коду, ваш код може виглядати інакше):

" data-motopress-wrapper-file="page-testi.php" data-motopress-wrapper-type="content">
" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-testi.php">
sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

Вставте скопійований код у файл new.php. Замініть Template Name: Custom на Template Name: Team

І замініть page-testi.php на new.php у цьому коді.

Цей код також містить посилання на файл loop/loop-testi.php. Це ще один файл, який потрібно скопіювати і редагувати. Скопіюйте файл loop-testi.phpз папки wp-content/themes/CherryFramework/loopі вставте його в папку wp-content/themes/theme#####/loop(якщо у папці вашої теми відсутня папка loopвам слід створити її). Перейменуйте цей файл, наприклад, на loop-new.php та відкрийте його для редагування. Замініть слово "testi"на слово "team"у всіх рядках файлу та збережіть зміни. (Для заміни слів можна використовувати комбінацію клавіш Control (Command) + F).



Коли файл loop-new.phpстворено та відредаговано, знову відкрийте файл new.phpта замініть loop/loop-testi.phpна loop/loop-new.phpу його коді. У результаті ваш код буде виглядати так:

" data-motopress-wrapper-file="new.php" data-motopress-wrapper-type="content">
" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
" id="content" data-motopress-type="loop" data-motopress-loop-file="loop/loop-new.php">
sidebar" id="sidebar" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">

Збережіть зміни та перевірте вашу нову сторінку. Тепер вона повинна містити пости користувача “Наша команда” (“Our Team”) з дизайном сторінки Відгуків (Testimonials).

Ця стаття розповість вам про те, як створити найпростішу тему для WordPress. Хоча Codex і надає велику документацію з цього питання, але мені вона здається дещо складною для новачка. Тому в даному «туторіалі» я розповім принципи роботи тем для WordPress і покажу, як адаптувати під них сирий HTML-шаблон. При цьому від вас не потрібно знання PHP, але добре, якщо ви володієте Photoshop і CSS для створення дизайну.

1. Frontend блогу

До того, як ми почнемо, погляньмо на стандартну тему WordPress і розберемося з чого вона складається. Зазначимо елементи (шапка, заголовок посту, форма пошуку, навігація, підвал тощо).

Стандартний Frontpage ( index.php)

Стандартний Single ( single.php)

2. Photoshop-макети

Спираючись на зовнішній вигляд стандартної теми, розробте Photoshop-макети для вашого блогу. Наприклад, я використовую GlossyBlue — одну з моїх безкоштовних тем. Завантажте demo.zip , щоб побачити готовий файл Photoshop.

3. HTML та CSS

Коли PSD-дизайн готовий, створіть HTML+CSS шаблон кожної сторінки. Дотримуючись кроків цієї інструкції, ви можете використовувати мої HTML файли GlossyBlue з demo.zip. Розпакувавши архів, ви побачите index.html, single.htmlі page.html. Далі я використовуватиму їх для перетворення на шаблон.

Навіщо спочатку створювати статичний HTML?Головним чином, це потрібно тому, що це значно спростить процес розробки. Зазвичай я створюю HTML файл для кожного шаблону, перевіряю їх валідність (HTML і CSS розмітку) у всіх браузерах. Після цього залишається лише вирізати та вставити код WordPress. Отже, можна вже не турбуватися про помилки в HTML або CSS.

4. Як працює тема WordPress

Якщо ви перейдете до папки стандартної теми ( wp-content/themes/default), то побачите багато php-файлів (званих файлами шаблонів) та один файл style.css. Для формування сторінки WordPress зазвичай використовує кілька файлів шаблонів ( index.php , header.php, sidebar.php,і footer.php).

Докладніше в Codex: «Архітектура сайту» та «Ієрархія шаблонів».

5. Дублювання файлів шаблонів

Скопіюйте HTML папку з GlossyBlue до папки wp-content/themes. Після цього перейдіть до директорії теми default, скопіюйте comments.phpі searchform.phpу папку glossyblue.

6. Style.css

Перейдіть до папки теми default, відкрийте файл style.css. Скопіюйте закоментований на початку файлу текст і вставте в style.cssтеми GlossyBlue. Якщо хочете, можете змінити назву та дані про автора.

7. Поділ файлів

Тепер нам потрібно зрозуміти, де розділити HTML-файли на частини: header.php , sidebar.php і footer.php. На скріншоті нижче видно спрощену версію мого файлу index, а також принцип його поділу.

8. Header.php

Відкрийте index.html. Вам потрібно вирізати ділянку від верху до місця, де закінчується, вставити її в новий php-файл і зберегти як header.php.
Перейдіть до папки теми default, відкрийте новий header.php. Скопіюйте та замініть теги, де цього вимагає php-код: title, link, таблиці стилів, h1 та div class=description.

Меню навігації (wp_list_pages) Замініть теги liв ul id=navна;

9. Sidebar.php

Поверніться до index.html, виріжте код з того місця, де починається form id=searchformі до закриття тега div id=sidebar, помістіть його у новий php-файл і збережіть як sidebar.php.

• Замініть form id=searchformз усім вмістом на .
• Замініть теги liкатегорій на
• Замініть теги liархівів на

10. Footer.php

Поверніться до index.html. Вийміть звідти код від div id=footerвключно з div тегом id=footer і до кінця /htmlпотім помістіть у новий footer.php.

Останні записиТут я використав query_post для відображення 5 останніх записів у блозі.

"Останні коментарі"«Останні коментарі» згенеровані плагіном (включено до папки теми)

11. Index.php

Тепер у вашому index.htmlповинен залишитися тільки div id=content. Збережіть файл як index.php. Впишіть рядки: get_header, get_sidebar, і get_footerу тому порядку, як вони зустрічаються у шаблоні.

12. Розбір циклу

Цикл послідовно відображає записи блогу залежно від налаштувань. Скріншот нижче ілюструє його роботу. Спочатку цикл перевіряє наявність записів і якщо таких не знаходить, видає повідомлення "Not Found".

13. Копіювання циклу

Перейдіть до директорії теми default, відкрийте index.php. Скопіюйте цикл із стандартного index.phpу свій - між div id=content../div. Після цього замініть статичний текст на теги шаблону WordPress: post date, title, category, comments, next і previous link.

14. Перегляд теми

Вітаю! Ви створили публічну частину (основну частину шаблону). Тепер зайдіть до адміністративної панелі, перейдіть до закладки DesignВи повинні побачити тему GlossyBlue. Активуйте її та перейдіть до публічної частини, щоб переглянути результат у дії.

15. Single.php

Настав час створити шаблон single.php. Якщо хочете, можете повторити кроки, переносячи код зі стандартної теми. Але мені здається більш простим використовувати щойно створений index.php, зберігши його як single.php. Відкрийте single.phpзі стандартної теми та скопіюйте теги шаблону у потрібні місця. Далі підключіть comments_template. На наступному скріншоті відображені зміни:

16. Page.php

Тепер новий single.phpзбережіть з назвою page.php. Заберіть дату запису, форму коментарів, посилання наступний/попередній. Ось, власне, і все – ваш шаблон page.phpготовий.

17. Видалення файлів HTML

Видаліть усі HTML-файли з папки glossyblue(Вони нам більше не знадобляться). Технічно цього достатньо створення базової теми WordPress. Ви, мабуть, помітили, що у стандартній темі більше PHP-файлів. Що ж, насправді, вони вам не такі вже й необхідні, якщо потрібна проста тема. Наприклад, якщо search.phpабо 404.phpне буде в папці теми, WordPress автоматично використовує index.phpдля відображення сторінки. Читайте Template Hierarchy для більш детального розгляду.

18. Шаблон сторінки WordPress

А тепер останній приклад — я покажу вам як використовувати Page Template для створення сторінки Архіву, яка міститиме список усіх записів на вашому блозі (зручно для карти сайту). Скопіюйте archives.phpіз папки стандартної теми. Видаліть непотрібний код і отримайте щось на кшталт цього:

Рутинну роботу з однотипними документами можна звести до мінімуму, якщо формувати їх на основі шаблонів Word. Про те, що вони являють собою, і як їх створювати, наш сьогоднішній матеріал.

Досить часто у процесі діяльності ми створюємо однотипні документи: акти, накази, листи, договори, курсові роботи тощо. Всі ці документи зазвичай містять деякі текстові або графічні елементи - заголовки, реквізити, логотипи, текстові блоки, що повторюються з документа в документ.

Звичайний користувач текстового редактора Word, створюючи черговий документ, змушений використовувати і правити вже кимось створений документ, що містить у собі всі ці елементи, або просто копіювати в новий документ необхідні елементи, знову ж таки, зі старого файлу, до того ж усвідомлюючи, що і в цьому У разі редагування неминуче.

Шаблон визначає основну структуру документа та містить налаштування документа, такі як елементи автотексту, шрифти, призначені комбінації клавіш, макроси, меню, параметри сторінки, форматування та стилі. (З довідки Word)

Ця рутина можна звести до мінімуму, якщо створювати документ на основі шаблону. Іноді ще шаблони називають "рибами". Втім, як не називай, а шаблони справді дозволяють у рази підвищити ефективність роботи.

Шаблон можна створити двома способами, взявши за основу будь-який документ з усіма присутніми елементами, або почавши з чистого аркуша, самостійно включаючи необхідні елементи.

Я розповім, як створювати шаблон із чистого аркуша, і, таким чином, буде легше зрозуміти весь процес, ніж модифікувати наявний файл. Наприклад, ми створимо простий шаблон офіційного листа. Нічого складного в цьому немає, якщо слідувати моїм покроковим вказівкам.

Отже, почнемо.

1. Створимо порожній документ.

2. Відразу збережемо його. Зайдемо в меню "Файл" (File) та виберемо команду "Зберегти як..." (Save as...). Відкриється діалогове вікно "Збереження документа", в якому нам потрібно вибрати в полі "Тип файлу" (Save as type) тип "Шаблон документа" (*. dot) (Document Template (*. dot)).

Буде відкрито папку "Шаблони", де за замовчуванням зберігаються всі шаблони. Надайте файлу ім'я та натисніть кнопку "Зберегти".

3. Визначаємо, які елементи (текст та графіка) і де саме розташовуватимуться в документі.

Як правило, всі офіційні листи містять такі елементи як назва організації, логотип, реквізити. У самому тексті листа може бути ввічливе звернення до одержувача листа і, власне, текст листа. Наприкінці листа наводиться найменування посади керівника організації з його підписом. Візьмемо й ми за основу такої структури листа.

4. Назва організації ми розмістимо у верхній частині документа центром. Для цього надрукуємо назву нашої організації великими літерами, наприклад, ТОВ "БІЛІ НОЧІ". Натискаємо клавішу Enter та переходимо на новий рядок.

5. Нижче можемо вставити розділову лінію. Для цього потрібно клацнути мишкою на кнопці "Малювання" (Drawing). У нижній частині екрана з'явиться панель малювання з кнопками, що управляють. Нас цікавлять лінії, тому вибираємо відповідну кнопку "Лінія" (Line). Курсор миші перетворюється на хрестик.

Зверніть увагу: можливо, у вас буде вставлено так зване полотно - пунктирна область вставки фігур/малюнок. Щоб запобігти вставці полотна, зайдіть у меню "Сервіс" (Tools) і виберіть команду "Параметри" (Options). Клацніть вкладку "Загальні" (General) і зніміть галочку з опції автоматичного створення полотна при вставці автофігур (Automatically create drawing canvas when inserting AutoShapes). Клацаємо "OK" та закриваємо вікно "Параметрів" (Options).

6. Підводимо курсор у формі хрестика до назви організації та трохи нижче проводимо лінію від миготливого курсору до правого краю поля, натискаючи та утримуючи ліву кнопку миші. Лінія намальована.

7. Можна залишити лінію як є, а можна надати їй більш елегантного вигляду. Для цього на панелі малювання є кнопка "Тип лінії" (Line Style). Клацаєте на ній і вибираєте будь-який тип.

8. Після того, як ви зупинитесь на будь-якому типі лінії, двічі клацніть нижче цієї лінії - у цьому місці буде надруковано адресу та реквізити організації. Вдрукуйте дані, які вважаєте за необхідне: юридична та фактична адреса, телефон, факс, URL сайту, E-mail, банківські реквізити.

9. Тепер відформатуйте набраний текст відповідно до ваших уявлень. Назва організації, наприклад, я виділив і надав йому стиль "Заголовок 1" (Heading 1). Я також вирівняв заголовок центром і зробив між літерами розріджений інтервал у п'ять пунктів.

Розмір шрифту тексту під лінією зменшив до дев'яти пунктів і вирівняв по центру. Зразок можна спостерігати нижче на скріншоті.

Таким чином, ми створили постійну (незмінну) частину нашого шаблону, так звану "шапку". Тепер рушимо далі і створимо поля, в які пізніше ви підставлятимете свої дані.

У лівій частині шаблону під "шапкою" двічі клацаємо мишкою і друкуємо назву міста, наприклад Москви. Потім у протилежній (правій) частині шаблону знову двічі клацаємо мишею і в місці миготіння курсору вставляємо дату. Для цього:

1. У меню "Вставка" (Insert) вибираємо команду "Дата та час" (Date and Time). Відкриється вікно, в якому ви вибираєте необхідний формат відображення дати, наприклад, 18 липня 2006 року.

2. Позначаємо галочкою поле "Оновлювати автоматично" (Update automatically). Тепер при створенні нового документа на базі цього шаблону дата вже буде проставлена ​​відповідно до поточного часу на вашому комп'ютері.

3. У правій частині шаблону нижче дати - з відступом від лівого краю приблизно на 10 см горизонтальною лінійкою - двічі клацаємо мишкою. Замигає курсор, і в цьому місці ми вставимо поле для встановлення даних одержувача листа.

4. У меню "Вставка" (Insert) вибираємо команду "Поле" (Field). Відкриється вікно як на скріншоті нижче:

5. У розділі "Категорії" (Categories) виберіть "Автоматизація" (Document Automation). В області "Поля" (Field names) виберіть команду MacroButton. В області "Повідомлення" (Display text) наберіть текст "Вставити ПІБ одержувача" і натисніть OK.

Строго кажучи, в області "Ім'я макросу" слід було б вказати NoMacro (тобто команда без макросу), але такого у списку не було. Тому залишаємо як є, принаймні я ніколи не зустрічав жодних помилок.

6. Отримуємо поле із нашим текстом.

Якщо це поле відображається як звичайний текст без затінення, то я рекомендую зробити таке затінення. Це дозволить вам згодом легко визначати у документі потрібні поля для введення даних. Для цього зайдіть у меню "Сервіс" (Tools) і виберіть команду "Параметри" (Options) і на вкладці "Вид" (View) у групі "Показувати" (Show) виберіть зі списку затінення полів (Field shading) опцію завжди (Always ).

Нижче можна додатково вставити аналогічне поле адреси одержувача та його посади.

У нас залишилося вставити вітальне звернення до отримувача цього листа, сам текст звернення та підпис відправника внизу. Спробуйте самостійно вставити у ваш шаблон ці поля, спираючись на ті вказівки, які наведені вище, і не забудьте зберегти шаблон, що вийшов.

Для прикладу ви можете подивитись скріншот шаблону, який вийшов у мене:

Тепер, щоб скористатися цим шаблоном для створення листа, вам потрібно зайти в меню "Файл" (File) та вибрати команду "Створити" (New). Справа з'явиться область завдань, у якій потрібно вибрати опцію "Загальні шаблони" (On my computer). Відкриється вікно з усіма доступними шаблонами. Вибираєте створений шаблон і натискаєте "OK". Новий документ на основі вашого шаблону буде завантажено у Word. Додайте свої дані у відповідні поля та насолоджуйтесь автоматизацією.

Зараз поясню, як зробити з простого HTML-шаблону тему WordPress на прикладі дизайну цієї статті.

Адаптувати дизайн під WordPress може знадобитися з багатьох причин, наприклад, ви переносите на CMS свій статичний сайт, або вам сподобався дизайн, якого в колекції WordPress ще немає, або ви просто хочете розібратися, як влаштовані теми цієї CMS зсередини.

Отже, почнемо.

Розподіляємо код за файлами

1. Завантажте шаблон і розпакуйте його в папку з темами WordPress (адреса виду адреса_блогу_wordpress/wp-content/themes/). Якщо хочете, перейменуйте папку з темою на власний смак. Наприклад, у мене шаблон розташований за адресою адреса_блогу_wordpress/wp-content/themes/MyTheme/.

2. Перейменуйте файл styles.cssв style.css.

3. Відкрийте style.cssу редакторі коду (такому, як Notepad++) і в самий його початок вставте наступні рядки:

/* Theme Name: MyTheme Theme URI: http://test1.ru Автор: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU : http://www.gnu.org/licenses/gpl-2.0.html */

Як ви могли здогадатися, це службова інформація про тему оформлення: назву, автор, опис, ліцензія, версія тощо. буд. Праві частини рядків ви можете замінити на власні, тобто задати свої авторство, версію, опис та інші дані.

4. Створіть файли header.php, index.php, sidebar.php, footer.phpі розподіліть по них код із index.html.

4.1. У header.phpскопіюйте код за рядком тому що цей файл відповідає за верх сайту. styles.cssзамініть у коді на style.css- Нове коректне ім'я файлу.

4.2. У index.phpвставте код основного блоку (з рядка за рядком ).

4.3. У sidebar.phpскопіюйте код бокового меню (з по ).

4.4. У footer.phpвставте рядки, що залишилися (з до кінця документа index.html).

5. Видаліть index.html.

6. Перейдіть до адмін-панелі і переконайтеся, що шаблон MyTheme з'явився в розділі Зовнішній вигляд -> Теми. Ви навіть можете спробувати його переглянути або активувати, але нічого хорошого з цього поки що не вийде, адже шаблон з WordPress ми ще не інтегрували.

Адаптуємо header

Тепер ми почнемо зі статичного шаблону робити динамічну тему, в яку будуть підвантажуватись дані та налаштування WordPress.

У шаблоні будуть зустрічатися PHP-вставки. Починається такий код з. Між ними розташований PHP-код, що найчастіше викликає функції CMS

1. Відкрийте файл header.php і замініть код, що міститься в ньому, до блоку

на наступний:

> "> "> " type="text/css" media="screen" />

Ми зробили динамічним блоком

Код викликає функцію, яка повертає мовні атрибути у контейнер.

">

Замість того, щоб прописувати кодування константою, ми викликали функцію, яка бере значення з налаштувань CMS і автоматично підставляє його в код, тобто зміни кодування вже не доведеться правити файл теми.

Важлива функція, що забезпечує роботу на сторінці стилів, плагінів та скриптів.

2. Перейдіть до редагування файлу index.php. На самому його початку пропишіть

,

Рядки викликають файли шапки, бічної панелі та низу сайту.

Тепер ви можете переглянути або навіть активувати MyTheme. В результаті браузер відобразить вже знайомий шаблон зі статичним меню та однією сторінкою. Щоб меню стало динамічним і настроюваним, а замість однієї сторінки відображалися всі розміщені на сайті матеріали, потрібно перетворювати шаблон далі.

Робимо динамічним верхнє меню

Поки що ми маємо повністю статичну тему оформлення, у тому числі і з незмінним горизонтальним верхнім меню. Поки його не можна налаштувати з адмін-панелі, і якщо залишити код у нинішньому вигляді, то для вставки/видалення/перенесення пунктів доведеться щоразу редагувати файл header.phpщо вкрай незручно.

Щоб не мудрувати лукаво і не занурюватися в безодню захоплюючого світу програмування, задаємо динамічному меню статичну назву. Замість таблиці горизонтального меню вставте код

так, щоб вийшло таке: