Оптимізація Wordpress header

1. Базова оптимізація wordpress header
2. Прибираємо зайвий код плагінів і теми
3. WP-Syntax
4. qTranslate-X
5. Contact Form 7
6. WP-PageNavi
7. Yet Another Related Posts Plugin
8. Для шаблонів / тем

Якщо ви цікавилися питанням оптимізації wordpress коду, то напевно стикалися з різними порадами по редагуванню файлу header.php. У ньому генеруються значення блоку HEAD для веб-сторінок сайту. Найпростіші рекомендації полягали в заміні виклику стандартних функцій, наприклад, bloginfo ( 'charset') на конкретні значення charset = UTF-8. Однак пізніше виявилося, що виграш продуктивності в ході цих процесів у порівнянні з тим же Lazy Load плагінами не так уже й великий. Справа в тому, що всі основні значення в HEAD WordPress зчитує з бази всього за одне звернення до неї. Сьогоднішні підказки щодо поліпшення вордпресс header будуть куди більш корисними і ефективними.

Давайте уважно подивимося на вихідний код в HEAD звичайної сторінки / поста. І паралельно порівняємо його з файлом header.php в WordPress шаблоні. Очевидно, що крім парочки параметрів, виклику Javascript скриптів і CSS результуючий HTML містить багато інших додаткових рядків. Вони автоматично генеруються в процесі використання різних плагінів на вашому сайті. Іноді фінальний код виходить ну дуже великим.

Безумовно, багато хто з цих функцій життєво необхідні для коректної роботи модулів, проте є й такі, від яких можна позбутися. Найпростіший приклад - використання бібліотеки jQuery. Деякі плагіни, як і сама система, вставляють код її виклику в wordpress header. Як наслідок, у вас може довантажити кілька дублюючих скриптів, ще й не з найактуальнішою версією.

Другий приклад добре проглядається для плагіна WP-PageNavi (розбиття блогу на сторінки). В ході роботи модуль розміщує свій CSS в шапку сайту, хоча більш ефективно буде перенести всі стилі в базовий style.css. Причому позбутися від коду модуля так просто не вийде, допоможе лише його деактивація (що зрозуміло, не варіант). Можливо, після версії 2.5.0 творці внесли деякі зміни в код, але раніше все працювало саме так.

Базова оптимізація wordpress header

Більшість «додаткових вставок» блоку HEAD реалізується системою за допомогою хуков для wp_head. Якщо подивіться код файлу header.php в wordpress шаблоні, то напевно знайдете її там. Просто прибрати виклик функції не вийде, так як в результаті замерзання не тільки «непотрібні вставки», а й важливий код, без якого сайт працювати не буде.

На щастя, ви можете безболісно деактивувати деякі наслідки виклику wp_head. Позбутися від зайвих елементів, які не плануєте використовувати, і провести оптимізацію wordpress коду можна за допомогою хаков для functions.php. Відкриваєте файл функцій і пишіть туди наступний код:

remove_action ( 'wp_head', 'feed_links_extra', 3); // прибирає посилання на rss категорій remove_action ( 'wp_head', 'feed_links', 2); // мінус посилання на основний rss і коментарі remove_action ( 'wp_head', 'rsd_link'); // сервіс Really Simple Discovery remove_action ( 'wp_head', 'wlwmanifest_link'); // Windows Live Writer remove_action ( 'wp_head', 'wp_generator'); // приховати версію wordpress

Також можна приховати різні лінки при відображенні постів блогу (наступний, попередній, короткий url).

remove_action ( 'wp_head', 'start_post_rel_link', 10,0); remove_action ( 'wp_head', 'index_rel_link'); remove_action ( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0); remove_action ( 'wp_head', 'wp_shortlink_wp_head', 10, 0);

Видалення JSON API посилань:

remove_action ( 'wp_head', 'rest_output_link_wp_head'); remove_action ( 'wp_head', 'wp_oembed_add_discovery_links'); remove_action ( 'template_redirect', 'rest_output_link_header', 11, 0);

Як я вже говорив вище про jQuery, в коді сторінки бібліотека може викликатися кілька разів (спільно з іншими модулями) + версія використовується не найактуальніша. Прибрати скрипт з вордпресс header через remove_action не вийде, але є інший метод. У блозі знайдете докладну статтю про оновлення і підключення jQuery в WordPress, а якщо говорити коротко, то щоб прибрати виклик скрипта потрібен такий код:

if (! is_admin ()) {wp_deregister_script ( 'jquery'); }

В даному випадку хак спрацьовує тільки для самого сайту (фронтендів), не впливаючи на адмінку. Якщо викликати функцію wp_deregister_script без умови IF, то в панелі управління WP перестануть працювати різні випадають меню і деякі інші опції. Теоретично, можна було б помістити код wp_deregister_script в header.php замість functions.php, і тоді він «не зачепить» бекенда. Але краще використовувати вараінт, вказаний вище.

Наостанок ще 2 фішки. Нещодавно я публікував статтю про вимикання Emoji . Коротку версію коду знайдете нижче, хоча особисто у мене спрацювала тільки розширена, описана в пості.

remove_action ( 'wp_head', 'print_emoji_detection_script', 7); remove_action ( 'wp_print_styles', 'print_emoji_styles');

