Заметки по WordPress: мелкие , но частые доработки на сайтах

Дневник разработчика

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

Custom Form 7

Как подключить шорткод Contact-form в шаблоне страницы

В нужном месте шаблона вставь следующую php-конструкцию:

<?php echo do_shortcode( '[сontaсt-form-7 id="4" title="Контактная форма 1"]' ); ?>

Как видишь из фрагмента кода, сам шорткод оборачивается в php-код.

echo — Выводит одну или более строк.

do_shortcode — находит в переданной конструкции зарегистрированный шорткод и обрабатывает его.

Как добавить css-класс к определённой контактной форме, которая генерируется плагином CF7 и вставляется шорткодом

Для добавления css-классов тегу <form> тебе потребуется модифицировать сам шорткод, добавив в него дополнительный атрибут вида:

html_class="custom-css-class"

Как ты уже догадался вместо custom-css-class вставляем свой класс. Если классов несколько — просто перечисляй их через пробел.

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

Как добавить ГЛОБАЛЬНЫЙ css-класс для ВСЕХ контактных форм, которые создаются в CF7

Для этого тебе потребуется модифицировать файл темы function.php — добавить следующую конструкцию в файл:

<?php
add_filter( 'wpcf7_form_class_attr', 'custom_custom_form_class_attr' );
function custom_custom_form_class_attr( $class ) {
  $class .= ' your-class';
  return $class;
}
?>

add_filter — Прикрепляет указанную PHP функцию к указанному хуку-фильтру. Так, во время срабатывания фильтра значение будет обработано указанной PHP функцией.

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

Функция не делает никаких проверок: существует ли прикрепляемая функция или передается ли название функции в виде строки и т.д.. Сделано это, чтобы add_filter() работала максимально быстро.

Цитата из статьи: https://wp-kama.ru/function/add_filter

wpcf7_form_class_attr — название хука который используется в CF7

custom_custom_form_class_attr — название функции, которая добавляется к хуку, дополняя её.

$class — задает стилевой css-класс. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.

Учитывая эту особенность, а так же понимаю, что твоя вёрстка будет натягиваться на CMS WordPress, ты можешь использовать это в html-вёрстке. При вёрстке форм следует задавать стили с использованием css-селектора родительского элемента и писать стили вида:

.custom-form {
  /* ваши стили для тега <form>  */
}

.custom-form input {
  /* ваши стили для полей ввода  */
}

.custom-form label {
  /* ваши стили для лейблов - подписей полей формы */
}

.custom-form button {
  /* ваши стили для кнопки отправки данных  */
}

Юрий Ронин