WordPress

Ссылки

Общие ссылки

Бесплатные темы WP

Версия 6.5

Справочник по созданию тем wordpress (eng)

Установка

Тестовая версия

//Перенести в git

Создать папку, в которой планируется развернуть docker. Например wpfirst.

В папке создать структуру 

./data/html
./data/mysql
./logs/nginx
./nginx

В корень wpfirst поместить docker-compose.yml

В папку .nginx поместить файл nginx.conf заменив servername

docker-compose.yml   nginx.conf

Запустить контейнеры

sudo docker compose up

После завершения скачивания, ... перейти по адресу http://servername/wp-admin/install.php

Установка завершена!

По адресу http://servername/wp-admin административная панель.

Сайт расположен по адресу htp://servername/

Ctrl+C завершение работы.

Темы

Темы

Темы: введение

Два вида тем: классические (поддерживают все версии WP, php-js-html) и блочные (с версии 5.9, WYSIWYG-конструктор). Есть гибридные, но это моветон. 

Создание новой блочной темы:

Либо модифицируя во встроенном редакторе существующую тему, либо используя плагин

Экспорт тем

Экспорт блочных тем через стандартный экспортер:

При редактировании любой страницы темы нажать Настройки - Export Zip. Тема сохранится в zip файле, который импортируется в другой проект.

Размещение пункта меню Export Zip

export_theme.jpg

Экспорт блочной темы через плагин Create Block Theme (Плагины)

Очень похоже на стандартный экспорт.

Изменение имени темы

При экспорте обновленной темы сохраняется название предыдущей темы. Для изменения после экспорта нужно:

Структура проекта шаблона

parts/
  footer.html
  header.html
patterns/
  example.php
styles/
  example.json
templates/
  404.html
  archive.html
  index.html (required)
  singular.html
README.txt
functions.php
screenshot.png
style.css (required)
theme.json

style.css

Метаданные шаблона:

Записываются между открывающих и закрывающих комментариев /* */

Параметр Определение
Theme name: Название темы
Theme URI: Адрес страницы темы
Description: Описание темы
Version: Версия в формате X.X или X.X.X
Author: Имя автора или организации - автора темы
Author URI: Адрес автора
Tags: Разделенные запятыми теги. Здесь размещены теги для размещения в официальном хранилище, но для своих тем может быть другая система.
Text Domain: Дословно: Строка, используемая в текстовом домене для переводов. Хз что такое практически. Но данное имя используется при названии папки темы, а также префикс при инклуде CSS JS
Domain Path: Связано с переводом.
Tested up to: Максимальный номер версии WP, на котором тестировался шаблон
Requires at least: Минимальная версия, на которой тестировался шаблон.
Requires PHP: Минимальная требуемая версия PHP
License: Licence URI: Название и адрес лицензии.
Template: Название темы-родителя (обычно совпадает с названием папки). Используется при написании темы-потомка.

Специфичные стили шаблона

Глобально применяемые стили. Обычно для этого используют файл theme.json но иногда этого не хватает.

index.html Шаблон по-умолчанию для страниц.

theme.json

Файл настроек глобальных переменных, стилей шаблона. Структура файла:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {},
	"patterns": []
}

version: версия json-схемы у файла. Сейчас 2.
$schema: адрес схемы, для поддержки редакторами.
settings: какие элементы управления блоками отображаются, настройки пресетов и многого другого.
styles: применения цветов, размеров шрифтов, пользовательского CSS и других стилей к веб-сайту и блокам.
customTemplates: Метаданные для пользовательских шаблонов, определенных в папке /templates вашей темы.
templateParts: Метаданные для частей шаблона, определенных в папке /parts вашей темы.
patterns: массив шаблонных элементов, которые должны быть зарегистрированы из каталога шаблонов.

Раздел styles

Поддерживаемые уровни 

Добавление включений (assets).

Функции получения адресов:

Внедрение общего CSS

Необходима в файл functions.php добавить хук на событие wp_enqueue_scripts. Функция, выполняющаяся при вызове, должна содержать одну или более функцию wp_enqueue_style 

