1. Вимоги до плагінів і тем

WordPress має суворі вимоги щодо безпеки, кодування, ліцензування і функціональності. Основні принципи:

• Увесь код повинен мати ліцензію GPL або сумісну
• Без шкідливих, закодованих або прихованих фрагментів
• Плагін/тема має бути повністю працездатною після встановлення
• Не дозволяється вставляти рекламу без відома користувача

2. Структура плагіна

my-plugin/
├── readme.txt
├── my-plugin.php
├── assets/
│   └── banner-772x250.png
└── includes/
    └── core.php

Файл my-plugin.php має починатися з заголовка:

/**
 * Plugin Name: My Plugin
 * Description: Короткий опис.
 * Version: 1.0.0
 * Author: Ваше ім’я
 * License: GPLv2 or later
 */

3. readme.txt — ключ до видимості в каталозі

Файл readme.txt має специфічну структуру (використовуйте шаблон):

• === Назва плагіна ===
• Tags, Requires at least, Tested up to, Stable tag
• Опис, Встановлення, FAQ, Screenshots, Changelog

4. Стандарти коду

• PHP-код має відповідати WordPress Coding Standards
• JS/CSS — чисті, без лішнього minified-коду (краще збирати окремо)
• Перевірка за допомогою PHP_CodeSniffer або WPCS

5. Локалізація (переклади)

Усі тексти мають бути обгорнуті в __() або _e(). Наприклад:

_e('Показати ще', 'my-plugin');

Це дозволяє переводити плагін через .po/.mo файли або translate.wordpress.org.

6. Завантаження до каталогу WordPress.org

1. Увійдіть у WordPress.org/plugins
2. Натисніть «Add New Plugin»
3. Заповніть коротку форму, прикріпіть ZIP-архів
4. Чекайте схвалення модератора (до 7 днів)
5. Після схвалення ви отримаєте доступ до репозиторію SVN

7. Публікація оновлень

Після схвалення всі зміни завантажуються через SVN:

svn co https://plugins.svn.wordpress.org/my-plugin/
svn add trunk/*
svn commit -m "Initial commit"

Для тем — процес схожий, але публікація відбувається через upload + review командою Theme Review Team.

Висновок

Публікація у WordPress.org — це не тільки технічний процес, а й відповідальність перед спільнотою. Грамотно написаний, безпечний і документований продукт — запорука довгострокового успіху. Дотримання стандартів та прозора структура — ваш квиток до репозиторію WordPress.

1. Кешування — перший бар’єр для навантаження

Типи кешу:

• Page Cache: зберігає повну HTML-сторінку.
• Object Cache: кешує запити до БД (оптимально з Redis/Memcached).
• Opcode Cache: зберігає скомпільований PHP-код (через OPcache).

Рекомендовані плагіни:

• LiteSpeed Cache (найшвидший + оптимізація зображень)
• WP Rocket (платний, простий в налаштуванні)
• W3 Total Cache (гнучкий, але складний)

2. CDN — швидке завантаження з будь-якої точки світу

CDN (Content Delivery Network) — це мережа серверів, яка роздає копії вашого сайту користувачам ближче до їх локації.

Популярні CDN-сервіси:

• Cloudflare — безкоштовний тариф + кешування HTML, JS, CSS
• Bunny.net — дешевий і надшвидкий варіант
• Amazon CloudFront — для великих інфраструктур

Обов’язково увімкніть Cache Everything у Cloudflare для максимальної ефективності.

3. Оптимізація бази даних

• Видалення автозбережень, ревізій, спаму
• Індексація полів у великих таблицях (wp_postmeta, wp_options)
• Періодичне очищення транзієнтів і тимчасових таблиць

Інструменти:

• WP-Optimize — очищення і оптимізація таблиць
• Query Monitor — виявлення повільних SQL-запитів

4. Зменшення кількості запитів до БД

• Використовуйте transients для кешування важких запитів
• Вимикайте непотрібні плагіни, які працюють у кожному запиті
• Уникайте вкладених WP_Query без cache_results

5. Завантаження ресурсів: lazy load і мініфікація

• Увімкніть lazy load для зображень (працює з WP 5.5+ автоматично)
• Мініфікуйте CSS, JS через Autoptimize або кеш-плагіни
• Використовуйте шрифти локально або з CDN

6. Використання LiteSpeed або Nginx

Apache — не найкращий вибір для high-load. Якщо можливо, переходьте на:

• LiteSpeed: сумісний з Apache, але в рази швидший
• Nginx: потребує ручного налаштування, але легкий і стабільний

7. Моніторинг продуктивності

• New Relic — повний профайлінг бекенду
• UptimeRobot — контроль доступності
• Cloudflare Analytics — бачення кешування і трафіку

Висновок

Готовність WordPress до високих навантажень — це не одна дія, а системний підхід. Кешування, CDN, оптимізація запитів і правильний хостинг — усе це працює разом. Чим раніше ви це впровадите, тим стабільнішим буде сайт під час пікових навантажень.

1. Встановлення WP-CLI

Виконайте в терміналі:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
php wp-cli.phar --info
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Після цього команда wp буде доступна глобально.

2. Основні команди

• wp core update — оновлення ядра WordPress
• wp plugin install contact-form-7 --activate — встановити та активувати плагін
• wp theme install astra --activate — встановити тему
• wp user create user email@example.com --role=editor — створити користувача
• wp post create --post_type=page --post_title="Контакти" --post_status=publish — створити сторінку

3. Резервне копіювання та база даних

wp db export backup.sql
wp db import backup.sql
wp db search 'старий текст'
wp db query "SELECT * FROM wp_users"

Це дає змогу швидко створити бекап або мігрувати сайт локально.

4. Очищення кешу, оптимізація

• wp cache flush — очищення кешу
• wp transient delete --all — видалення транзієнтів
• wp rewrite flush — перегенерація правил URL

5. Масове оновлення

wp plugin update --all
wp theme update --all

Зручно для автоматизованих скриптів у продакшн-середовищі.

6. Використання у CI/CD

WP-CLI можна інтегрувати в GitHub Actions або GitLab CI:

steps:
  - name: Install WordPress
    run: wp core install --url=example.com --title="My Site" --admin_user=admin --admin_password=123456 --admin_email=you@example.com

7. Створення кастомних команд

Приклад простої команди в плагіні:

if (defined('WP_CLI') && WP_CLI) {
  WP_CLI::add_command('hello', function () {
    WP_CLI::success('Привіт, CLI!');
  });
}

Після цього в терміналі можна виконати: wp hello

8. Плагіни WP-CLI

• wp cli doctor — перевірка стану сайту
• wp search-replace — пошук і заміна в БД
• wp cron event run — ручне виконання кронів

Висновок

WP-CLI — незамінний інструмент для WordPress-розробника. Він дозволяє автоматизувати більшість завдань, економить час і підходить як для локальної розробки, так і для CI/CD на продакшн-серверах. Якщо ви ще не користуєтесь WP-CLI — саме час почати.

1. Де зберігати код?

Рекомендовано створити плагін або додати код до functions.php теми. Ми покажемо приклад у функціях теми.

2. Реєстрація кастомного віджета

Додайте наступний код у functions.php:

class My_Custom_Widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      'my_custom_widget',
      'Мій Віджет',
      array('description' => 'Виводить кастомні дані')
    );
  }

  function widget($args, $instance) {
    echo $args['before_widget'];
    echo $args['before_title'] . 'Динамічні дані' . $args['after_title'];

    // Ваш код — приклад виводу останніх постів
    $query = new WP_Query(array('posts_per_page' => 3));
    echo '<ul>';
    while ($query->have_posts()) : $query->the_post();
      echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    endwhile;
    echo '</ul>';
    wp_reset_postdata();

    echo $args['after_widget'];
  }

  function form($instance) {
    echo '<p>Налаштувань поки немає.</p>';
  }

  function update($new_instance, $old_instance) {
    return $old_instance;
  }
}

function register_my_custom_widget() {
  register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

3. Де з’явиться віджет?

Після додавання коду перейдіть до Зовнішній вигляд → Віджети або Customizer, і ви побачите «Мій Віджет» серед доступних блоків.

4. Додавання налаштувань у віджет

Ось приклад поля для введення заголовка віджета:

function form($instance) {
  $title = $instance['title'] ?? '';
  echo '<p>
    <label>Заголовок:</label>
    <input type="text" name="' . $this->get_field_name('title') . '" value="' . esc_attr($title) . '" />
  </p>';
}

function update($new_instance, $old_instance) {
  $instance = [];
  $instance['title'] = sanitize_text_field($new_instance['title']);
  return $instance;
}

function widget($args, $instance) {
  $title = $instance['title'] ?? 'Мій віджет';
  echo $args['before_widget'];
  echo $args['before_title'] . esc_html($title) . $args['after_title'];
  // ...
}

5. Що ще можна виводити?

• Динамічну інформацію з API (наприклад, погоду або курси валют)
• Дані з бази WordPress: відгуки, користувачі, товари
• Форми, CTA-кнопки, шорткоди

6. Сумісність із Gutenberg

Віджети працюють у класичному режимі. Для повної підтримки блок-редактора створюйте Gutenberg блоки, але класичні віджети досі актуальні для багатьох тем.

Висновок

Кастомні віджети — це потужний інструмент для гнучкого управління контентом у WordPress. Створити їх не складно, а можливості — практично безмежні: від простого списку постів до інтеграції зі сторонніми сервісами.

1. WPML — потужний, але комерційний

WPML (WordPress Multilingual Plugin) — один з найпопулярніших плагінів. Він дозволяє перекладати пости, сторінки, таксономії, меню, навіть текст тем і плагінів.

Переваги WPML:

• Підтримка RTL, SEO, hreflang, Yoast SEO
• Зручна адмінка для перекладу
• Інтеграція з WooCommerce
• Глобальний контроль усіх мов

Недоліки:

• Платний (від $39/рік)
• Часом сповільнює сайт
• Додаткове навантаження на БД

2. Polylang — безкоштовний і гнучкий

Polylang — популярна безкоштовна альтернатива, яку також підтримує WPML Group.

Переваги Polylang:

• Безкоштовна версія підходить для більшості сайтів
• Легка, мінімалістична
• SEO-дружня, з підтримкою hreflang
• Проста інтеграція в темах (через pll_current_language(), pll_the_languages())

Недоліки:

• WooCommerce підтримується тільки в Pro-версії
• Менше функцій перекладу інтерфейсу

3. Власна реалізація мультимовності

Для простих або кастомних сайтів можна реалізувати мультимовність без плагінів. Наприклад, створити окремі сторінки/пости з мовним префіксом або використовувати кастомні поля ACF.

Приклади реалізації:

• Окремий пост для кожної мови з посиланням на оригінал
• Фільтрація контенту за мовним полем (наприклад, lang="uk")
• Шаблони, що перевіряють поточну мову через $_GET['lang'] або cookie

Недоліки:

• Потрібно реалізовувати hreflang, редиректи, переклад URL вручну
• Більше коду, більше відповідальності

4. Який варіант обрати?

Висновок

Для більшості сайтів достатньо Polylang або WPML. Якщо ви створюєте кастомну систему або хочете повний контроль — обирайте власну реалізацію. Важливо зберігати SEO-дружність (hreflang, sitemap, канонічні URL) незалежно від способу.

1. Що потрібно

• OpenAI API ключ — можна отримати на platform.openai.com
• WordPress ≥ 5.6
• Можливість редагувати functions.php або створити власний плагін

2. Простий PHP-запит до OpenAI

function generate_openai_content($prompt) {
  $api_key = 'your-openai-api-key';
  $data = array(
    'model' => 'gpt-4',
    'messages' => array(
      array('role' => 'user', 'content' => $prompt)
    )
  );
  $response = wp_remote_post('https://api.openai.com/v1/chat/completions', array(
    'headers' => array(
      'Content-Type' => 'application/json',
      'Authorization' => 'Bearer ' . $api_key
    ),
    'body' => json_encode($data),
    'timeout' => 20
  ));
  if (is_wp_error($response)) return '';
  $body = json_decode(wp_remote_retrieve_body($response), true);
  return $body['choices'][0]['message']['content'] ?? '';
}

3. Додавання кнопки до редактора записів

Можна додати кнопку або поле до редактора постів, наприклад через add_meta_box. При натисканні буде створюватися текст на основі заголовка:

function add_ai_generator_meta_box() {
  add_meta_box('ai_content_generator', 'Згенерувати текст через AI', 'ai_generator_callback', 'post');
}
add_action('add_meta_boxes', 'add_ai_generator_meta_box');

function ai_generator_callback($post) {
  echo '<button id="ai-generate">Згенерувати опис</button>';
  echo '<div id="ai-output"></div>';
  // JS Ajax код додається нижче
}

4. JS для Ajax-запиту

Додайте скрипт у адмінку, який викликає PHP-функцію через AJAX і вставляє текст у редактор:

jQuery(document).ready(function($) {
  $('#ai-generate').click(function(e) {
    e.preventDefault();
    $.post(ajaxurl, {
      action: 'generate_ai_text',
      prompt: 'Напиши короткий SEO-опис для теми: ' + $('#title').val()
    }, function(response) {
      $('#ai-output').html(response);
    });
  });
});

5. Обробник Ajax

add_action('wp_ajax_generate_ai_text', function() {
  $prompt = sanitize_text_field($_POST['prompt']);
  echo wp_kses_post(generate_openai_content($prompt));
  wp_die();
});

6. Ідеї використання

• Автоматичне заповнення мета-описів і заголовків
• Генерація контенту для WooCommerce товарів
• Швидке створення чернеток статей
• Генерація відповідей на коментарі

7. Обмеження

• Обмеження OpenAI по запитах (quota, rate limit)
• Можлива потреба в модерації контенту
• Питання відповідальності за AI-контент

Висновок

З OpenAI ви можете зробити WordPress-сайт частково або повністю автономним у створенні текстового контенту. Правильне використання — це не заміна людини, а інструмент, що пришвидшує і спрощує роботу. Інтеграція займає лічені години, а вигода — величезна.

1. Що потрібно для початку

• npm або yarn (менеджер пакетів)
• PHP-сервер з WordPress
• Тема WordPress або Starter Theme (наприклад, Underscores або власна)

2. Ініціалізація проєкту

У корені вашої теми виконайте:

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Це створить файл tailwind.config.js, де ви зможете налаштувати кольори, брейкпоінти, шрифти тощо.

3. Створіть файл стилів

У папці assets/css створіть файл main.css з таким вмістом:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Налаштування PostCSS

Додайте файл postcss.config.js у корінь теми:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

5. Додайте шляхи до шаблонів у Tailwind config

module.exports = {
  content: [
    './**/*.php',
    './assets/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. Збірка CSS

У файлі package.json додайте скрипт:

"scripts": {
  "build": "npx tailwindcss -i ./assets/css/main.css -o ./style.css --minify",
  "watch": "npx tailwindcss -i ./assets/css/main.css -o ./style.css --watch"
}

Потім виконайте:

npm run build

7. Підключення до WordPress

У файлі functions.php додайте:

function theme_enqueue_styles() {
  wp_enqueue_style('tailwind', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

8. Готово! Тепер ви можете використовувати класи Tailwind

<div class="bg-blue-600 text-white p-4 rounded-lg">
  Привіт з Tailwind у WordPress!
</div>

9. Поради

• Використовуйте npm run watch під час розробки для live-збірки CSS.
• Можна інтегрувати Vite або Webpack для більш просунутої роботи з JS.
• Для продакшену використовуйте purge через параметр content[], щоб прибрати зайві стилі.

Висновок

Tailwind CSS чудово працює з WordPress і дозволяє значно прискорити верстку. Правильна інтеграція через PostCSS або інші білдери дає вам потужний інструмент для створення кастомних, швидких і стильних тем.

1. Чому WordPress як бекенд?

• Зручність: контент-менеджери можуть працювати у знайомому інтерфейсі WordPress.
• REST API: відкритий інтерфейс для отримання та надсилання даних у форматі JSON.
• Плагіни та розширення: готова екосистема для розширення логіки, автентифікації, SEO.
• Швидкий запуск MVP: не потрібно створювати окрему панель керування контентом.

2. Як працює REST API у WordPress

Базовий endpoint для отримання записів:

GET https://example.com/wp-json/wp/v2/posts

Ви отримаєте список публікацій у JSON-форматі, який можна парсити в мобільному застосунку.

3. Отримання постів у Flutter

final response = await http.get(Uri.parse('https://example.com/wp-json/wp/v2/posts'));
if (response.statusCode == 200) {
  final List posts = jsonDecode(response.body);
  print(posts[0]['title']['rendered']);
}

4. Отримання постів у React Native

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(data => console.log(data[0].title.rendered));

5. Що ще доступно через API

• /wp/v2/pages — сторінки
• /wp/v2/categories — категорії
• /wp/v2/media — зображення
• /wp/v2/users — автори

6. Аутентифікація

Щоб додавати/редагувати контент, потрібна автентифікація. Варіанти:

• JWT Auth — популярний спосіб через токен.
• Application Passwords — для простіших інтеграцій (WordPress ≥ 5.6).
• OAuth 2.0 — складніша, але масштабована система.

7. Оптимізація бекенду

• Використовуйте плагіни WP REST Cache або WPGraphQL для швидшої роботи API.
• Створюйте власні ендпоінти через register_rest_route() для специфічних запитів.
• Обмежуйте доступ до непотрібних даних через rest_prepare_* фільтри.

8. Структура роботи: що де

Висновок

WordPress як бекенд — чудове рішення для мобільних застосунків, де потрібен швидкий старт, готова адмінка та гнучкий API. Завдяки REST API ви можете легко побудувати кросплатформену програму, використовуючи вже перевірену систему керування контентом.

1. Постійні посилання (Permalinks)

Перейдіть у Налаштування → Постійні посилання та встановіть структуру:

/%category%/%postname%/

Це створює зрозумілі URL з ключовими словами. Якщо не потрібні категорії — залиште лише /%postname%/.

2. SEO-шаблони сторінок

Структуруйте шаблони за типами:

• single.php — для постів
• page.php — для сторінок
• archive.php або archive-{post_type}.php
• taxonomy.php — для категорій/міток/таксономій

Усі шаблони повинні мати:

• один заголовок <h1>
• структуровану HTML-розмітку
• відсутність дублювання заголовків

3. Мета-теги: title, description, canonical

Якщо використовуєте ACF або кастомні поля — додавайте мета-теги вручну:

<title><?php the_title(); ?> | <?php bloginfo('name'); ?></title>
<meta name="description" content="<?php echo get_field('seo_description'); ?>">
<link rel="canonical" href="<?php echo get_permalink(); ?>">

Альтернатива — використовувати плагіни: Yoast SEO, Rank Math, SEOPress.

4. Schema.org (структурована розмітка)

Додавайте JSON-LD розмітку в <head>:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "<?php the_title(); ?>",
  "author": {
    "@type": "Person",
    "name": "Ваше ім’я"
  },
  "datePublished": "<?php the_time('c'); ?>",
  "mainEntityOfPage": "<?php the_permalink(); ?>"
}
</script>

5. hreflang для мультимовності

Для сайтів з кількома мовами обов’язково додавайте hreflang у <head>:

<link rel="alternate" hreflang="uk" href="https://example.com/uk/post-slug/">
<link rel="alternate" hreflang="en" href="https://example.com/en/post-slug/">

Це можна автоматизувати у Polylang або WPML.

6. XML Sitemap

XML-карта сайту допомагає Google швидше індексувати сторінки. Автоматично генерується за допомогою:

• Yoast SEO
• Rank Math
• Google XML Sitemaps (плагін)

7. Уникнення дублювання контенту

• Не публікуйте контент у кількох таксономіях.
• Додавайте canonical-URL для кожної сторінки.
• Вимикайте індексацію сторінок пагінації або архівів без цінності.

Висновок

SEO-структура починається з правильного шаблону, URL та мета-даних. Як розробник, ви маєте прямий вплив на те, наскільки легко пошуковим системам читати ваш сайт. Розробляйте з урахуванням SEO з першого дня — і сайт матиме сильний старт у пошукових системах.

1. Реєстрація кастомного типу запису

Додайте наступний код у файл functions.php вашої теми або у плагін:

function create_custom_post_type() {
  register_post_type('portfolio', array(
    'labels' => array(
      'name' => 'Портфоліо',
      'singular_name' => 'Проєкт',
    ),
    'public' => true,
    'has_archive' => true,
    'rewrite' => array('slug' => 'portfolio'),
    'supports' => array('title', 'editor', 'thumbnail'),
    'show_in_rest' => true, // для Gutenberg і REST API
  ));
}
add_action('init', 'create_custom_post_type');

Це створить нову секцію «Портфоліо» в адмін-панелі з підтримкою заголовку, контенту і зображення.

2. Реєстрація кастомної таксономії

Таксономія — це категоризація, подібна до «Категорій» або «Міток». Щоб створити власну, наприклад «Тип проєкту», додайте:

function create_custom_taxonomy() {
  register_taxonomy('project_type', 'portfolio', array(
    'labels' => array(
      'name' => 'Типи проєктів',
      'singular_name' => 'Тип проєкту',
    ),
    'public' => true,
    'hierarchical' => true, // true = як категорії, false = як мітки
    'rewrite' => array('slug' => 'project-type'),
    'show_in_rest' => true,
  ));
}
add_action('init', 'create_custom_taxonomy');

Тепер у розділі «Портфоліо» з’явиться новий фільтр «Тип проєкту».

3. Виведення на сайті

Створіть шаблон archive-portfolio.php або використовуйте WP_Query у будь-якому місці теми:

<?php
$args = array('post_type' => 'portfolio');
$query = new WP_Query($args);
if ($query->have_posts()) :
  while ($query->have_posts()) : $query->the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php endwhile;
endif;
wp_reset_postdata();
?>

4. Поради та практика

• Додайте menu_icon у register_post_type(), щоб задати свою іконку.
• Для кастомних таксономій зручно створити шаблон taxonomy-project_type.php.
• Використовуйте плагіни CPT UI або Meta Box для візуального керування.

Висновок

Кастомні типи записів і таксономії — обов’язковий інструмент для розробника, який хоче створювати структуровані, масштабовані сайти на WordPress. З їх допомогою ви можете реалізувати будь-яку контентну модель, не виходячи за межі стандартної архітектури WP.