Посібник з розробки тем для WordPress: створіть свою першу тему з нуля

Підготовчі роботи перед початком

Перш ніж почати писати будь-який код, необхідно переконатися, що розробче середовище готове до використання. По-перше, вам знадобиться локальне серверне середовище – наприклад, XAMPP, MAMP або Docker. По-друге, необхідний кодовий редактор; Visual Studio Code чи PHPStorm є чудовим вибором. Найважливіше – ви повинні встановити найновішу версію WordPress та переконатися, що вона працює без проблем.

Далі, у вашому каталозі встановлення WordPress…wp-content/themesУ цій папці створіть нову папку, яка буде вашим каталогом для матеріалів на вашу тему. Наприклад, ви можете назвати її…my-first-themeНазва цього каталогу стане вашим ідентифікатором теми, тому рекомендується використовувати лише малі літери, цифри та дефіси.

У папці з темами є два файли, які є обов’язковими та мінімально необхідними для запуску будь-якої теми WordPress:style.css和index.phpБез них WordPress не зможе визнати ваш тематичний дизайн у списку “Вигляд” -> “Теми” у задньому плані (в режимі адміністрування).

Рекомендуємо до прочитання. Вивчення розробки тем для WordPress з нуля: Повний посібник зі створення персоналізованих веб-сайтів。

Зрозуміти структуру основних файлів теми.

Функціональний тематичний дизайн для WordPress складається з низки шаблонних файлів, які дотримуються певних правил найменування. Кожен з цих файлів відповідає за відображення певної частини веб-сайту.

UltaHost – хостинг для сайтів, побудованих на платформі WordPress

Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5

сторінка доступу

Стильні таблиці та оголошення інформації про теми

style.cssФайли використовуються не лише для запису CSS-стилів; їхня область коментарів у верхній частині є місцем, де WordPress зчитує метадані (meta data) теми. Ця область має знаходитися безпосередньо в початку файлу та дотримуватися певного формату.

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

“Text Domain” використовується для інтернаціоналізації та є ключовим ідентифікатором для подальшого завантаження файлів з перекладами. Після введення всієї необхідної інформації оновіть сторінку теми в бекенді WordPress, і ви повинні побачити зображення з назвою “Моя перша тема”.

Функція основного шаблонного файлу

