Створення теми
Ця стаття показує, як створити найпростішу тему WordPress, яка складатиметься всього з двох файлів. Завдання статті – показати загальний принцип створення теми.
Для того щоб тема з’явилася в адмінці і її можна було активувати, в ній має бути мінімум два файли :
- index.php – відповідає за виведення вмісту.
- style.css – відповідає за css стилі цього висновку.
Крім цих файлів, у темі можуть бути будь-які інші файли. Файлу можна дати спеціальну назву і він стане шаблоном сторінки або групи сторінок, докладніше дивіться ієрархію файлів теми .
Файл теми style.css
Давайте створимо дуже просту тему (всього із двох файлів). Кроки нижче припускають, що ви вже ознайомилися зі статтею: WordPress вже встановлено .
Крок 1: створення папки теми
Зайдіть до папки на вашому комп’ютері, де встановлений ваш сайт на WordPress. Потім з основної папки, перейдіть в папку тем: wp-content/themes/і створіть папку mytheme— це буде папка теми, в якій будуть лежати всі файли теми. Повинно вийти приблизно так:
Крок 2: створення обов’язкових файлів: style.css та index.php
У створеній папці теми mythemeстворіть файл style.css. Відкрийте цей файл у текстовому редакторі, наприклад notepad++ та додайте до нього такий CSS код:
/**
Theme Name: Моя перша тема
Author: Пупкін
*/
body {
background: #F2F1EC;
max-width: 700px;
margin: 2em auto;
}
.header, .footer {
margin: 2em auto;
text-align: center;
}Далі, так само створіть ще один файл index.php. І додайте до нього такий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title>
<?php echo wp_get_document_title(); ?>
</title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<h1><?php bloginfo( 'name' ); ?></h1>
<h2><?php bloginfo( 'description'); ?></h2>
</header>
<div class="middle">
<?php
// цикли виведення записів
// якщо запис знайдено
if ( have_posts() ){
while (have_posts()) {
the_post();
echo '<h3><a href="'. get_permalink() .'">'. get_the_title() .'</a></h3>';
echo get_the_excerpt();
}
}
// елсі записів не знайдено
else {
echo '<p>Записів немає...</p>';
}
?>
</div>
<footer class="footer">
<?php echo date('Y') ?> © Я і компанія моя
</footer>
<?php wp_footer(); ?>
</body>
</html>Крок 3: активація теми
На цьому все! Тема готова. Щоправда у дуже первісному вигляді. Але вона вже працює, залишилося лише її активувати. Для цього заходимо админ-панель > Внешний вид > Темыі активуємо тему з назвою: «Моя перша тема».
Далі, переходимо у зовнішню частину і дивимося як виглядає наша перша тема, бачимо:
Все, перша тема готова!
–
Зрозуміло, у такому вигляді використовувати її неможливо – тема потребує доопрацювання. Щоб якнайшвидше зрозуміти як і що потрібно робити, рекомендую ознайомитися з іншими розділами цього посібника. А також, як приклад, ознайомтеся з дуже простою стартовою темою: clean-wp-template .
Який би крутий сайт на WordPress ви не бачили, принцип шаблонів цього сайту такий самий, як і у будь-якої іншої теми: 2 обов’язкові файли та інші розширюючі файли…