add_action( 'wp_enqueue_scripts', 'your_name_of_function' );
wp_enqueue_style( 
	string $handle, 
	string $src           = '', 
	string[] $deps        = array(), 
	string|bool|null $ver = false, 
	string $media         = 'all'
);

$handle имя или ID файла стиля, префикс должен быть имя темы (параметр Text Domain в настройках).
$src URL файла стиля.
$deps массив файлов стилей, от которых зависит включаемый стиль.
$ver версия
$media для какого типа данных используется этот стиль, например all (default), screen, print, handheld.

Пример:

В файл functions.php добавляем код:

add_action( 'wp_enqueue_scripts', 'theme_slug_enqueue_styles' );

function theme_slug_enqueue_styles() {
	wp_enqueue_style( 
		'theme-slug-style', 
		get_stylesheet_uri()
	);
    wp_enqueue_style( 
		'theme-slug-primary',
		get_parent_theme_file_uri( 'assets/css/primary.css' )
	);
}

Внедрение inline CSS (точно не догнал)

Используется функция 

wp_add_inline_style( 
	string $handle, 
	string $data 
);

Внедрение стилей и JS

Внедрение JS

Аналогично стилям, только функция 

wp_enqueue_script( 
	string $handle, 
	string $src           = '', 
	string[] $deps        = array(), 
	string|bool|null $ver = false, 
	array|bool $in_footer = false
);

Пример:

add_action( 'wp_enqueue_scripts', 'theme_slug_enqueue_scripts' );

function theme_slug_enqueue_scripts() {
	wp_enqueue_script( 
		'theme-slug-navigation',
		get_parent_theme_file_uri( 'assets/js/navigation.js' ),
		array(),
		wp_get_theme()->get( 'Version' ),
		true
	);
}

Также может быть inline, editor.

Внедрение изображений

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

<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />
<img src="<?php echo esc_url( get_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />

Темы

Темы: разметка

Каждый шаблон/блок/часть состоит из функциональных блоков.

Редактирование: Внешний вид-Редактор-Шаблоны-Нужный шаблон-Три точки справа-Редактор кода

Общая структура функционального блока:

<!-- wp:namespace/slug {"align":"full"} /-->

Например, шаблон страницы с header, footer

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:template-part {"slug":"loop","align":"full"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Создание нового шаблона

Создаваемый шаблон: content-canvas

Через редактор кода можно к одному элементу применить нужный класс.

Плагины и встроенные блоки

Плагины и встроенные блоки

Список плагинов

Плагины общего назначения

Ссылка Проверенный функционал, мнение Условия использования Да/Нет
Create block theme Создание, экспорт блочных тем. Работает. Opensource Да

Графика

Ссылка Проверенный функционал, мнение Условия использования Да/Нет
MetaSlider

Slider. В бесплатной версии проверено:

  • Без лишних всплывающих окон/подписей
  • Нельзя добавить подпись под рисунком
  • Не масштабируется в высоту при изменении размера экрана
  • Ссылки на клик по изображению, подписи на изображении работают
  • Слайдер не-изображений (видео, внешние ссылки, ...) в pro версии.
  • Проверено на 1 slider. 
  • Есть подозрения по поводу бесплатности (что установлен trial место бесплатной).

В качестве относительно простого прокатит.

Бесплатная и Pro версия:

  • 1 сайт/Год 40$
  • 5 сайтов/Год 50$
  • Безлимитный/Год 100$
 Да

Посмотреть: ifmenu https://wordpress.org/plugins/if-menu/

Плагины и встроенные блоки

Встроенные блоки

Дополнительные фишки

 

Виджеты - Поиск

Изменение высоты элемента.

Добавляем в дополнительные стили следующие стили.

Первый блок определяет высоту, но тогда иконка поиска смещается ниже центра кнопки. Похоже, что это связано с внутренними расчетами, ... Для компенсации смещаем на половину вверх. Однако это работает только для 30px и типе расположения "Кнопка внутри". Если выставить 40px, то top: -8px. 

Плюсы Минусы
Выставленные параметры работают при изменении размера на ПК. Подбор при изменении типа расположения, размера.
На ПК высота кнопки и поля ввода одинаковая.  На IOS высота поля ввода меньше высоты кнопки.