Також в блозі публікував огляд модуля Disable що дозволяє прибрати Self Pingback і деякі інші дані з в wp head в wordpress. Можна поєднувати його з Хакамі через functions.php - так надійніше, плагін відключає не всі.

Прибираємо зайвий код плагінів і теми

Крім самої системи код в блок HEAD додають різні модулі. Іноді відключення даної фішки знаходиться в налаштуваннях плагінів, але на жаль, частіше за все розробники не передбачають подібну гнучкість для своїх рішень. Тому щоб змінити wordpress header можна спробувати якийсь алгоритм.

По-перше, ви повинні уважно подивитися основний php файл того плагіна, хукі якого збираєтеся деактивувати. Там повинна зустрічатися конструкція по типу:

add_action ( 'wp_head', 'plugin_function_here');

Знайшли? - добре. Тепер щоб позбутися від виклику функції додаємо в файл functions.php наступний рядок:

remove_action ( 'wp_head', 'plugin_function_here');

Зберігаєте і дивіться що вийшло. Нижче зібрав кілька прикладів хаков для різних модулів. Можливо, дещо стане в нагоді.

WP-Syntax

Фукция нижче дозволяє прибрати підключення стилів для підсвічування синтаксису програмного коду в тексті. Саме вміст файлу wp-syntax.css невелике, тому можна просто додати в стандартний style.css.

remove_action ( 'wp_head', 'wp_syntax_head');

qTranslate-X

Модуль додає в wordpress header інформацію про версії, яку можна приховати.

remove_action ( 'wp_head', 'qtranxf_wp_head_meta_generator');

Contact Form 7

Для Contact Form 7 рішення трохи складніше. Логічно, що виклик плагіна не потрібен на сторінках, де цієї самої форми немає. Він лише створює додаткове навантаження. Виправляємо ситуацію і проведемо оптимізацію wordpress коду за допомогою наступних рядків:

// Deregister Contact Form 7 styles add_action ( 'wp_print_styles', 'aa_deregister_styles', 100); function aa_deregister_styles () {if (! is_page (get_theme_mod ( "header_contacts"))) {wp_deregister_style ( 'contact-form-7'); }} // 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 (get_theme_mod ( "header_contacts"))) {wp_deregister_script ( 'contact-form-7'); }}

WP-PageNavi

Бувають унікальні випадки, коли використання remove_action для wp_head не спрацьовує. Так, наприклад, з тим же WP-PageNavi (версії 2.5.0), де немає явного виклику функцій в wp_head, але плагін все одно вантажить свій файл стилів. Якщо уважно розглянути вихідний код wp-pagenavi.php, то знайдете там якусь функцію «Enqueue PageNavi Stylesheets», яка додає стилі через add_action. Відповідно щоб припинити цей виклик розміщуємо в файлі функцій fuctions.php рядок:

remove_action ( 'wp_print_styles', 'pagenavi_stylesheets');

Yet Another Related Posts Plugin

стилі плагіна схожих постів YARPP можна включити в style.css, прибравши завантаження декількох зайвих файлів. Хак позбавляється від коду модуля в header і footer: ліквідуються файли стилів widget.css, related.css і yarpp-thumbnails-yarpp-thumbnail.

add_action ( 'wp_print_styles', 'tj_deregister_yarpp_header_styles'); function tj_deregister_yarpp_header_styles () {wp_dequeue_style ( 'yarppWidgetCss'); // Наступний рядок потрібна, якщо related.css вантажиться в header, а в футере відключений wp_deregister_style ( 'yarppRelatedCss'); } Add_action ( 'wp_footer', 'tj_deregister_yarpp_footer_styles'); function tj_deregister_yarpp_footer_styles () {wp_dequeue_style ( 'yarppRelatedCss'); wp_dequeue_style ( 'yarpp-thumbnails-yarpp-thumbnail'); }

Для шаблонів / тем

Якщо вам потрібно прибрати зайві стилі або скрипти з теми, то можете скористатися функціями wp_dequeue_style і wp_deregister_script. Нижче наводжу приклад коду, який мені допоміг вирішити відповідну задачу. Назви скриптів знайшов в підсумковому HTML і різних файлах шаблону.

add_action ( 'wp_enqueue_scripts', 'remove_some_stylesheet', 20); function remove_some_stylesheet () {wp_dequeue_style ( 'flexslider'); wp_dequeue_style ( 'owl-carousel'); wp_dequeue_style ( 'owl-theme'); wp_dequeue_style ( 'font-awesome'); wp_dequeue_style ( 'wp-pagenavi'); wp_deregister_script ( 'flexslider'); wp_deregister_script ( 'googlemapapis'); wp_deregister_script ( 'easing'); wp_deregister_script ( 'jflickrfeed'); wp_deregister_script ( 'playlist'); wp_deregister_script ( 'jplayer'); }

Загалом, ви повинні були помітити якийсь глобальний принцип роботи з «непотрібними викликами» для wp_head - знаходите відповідну функцію плагіна / теми, а потім її відключаєте. За допомогою різних хаков в fuctions.php зможете змінити вордпресс header щоб: 1) позбутися зайвої функціональності; 2) прибрати дублюючі рядки і оптимізувати код wordpress сайту. Якщо ви знаєте ще якісь додаткові хакі або у вас є зауваження по поточним, пишіть в коментарях.