index.phpЦе основний шаблон вашої теми, а також стандартний “шаблон для повернення до попереднього вигляду” сайту. Коли WordPress не може знайти більш специфічний шаблон (наприклад,single.php或page.phpКоли це потрібно, використовується…index.phpЙого найбазовіша структура включає виклик заголовкового файлу WordPress, основного контенту циклу та фінального блоку коду.

<?php get_header(); ?>

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到任何文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Розширення базових шаблонів та впровадження нових функцій

Лишеindex.php、style.cssЦього недостатньо; нам потрібно розділити верхню частину сайту, нижню частину та бічні панелі, щоб структура була більш зрозумілою, а також включити основні функції теми.

Рекомендуємо до прочитання. Від нуля: Покрокова інструкція щодо створення власного теми для WordPress。

Розділити шаблони для верхньої та нижньої частин сторінки

Створитиheader.phpФайл містить оголошення типу документа, а також код HTML.Частина вмісту, а також заголовки та навігаційні елементи веб-сайту. Використовуйте ці елементи для організації структури сайту та забезпечення зручності користувачів.wp_head()Хаки, які забезпечують правильне вставлення необхідних скриптів та стилів як додатків, так і основної частини системи WordPress.

<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <p><strong>  <p><strong>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header>
    <h1><a href="/uk/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

Створитиfooter.phpФайл містить інформацію про футер сайту та виконує певні дії наприкінці свого вмісту.wp_footer()Хук.

<footer>
    <p>©</p>
</footer>
<p><strong>Цей текст повинен бути перекладений на українську мову.</strong></p>
</body>
</html>

Отже, таким чином…index.phpУ цьому випадку ми зможемо використовувати…get_header()和get_footer()Функції використовуються для їх імпорту.

hosting.com Віртуальний хостинг

Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.

сторінка доступу

Створити файл функцій

functions.phpЦе “мозок” теми – він використовується для додавання нових функцій, налаштування меню, увімкнення спеціальних зображень, визначення параметрів бічної панелі тощо. Це не шаблонний файл, а PHP-файл, який автоматично завантажується під час ініціалізації теми.

Ось що далі:functions.phpОсь базовий приклад:

<?php
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
function my_first_theme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_register_menus' );

// 引入主题的样式表和脚本
function my_first_theme_enqueue_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 引入一个自定义的JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_enqueue_scripts' );
?>

Створіть більше файлів шаблонів.

Щоб різні типи сторінок мали більш оптимальний дизайн, нам потрібно створити ще більше спеціалізованих шаблонів.

Рекомендуємо до прочитання. Від встановлення до майстерності: Повний посібник з створення веб-сайтів на WordPress та аналіз практичних порад。

Сторінка статті та шаблон сторінки

single.phpВикористовується для рендерингу окремої статті блогу. Його структура схожа на…index.phpПодібно, але зазвичай містить шаблони для коментарів.comments.phpВиклик…

page.phpВикористовується для рендерингу статичних сторінок. Зазвичай він не відображає метадані, такі як категорії чи теги, а зосереджується виключно на самому вмісті сторінки.

Міжсерверний віртуальний хостинг

Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.

сторінка доступу

Шаблон списку архівованих статей

archive.phpВикористовується для відображення інформації про категорії, теги, авторів, дати тощо на сторінках архіву. Ви можете використовувати умовні теги (conditional tags), наприклад:is_category()、is_tag()Щоб розрізняти різні типи архівів та відображати відповідні заголовки.

Створити сторінку з помилкою 404

404.phpЦе сторінка, яка відображається, коли користувач намагається перейти за URL-адресою, якої не існує. Хороша сторінка 404 має містити дружній повідомлення, пошукове поле та посилання на основні сторінки сайту, щоб допомогти користувачев

підсумок

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

Часті запитання

Чому мій тематичний файл (тема) не відображається у панелі керування WordPress?
Спочатку переконайтеся, що ваша папка з темами розташована у правильному місці.wp-content/themes/У каталозі. Далі, переконайтеся, що у папці є необхідні файли.style.css和index.phpФайл. Нарешті, відкрийте його.style.cssПереконайтеся, що блок коментарів з інформацією про тему файлу у верхній частині має правильний формат, особливо…Theme Name:Цей рядок.

Як додати підтримку власного логотипа до моєї теми?

Вам потрібно виконати дії, пов’язані з темою…functions.phpДодайте рядок коду до файлу, щоб увімкнути цю функцію. Використовуйте наступний код:add_theme_support( ‘custom-logo’ )Функція. Після її увімкнення користувачі зможуть завантажувати та налаштовувати логотип у розділі “Вигляд” -> “Налаштування” -> “Ідентичність сайту”. Вам також потрібно…header.phpВикористовуйте це у відповідних місцях.the_custom_logo()Функція для її відображення.

У чому різниця між файлом functions.php теми та плагіном?

functions.phpФункції, які є частиною поточно активованого тематичного набору, тісно пов’язані з особливостями цього тематичного набору. Якщо ви зміните тему, ці функції більше не будуть доступні. Натомість функції плагінів є незалежними від обраної теми – вони будуть працювати у будь-якій темі, якщо плагін активований. Тож, якщо ваші функції сильно залежать від візуального оформлення (наприклад, розташування елементів інтерфейсу, визначення макету), краще розміщувfunctions.phpЯкщо це універсальні функції (наприклад, форми для зв’язку, оптимізація для пошукових систем SEO), то їх краще реалізувати у вигляді плагінів.

Як зробити так, щоб моя тема підтримувала декілька мов?

Вам потрібно виконати дві речі. По-перше, під час розробки обов’язково обгорніть всі стрінги, призначені для користувачів, за допомогою функцій перекладу. Наприклад:__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )І переконайтеся, що…‘my-first-theme’与style.cssПо-перше, вказаний у документах “Text Domain” має збігатися з фактичним доменом вашого веб-сайту. По-друге, використовуючи інструменти на кшталт Poedit, необхідно вилучити з коду вашого тематичного файлу (theme file) усі рядки, які потрібно перекласти, та створити.potФайл, після чого перекладач створює відповідний переклад на потрібну мову..poІ після компіляції.moФайл потрібно розмістити у відповідному розділі теми (theme)./languages/У каталозі.