Что такое theme.json?

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

Основная фишка:

Основная фишка файла theme.json заключается в централизованной настройке темы. Вместо того, чтобы разбрасывать настройки по различным файлам и функциям, разработчики могут объединить все настройки в едином файле, что обеспечивает более удобное управление и обслуживание темы.

Примеры использования:

• Настройка цветов:
  В файле theme.json можно определить основные цвета темы, такие как основной цвет, вторичный цвет и т.д. Это позволяет легко изменять цветовую схему темы без необходимости вносить изменения в CSS-файлы. Пример использования:

{
  "settings": {
    "colors": {
      "primary": "#ff0000",
      "secondary": "#0000ff"
    }
  }
}

• Настройка типографии:
  С помощью theme.json можно настроить параметры типографии темы, такие как шрифт и размер текста. Пример использования:

{
  "settings": {
    "typography": {
      "fontFamily": "Arial, sans-serif",
      "fontSize": "16px"
    }
  }
}

• Настройка блоков Gutenberg:
  Theme.json позволяет настраивать стили и поведение различных блоков в редакторе блоков Gutenberg. Вы можете определить стили по умолчанию для блоков, изменить их настройки и поведение, а также добавить новые стили блоков. Пример использования:

{
  "blocks": {
    "core/paragraph": {
      "styles": {
        "color": "#333333"
      }
    },
    "core/button": {
      "styles": {
        "backgroundColor": "#ff0000",
        "color": "#ffffff"
      }
    }
  }
}

• Расширение функциональности:
  Theme.json позволяет расширять функциональность вашей темы, добавляя различные ключи и секции. Например, вы можете указать поддержку определенных функций WordPress, таких как миниатюры, пользовательские заголовки, пользовательские фоновые изображения и другие. Пример использования:

{
  "supports": {
    "align-wide": true,
    "responsive-embeds": true
  }
}

Вот пример простого файла theme.json для темы WordPress:

{
  "version": 1,
  "settings": {
    "colors": {
      "primary": "#ff0000",
      "secondary": "#0000ff"
    },
    "typography": {
      "fontFamily": "Arial, sans-serif",
      "fontSize": "16px"
    }
  },
  "blocks": {
    "core/paragraph": {
      "styles": {
        "color": "#333333"
      }
    },
    "core/button": {
      "styles": {
        "backgroundColor": "#ff0000",
        "color": "#ffffff"
      }
    }
  },
  "supports": {
    "align-wide": true,
    "responsive-embeds": true
  }
}

В этом примере:

• "version": указывает версию файла theme.json.
• "settings": определяет основные настройки темы, в данном случае цвета и типографику.
• "colors": определяет основные цвета темы, например, "primary" и "secondary".
• "typography": определяет параметры типографики, такие как шрифт и размер.
• "blocks": настраивает стили и параметры для различных блоков Gutenberg.
• "core/paragraph": определяет стили для блока параграфа.
• "core/button": определяет стили для блока кнопки.
• "supports": указывает поддерживаемые функции WordPress, такие как широкое выравнивание ("align-wide") и адаптивные встроенные элементы ("responsive-embeds").

Вот пример использования настроек из файла theme.json в коде темы WordPress:

Использование цветов:

// Получение значения цвета primary из настроек theme.json
$primary_color = get_theme_mod( 'primary_color', '#ff0000' );

// Использование полученного значения цвета в коде
echo '<div style="background-color: ' . $primary_color . ';">Пример контента</div>';

Использование типографии:

// Получение значения шрифта из настроек theme.json
$font_family = get_theme_mod( 'font_family', 'Arial, sans-serif' );
$font_size = get_theme_mod( 'font_size', '16px' );

// Использование полученных значений типографии в коде
echo '<p style="font-family: ' . $font_family . '; font-size: ' . $font_size . ';">Пример текста</p>';

Использование настроек блоков:

// Получение значения цвета параграфа из настроек theme.json
$paragraph_color = get_theme_mod( 'core/paragraph_color', '#333333' );

// Использование полученного значения цвета в коде блока параграфа
echo '<p style="color: ' . $paragraph_color . ';">Пример текста в блоке параграфа</p>';

// Получение значений стилей кнопки из настроек theme.json
$button_background_color = get_theme_mod( 'core/button_background_color', '#ff0000' );
$button_text_color = get_theme_mod( 'core/button_text_color', '#ffffff' );

// Использование полученных значений стилей в коде блока кнопки
echo '<button style="background-color: ' . $button_background_color . '; color: ' . $button_text_color . ';">Пример кнопки</button>';

Таким образом, вы можете использовать полученные значения из настроек theme.json в вашем коде, чтобы динамически применять внешний вид и стили к различным элементам и блокам вашей темы WordPress.

Заключение:

Файл theme.json является мощным инструментом, предоставляющим разработчикам тем более гибкий и централизованный способ настройки внешнего вида и функциональности темы. Он позволяет упростить процесс разработки и обновления тем, а также предоставляет возможность пользователям легко настраивать внешний вид темы. С использованием theme.json разработчики могут создавать более гибкие и настраиваемые темы WordPress, соответствующие потребностям пользователей.

При разработке темы WordPress обязательно изучите документацию о файле theme.json, чтобы полностью понять его возможности и использовать их наилучшим образом.

Сообщение theme.json в WordPress — централизованная настройка тем появились сначала на Wiki | PWODEV.

1. Файлы шаблонов (Template files): Это файлы, которые определяют структуру каждой страницы вашего сайта. Например, файлы header.php, footer.php, index.php и single.php определяют разметку шапки, подвала, главной страницы и отдельной записи соответственно.
2. Файлы стилей (Style files): Они содержат информацию о внешнем виде вашего сайта, включая цвета, шрифты, размеры элементов и т. д. Файлы стилей обычно имеют расширение .css.
3. Файлы изображений (Image files): Темы могут содержать изображения, такие как логотипы, фоновые изображения, иконки и т. д. Обычно они находятся в отдельной папке внутри темы.
4. Файлы функций (Function files): Это файлы, содержащие PHP-код, который добавляет дополнительную функциональность к вашей теме. Файл functions.php является одним из основных файлов функций, в котором вы можете определять пользовательские функции и хуки.
5. Дополнительные файлы и папки: В зависимости от темы, она может содержать дополнительные файлы или папки, такие как файлы JavaScript, шрифты, плагины, шаблоны страниц и т. д.

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

А теперь пройдемся по каждому пункту более подробней.

1. Файлы шаблонов (Template files)

Файлы шаблонов определяют структуру и разметку каждой страницы на вашем веб-сайте. Вот некоторые из основных файлов шаблонов:

1. header.php: Этот файл содержит код для верхней части вашего сайта, включая заголовок, меню навигации и другие элементы, которые отображаются на каждой странице.
2. footer.php: Этот файл содержит код для нижней части вашего сайта, такую как подвал, копирайт и другие элементы, которые отображаются на каждой странице.
3. index.php: Это главный файл шаблона, который определяет разметку главной страницы вашего сайта. Он обычно выводит список последних записей или определенного типа записей.
4. single.php: Этот файл используется для отображения отдельной записи. Когда пользователь просматривает одну запись, WordPress использует этот файл для вывода содержимого и комментариев.
5. page.php: Этот файл определяет разметку страниц, которые вы создаете в WordPress. Он используется для отображения статических страниц.
6. archive.php: Этот файл используется для отображения архивных страниц, таких как архивы по дате, автору, категории и тегам.
7. search.php: Этот файл определяет разметку страницы результатов поиска, которая отображается, когда пользователь выполняет поиск на вашем сайте.
8. category.php и tag.php: Эти файлы определяют разметку страницы категорий и тегов соответственно.
9. sidebar.php: Файл шаблона sidebar.php определяет боковую панель вашего сайта. Вы можете добавить виджеты, меню или другой контент в боковую панель, настроив файл sidebar.php.

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

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

2. Файлы стилей (Style files)

Файлы стилей отвечают за внешний вид вашего веб-сайта, включая цвета, шрифты, размеры элементов и другие стилевые аспекты. Вот некоторые ключевые аспекты файлов стилей в теме WordPress:

1. style.css: Это основной файл стилей, который определяет общий внешний вид вашей темы. Он содержит CSS-код, определяющий цвета, шрифты, фоны, отступы, границы и другие стилевые правила для различных элементов на вашем сайте.
2. Дополнительные файлы CSS: В больших темах или темах с комплексными дизайнами могут использоваться дополнительные файлы стилей. Они могут быть организованы по модульному принципу, где каждый файл отвечает за определенные разделы или компоненты вашего сайта. Например, файлы «header.css», «footer.css» или «sidebar.css» могут содержать стили, специфичные для соответствующих областей сайта.
3. Использование CSS-препроцессоров: В некоторых темах разработчики могут использовать CSS-препроцессоры, такие как Sass или Less, для упрощения и структурирования стилевого кода. В таких случаях файлы стилей могут иметь расширения, отличные от .css, например .scss или .less. Препроцессоры CSS предлагают расширенный синтаксис, переменные, миксины и другие возможности для более гибкого и эффективного создания стилей.
4. Импорт стилей: Файлы стилей могут импортировать другие файлы стилей с помощью директивы @import. Это позволяет разделить стилевые правила на несколько файлов для лучшей организации и поддержки.

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

3. Файлы изображений (Image files)

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

1. Логотипы и иконки: Файлы изображений часто содержат логотип вашего сайта или иконки, которые используются в верхней панели навигации, в подвале или в других областях вашего сайта. Обычно они имеют форматы .jpg, .png или .svg.
2. Фоновые изображения: Фоновые изображения могут использоваться для стилизации различных разделов вашего сайта, таких как шапка, подвал, боковая панель и другие элементы. Они могут добавлять текстуру, цвет или декоративные элементы к вашей теме.
3. Иллюстрации и графика: Если ваш сайт требует использования иллюстраций, графики или других графических элементов, вы можете добавить соответствующие файлы изображений в тему. Например, это может быть иллюстрация для заголовка или изображение для слайдера на главной странице.

Файлы изображений обычно размещаются в отдельной папке внутри темы WordPress. При разработке темы важно оптимизировать изображения для улучшения производительности вашего сайта, учитывая размер файла и формат изображения. Многие разработчики также используют сжатие и кэширование изображений для повышения скорости загрузки страниц.

Примечание: Некоторые темы WordPress могут также использовать изображения, хранящиеся на удаленных серверах или внешних службах, например, при использовании иконок или шрифтов, предоставляемых сторонними поставщиками.

4. Файлы функций (Function files)

Файлы функций содержат PHP-код, который добавляет дополнительную функциональность к вашей теме. Вот некоторые ключевые аспекты файлов функций в теме WordPress:

1. functions.php: Это основной файл функций в теме WordPress. Он используется для определения пользовательских функций, хуков (hooks) и фильтров (filters). Файл functions.php обычно включает в себя код для настройки темы, регистрации пользовательских меню, поддержки миниатюр (thumbnails), создания виджетов и других дополнительных функций.
2. Подключение стилей и скриптов: Файлы функций могут содержать код для подключения дополнительных стилей CSS и JavaScript, которые необходимы для вашей темы или плагинов, используемых на вашем сайте. Вы можете использовать функции, такие как wp_enqueue_style() и wp_enqueue_script(), чтобы добавить стили и скрипты с правильными зависимостями и версиями.
3. Пользовательские типы записей и таксономии: Файлы функций могут содержать код для определения пользовательских типов записей (Custom Post Types) и таксономий (Taxonomies). Пользовательские типы записей позволяют вам создавать специальные типы контента, отличные от стандартных записей и страниц, а таксономии — организовывать контент по категориям или меткам.
4. Хуки и фильтры: Файлы функций в теме WordPress также могут содержать код, использующий хуки (hooks) и фильтры (filters) для внедрения функциональности в различные части вашего сайта. Хуки позволяют вам выполнить код в определенных точках выполнения WordPress, например, перед или после вывода контента, а фильтры предоставляют возможность изменить или модифицировать данные, выводимые на вашем сайте.
5. Дополнительные файлы функций: В больших и сложных темах может быть несколько дополнительных файлов функций, которые содержат определенные функциональные компоненты. Например, файлы для настройки темы, пользовательской административной панели (Theme Options), интеграции со сторонними сервисами и другие.

Файлы функций позволяют вам настроить и расширить функциональность вашей темы WordPress, вносить изменения в поведение и добавлять дополнительные возможности. Они являются мощным инструментом для разработчиков

Сегодня мы рассмотрели из чего состоит темы вордпресс (WordPress). Добавь эту страницу в закладки браузера и будешь постоянно пополнять запас знаний по этой и другой IT теме 🙂

Сообщение Из чего состоит тема WordPress появились сначала на Wiki | PWODEV.

Поиск плагина:

wp plugin search plugin_name

Вместо plugin_name напишите название Вордпресс плагина который хотите найти.

Установить и активировать:

wp plugin install plugin_name --activate

Обновить плагины WordPress

wp plugin update

Активировать все плагины:

wp plugin activate --all

По мере необходимиости буду дописывать эту шпаргалку по работе с плагинами вордпресс через командную строку

Сообщение Работа с плагинами в WP CLI появились сначала на Wiki | PWODEV.

Установка:

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

Готово, WP CLI установлено. Теперь чтобы проверить работает ли вордпрессная командная строка делаем следующую команду:

wp --info

Этой командой мы получим информацию о WP CLI.

Продолжение следует…

Сообщение Как установить WP CLI появились сначала на Wiki | PWODEV.

Итак имеем ошибку:

Your server is running PHP version 5.4.16 but WordPress 5.4.2 requires at least 5.6.20.

Что же делать? Сайт работает через панельку какую-то с нормальной версией php но в командной строке все же старая версия.

Оказывается можно использовать wp cli указывая версию php. Вот пример как теперь пользоваться wp-cli:

/opt/php74/bin/php /usr/local/bin/wp --info

Теперь мы увидим что нам показывается правильная версия php. и ошибки что была раньше больше нет. Это означает что мы изменили версию пхп для командной строки вп вордпресса. Или другими словами запустили wp cli с другой версией php.

Сообщение Изменить версию php в WP CLI появились сначала на Wiki | PWODEV.

Подключаемся к серверу через ssh, заходим в папку где лежит наш WP и вводим следующую команду:

wp media regenerate

Мы запустили процесс generate image и всех thumbnails на нашем сайте.

Сообщение wp cli — перегенерировать изображения появились сначала на Wiki | PWODEV.

wp db search 'значение'

Эта замечательная команда найдет во всей базе WordPress и покажет где лежит то что мы потеряли.

На официальном сайте имеется большее количество полезных параметров к этой команде.

Сообщение wp db search — поиск по всей базе данных появились сначала на Wiki | PWODEV.

По хорошему так делать нельзя, нужно работать с командной стокой Вордпресса не из под рута, но если ооочень хочется, и раздражает все время прописывать —allow-root в конце каждой команды, есть фикс для этого дела.

Делаем алиас для команды, для этого в командной строке вводим такую штуку:

alias wp='wp --allow-root'

Все, теперь можно не мучаться и писать все без —allow-root.

Спасибо интернету за идею 🙂

