Как стилизовать вывод wordpress-функции

Question

Создаю собственную тему wordpress. Появилась необходимость поменять цвет вывода функции <?php the_category(' ') ?> Выводит <a></a>, но с другими стилями. В данном случае мне надо поменять цвет вывода с чёрного на белый. Пробовал так: <?php the_category(' ', 'class="text-white"') ?> Уже просмотрел много статей, но нигде про стилизацию этой функции не упоминается. Если что, использую Bootstrap здесь.

Как оно выводится:

А я хочу, чтобы он выводилось так:

Answer 1

Так как эта функция the_category работает на основе get_the_category_list, то можно попробовать применить фильтры для изменения вывода содержимого функции. А именно добавить класс ссылке.


/**
 * Здесь получаем html контента, который возвращается функцией the_category
 * Ищем ссылку среди этого html-кода. Работаем с её частями (уже во второй функции)
 * Возвращаем то, что получилось (= хотели, наверное :))
 */
function add_category_class($html) {
    $patternSearch = '#<a[^>]+(\>([^<]+)\</a>)#Uuis';
    $html = preg_replace_callback($patternSearch, 'add_class_callback', $html); //

    return $html;
}

/**
 * var_dump($result); - для наглядности посмотрите, что получаете
 * Первая часть - сам ссылка от "<a" до "/a>". То есть исходный вариант ссылки
 * Вторая часть - это "><текст_ссылки></a>"
 * Третья часть - просто <текст_ссылки> 
 */
function add_class_callback($result) {
    $replacement = sprintf(' class="%s">%s</a>', 'text-white', $result[2]); //Заменяем (правильнее в данном случае - форматируем) строку class"%s">%s</a> таким образом, чтобы получилась строка class="text-white"><текст_ссылки></a>

    return preg_replace('#>([^<]+)</a>#Uis', $replacement, $result[0]); //И уже в первой части (в исходной ссылке) заменяем ТОЛЬКО вторую часть (её ищем отдельно) на то, что получилось в $replacement
}

add_filter('the_category', 'add_category_class', 10, 1);

И точно! Можно этот код добавить в functions.php своей темы Wordpress.

БЛОГ НА HUSL

Как стилизовать вывод wordpress-функции

Ответы (1 шт):