Посібник з розробки теми WordPress для початківців: створення веб-сайту з нуля

Підготовчі роботи та налаштування середовища

Перш ніж почати писати код, вам потрібне відповідне середовище розробки. Воно включає в себе локальне серверне середовище (наприклад, XAMPP, MAMP або Local by Flywheel) і редактор коду (наприклад, VS Code, Sublime Text або PHPStorm). Локальне серверне середовище емулює онлайн-сервер, дозволяючи вам безпечно розробляти і тестувати теми на власному комп'ютері без необхідності завантажувати їх на веб-сервер після кожної зміни.

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

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

Рекомендуємо до прочитання. Посібник з розробки тем для WordPress для початківців: створення першої власної теми з нуля。

Сучасна розробка тем WordPress також рекомендує використовувати дочірні теми. Це безпечний спосіб кастомізації та додавання функціональності до вашої теми без безпосередньої зміни файлів батьківської теми. При оновленні батьківської теми ваш налаштований вміст (збережений у дочірній темі) буде збережено. Для створення дочірньої теми також потрібні ті ж самі два основні файли, згадані вище, а такожstyle.css в заголовку стилюTemplate:оголошує батьківську тему.

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

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

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

Створення файлу шаблону, який є основою теми.

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

Шаблони відображення статей та сторінок

Найбазовішим шаблоном є…single.php和page.phpякі використовуються для керування відображенням окремих постів блогу та окремих сторінок відповідно. У цих шаблонах ви будете використовувати ряд основних функцій WordPress для циклічного перегляду вихідного вмісту. Найважливіша структура циклу зазвичай показана нижче:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><p><strong>  <p><strong></h1>
    <div class="entry-content">
        <p><strong>  <p><strong>
    </div>
<?php endwhile; endif; ?>

Цей код перевіряє, чи існує стаття, а потім входить у цикл, який по черзі виводить заголовок і зміст статті. Такі функції, якthe_title()和the_content()Використовується для виведення відповідних даних.

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

WordPress використовує шаблони списків, коли користувач відвідує головну сторінку блогу, сторінку каталогу категорій або сторінку архіву автора. Найпоширенішими шаблонами списків єindex.php(як крайній варіант) таarchive.php. У шаблонах списків цикл повторюється над декількома статтями, і зазвичай ми використовуємоthe_excerpt()виводити анотації статей замість повного тексту.

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

// Вивести елементи списку статей у циклі
<article>
    <h2><a href="/uk/</?php the_permalink(); ?>"><p><strong>  <p><strong></a></h2>
    <?php the_excerpt(); ?>
</article>

the_permalink()використовується для отримання перманентного посилання на поточну статтю.

Загальні компоненти теми

Щоб покращити повторне використання коду та його супровід, вам слід розділити загальнодоступні розділи сторінки на окремі файли шаблонів. Це досягається за допомогоюget_header(), get_footer(), get_sidebar()和get_template_part()та інші функції для його реалізації.

Наприклад, вашheader.phpФайл містить заголовок HTML-документа,а також верхнє навігаційне меню сайту. У розділіsingle.phpВам просто потрібно зателефонувати на номерget_header()Потім WordPress автоматично вводитьheader.phpВміст.

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

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

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

