theme.json в WordPress — централизованная настройка тем

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

Что такое 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, чтобы полностью понять его возможности и использовать их наилучшим образом.