Сообщение wp cli без —allow-root появились сначала на Wiki | PWODEV.

add_action('wp_enqueue_scripts', 'front_scripts');
function front_scripts(){
	// add jQuery to footer and from Google
	global $google_jQuery;
	if(!$google_jQuery) {
		$google_jQuery = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';

		wp_deregister_script('jquery-core');
		wp_register_script('jquery-core', $google_jQuery, false, null, true);

 		wp_deregister_script('jquery');
		wp_register_script('jquery', false, array('jquery-core'), null, true);
	}

	// add ajaxurl
	global $ajaxurl;
	if(!$ajaxurl){
		$ajaxurl = admin_url('admin-ajax.php');
		wp_localize_script( 'jquery', 'ajaxurl', admin_url('admin-ajax.php'));
	}
}

Последняя версия jQuery от Google

В этом скрипте я также добавил сразу подключение ajaxurl.

Этот скрипт для фронтенда, если нужен для админки — добавляем:

add_action('admin_enqueue_scripts', 'admin_scripts');

А теперь немного пред истории:

В вордпресе есть локальная версия jQuery, также и все остальные сопутствующие скрипты, дело это хорошее, но все-же лучше всего подключать библиотеку jQuery WordPress лежащую в гугле. Перенаправить или заменить стандартный скрипт джейквери (jQuery), лежащий в ядре вп или Вордпресс, не достаточно, потому что там немного сложный механизм. Есть 2 названия одного и того-же подключения стандартного скрипта jQuery в вродпресе: jquery и jquery-core. Дело в том что при вызове первого скрипта происходит ссылка на второй. В ядре мы можем найти следующий код который немного это объяснит:

if ( $handle === 'jquery' )
    $handle = 'jquery-core';

Немного странно… Вообщем чтобы в wp jQuery подключить из гугла правильно, приходится немного попотеть. Получается если нужно дописать какой-то скрипт, типа как ajax url используя функцию:

wp_localize_script( 'jquery', 'ajaxurl', admin_url('admin-ajax.php'));

В первом параметре этой функции мы говорим что скрипт должен запуститься сразу перед подключением скрипта ‘jquery’, но так как мы видели из кода выше скрипт всеравно будет искать ‘jquery-core’. Это означает что он будет подключаться не там где надо или если мы переписали или отменили ‘jquery-core’ то он вообще не подключится.

Подключить jQuery WordPress из CDN Google

Чтобы решить эту проблему я методом долгих проб и ошибок нашел лучшее решение этой проблемы.

Итак задача:

Подключить jQuery WordPress из CDN Google, но чтобы при этом работали оба варианта подключения jquery и jquery-core. И также чтобы работало подключение других остальных скриптов.

Решение:

1. Сначала обнуляем jquery и jquery-core

wp_deregister_script('jquery-core'); 
wp_deregister_script('jquery');

2. Затем регистрируем ‘jquery-core’ скрипт

wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true);

3. Регистрируем ‘jquery’ скрипт как ссылку на первый

wp_register_script('jquery', false, array('jquery-core'), null, true);

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

Если кто знает лучшее решение, напишите его в комментариях.

Возможно кому интересно — на днях обновил статью на тему: как установить WordPress с помощью терминала на маке.

Сообщение Google jQuery WordPress — как правильно подключить появились сначала на Wiki | PWODEV.

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

Как убрать запрос FTP пароля:

Нам нужно залогинеться через ssh к серверу, и проделать следующую манипуляцию:

sudo chown -Rf www-data.www-data /var/www/html/

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

Конечно же чтобы выполнить команду вы должны возможно немного отредактировать ее, добавив правильный путь к папке где лежит WordPress.

На этом все. Если вы нашли ошибки, или у вас есть вопросы — пишите комментарии.

Сообщение Убрать запрос FTP пароля при удалении плагинов появились сначала на Wiki | PWODEV.