Как раскрасить сообщения в блоге Divi по авторам

Одна из основных целей Divi - убедиться, что каждый элемент на вашем веб-сайте хорошо выглядит, и сообщения в блогах не являются исключением. Тем не менее, всегда есть возможности для улучшения, и цветовое кодирование ваших сообщений в блоге по авторам дает пользователям возможность более эффективно ориентироваться в вашем контенте (а также определять своих любимых авторов!).

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

Почему вам следует подумать о цветовом кодировании ваших сообщений в блоге Divi

Прежде чем мы пойдем дальше, давайте проясним, что мы подразумеваем под цветовым кодированием ваших сообщений в блоге Divi. В следующем разделе мы научим вас, как назначать каждому из ваших писателей цвет, который будет использоваться в качестве фона для их собственных сообщений. В этом примере я присвоил своим сообщениям (как author1) очень привлекательный голубой цвет:

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

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

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

Как раскрасить сообщения в блоге Divi по авторам (за 2 шага)

Теперь, когда мы рассмотрели теорию, пришло время перейти к тому, как на самом деле кодировать сообщения в блогах Divi. Включение этой функции требуется только два шага, но есть некоторые соображения , чтобы сделать , прежде чем начать.

Для начала вы захотите создать резервную копию своего сайта WordPress, что всегда полезно при внесении изменений. Во-вторых, вы захотите создать дочернюю тему Divi, чтобы ваши изменения остались после обновления темы.

Наконец, для шага номер один вам понадобится FTP-клиент. Мы будем использовать FileZilla, но если вы предпочитаете другой инструмент, сделайте это.

Шаг № 1. Добавьте фрагмент кода в файл functions.php вашей дочерней темы.

Для этого вам нужно открыть свой FTP-клиент и войти на сервер вашего сайта. Оттуда перейдите в каталог public_html / wp-content / themes / , затем найдите папку своей дочерней темы. Имейте в виду, что public_html или корневая папка может называться www или после домена вашего сайта, в зависимости от вашего хоста:

Найдя папку дочерней темы, откройте ее и найдите в ней файл functions.php . Теперь щелкните его правой кнопкой мыши и выберите вариант с надписью View / Edit :

Вам будет предложено открыть файл в текстовом редакторе по умолчанию. Поскольку мы имеем дело с дочерней темой, ваш файл functions.php должен быть в основном пустым, за исключением постановки его родительских функций в очередь. Мы собираемся добавить фрагмент, который автоматически создает новый класс для каждого из ваших авторов с префиксом author- . Например, если у вас есть пользователь WordPress по имени Джон, вы можете использовать класс author-john . Это позволит нам позже добавить немного кода CSS.

Затем добавьте следующий фрагмент PHP после строки // END ENQUEUE PARENT ACTION :

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

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

Шаг № 2: укажите цвет для каждого автора с помощью настраиваемой опции CSS Divi

Теперь наша новая функция готова, следующий шаг - установить цвет для каждого из ваших авторов. Divi позволяет вам сделать это с помощью функции Custom CSS , поскольку любой добавленный вами код повлияет на всю вашу тему. Чтобы найти его, перейдите на панель управления WordPress и перейдите на вкладку Divi> Theme Options , затем прокрутите вниз до поля Custom CSS в конце страницы:

Вам нужно будет добавить новую строку CSS в это поле для каждого из ваших авторов. Например, если у вас есть автор с именем пользователя author1, вот как вы установите для него определенный цвет:

.author-author1 {background-color: #C1F3FA !important;}

Имейте в виду, что вам нужно добавить префикс author- к вашему классу, независимо от вашего имени пользователя. После указания цвета фона вам также необходимо объявить код ! Important . Проще говоря, это придает коду больший вес и отменяет любые конфликты, которые могут возникнуть - без него эта функция не будет работать.

Давайте рассмотрим последний пример. В этом случае мы назначим разные цвета двум авторам. Вот код, который мы добавили в наше настраиваемое поле CSS Divi:

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

Теперь вот как это выглядит со стороны интерфейса:

Помимо выбора цвета, вы можете внести другие изменения в свои сообщения в блоге Divi. Например, вы можете настроить длину выдержек из своего блога или стилизовать «карточки» постов разными способами. Ваша главная цель должна заключаться в том, чтобы найти идеальный стиль для вашего собственного блога, поэтому не бойтесь поиграть с Divi и посмотреть, на что он способен!

Заключение

Цветовое кодирование ваших сообщений в блоге их автором - это простая функция, которая может помочь пользователю гораздо легче ориентироваться в вашем контенте (особенно если у вас есть обширный архив). Кроме того, многие ваши пользователи, вероятно, оценят возможность узнавать сообщения своих любимых авторов только по цвету.

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

1. Измените файл functions.php вашей дочерней темы.
2. Укажите цвет для каждого из ваших авторов, используя настраиваемую опцию CSS Divi.

У вас есть вопросы о том, как раскрасить сообщения блога Divi по авторам? Спросите в разделе комментариев ниже!

Миниатюра статьи RaZZers / shutterstock.com.