Основні складові теми для WordPress

Рекомендуємо до прочитання. У сучасному конкурентному онлайн-світі добре продуманий і високопродуктивний веб-сайт є надзвичайно важливим.。

Заголовкові дані таблиці стилів теми

тематичнийstyle.cssВерхня частина файлу має містити коментар у встановленому форматі. WordPress використовує цю інформацію для ідентифікації та відображення теми на серверному рівні.

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

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

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

/*
Theme Name: My Awesome Theme
Theme URI: https://example.com/my-awesome-theme/
Author: Your Name
Author URI: https://example.com/
Description: A modern, responsive WordPress theme built for speed and SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
*/

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

Поширені операції з файлами функціональних тем

functions.phpФайл є “мозком” теми. Поширеною операцією є використання…add_theme_support()Функції для оголошення можливостей, підтримуваних певною темою. Наприклад, увімкнення функції використання фірмових зображень для статей, налаштування власного логотипу, вибору власного фону тощо.

<?php
function my_awesome_theme_setup() {
    // 添加对文章特色图片的支持
    add_theme_support( 'post-thumbnails' );
    // 添加对自定义Logo的支持
    add_theme_support( 'custom-logo' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    // 添加对标题标签的支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );
?>

Цей код використовує хуки для того, щобafter_setup_themeЦей код виконується після завантаження теми та безпечно увімкнує кілька основних функцій WordPress.

Рівні шаблонів та користувацькі шаблони

WordPress використовує інтелектуальну систему під назвою “Ієрархія шаблонів” для визначення способу відображення різних типів сторінок. Коли користувач завітає на певну сторінку, WordPress шукає відповідний шаблон у певному порядку пріоритетів. Наприклад, для статті, яка була класифікована як “Новини”, WordPress буде по черзі шукати:single-post-news.php -> single-post.php -> single.php -> singular.php -> index.phpРозробники можуть використовувати ці правила, створюючи шаблонні файли з певними назвами, для досягнення більш детального контролю над виглядом сторінок.

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

Окрім шаблонів, встановлених системою, розробники також можуть створювати “шаблони сторінок”. Це користувацькі шаблони, призначені для конкретних сторінок або групи сторінок. Щоб створити шаблон сторінки, необхідно чітко зазначити це у коментарях на початку файлу шаблону.

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

Наприклад, щоб створити шаблон сторінки повної ширини, можна створити новий файл під назвою…template-fullwidth.phpФайл, і додайте на початок файлу наступний коментар:

<?php
/**
 * Template Name: 全宽度页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
?>

Після цього, під час редагування сторінки в бекенді WordPress, ви зможете побачити та вибрати варіант “Повнокольорове верстку” у розбірці “Шаблони” (“Template”) в налаштуваннях сторінки („Page Properties“). Це надає великої гнучкості у відображенні контенту, дозволяючи задовольнити особливі вимоги до макету сторінки без необхідності змін основних файлів теми.

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

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

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

Використання умовних тегів для логічного керування

У файлі шаблонів часто потрібно відображати різні дані залежно від певних умов. Для цього використовуються умовні теги WordPress. Наприклад,index.phpУ цьому випадку можна використовувати умовні теги для визначення того, чи це сторінка зі списком статей, чи сторінка з окремою статтею. Хоча зазвичай для цього існують більш спеціалізовані шаблони.

<?php if ( is_home() && ! is_front_page() ) : ?>
    <h1>Список статей блогу</h1>
<?php elseif ( is_search() ) : ?>
    <h1>搜索结果：</h1>
<?php endif; ?>

До поширених тегів для умовного форматування також належать:is_single()、is_page()、is_category()、is_archive()І так далі – це основи для створення динамічних, інтелектуальних тем (тематичних стилів веб-сайтів).

Керування скриптами та стилями теми

Щоб забезпечити стабільність та ефективність функціонування сайту, всі файли JavaScript та CSS слід завантажувати послідовно за допомогою методів, які надає WordPress, а не використовувати їх безпосередньо у шаблонах.或Це було зроблено за допомогою певних тегів.functions.phpу китайській мовіwp_enqueue_scriptsЦе було реалізовано за допомогою хуків (hooks).

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

Правильне реєстрування та входження до черги на отримання ресурсів

Використовуйтеwp_register_script()和wp_enqueue_script()(Скрипт) або відповіднеwp_register_style()和wp_enqueue_style()Функції стилів дозволяють WordPress централізовано керувати залежностями, виконувати контроль версій та уникати повторного завантаження ресурсів.

<?php
function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

    // 注册一个自定义JavaScript文件
    wp_register_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0.0', true );
    // 排队这个脚本（仅在需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );
?>

У наведеному вище прикладі…get_stylesheet_uri()Отримати поточну тему…style.cssШляхget_template_directory_uri()Отримайте URI каталогу тем. Встановіть останній параметр скрипту на відповідне значення.trueЦе означає, що вміст завантажується у футерній розділ сторінки, що допомагає покращити її швидкість завантаження.

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

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

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

Додати вбудовані стилі або скрипти

Іноді потрібно динамічно генерувати CSS чи JavaScript на основі логіки, написаної на PHP. Для цього можна використовувати такі підходи:wp_add_inline_style()和wp_add_inline_script()Функції мають бути пов’язані з ресурсом, який вже знаходиться у черзі на обробку.

<?php
function my_dynamic_css() {
    $custom_css = "
        .site-header {
            background-color: #" . get_theme_mod('header_bg_color', 'ffffff') . ";
        }
    ";
    wp_add_inline_style( 'my-awesome-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_dynamic_css' );
?>

Конфігуратор тем та функції налаштування

Конфігуратор тем WordPress (WordPress Theme Customizer) надає інтерфейс у реальному часі, який дозволяє користувачам (адміністраторам) змінювати певні налаштування теми – колір, логотип, зображення фону тощо. За допомогою API конфігуратора тем розробники можуть безпечно додавати до теми конфігуровані параметри.

Додайте одне налаштування до конфігуратора.

По-перше, необхідно…functions.phpВикористовуйте його у Китаї.customize_registerІнструменти для реєстрації налаштувань, контролерів та областей.

<?php
function my_awesome_theme_customize_register( $wp_customize ) {
    // 添加一个“颜色”板块
    $wp_customize->add_section( 'theme_colors', array(
        'title'    => __( '主题颜色', 'my-awesome-theme' ),
        'priority' => 30,
    ) );

    // 添加一个“链接颜色”设置
    $wp_customize->add_setting( 'link_color', array(
        'default'           => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为该设置添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'    => __( '链接颜色', 'my-awesome-theme' ),
        'section'  => 'theme_colors',
        'settings' => 'link_color',
    ) ) );
}
add_action( 'customize_register', 'my_awesome_theme_customize_register' );
?>

Вивести настороження з власними налаштуваннями у темі.

Після налаштувань необхідно відобразити це значення на фронтенді теми. Зазвичай це робиться за допомогою спеціальних кодових елементів чи шаблонів.style.cssабо черезwp_add_inline_style()У доданому динамічному CSS використовуються такі елементи та стилі:get_theme_mod()Функція отримує значення.

<?php
function output_customizer_css() {
    $link_color = get_theme_mod( 'link_color', '#0073aa' ); // 第二个参数为默认值
    if ( $link_color !== '#0073aa' ) {
        $css = "
            a { color: {$link_color}; }
            a:hover { color: " . adjust_color( $link_color, -50 ) . "; }
        ";
        wp_add_inline_style( 'my-awesome-theme-style', $css );
    }
}
add_action( 'wp_enqueue_scripts', 'output_customizer_css' );
?>

Завдяки цьому способу функціональність та зовнішній вигляд теми є дуже конфігурованими, водночас код залишається чистим та безпечним.

підсумок

Розробка теми для WordPress є систематичним процесом, який вимагає глибокого розуміння структури шаблонів, основних функцій системи, механізмів управління ресурсами та можливостей кастомізації через API. Починаючи зі створення найбазовіших елементів теми, необхідноstyle.css和index.phpПочнемо зі створення спеціальних шаблонних файлів для керування відображенням різних сторінок.functions.phpРозширення функціоналу теми та дотримання стандартів WordPress під час розробки скриптів та стилів є основою для створення надійних та ефективних тем. Крім того, інтеграція API для налаштування теми дозволяє користувачам отримувати зручний та реальний час досвід під час їх налаштування. Оволодіння цими ключовими концепціями та навичками є важливим кроком на шляху до становлення професійного розробника WordPress-тем.

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

Яка мінімальна кількість файлів потрібна для створення найбазовішої теми для WordPress?

Найбазовіша тема, яку може розпізнати WordPress, має щонайменше два файли:style.css和index.php。style.cssЗаголовок повинен містити правильну анотацію з інформацією про тему.index.phpЦе останній файл для відкату на рівні шаблонів, призначений для виведення найбазовішого контенту.

У чому різниця між підтемою (subtopic) та основною темою (parent topic)? Як їх створити?

Підтеми успадковують усі функції та стилі батьківської теми, але дозволяють розробникам їх перевизначати та налаштовувати без необхідності змінювати файли батьківської теми. Це зручно, оскільки дозволяє зберегти власні зміни після оновлення батьківської т/wp-content/themes/Створіть нову папку у каталозі, а потім у цій папці ще й новий файл.style.cssФайл; у його заголовкових коментарях має бути вказано…Template:У цьому рядку вказується назва каталогу батьківської теми.

Чому мій власний шаблон сторінки не відображається у списку налаштувань на серверній стороні?

Будь ласка, перевірте ваш файл шаблону сторінки (наприклад, …).my-template.phpЧи знаходиться файл у кореневому каталозі теми, і чи є формат блоку коментарів на початку файлу повністю правильним? У блоку коментарів має бути включено…Template Name:Цей рядок має відповідати певним вимогам, а після нього має безпосередньо слідувати назва вашого шаблону. Неправильне розташування пробілів чи відсутність крапки можуть призвести до того, що WordPress не зможе його ідентифікувати

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

Це здійснюється переважно за допомогою процесів “інтернаціоналізації (i18n)” та “локалізації (l10n)”. Спочатку…style.css“Text Domain” та…functions.php的load_theme_textdomain()Під час виклику використовуйте однакові поля для тексту теми. Потім у всіх місцях, де потрібно здійснити переклад, застосовуйте відповідні формати тексту.__()、_e()Необхідно обгорнути ці функції перекладу в відповідні модулі. На завершення, використовуйте інструменти на кшталт Poedit для створення готового продукту..potШаблонний файл, а також файли для відповідних мов..po和.moФайл розміщений у відповідній темі./languages/У каталозі.