м. Тернопіль, вул. Мазепи 10, офіс 503

+38 (096) 561 55 59

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


1. Основна структура папок та файлів теми WordPress

Кожна тема WordPress складається з обов’язкових файлів, без яких вона не буде працювати. Ось базова структура теми:

📂 mytheme/ (головна папка теми)
├── 📄 style.css (основний файл стилів)
├── 📄 index.php (головний шаблон теми)
├── 📄 functions.php (файл із налаштуваннями та функціями теми)
├── 📂 template-parts/ (додаткові частини шаблону, наприклад, header, footer, sidebar)
├── 📂 assets/ (папка для зображень, стилів та скриптів)
│ ├── 📂 css/ (додаткові стилі)
│ ├── 📂 js/ (JavaScript-файли та бібліотеки)
│ ├── 📂 images/ (зображення сайту)
├── 📂 inc/ (файл додаткових функцій та розширень)
├── 📄 header.php (верхня частина сайту)
├── 📄 footer.php (футер сайту)
├── 📄 sidebar.php (бічна панель сайту)
├── 📄 page.php (шаблон для окремих сторінок)
├── 📄 single.php (шаблон для окремих статей блогу)
├── 📄 archive.php (шаблон для архівних сторінок)
├── 📄 404.php (шаблон сторінки помилки 404)

Чому важливо організувати файли за цією структурою?
✔️ Полегшується підтримка теми та внесення змін.
✔️ Покращується швидкість завантаження сайту.
✔️ Забезпечується гнучкість для майбутніх оновлень.


2. Обов’язкові файли теми WordPress

📄 style.css (файл стилів теми)

Файл style.css містить основні стилі вашої теми та метаінформацію:

/*
Theme Name: My Custom Theme
Theme URI: https://mywebsite.com
Author: My Name
Author URI: https://mywebsite.com
Description: Унікальна тема для WordPress, створена спеціально для бізнесу в Івано-Франківську.
Version: 1.0
*/

Цей файл обов’язковий – WordPress використовує його для ідентифікації вашої теми.


📄 functions.php (файл функцій)

Файл functions.php потрібен для підключення основних можливостей теми, таких як меню, віджети, стилі, скрипти.

function mytheme_enqueue_styles() {
wp_enqueue_style('main-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

3. Підключення стилів та скриптів правильно

Щоб уникнути повільного завантаження сайту, стилі та скрипти варто підключати оптимально:

function mytheme_enqueue_assets() {
// Підключення CSS
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css', array(), '5.0.2');
wp_enqueue_style('theme-style', get_stylesheet_uri(), array('bootstrap'), '1.0');
// Підключення JS
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘theme-scripts’, get_template_directory_uri() . ‘/assets/js/main.js’, array(‘jquery’), ‘1.0’, true);
}
add_action(‘wp_enqueue_scripts’, ‘mytheme_enqueue_assets’);

🔹 Правильний підхід дозволяє:
✔️ Використовувати кешування браузера.
✔️ Запобігати конфліктам між плагінами.
✔️ Підвищити продуктивність сайту.


4. Використання шаблонів для розділів сайту

Щоб не дублювати код, окремі частини сайту виносять у файли:

📄 header.php – верхня частина сайту (логотип, меню, контакти).
📄 footer.php – нижній колонтитул (посилання, копірайти, контакти).
📄 sidebar.php – бічна панель (віджети, додаткові блоки).

Використання шаблонів дозволяє швидко змінювати структуру сайту.

Приклад підключення header.php у файлі index.php:

<?php get_header(); ?>
<div class="content">
<h1>Головна сторінка</h1>
<p>Ласкаво просимо на наш сайт!</p>
</div>
<?php get_footer(); ?>

5. Оптимізація швидкості завантаження

Щоб сайт вантажився швидше, слід дотримуватися найкращих практик оптимізації:

🔹 Lazy Load для зображень

function add_lazyload($content) {
$content = preg_replace('/<img(.*?)src=/', '<img$1loading="lazy" src=', $content);
return $content;
}
add_filter('the_content', 'add_lazyload');

🔹 Кешування запитів до бази даних

function get_cached_posts($number = 5) {
$cached_posts = wp_cache_get('cached_posts');
if (!$cached_posts) {
$cached_posts = new WP_Query(array('posts_per_page' => $number));
wp_cache_set('cached_posts', $cached_posts, '', 3600);
}
return $cached_posts;
}

🔹 Оптимізація Google Fonts

function optimize_google_fonts() {
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'optimize_google_fonts');

6. Використання шаблонних частин у WordPress

Щоб код був зручнішим, можна використовувати template-parts/.

📌 Приклад підключення блоку у сторінку:
📄 template-parts/content.php

<article>
<h2><?php the_title(); ?></h2>
<p><?php the_excerpt(); ?></p>
</article>

📄 index.php

<?php get_template_part('template-parts/content'); ?>

Так можна легко керувати блоками сайту, не редагуючи основні файли.


7. Висновки

📌 Грамотна організація файлової структури теми WordPress в Івано-Франківську допоможе:
✔️ Забезпечити високу швидкість завантаження сайту.
✔️ Полегшити оновлення та підтримку коду.
✔️ Оптимізувати SEO та зробити сайт привабливішим для пошукових систем.
✔️ Забезпечити гнучкість у майбутньому розвитку проекту.

Створення оптимізованої теми WordPress – це ключ до швидкого, адаптивного та функціонального сайту. Якщо вам потрібна професійна розробка унікальної теми для вашого бізнесу в Івано-Франківську – звертайтеся до експертів WordPress! 🚀

Останні статті