Від нуля: розуміння основної структури тем для WordPress

Від нуля: розуміння основної структури тем для WordPress

Стандартна тема для WordPress – це папка, яка містить певні файли та каталоги. Ці файли разом визначають зовнішній вигляд та функціонал веб-сайту. Найбазовіші теми можуть працювати навіть з двома файлами, проте теми з повним функціоналом, які відповідають сучасним стандартам розробки, містять набагато більше елементів.

Коректна формулювання: „Ключовим файлом є…“ (The key file is…)style.css和index.phpСеред них,style.cssЦе не просто таблиці стилів, а й своєрідні “паспорти” тем. Блок коментарів на початку файлу теми містить її метаінформацію: назву теми, автора, опис, версію тощо. Саме завдяки цій інформації система WordPress може розпізнавати та відображати відповідні теми.

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

Рекомендуємо до прочитання. Оволодіння розробкою тем для WordPress: від індивідуального налаштування до реалізації складних функцій。

Окрім цих двох файлів, структурована тема зазвичай також містить наступні папки та файли:
* 模板文件：如用于渲染单篇文章的single.phpВикористовується для рендерингу сторінок.page.phpА також для списків статей.archive.phpІ з головної сторінки…home.php或front-page.php。
* 模板部件：存放于/template-parts/У каталозі знаходяться уривки коду, які можна повторно використовувати, наприклад, анотації до статей.content.phpЗаголовок сторінки (Header), верхня частина сторінки (Header Section)header.phpВерхній та нижній колонтитули (верхня та нижня частина сторінки)footer.php）。
* 函数文件：functions.phpЦе ядро функціональності теми. Воно використовується для додавання функцій, що підтримують конкретну тему, реєстрації меню та бічних панелей, вставки скриптів та таблиць стилів, а також для визначення різних користувацьких
* 资源目录：通常包括/assets/Основний каталог, під яким є ще інші підрозділи чи підкаталоги./css/、/js/、/images/Підкаталоги використовуються для організованого зберігання статичних ресурсів.

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

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

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

Основні файли шаблонів і ієрархія шаблонів.

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

Принцип роботи такий: коли користувач відвідує певний URL, WordPress спочатку визначає, який тип сторінки це (наприклад, головна сторінка, окрема стаття, сторінка з архівом публікацій тощо), а потім шукає відповідний шаблон за попередньо встановленим списком пріоритетів. Якщо знаходить найбільш підходящий шаблон, використовує його; якщо ж шаблону не знаходить, продовжує пошук, поки не знайде альтернативний варіант.index.php。

Парсинг поширених шаблонних файлів

Візьмемо для прикладу сторінку окремої статті. Порядок пошуку в WordPress зазвичай такий:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpЦе означає, що ви можете створювати спеціальні шаблони для певних типів статей або навіть для конкретних статей.

Ще одним важливим файлом є…functions.phpХоча воно не є частиною структури шаблонів, воно забезпечує їх підтримку з боку сервера. Ви можете використовувати його для різних цілей.add_theme_support()Функції для оголошення можливостей, які підтримує певна тема, наприклад: фірмові зображення статей, власні логотипи, форматування статей тощо.

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

// 在 functions.php 中添加主题支持
function mytheme_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_action( 'after_setup_theme', 'mytheme_setup' );

Використання функцій тем та системи хуків (hooks)

Гнучкість та розширюваність WordPress значною мірою зумовлені системою “хаків” („hooks“). Існує два типи хаків: хаки дій (action hooks) та хаки фільтрів (filter hooks). Хаки дій дозволяють вставляти власний код у певні моменти виконання програми, тоді як хаки фільтрів дозволяють змінювати дані, які передаються під час виконання процесів.

Використовуйте дії-хаки (action hooks) для додавання нових функцій.

Акційні хаки складаються з…do_action()Створення та використання функційadd_action()Функція монтує обраний коректор (callback-функцію) на відповідний „гачок“ (hook). Під час розробки тем дії, які виконуються через ці гачки, часто використовуються для вставки контенту у певні місця або для виконання певних операцій у певни

Наприклад,wp_enqueue_scriptsЦе ключовий механізм для безпечного реєстрації та відкладення в чергу файлів зі стилами та JavaScript-кодом. Ви завжди повинні завантажувати фронтенд-ресурси саме через цей механізм, а не напряму вихідні файли шаблонів.或Теги.

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

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

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

// 在 functions.php 中正确引入样式和脚本
function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Використовуйте хаки фільтрів для модифікації виводу.

Фільтрові хаки складаються з…apply_filters()Створення та використання функційadd_filter()Функція дозволяє прикріплювати додаткові оброблювальні функції (коректори). Наприклад, ви можете змінювати довжину анотацій до статей або додавати попередній префікс до всіх заголовків статей.

// 修改摘要字数长度
function mytheme_excerpt_length( $length ) {
    return 30; // 将摘要字数限制为30字
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );

Реалізація респонсивного дизайну та користувацьких налаштувань

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

Створення реактивного дизайну (реактивного лей아уту)

Поширеним підходом є використання стратегії CSS, орієнтованої на мобільні пристрої. Спочатку створюються базові стилі для мобільних пристроїв, а потім за допомогою медіакверів додаються або змінюються стилі для екранів бі

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

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Інтеграція з засобом налаштувань для отримання реального часу попереднього перегляду

WordPressCustomizerЦе потужний інструмент, який дозволяє адміністраторам веб-сайтів у реальному часі переглядати та змінювати певні налаштування теми. Ви можете…functions.phpчерез$wp_customizeОб’єкт отримує додаткові налаштування та елементи керування.

Наприклад, можна додати опцію для зміни інформації про авторські права у футерному блокі веб-сайту:

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

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

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

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“版权文本”设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field', // 对输入进行净化
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为上述设置添加一个文本框控件
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'mytheme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

А потім уfooter.phpУ файлі-шаблоні використовується…get_theme_mod()Функція виводить це значення:
echo esc_html( get_theme_mod( 'footer_copyright_text', '默认版权文本' ) );

підсумок

Розробка тем для WordPress – це комплексна процес, яка вимагає знань PHP, HTML, CSS, JavaScript, а також розуміння основної архітектури системи WordPress. Починаючи з основ…style.css和index.phpВід вивчення простих структур шаблонів та систем зв’язків між їх елементами до опанування складних ієрархій шаблонів та механізмів взаємодії, а далі – до реалізації респонсивного дизайну…CustomizerІнтеграція – це кожен крок на шляху створення професійного, ефективного та зручного у використанні тематичного дизайну для сайту. Дотримання стандартної структури файлів та правил кодування не лише полегшує подальший догляд за створеним тематичним дизайном, але й гарантує його сумісність із екосистемою WordPress та різноманітними плагінами. Пам’ятайте: якісне розроблення тем починається зі звернення уваги як до користувачів, так і до розробників.

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

Яка найпростіша тема для WordPress має включати до свого складу?

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

Як додати навігаційний меню до мого тематичного сайту?

Спочатку вам потрібно…functions.phpВикористовуйте його у Китаї.register_nav_menus()Функція призначена для реєстрації одного або кількох місць для розміщення страв. Потім ці дані використовуються у шаблонах тем (зазвичай).header.phpВи бажаєте, щоб меню відображалося у певному місці. Для цього використовуйте відповідні параметри налаштувань.wp_nav_menu()Функція для виклику та відображення зареєстрованого меню.

Що таке підтема і навіщо її використовувати?

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

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

Щоб тема підтримувала багатомовність (інтернаціоналізацію), необхідно виконати два основні кроки. По-перше, під час розробки всі рядки, які потрібно перекласти, слід оформити у відповідному форматі.__()或_e()По-перше, необхідно обгорнути відповідні функції перекладу у певні корпуси (бібліотеки). По-друге, за допомогою інструментів на кшталт Poedit слід вилучити ці рядки з коду та використати їх для створення потрібних результатів пер.potФайл, а потім створіть відповідні версії для кожної мови..po和.moНарешті,functions.phpВиклик у середині…load_theme_textdomain()Функція для завантаження перекладу.