TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Contact From 7 – отложенная загрузка скриптов и стилей для ускорения WordPress

2 419

https://github.com/joeldbirch/lazy-cf7-assetsИ так, если Вы такой же “помешанный” на скорости администратор WordPress как и я, значит Вам будет полезно знать что в наших силах осуществить подключение скрипта scripts.js плагина CF7 в defer режиме. Для этого добавьте код ниже в файл темы function.php.

Добавляем в function.php

if ( ! function_exists( 'add_defer_to_cf7' ) ) { function add_defer_to_cf7( $url ) { if ( // comment the following line out add 'defer' to all scripts FALSE === strpos( $url, 'contact-form-7' ) or FALSE === strpos( $url, '.js' ) ) { // not our file return $url; } // Must be a ', not "! return "$url' defer='defer"; } add_filter( 'clean_url', 'add_defer_to_cf7', 11, 1 ); }

Официальный вариант подключения стилей и скриптов

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

Как загрузить .js и .css файлы плагина только тогда, когда это необходимо

В своих настройках по умолчанию Contact Form 7 загружает свою таблицу стилей и JavaScript на каждую страницу. Вы можете подумать, что это будет излишним или расточительным, и если Вы хотите загружать их только на те страницы, которые содержат контактные формы. Я понимаю это чувство, но плагин испытывает техническую трудность, так как не знает, содержит ли страница контактные формы или нет (при загрузке страницы). Тем не менее, я могу показать вам способ обойти это.

Шаг 1: Прекратить загрузку таблицы стилей JavaScript и CSS на всех страницах

Когда значение WPCF7_LOAD_JS = false (по умолчанию: true ), плагин не загружает JavaScript. Вы можете установить значение этой константы в вашем wp-config.php следующим образом:

define('WPCF7_LOAD_JS', false);

Аналогично, вы можете контролировать загрузку таблицы стилей CSS с помощью WPCF7_LOAD_CSS. Контактная форма 7 не загружает таблицу стилей CSS, когда значение WPCF7_LOAD_CSS = false (по умолчанию: true ). Вы можете установить его в wp-config.php следующим образом:

define('WPCF7_LOAD_CSS', false);

Или вы также можете отключить загрузку JavaScript и CSS, добавив несколько строк кода в файл functions.php вашей темы, например так:

add_filter( 'wpcf7_load_js', '__return_false' ); add_filter( 'wpcf7_load_css', '__return_false' );

Теперь вам удалось остановить загрузку таблицы стилей JavaScript и CSS, но, к сожалению, вы также “убили” их на страницах, содержащих контактные формы, поэтому нам действительно нужно вернуть их на нужные страницы. Итак, следующий шаг – это то, что вам нужно сделать для загрузки файлов именно на те страницы, на которых они вам нужны.

Шаг 2: Загрузите файлы на страницах, которые содержат контактные формы

Например, предположим, у вас есть страница с именем «Контакты», и это единственная страница, которая содержит форму контакта. И предположим, что у вас есть файл шаблона для страницы «Контакты» с именем contact.php в папке вашей темы. Теперь вам нужно загрузить таблицу стилей JavaScript и CSS контактной формы 7 специально на странице «Контакты».

Для этого вы должны отредактировать файл шаблона contact.php и вставить в него следующие строки:

// В файле functions.php вашей темы: add_filter ( ' wpcf7_load_js ' , ' __return_false ' ); // Также можно удалить CSS из очереди. // Показано здесь только для справки - // CSS не будет загружен лениво этим скриптом // add_filter ( ' wpcf7_load_css ' , ' __return_false ' );

После отмены автоматического включения JavaScript, вы можете теперь настроить подключение файлов JavaScript плагина для динамической загрузки, импортировав Lazy CF7 Assets и инициализировав его из пакета JavaScript вашего сайта, например:

import lazyform from 'lazy-cf7-assets'; // Initialise once the DOM is ready, ie. at the end of the <code>body</code> tag. lazyform.init()

В качестве альтернативы, если ваши сценарии включены в head тег, а не в конец body тега, вы должны убедиться, что инициализация происходит после того, как все элементы страницы были отрисованы, таким образом:

import lazyform from 'lazy-cf7-assets'; lazyform.init({ // Set an absolute path to the alternate loading gif gifPath: '/wp-content/themes/my-theme-name/images/ajax-loader.gif' });

Ознакомиться с дополнением CF7 можно по данной ссылке:

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

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее