Як присвоїти тегу P свій CSS-клас

Привіт:) Іноді потрібно звичайним параграфам (абзацам) у контенті WordPress-сайту додати свої стилі. Наприклад, змінити колір, розмір або зображення шрифту. Така можливість зазвичай є в налаштуваннях теми. Також можна вирішити задачу за допомогою редактора. Але в останньому випадку стилізувати доведеться кожен параграф окремо. У цьому пості покажу, як присвоїти параграфу (тегу <p>) свій CSS-клас, якому можна буде задати власні правила стилізації.

У файл functions.php активної теми додайте PHP-код

function mp_add_class_for_tag_p( $content ) {
    $content = str_replace( '<p>', '<p class="mp-class">', $content );
    return $content;
}
add_filter( 'the_content', 'mp_add_class_for_tag_p', 9999 );
add_filter( 'the_excerpt', 'mp_add_class_for_tag_p', 9999 );

Код додає клас mp-class для всіх параграфів вмісту постів та сторінок.

Для прикладу додам у редакторі 3 параграфи:

Якщо переглянути HTML-код сторінки, то вони матимуть вигляд:

Якщо потрібно додати власний класно лише першому параграфу, використовуйте код

function mp_add_class_for_first_tag_p( $content ) {
    return preg_replace( '/<p([^>]+)?>/', '<p$1 class="mp-class">', $content, 1 );
}
add_filter( 'the_content', 'mp_add_class_for_first_tag_p', 9999 );

Значення mp-class не забудьте замінити на своє.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *