Оптимізуємо плагін контактної форми Contact Form 7

Contact Form 7 — один із найбільш популярних безкоштовних плагінів, що реалізують форми зворотного зв'язку на WordPress. Тільки в червні цього року кількість його завантажень склала більше 16 мільйонів, що дозволяє вважати цей плагін найчастіше використовуваною формою зворотного зв'язку серед користувачів. І його оптимізація, безперечно, буде корисною для кожного з сайтів.

За умовчанням Contact Form 7 містить CSS і JavaScript код абсолютно для кожної сторінки сайту. І такої безглуздої витрати ресурсів треба запобігти.

Дивіться також :

• Contact Form 7 — WordPress плагін для контактної форми
• Використання контактних форм у WordPress
• Як створити просту контактну форму для WordPress
• Найкращі плагіни для збереження листів контактних форм у базі даних WordPress

Навіщо оптимізувати плагін Contact Form 7?

Зайві CSS та/або JavaScript файли на кожній зі сторінок сайту – це як зайвий багаж, який вам навряд чи було б зручно носити, якби ви відправилися на прогулянку. Два зайві HTTP-запити можуть негативно вплинути на якість завантаження сторінок вашого сайту.

Ви, напевно, знаєте, що Google любить ранжувати сторінки, завантаження яких не займає більше секунди. Перші 14 кілобайт є найбільш критичними . І якщо ви завантажите ці CSS та JavaScript файли тільки на сторінки, для яких використовується плагін Contact Form 7 для створення форми зворотного зв'язку, то вам не потрібно буде завантажувати зайві файли на кожну сторінку сайту.

Ось що говорить про це сам автор плагіна, Такаюкі Мієші :

— Я розумію незручність, яку ви відчуваєте, але є певні технічні складності, пов'язані з плагіном. А саме: у визначенні наявності форми зворотного зв'язку на тій чи іншій сторінці від початку завантаження самої сторінки.

Оптимізація Contact Form 7

Крок 1. Скасування реєстрації CSS файлів у плагіні

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

Знаходимо URL сторінки зворотного зв'язку

Спочатку знайдемо ім'я потрібної сторінки. Для цього заходимо в розділ « Сторінки », натискаємо на « Властивості » та копіюємо коротке ім'я сторінки:

Розглянемо конкретний приклад. Припустимо, що коротке ім'я сторінки зворотного зв'язку – це contact-us . Вам потрібно додати наступний код до кінця файлу functions.php використовуваної вами теми:

// Deregister Contact Form 7 styles
add_action( 'wp_print_styles', 'aa_deregister_styles', 100 );
function aa_deregister_styles() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_style( 'contact-form-7' );
    }
}

Цей код додає функцію aa_deregister_styles() , яка перевіряє, чи не збігається коротке ім'я сторінки з contact-us та скасовує реєстрацію для інших сторінок.

Крок 2. Скасування реєстрації файлів JavaScript

Так само ми зробимо і з файлами JavaScript, а саме скасуємо їх реєстрацію для всіх сторінок, крім тих, на яких розміщуються форми зворотнього зв'язку. Для цього потрібно додати цей код у functions.php файл використовуваної вами теми:

// Deregister Contact Form 7 JavaScript files on all pages without a form
add_action( 'wp_print_scripts', 'aa_deregister_javascript', 100 );
function aa_deregister_javascript() {
    if ( ! is_page( 'contact-us' ) ) {
        wp_deregister_script( 'contact-form-7' );
    }
}

За допомогою цього коду до сторінок сайту додається функція aa_deregister_javascript() , яка перевіряє, чи не збігається короткий код сторінки з contact-us . Якщо збігається, ця функція скасовує реєстрацію JavaScript для інших сторінок.

От і все. У такий спосіб ми оптимізували плагін Contact Form 7.

Що, якщо ви маєте кілька форм зворотного зв'язку на різних сторінках?

І тут усе просто. Можна використовувати функцію is_page() , докладний опис якої можна знайти в посібнику WordPress. Ви можете додати багато сторінок. А функція визначить сторінки, її заголовок або коротке ім'я/адресу.

/**
 * is_page( array( ID, 'slug', 'Title' ) );
 * Returns true when the Pages displayed is either post ID 42, or post_name "about-me", or post_title 
 */
is_page( array( 42, 'about-me', 'Contact' ) );

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/