Skip to content

Все для WordPress, веб-розробки — і не тільки

Якою мовою написаний WordPress

Якою мовою написаний WordPress

Коли люди запитують, якою мовою написаний WordPress, за цим питанням майже завжди стоїть інше: «З чого мені почати, якщо я хочу в ньому розібратися?» І це правильний підхід.

Розробка під WordPress — це не магія і не закритий клуб. Це стек із п’яти технологій, чотири з яких знайомі будь-якому верстальнику. П’ята, PHP, тримає на собі ядро, теми, плагіни та всю серверну логіку. Але вивчити доведеться не «одну мову», а зрозуміти, як вони працюють разом і в якому порядку їх опановувати.

💡 Швидкий огляд:

  • Ядро WordPress написане на PHP. Дані живуть у MySQL. Це серверна частина, прихована від очей користувача.
  • У браузері сторінка збирається з HTML (структура), CSS (оформлення) та JavaScript (інтерактивність), трьох фронтенд-технологій.
  • Опановувати стек потрібно в порядку: HTML, потім CSS, потім PHP, потім JavaScript, потім SQL. Від простого до складного.

PHP, двигун WordPress

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

Приклад PHP-коду зі змінними та умовною логікою

PHP у WordPress працює як диригент: він «диригує» HTML, викликає функції з бази даних, підставляє налаштування з адмінки та збирає фінальну сторінку. Будь-який шаблон теми — це PHP-файл із вкрапленнями HTML. Будь-який плагін — це PHP-файл, який через хуки (add_action, add_filter) підключається до ядра.

Без PHP WordPress просто не запуститься. Тому відповідь на головне питання однозначна: WordPress написаний на PHP. Але це не єдина мова, яка потрібна розробнику.

HTML, скелет кожної сторінки

HTML — це не мова програмування, а мова розмітки. Він не «обчислює», він описує структуру: де заголовок, де абзац, де зображення, де кнопка. Браузер читає HTML-розмітку та перетворює її на видиму сторінку.

У WordPress HTML не зберігається у вигляді окремих файлів. Шаблони теми написані на PHP, але віддають вони саме HTML. Коли ви редагуєте сторінку в Гутенберзі, редактор зберігає контент у базу, але на виході відвідувач усе одно отримує HTML.

1<html>
2 <head>
3 <meta charset="UTF-8" />
4 <title>�,аголовок страницы в поиске</title>
5 </head>
6 <body>
7 <h1>�,аголовок страницы</h1>
8 <p class="intro">Текст вступительного абзаца</p>
9 </body>
10</html>

Ключова особливість HTML, теги. У кожного тега своя роль. <h1> — це заголовок першого рівня. <p>, абзац. <a>, посилання. Закривний тег із косою рискою (</h1>) показує, де елемент закінчується. Деякі теги, наприклад <meta> або <img>, самозакривні: їм пара не потрібна.

HTML-теги можуть мати класи: class="intro" у прикладі вище. Клас — це «якір» для CSS. Браузер знаходить усі елементи з таким класом і застосовує до них стилі з CSS-файлу.

Підсумок: HTML визначає, що користувач бачить на сторінці. Але як це виглядає, вирішує CSS.

CSS, одяг сайту

CSS розшифровується як Cascading Style Sheets, каскадні таблиці стилів. Якщо HTML дає сторінці структуру, то CSS надає їй колір, шрифт, відступи, розташування блоків та адаптивність під мобільні екрани.

CSS-код із правилами для класів HTML

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

У WordPress CSS живе у файлах теми (зазвичай style.css). Кожна тема зобов’язана мати цей файл, без нього WordPress не розпізнає тему. Плагіни також можуть підвантажувати свої CSS-файли через механізм wp_enqueue_style().

1.intro {
2 color: #325050;
3 background: #fff;
4 font-family: 'Libre Baskerville', serif;
5 font-size: 0.85rem;
6 line-height: 1.6;
7}

Крапка перед .intro означає: «застосуй ці стилі до ВСІХ елементів із класом intro». Це каскад: один клас, безліч елементів на різних сторінках. Змінили правило в одному місці, оновився весь сайт.

Для сучасної WordPress-розробки важливо знати не лише базовий CSS, а й адаптивне верстання через media queries. Теми без адаптивності сьогодні не виживають, Google ранжує сайти за mobile-first.

JavaScript, поведінка сторінки

JavaScript, єдиний із п’ятірки, без якого WordPress технічно може працювати. Тема здатна повноцінно функціонувати взагалі без жодного рядка JS. Але на практиці без нього не обходиться жоден сучасний сайт.

JavaScript відповідає за те, що відбувається після завантаження сторінки: випадне меню, модальне вікно, ліниве підвантаження зображень, перевірка форми до надсилання, зміна теми без перезавантаження. Усе, що реагує на дії користувача, клік, скрол, введення тексту,, зав’язане на JS.

1(function($) {
2 var navMenu = '.primary-navigation';
3 var pageContent = '.main-content';
4 var gap = parseInt($('html').css('font-size'), 10) * 2;
5
6 function setPageMin() {
7 var height = $(navMenu).height();
8 $(pageContent).css('min-height', height + gap);
9 }
10
11 $(window).on('load', function() {
12 setPageMin();
13 $(window).on('resize', function() {
14 setTimeout(setPageMin, 120);
15 });
16 });
17})(jQuery);

Цей приклад на jQuery показує типову задачу: обчислити висоту навігації та задати мінімальну висоту контентної області, щоб сторінка не «стрибала». Код спрацьовує під час завантаження та за кожної зміни розміру вікна.

Але найбільший вплив JavaScript на WordPress стався з приходом Гутенберга, блочного редактора, написаного на React. Весь інтерфейс редагування постів, усі блоки (абзац, заголовок, галерея, колонки) — це JavaScript-застосунок, який працює всередині адмінки WordPress.

Тому сьогодні розробник WordPress, який взагалі ігнорує JavaScript, сильно обмежений. Тему зверстати можна, але кастомні блоки Гутенберга без JS уже не напишеш.

SQL і MySQL, де живуть дані

Пости, сторінки, налаштування, користувачі, коментарі, мета-поля, весь контент WordPress зберігається в базі даних MySQL (або MariaDB). PHP спілкується з базою через SQL-запити, але розробнику рідко доводиться писати «голий» SQL.

WordPress надає власний шар абстракції, клас wpdb. Виклики на кшталт get_posts(), update_post_meta() і WP_Query уже містять готові SQL-запити всередині. Це захищає від типових помилок і SQL-ін’єкцій, за умови, що ви використовуєте вбудовані методи, а не пишете ручні запити до бази.

Тим не менш, розуміти SQL корисно: коли проєкт виростає до десятків тисяч постів і запити починають гальмувати, уміння прочитати EXPLAIN і знайти відсутній індекс, безцінна навичка.

Як влаштована тема WordPress

Тема WordPress — це не моноліт. Це набір PHP-файлів, кожен із яких відповідає за свій тип сторінки. index.php, головна і все за замовчуванням. single.php, окремий пост. page.php, статична сторінка. archive.php, архів рубрики. WordPress сам вибирає потрібний шаблон за ієрархією — це називається Template Hierarchy.

Усередині кожного шаблону, стандартні PHP-функції ядра WordPress. the_title() виводить заголовок. the_content(), тіло поста. wp_nav_menu(), меню. Повний список доступний у документації WordPress. HTML і PHP у темі перемішані: відкрили <?php, викликали функцію, закрили ?>, пішов HTML. Це не ідеальна архітектура за сучасними мірками, але вона працює на 40%+ сайтів інтернету.

Для створення теми потрібно знати PHP, HTML і CSS як мінімум. JavaScript, опціонально, але для інтерактивних елементів (мобільне меню, таби, акордеони) знадобиться.

Як влаштований плагін WordPress

Плагін — це PHP-файл (щонайменше один) зі спеціальним заголовком-коментарем на початку. У цьому коментарі WordPress читає назву, версію та автора, усе, що ви бачите в адмінці на сторінці плагінів.

Плагін взаємодіє з ядром через хуки. Є два типи:

  • Actions (add_action), виконують код у певний момент: під час завантаження сторінки, під час збереження поста, під час активації плагіна.
  • Filters (add_filter), перехоплюють і модифікують дані: змінюють текст, додають CSS-клас, підміняють URL.

Найпростіший плагін, буквально кілька рядків:

1<?php
2/**
3 * Plugin Name: Приветственный плагин
4 * Description: Добавляет приветствие в конец каждого поста.
5 * Version: 1.0
6 */
7
8function my_greeting($content) {
9 if (is_single()) {
10 $content .= '<p>Спасибо, что читаете наш блог!</p>';
11 }
12 return $content;
13}
14add_filter('the_content', 'my_greeting');

Побачили add_filter? Саме так плагіни WordPress розширюють функціональність, не правкою ядра (це категорично заборонено), а перехопленням даних через хуки. Тому оновлення WordPress не ламають кастомний код, за умови, що розробник використовував офіційне API, а не ліз у файли ядра.

WordPress і Node.js: заміни не буде

Чутки про те, що WordPress «переходить на Node.js», ходять із 2015 року, з моменту появи Calypso, десктопного інтерфейсу адмінки WordPress.com, написаного на Node.js і React. Потім з’явився Гутенберг, теж на React. JavaScript став помітнішим, і хтось вирішив, що PHP доживає останні дні.

Це не так. Офіційна позиція WordPress незмінна: ядро залишається на PHP. Переписувати 20-річну кодову базу на Node.js ніхто не планує — це безглуздо і зламало б зворотну сумісність із тисячами тем і плагінів.

Що реально сталося: WordPress перетворився на гібридну платформу. Бекенд, PHP і MySQL. Фронтенд адмінки, JavaScript (React). Публічна частина, HTML, CSS і трохи JS. REST API, вбудований у ядро з версії 4.7, дозволяє JavaScript-застосункам спілкуватися з WordPress без перезавантаження сторінки. Це відкрило дорогу headless-рішенням, де WordPress працює як безголовий CMS-бекенд, а фронтенд зібраний на Next.js або Gatsby.

Підсумок: учити Node.js і React для роботи з WordPress корисно, але не замість PHP, а разом із ним.

З чого почати вивчення WordPress

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

Крок 1: HTML. Без розуміння тегів, атрибутів і структури документа рухатися далі безглуздо. HTML — це алфавіт вебу. На щастя, базовий рівень опановується за тиждень.

Крок 2: CSS. Коли сторінка готова структурно, її потрібно оформити. Вивчіть блокову модель, позиціювання, flexbox, grid і media queries. Без адаптивного верстання WordPress-тему не зібрати.

Крок 3: PHP. Ось тепер найважливіше. Учіть PHP у контексті WordPress: як працюють функції ядра, що таке цикл WP_Query, як влаштована ієрархія шаблонів. Абстрактний «PHP взагалі» потрібен як база, але фокус, на тому, що реально зустрічається в темах і плагінах.

Крок 4: JavaScript. Почніть із простого: jQuery для маніпуляції DOM, обробка подій. Потім, сучасний JavaScript (ES6+), а після, React для кастомних блоків Гутенберга.

Крок 5: SQL. Не пишіть запити вручну без крайньої потреби, але вмійте прочитати та зрозуміти, що відбувається під капотом WP_Query. На великих проєктах це зекономить години налагодження.

Порядок принциповий. Якщо почати з JavaScript, ігноруючи PHP, ви зможете писати блоки Гутенберга, але не зможете зібрати тему. Якщо почати з PHP без HTML/CSS, серверний код буде, а показувати користувачеві нічого. Рухайтеся за маршрутом, і через кілька місяців зможете зібрати повноцінну тему з нуля.

⁉️🤔 Часті запитання

Чи потрібно знати всі п’ять мов, щоб зробити тему WordPress?

Щоб зібрати просту тему, достатньо PHP, HTML і CSS. JavaScript потрібен для інтерактивних елементів, мобільне меню, слайдер, ліниве завантаження. SQL на старті не обов’язковий: готові функції ядра приховують запити до бази. Але для складних проєктів та оптимізації без JS і SQL уже не обійтися.

Чи можна стати розробником WordPress, знаючи тільки JavaScript?

Ні. Ядро, теми та плагіни працюють на PHP. JavaScript знадобиться для блоків Гутенберга та інтерактивності на фронтенді, але без PHP ви не зможете створити навіть найпростіший плагін. JavaScript і PHP у WordPress, партнери, а не конкуренти.

Чи правда, що скоро WordPress повністю перейде на JavaScript?

Ні. Офіційна позиція команди WordPress: ядро залишається на PHP. JavaScript розширює можливості (Гутенберг, REST API), але не замінює PHP на серверній стороні. Побоювання виникли через зростання популярності React в адмінці, але це еволюція, а не заміна платформи.

Скільки часу займе вивчення WordPress-розробки з нуля?

За послідовного підходу (HTML → CSS → PHP → JS → SQL) і щоденної практики, від 4 до 8 місяців до рівня, коли ви впевнено збираєте кастомну тему та простий плагін. Перші два тижні, тільки HTML і CSS. Далі PHP займе основний час, тому що на ньому тримається все.

Чи обов’язково вчити jQuery чи можна одразу React?

jQuery досі використовується в більшості тем WordPress і вбудований у ядро, його знання знадобиться для підтримки legacy-проєктів. Але для нових розробок (особливо блоків Гутенберга) учіть React. Починайте з сучасного JavaScript (ES6+), потім React — це перспективніше.

Чи варто вчити WordPress у 2026 році

Коротка відповідь: так. WordPress працює на 43%+ усіх сайтів інтернету, і цей показник стабільно тримається в діапазоні 43-44% останні кілька років. Попит на розробників, які розуміють не лише «натиснути кнопку встановити тему», а й написати кастомний функціонал на PHP, стабільно високий.

Головне, правильний порядок. HTML і CSS дають фундамент за пару тижнів. PHP відкриває доступ до ядра, хуків і плагінів. JavaScript додає інтерактивність і перспективу зростання (Гутенберг, headless, React). SQL замикає картину на рівні бази даних.

Починайте з першого кроку, і через пів року ви будете дивитися на WordPress не як на «конструктор сайтів», а як на потужну платформу, яку ви контролюєте на кожному рівні, від HTML-тега до SQL-індексу.