В предишна тема подробно описах инсталация на WordPress на локален сървър. В тази тема ще минем през първите стъпки при създаване на една WordPress тема – по-конкретно: имплементиране на статичен сайт във WordPress. В случая ще използваме Eclipse, за който ще ви е необходима инсталация на Java. Eclipse може безплатно да си свалите от тук. Преди да почнете имплементацията на статичен сайт, уверете се че вашия HTML и CSS са валидни, и тепърва после продължавайте с долу-описаните стъпки.

1.Създаване на папка на нашата тема

В Eclipse създадете нов PHP проект

new project

File -> New -> PHP project.  Попълнете “Project Name” и с радиобутона изберете опция “Create project at existing location (from existing source)”. С Browse намерете пътя към вашата папка съдържаща инсталация на WordPress (C:\xampp\htdocs\вашата инсталация).

new project name

Чрез експлорера на Eclipse създадете нова папка във “вашата инсталация”/wp-content/themes/ която да се казва според темата която ще създавате.

Тази току-що създадена папка ще съдържа всичките файлове на вашата тема която ще създаваме. За по-лесна ориентация ще я наричам понататък “mytheme”.

2.Създаване на основните PHP файлове

В папка на вашата тема създадете 3 нови PHP файла и 1 CSS със следните имена: index.php, header.php, footer.php и style.css

new PHP files

Тези файлове служат за динамичното разделение на една уед страница, като header.php и footer.php ще съдържат тези части, които при различни страници на един сайт не се променят както например главната навигация, лого на фирмата или copyright или други елементи които обикновенно са в таговете <header> и <footer>.

Във вашия текстов едитор отворете HTML код, от който искате да създавате тема. Копирайте първата част на кода която искате да бъде на всяка страница е идентична във празния header.php. Това обикновенно почва с <!DOCTYPE html> и най-често свършва със затварящ таг </header> или отварящ таг <section>.  Същото повторете за долната част на страницата, която обикновенно почва със <footer> до края на кода – тази част копирайте във footer.php.

Съдържанието на код, което ви остана копирайте във index.php. Преди и след вашия код, добавете следните редове

<!--?php get_header(); ?-->
 
//вашия HTML код, без частта, която е в header.php и във footer.php
 
<!--?php get_footer(); ?-->

Тези wordpress функции, ще добавят в горната и долната част на вашата страница header.php и footer.php.

Файла style.css на всяка WordPress тема, трябва да съдържа информация за нея, в заглавието на css кода, като задължително е само името на темата, но освен него може да допълните и други полезни информации:

@CHARSET “UTF-8” 
/*
 
Theme Name: Your theme Name
 
Theme URI: the-theme's-homepage
 
Description: a-brief-description
 
Author: your-name
 
Author URI: your-URI
 
Template: use-this-to-define-a-parent-theme--optional
 
Version: a-number--optional
 
Tags: a-comma-delimited-list--optional
 
General comments/License Statement if any.
 
*/

Преди това заглавие, извън коментар, допишете информация за уникода, която също е задължителна @CHARSET “UTF-8”. Некрая копирайте под това заглавие съдържанието на целия ваш .css файл.

4. Копиране на папки от статичния сайт

Копирайте папки с картинки, със скриптовете (и ако има и други), във папка на вашата тема (в нашия случай във “mytheme”).

3. Оправяне на пътища в style.css

Понеже .css файл във WordPress тема трябвя задължително да е в същата папка заедно с .php файловете, проверете дали пътищата във вашия style.css не подлежат на корекция (напр. ако вашия файл е бил в отделна директория, то url(’../img/image.jpg’) ще стане url(’img/image.jpg’) ).

5. Оправяне на пътища в HTML

Понеже WordPress допълнително обработва вашите .php файлове, е нужно да коригирате също така и всичките пътища от вашия html код който копирахте в *.php по следния начин.

Пътя към вашия css файл заменете със следния snipet

<!--?php bloginfo(’stylesheet_url’); ?-->

Във всички останали пътища (към картинки, скриптове и др.),  добавете wordpress функция, която ще ви посочи директория на вашата тема. Ако например вашия адрес е следния

src="scripts/jQuery.js"

То след корекция ще изглежда по този начин

src="<!--?php echo get_template_directory_uri()?-->/scripts/jQuery.js"

6.Актуализиране на тема

Успяхме да направим първата част от създаване на нашата тема, преди да почнем да добавяме динамично съдържание което да управляваме од админ панел. За да актуализирате вашата тема, влезте в своя админ профил и във Appereance отворете Themes.

activate theme

Забележете, че освен безплатните теми на WordPress, е достъпна и вашата тема със сив квадрат вместо screenshot. За да я активирате, натиснете бутона Activate в долната част.

activate theme

Сега вече може да видите  вашата тема и да проверите дали всичко е на ред.

open my site

Ако дизайна ви се чупи, проверете дали сте нагласили правилно всичките пътища и дали сте копирали папки с картинки, скриптове и други в директорията на вашата тема. В следващата статия ще почнем да правим темата ни да е с динамично съдържание.

Сега вече може да видите  вашата тема и да проверите дали всичко е на ред.