Як створити свою тему для WordPress (I)

Як створити свою тему в WordPress

Привіт! Сьогодні ми продовжимо цикл статей на тему того, як створити свій WordPress шаблон. Як вже зазначалося в попередньому уроці, для того, щоб розпочати працювати над шаблоном, ми повинні мати два файли: index.php та style.css. В тому ж уроці ми спробували створити базовий шаблон WordPress, але він мав не дуже привабливий вигляд). Тож не будемо зупинятися на досягнутому і вдосконалимо наші вміння! Перед тим,як почати створювати шаблон для WordPress, ви повинні зробити макет даного шаблона в Photoshop та записати за допомогою HTML/CSS.

Коли створюєш шаблон WordPress, найкраще починати з файла стилів.
[code lang=”PHP”]
/*
Theme Name: Rose
Theme URL: the-theme’s-homepage
Description: a-brief-description
Author: yuor-name
Author URL: your-URL
Template: use-this-to-define-a-parent-theme–optional
Version: a-number–optional
.
General comments/License Statment if any.
.
*/[/code]

Така “шапка” несе в собі велику кількість інформації: назву шаблону, URL, ім’я автора та ін. Також дана інформація створює базовий лістинґ (список даних про тему/шаблон) у вашій панелі керування WordPress. Отже, щоб розпочати роботу над нашою новою темою, створіть нову директорію для шаблону. Потім створіть файл style.css в будь-якому редакторі та додайте до нього наступну інформацію:

[code lang=”PHP”]
/*
Theme Name: Creatif Blog
Theme URL: http://rockablepress.com
Description: For the book ‘How to Be a Rockstar WordPress Designer!’
Author: Collis Alexander
Author URL: http://rockablepress.com
Version: 1.0
.
This theme can be use for commercial or non-commercial use so long as it is not redistributed or resold in any way
.
*/[/code]

Тепер створимо найпростіший index.php файл зі словами Hello World! та перенесемо папку з темою до директорії “wp-content/themes/”.

Тепер відкрийте панель керування та перейдіть до вкладки Appearance. Ви помітили, що всі подробиці, які ми зазначили в файлі стилів, відображаються у списку даних нашої теми? Активуйте тему. Якщо ви все зробили правильно, то в браузері побачите слова “Hello World!”

Тепер час попрацювати з файлом index.php. Як нам всім відомо, майже будь-який дизайн складається з шапки сайту (або header), який зазвичай містить в собі логотип та меню, контенту сайту, блоку колонок ліворуч чи /та праворуч (sidebar) та підвалу (або footer) сайту . Тепер ми “пройдемося” по кожній з вищезазначених секцій та замінимо контент макету на різноманітні теґи шаблону.

Зараз треба звернутися до файлу index.html. Скопіюйте його вміст та вставте в index.php. Те ж саме зробіть і з файлом style.css та перемістіть в папку WordPress теми всі малюнки.

Тепер у себе на блозі Ви побачите “пошматовану версію” WordPress-ної теми. Зауважте, що Ваші малюнки не відображаються тому, що вони мають відносні URL-и. З тієї ж причини не працюють стилі.

Відредагуймо вміст теґу для WordPress. Цей теґ містить в собі багато корисної інформації, а в темі WordPress він містить інструкції, як підключити плаґіни, RSS та ін.

Зараз, цей блок виглядає так:

[code lang=”PHP”]



Creatif

[/code]

Замінимо інформацію meta теґу на

[code lang=”PHP”]
“/>[/code]

Додамо посилання:

[code lang=”PHP”]


“/> How To Be a Rockstar WordPress Designer


Як і завжди, будемо раді відповісти на Ваші запитання, вислухати Вашу критику, зауваження та поради.

Якщо вміст цієї статті Вам видається корисним та цікавим, поділіться посиланням на нього через Твіттер, Фейсбук, Google + чи Vkotakte.

Дуже дякую,
адмін (Колос Віталій)


Просування сайтів – це дуже потрібна річ, я це зрозумів на 3 рік ведення цього блоґу. Одесса продвижение сайтов. Не проґавте свій шанс.

You may also like

2 comments

  1. А це для конктретної версії ВП чи буде працювати з усіма?

  2. Супер!!! Для начала – то, что надо) а дальше можно задействовать фантазию.