Серия «wordpress»

Дисклеймер. На pikabu нет редактора кода, поэтому код картинками, но в конце я дам ссылку на github, откуда можно будет скопировать блоки кода.

Когда мы создаем контент WordPress, чаще всего используем редактор Gutenberg. Он появился в версии WordPress 5.0 (в декабре 2018 года) и заменил старый добрый TinyMCE. TinyMCE был текстовым редактором из эпохи Web 1.0: над полем <textarea> находились простые кнопки вроде «жирный», «курсив» и «ссылка». Весь текст хранился одной сплошной лентой HTML-кода, и переместить блок или вставить что-то посередине было крайне (sic!) неудобно. Кроме того, TinyMCE не поддерживал адаптивную 12-колоночную разметку, которая стала стандартом де-факто во времена Web 2.0, поэтому сложные макеты приходилось строить вручную с помощью HTML и CSS.

Gutenberg — редактор нового поколения

Gutenberg решил эти проблемы. Теперь каждая часть страницы существует как блок — заголовок, параграф, цитата, изображение, таблица или фрагмент кода живут отдельно. Это делает редактирование проще, а страницы — гибкими и адаптивными.

Контент должен одинаково хорошо выглядеть на любых устройствах — от телефона до широкоформатного монитора. Когда сайт не адаптируется к экрану, текст «плывёт», изображения обрезаются, а таблицы вылезают за границы блока. Решается это с помощью адаптивной разметки, которая автоматически перестраивается под ширину экрана.

В основе такой разметки лежит 12-колоночная сетка. Она стала стандартом благодаря фреймворкам вроде Bootstrap и Foundation, и Gutenberg использует тот же принцип: ширина контейнера делится на 12 равных частей (по 8.33 % каждая), из которых можно собрать практически любую компоновку:

1 колонка → [████████████] 100%
2 колонки → [██████][██████] 6/6
3 колонки → [████][████][████] 4/4/4 4
4 колонки → [███][███][███][███] 3/3/3/3

На мобильных устройствах колонки выстраиваются вертикально — контент остаётся читаемым при любой ширине экрана.

Внутри Gutenberg эта идея реализована через блок “Колонки” (Columns), который автоматически подстраивает расположение элементов под ширину окна.
На уровне HTML это контейнеры с классами wp-block-columns и wp-block-column, а за выравнивание отвечает Flexbox:

По сути, Gutenberg автоматически создаёт гибкий контейнер, который можно делить на нужное количество колонок. При уменьшении экрана колонки становятся вертикальными — и это достигается не JavaScript-скриптами, а чисто с помощью CSS.

Одна и та же страница выглядит корректно и на телефоне, и на мониторе — без единой строчки JavaScript.

Но из всех возможностей редактора сейчас нас интересует всего один элемент — блок кода. Он используется, когда нужно показать пример программы, скрипта, конфигурации или команды терминала. Технически это простой HTML-контейнер: <pre> ... </pre>

Gutenberg и TinyMCE отображают его одинаково — как текст, набранный моноширинным шрифтом (чаще всего Consolas, Courier New или Monaco). Без подсветки, без нумерации строк, без выделения синтаксиса. Это решение логично — большинству пользователей подсветка не нужна, а включи её для всех, и редактор стал бы сложнее и тяжелее. Но если вы публикуете примеры кода, инструкции или статьи для разработчиков, то отсутствие подсветки делает материал трудно читаемым. В этом случае на помощь приходит библиотека Prism.js, которая решает проблему просто и изящно.

Мне, почему-то кажется, что программисты Pikabu работают на Gutenberg. А потому, что в Gutenbergе нет подсветки синтаксиса языков программирования. Сейчас я покажу, как решить этот вопрос без установки внешних плагинов. Нам понадобятся: Prism.js, Prism.css 👇👇👇👇

Prism.js — библиотека для подсветки кода

Prism.js — лёгкая и быстрая библиотека, созданная специально для подсветки синтаксиса на веб-страницах. Она не перегружает редактор и делает статьи с кодом читаемыми и профессионально оформленными. Таже она не требует серверных модулей и работает полностью в браузере: скрипт на JavaScript анализирует содержимое тегов <pre><code>..., а таблица стилей prism.css раскрашивает ключевые слова, строки, комментарии и другие элементы кода.

По сути, Prism делает для веб-страниц то же, что IDE делает для программистов — делает код понятным и визуально структурированным.
Поддерживаются десятки языков программирования — от HTML, CSS и JavaScript до Python, PHP и Go — и множество плагинов: нумерация строк, подсветка отдельных строк, отображение языка, копирование в буфер, тёмные и светлые темы.

Пример разметки:

После подключения Prism.js и Prism.css этот код автоматически подсвечивается в браузере, без дополнительного вмешательства.

Библиотека особенно хорошо сочетается с Gutenberg, потому что не требует изменения самого редактора — она работает уже на этапе отображения статьи, обрабатывая всё, что находится между тегами <pre> и <code>.

Что такое тема в WordPress и почему работать нужно через дочернюю.

В WordPress тема — это набор файлов, которые определяют внешний вид сайта: шаблоны страниц, стили оформления, типографику, шапку и подвал, поведение меню и многое другое. Проще говоря, именно тема отвечает за то, как ваш сайт выглядит и реагирует на действия пользователя. Тему можно установить прямо из админки — “Внешний вид → Темы → Добавить” — или загрузить архив вручную в папку /wp-content/themes/. После активации она начинает управлять всей визуальной частью сайта.

Однако вносить правки напрямую в файлы темы — плохая идея. Как только разработчики выпустят обновление родительской темы, WordPress заменит старые файлы новыми, и все ваши изменения будут утеряны. Вся. написанное вами в functions.php или CSS-правило в style.css исчезнут после обновления.

Чтобы избежать этого, в WordPress предусмотрен безопасный механизм — дочерние темы. Дочерняя тема наследует всё содержимое родительской, но хранит собственные правки отдельно. Таким образом, вы можете обновлять родительскую тему сколько угодно, а весь ваш код, настройки и стили останутся нетронутыми. Создать дочернюю тему просто. В каталоге /wp-content/themes/ создайте папку, например mytheme-child, и добавьте в неё файл style.css с базовым описанием. Важно: параметр Template должен точно совпадать с названием папки родительской темы.

1. Theme Name

Это отображаемое имя темы.
Оно появится в панели администратора WordPress в разделе Внешний вид → Темы.
Можно написать что угодно — главное, чтобы название было понятным и уникальным.
Пример: Theme Name: Neve Child

2. Template

Это самое важное поле во всём блоке.
Оно говорит WordPress, от какой родительской темы наследуется данная дочерняя тема.
Значение должно в точности совпадать с именем папки родительской темы (а не с её названием в админке).
Например: если родительская тема находится по пути `/wp-content/themes/mytheme/`
то в поле должно стоять:
Template: mytheme

Если ошибиться — WordPress не распознает родителя, и дочерняя тема просто не активируется.

3. Version

Это внутренний номер версии вашей темы — для порядка и контроля изменений.
WordPress не использует это поле функционально, но оно помогает вести версионирование и отличать ваши обновления.

• Обязательные поля: Theme Name, Template

• Необязательное, но полезное: Version

• Дополнительно можно добавить Description, Author, Author URI, Tags, License и т. д.

Далее создайте functions.php и подключите стили родительской темы, а затем — свои собственные.

После этого активируйте дочернюю тему в разделе “Внешний вид → Темы” — и с этого момента работайте только с ней, ваши изменения будут защищены: даже если родительская тема обновится до новой версии, код в дочерней теме не исчезнет и продолжит работать без изменений.

Как подключить Prism.js к WordPress

По сути, Prism делает для веб-страниц то же самое, что делают IDE для программистов — делает код понятным и визуально структурированным. Поддерживаются десятки языков программирования (от HTML, CSS и JavaScript до Python, PHP и Go) и множество плагинов: нумерация строк, подсветка конкретных строк, отображение языка, копирование в буфер, тёмная и светлая темы.

Все действия выполняются в❗ дочерней теме❗, чтобы при обновлении родительской вы не потеряли свой код.

Подключить Prism.js к WordPress можно в несколько шагов — быстро и без плагинов.

Шаг 1. Скачиваем сборку

Сайт: https://prismjs.com/download.html

Настройка сборки

Раздел Download состоит из нескольких блоков.

- Compression level. Выберите параметр Minified — это минимизированная версия библиотеки, она весит меньше и загружается быстрее.
- Core. Этот блок включён по умолчанию и обязателен — он содержит основное ядро библиотеки Prism.
- Languages. Выберите языки, для которых хотите включить подсветку синтаксиса.
Рекомендуемый набор:

• HTML (Markup)

• CSS

• JavaScript

• PHP

• Python

• JSON

При необходимости добавьте другие языки — например, Bash, SQL, C-like, Markdown, YAML, Go и т.д.

Plugins.
Вы можете добавить дополнительные функции.
Наиболее полезные из них:

• ✅ Line Numbers — нумерация строк

• ✅ Toolbar — панель инструментов

• ✅ Copy to Clipboard Button — кнопка для быстрого копирования кода

• (опционально) Show Language — отображение языка над блоком

• (опционально) Highlight Lines — подсветка отдельных строк

Скачивание файлов

После того как вы выбрали нужные компоненты, прокрутите страницу вниз и нажмите две кнопки:

• DOWNLOAD JS — чтобы скачать файл prism.js

• DOWNLOAD CSS — чтобы скачать файл prism.css

Оба файла необходимо поместить в папку вашей дочерней темы, например:
/wp-content/<themes>/<my-child-theme>/prism.js
/wp-content/<themes>/<my-child-theme>/prism.css

Подключение файлов в WordPress

Когда файлы prism.js и prism.css размещены в папке дочерней темы, их нужно подключить.
Для этого откройте файл functions.php вашей темы и добавьте следующий код:

Добавляем автоматическую нумерацию строк

Чтобы не добавлять класс вручную, используем фильтр WordPress, который добавит его ко всем блокам кода:

Экранируем HTML-символы

Если в коде встречаются символы < или >, браузер может попытаться интерпретировать их как HTML-теги. Чтобы этого избежать, добавим фильтр, который заменяет эти символы на безопасные HTML-сущности при сохранении поста:

5. Добавляем стили оформления

Добавьте в style.css дочерней темы:

В первой части я показал, как настроить поддомены, dns записи и ssl.

Сегодня мы настроим конфигурацию wordpress для мультисайтов

Прежде, чем мы продолжим обязательно сделайте:

1. Сделайте резервную копию файлов wp-config.php и .htaccess

2. Сделайте резервную копию базы данных

3. Проверьте резервную копию базы данных!

Сначала нам нужно "сказать" WordPress, что мы вообще собираемся активировать Multisite. По умолчанию эта функция скрыта.

1. Подключитесь к вашему сайту по FTP или через файловый менеджер на хостинге.

2. Откройте файл wp-config.php в корневой папке вашего сайта.

3. Чтобы разблокировать скрытую функцию мульти сайта найдите строку, которая выглядит так:
   /* That's all, stop editing! Happy publishing. */
   перед ней добавьте строку
   define('WP_ALLOW_MULTISITE', true);

4. Сохраните файл и загрузите его обратно на сервер.

5. В административной панели появится новый пункт Настройки -> Установка сети

7. Выберите его. Перед вами откроется окно с двумя блоками кода, которые следует скопировать и вставить с соответствующие файлы wp-config.php и .htaccess

8. Сохраните оба файла. После этого WordPress "выкинет" вас из админки. Это нормально! Это означает, что система переключилась в новый режим.

9. Войдите в систему заново. В меню появятся новые пункты:

Чтобы добавить новый сайт выберите пункт меню Добавить -> Сайт

Заполните префикс, язык, название сайта и электропочту администратора

Аналогично для остальных языков.

Если что-то пошло не так.

Когда на сайте "белый экран смерти" или что-то работает не так, режим отладки — ваш лучший друг.

Включить режим отладки:
WP_DEBUG: Главный "рубильник". Включает (true) или выключает (false) режим отладки.

WP_DEBUG_LOG: Если true, все ошибки будут записываться в файл /wp-content/debug.log. Это лучший способ анализировать проблемы на рабочем сайте, не показывая ошибки посетителям.

WP_DEBUG_DISPLAY: Если true, ошибки будут выводиться прямо на экран. Используйте только на локальном или тестовом сайте!

Рекомендуемая конфигурация для разработки:
Эта комбинация будет записывать все ошибки в файл, но не будет показывать их пользователям:

// Включаем режим отладки
define( 'WP_DEBUG', true );
// Включаем запись ошибок в лог-файл
/wp-content/debug.log define( 'WP_DEBUG_LOG', true );
// Отключаем показ ошибок на экране
define( 'WP_DEBUG_DISPLAY', false ); @ini_set( 'display_errors', 0 );

Для рабочего сайта убедитесь, что WP_DEBUG установлен в false.

define( 'WP_DEBUG', false );

Как повысить безопасность сайта

wp-config.php позволяет отключить несколько потенциально небезопасных функций.

Как запретить редактирование файлов тем и плагинов из админки:
Это не позволит администратору (или злоумышленнику, получившему его пароль) редактировать PHP-файлы напрямую из админ-панели.

define( 'DISALLOW_FILE_EDIT', true );

Как принудительно использовать SSL для входа и админ-панели:
Эта настройка гарантирует, что логин и пароль всегда передаются по зашифрованному каналу.

define( 'FORCE_SSL_ADMIN', true );

Как управлять производительностью и ресурсами

Как увеличить лимит памяти для PHP:
Иногда сложные плагины или темы требуют больше оперативной памяти, чем выделено по умолчанию, что приводит к ошибке "Allowed memory size... exhausted".

// Устанавливаем лимит в 128 мегабайт
define( 'WP_MEMORY_LIMIT', '128M' );
// Для админ-панели можно выделить еще больше
define( 'WP_MAX_MEMORY_LIMIT', '256M' );

Как отключить встроенный CRON:
WordPress запускает свои запланированные задачи (проверка обновлений, публикация отложенных постов) при каждом посещении сайта. На высоконагруженных проектах это может вызывать задержки. Опытные администраторы отключают встроенный CRON и настраивают его запуск через планировщик на сервере.

define( 'DISABLE_WP_CRON', true );

Как управлять ревизиями и корзиной

WordPress сохраняет копию каждой вашей правки (ревизии), что может быстро "раздувать" базу данных.

define( 'WP_POST_REVISIONS', false );

Как ограничить количество ревизий (например, до 5):

define( 'WP_POST_REVISIONS', 5 );

Как изменить время автоочистки корзины (по умолчанию 30 дней):

// Очищать корзину каждые 7 дней
define( 'EMPTY_TRASH_DAYS', 7 );
// Чтобы отключить корзину (удалять навсегда сразу)
define( 'EMPTY_TRASH_DAYS', 0 );

В следующей части я покажу, как настроить плагины для мультиязычного содержимого вашего сайта.

Понравилось — ставь «+»
Полезно? Подпишись.
Так я буду знать, какой контент вам интересен.
Вопросы можно задавать в комментариях 👇👇👇
Удачи! 🚀