Contact Form 7 – Как заменить, установить прелоадер Ajax загрузки по центру и прочие полезности

Contact Form 7 – замечательный плагин для WordPress, который невероятно гибок, но я никогда не был большим поклонником стандартного gif-файла загрузки Ajax, который появляется во время обработки формы после нажатия на кнопку отправки.

Редактирование файлов плагина напрямую – ужасная идея по ряду причин, не в последнюю очередь потому, что при следующем обновлении плагина вы потеряете свои изменения.

В данном посте приведу решения для часто возникающих задач связанных с прелоадером плагина,

Метод замены ajax-loader.gif для CF7 с версии 4.6

Хорошей новостью является то, что теперь после выхода плагина 4,6 версии вы можете легко изменить загрузочный GIF, используя только CSS без необходимости трогать function.php.

Вам все равно нужно будет найти или сделать новое изображение прелоадера в формате GIF, как указано в примечаниях по использованию в устаревших инструкциях кода.

Для замены картинки загрузчика просто добавьте этот CSS код (или его адаптацию после корректировки пути к файлу в соответствии с вашей теме) в style.css файл вашей темы. Вы также можете изменить другие элементы CSS, такие как высота и ширина, в зависимости от размера вашего нового GIF изображения.

Пример CSS кода:

/* Custom CF7 Loader */
div.wpcf7 .ajax-loader {
background-image: url('images/ajax-loader.gif');
width: 24px;
height: 24px;
margin-left: 10px;
}

Метод замены ajax-loader.gif для CF7 версии 4.5 и более ранних версий плагина

Этот метод в настоящее время не рекомендуется, поэтому, пожалуйста, используйте инструкции выше для последних версий плагина Contact Form 7.

Для замены прелоадера для старых версий плагина необходимо добавить несколько простых строк кода в файл functions.php вашей темы.

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

Примечания по использованию

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

www.ajaxload.info

и выберите один прелоадер из довольно приличного диапазона прелоадеров, и загрузите его. Я бы порекомендовал выбрать прелоадер который использует прозрачный фон.

После того, как вы это сделаете, вам нужно будет загрузить ранее загруженный вами GIF файл в вашу тему, а затем просто добавить приведенный ниже код в ваш файл functions.php, чтобы указать правильное расположение нового файла GIF.

Если вы посмотрите на приведенный ниже код, вы увидите в 4-й строке, что новое изображение GIF прелоадера находится прямо в каталоге в моей теме, называемой images.

// Custom CF7 loading image
add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');
function my_wpcf7_ajax_loader () {
    return  get_bloginfo('stylesheet_directory') . '/images/ajax-loader.gif';
}

Все просто, достаточно применить стили указанные ниже:

span.ajax-loader {
   margin-left: auto !important;
   margin-right: auto !important;
   float: inherit !important;
   width: 15px !important;
   display: block !important;
   margin-top: 10px !important;
   margin-bottom: -15px !important;
}

Зесь находятся изображения прилоадеров которыми я пользуюсь чаще всего, и данные GIF'ки я буду пополнять врем от времени.

Прелоадер CF7 по умолчанию

Часто мной используемые прелоадеры для CF7

Источник записи: