Оптимізуємо плагін контактної форми 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 сторінки зворотного зв'язку

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

Розглянемо конкретний приклад. Припустимо, що коротке ім'я сторінки зворотного зв'язку - це Зв'язатися з нами-. Вам потрібно додати наступний код до кінця файлу 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(), яка перевіряє, чи не збігається коротке ім'я сторінки з Зв'язатися з нами- та скасовує реєстрацію для інших сторінок.

Крок 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(), яка перевіряє, чи не збігається короткий код сторінки з Зв'язатися з нами-. Якщо збігається, ця функція скасовує реєстрацію 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/