Аналогічно, для блоків коду, які повторно використовуються в декількох місцях (наприклад, метаінформація статті), ви можете зберегти їх якcontent.php或template-parts/content.phpа потім в основному шаблоні за допомогоюget_template_part('template-parts/content', get_post_format());Назвіть його. Другий параметр дозволяє завантажувати різні варіанти файлів залежно від формату статті (наприклад, галерея, цитати) (наприкладcontent-gallery.php）。

Покращення тем за допомогою функціональних файлів

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

Реєстрація Функції та меню теми

Базовою і необхідною операцією є використанняadd_theme_support() щоб вказати, які функції WordPress підтримує ваша тема. Наприклад, включення зображень у публікаціях, кастомних меню та підтримки розмітки HTML5 є стандартною практикою.

Рекомендуємо до прочитання. Основна архітектура та принцип роботи WordPress.。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

Після цього ви можете використовуватиregister_nav_menus() функції для визначення позицій меню, доступних у темі, таких як “навігація вгорі” та “навігація у нижньому колонтитулі”.

Знайомство з таблицями стилів та JavaScript

Правильна черговість файлів CSS і JavaScript - ключ до професійного розвитку. Це гарантує правильність залежностей та уникнення конфліктів скриптів. Ніколи не використовуйте файли шаблонів безпосередньо в或Tagged Представляємо ресурси.

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

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

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

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

хукwp_enqueue_scripts використовується для завантаження скриптів і стилів на фронтенд сайту, в той час якget_stylesheet_uri()和get_template_directory_uri() допоможе вам отримати правильну URL-адресу предметного каталогу.

Створення області віджетів

Області віджетів на бічній панелі або в нижньому колонтитулі надають користувачам можливість налаштовувати вміст за допомогою інтерфейсу перетягування у фоновому режимі. Використовуйте віджетregister_sidebar() створює нову область гаджетів.

function my_theme_widgets_init() {
    register_sidebar(array(
        'name' => 'Головна бічна панель',
        'id' => 'sidebar-1', 'description' => 'Ця область є невеликою бічною панеллю.
        'description' => 'Віджети в цій області будуть відображатися збоку від постів та сторінок. ,
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget' =&gt; '</section>',
        'before_title' =&gt; '<h2 class="widget-title">',
        'after_title' =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

Після реєстрації вам потрібно буде додати файл шаблону (наприкладsidebar.phpВикористовується у (…)dynamic_sidebar('sidebar-1');щоб вивести цей регіон.

Створення адаптивних макетів і стилів

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

Стратегія стилю mobile-first

Рекомендується використовувати стратегію написання CSS “спочатку мобільні пристрої”. Це означає, що спочатку потрібно написати базові стилі для мобільних пристроїв (невеликих екранів), а потім за допомогою медіа-запитів поступово додавати або перевизначати стилі для більших екранів.

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

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

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

Ця стратегія гарантує, що основний контент доступний на всіх пристроях, і поступово покращує роботу з ним на великих екранах.

Гнучка обробка зображень і медіафайлів

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

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

Це правило CSS гарантує, що ширина медіа-елемента не перевищує ширину його батьківського контейнера, а висота автоматично масштабується, щоб не порушити макет.

Використання допоміжних класів і функцій WordPress

WordPress сам виводить ряд корисних класів CSS, які ви можете використовувати для більш точного керування стилями. НаприкладТег додасть сторінку, клас типу публікації (наприклад.page, .single-post), а також класи ідентифікаторів статей (такі як.postid-123). У циклі для списку статей використовується командаpost_class()Функція виводить серію назв класів (наприклад, формат статті, категорія тощо) для кожного контейнера статті, що значно полегшує тонке редагування.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

У таблиці стилів ви можете розташувати його так:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

підсумок

Розробка тем для WordPress - це процес, який поєднує в собі творчість, технології інтерфейсу (HTML, CSS, JavaScript) і технології бекенд (PHP). Від створення теми, яка міститьstyle.css和index.phpПочинаючи з базової папки, крок за кроком вивчаємо і впроваджуємо систему ієрархії шаблонів, яка розділяє сторінки на віджети шаблонів багаторазового використання. Ядроfunctions.phpДокументація - це етап, на якому ви розширюєте функціональність теми, меню реєстрації та скрипти. Нарешті, переконайтеся, що ваша тема забезпечує чудовий досвід перегляду на всіх пристроях, від мобільних до десктопів, завдяки адаптивному CSS-дизайну. Дотримання найкращих практик, таких як використання дочірніх тем для модифікацій, правильне розташування скриптів і стилів у черзі, зробить вашу тему більш професійною, безпечною і простою в обслуговуванні.

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

Чи можу я розробляти теми WordPress без основ PHP?

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

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

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

Який зв'язок між оновленнями дочірньої та батьківської тем?

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

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

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