От HTML към WordPress - Подготовка.

Основното, което трябва да направим, когато пишем на HTML е да подготвим HTML структурата на страниците и да свържем CSS и JavaScript файловете. В WordPress ще започнем със същия процес, но за целта ще трябва малко предварителна подготовка. Като начало ще трябва да създадем тема. Темата представлява набор от HTML, CSS, PHP, Javascript файлове също както и тези в един нормален HTML темплейт.

Нека започнем с най-проста структура на HTML файл:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

Ако четейки предишната статия не сте създали папка с име deep_theme в wp-content/themes сега е момента да поправите този пропуск. Тази папка ще съдържа всички файлове на нашата тема. За начало те са два - index.php и style.css. Първият ще съдържа структурата на HTML файла, който ще се показва при избиране на темата за основна тема на WordPress, а вторият има малко по-особено предназначение. Той трябва да съдържа мета-информацията, чрез която WordPress разбира, че има инсталирана нова тема. В него разбира се може да се съдържат css-правилата на Вашата тема, но аз лично не го ползвам за това, предпочитам да са в отделен файл, за да има логическо разделение между файловете.

Във файла style.css въвеждаме следното:

/*
Theme Name: Deep Theme
Theme URI: https://codemyart.com
Description: My First Theme
Author: George Dramcheff
Author URI: https://codemyart.com
Version: 0.0.1
License: GNU General Public License
License URI: license.txt
Tags: two-columns, left-sidebar, right-sidebar, grid-layout, flexible-header, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce, portfolio 
Text Domain: codemyart
*/

Във файла index.php въвеждаме седното:

<!DOCTYPE html>
<html>
    <head>
        <title>WordPress theme development</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>Deep Theme</h1>
        <div>
            <p>My First WordPress Theme</p>
        </div>
    </body>
</html>

След като сме го направили отиваме в администрацията на WordPress и на страницата Appearance/Themes виждаме, че нашата тема вече е разпозната:

wordpress-theme-install

След като натиснем бутона Activate на Deep Theme трябва да видим началната страница, кодирана в index.php:

deep-theme-activate