Меню

Настройка хедера в wordpress

Хедер и фон сайта WordPress – как правильно настроить

Но мы все же сегодня обсудим очередную опцию Внешнего вида – Заголовок (Хедер) и фон. В современной версии wordpress, все настройки блога осуществляются через дополнительную опцию Настройки. Поэтому если появляется необходимость работы с заголовком сайта – надо выходить именно через нее

Функции этих настроек очень зависят от настроек самого шаблона. Если шаблон предоставляет множество функций, то и возможности работы с хедером увеличиваются. Не забудьте так же о том, что современные шаблоны предоставляют, так называемые генеральные настройки, которые так же отображаются в разделе – Внешний вид.

Если посмотреть на предыдущий скриншот, то можно увидеть функцию Hestia Options. Это есть выход на основные настройки. Туда надо зайти обязательно. Так как там, возможно, будут предложены дополнительные настройки шаблона, а так же дополнительные плагины. Которые помогут расширить функции темы.

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

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

Итак, заходим в настройки. Не ориентируйтесь именно на такие настройки, которые будут показаны на скринах статьи. Так как, еще раз повторюсь, каждый шаблон имеет собственные, отличные от любого другого. А так как показаны настройки Hestia, то они естественно будут отличаться от настроек вашего шаблона.

Если рядом с опцией заголовка стоит стрелочка – значит есть расширенные настройки. Зайдем в них.

В Hestia их три:

Самая верхняя панель

Это дополнительная панель меню, в которой можно установить любой виджет или созданное меню. Для его установки достаточно убрать галочку из чек бокса – Отключить раздел.

Для полноценной работы с настройками – просто очень внимательно читайте все обозначения. Сейчас WP перевел всю консоль на русский язык, поэтому все очень понятно и доступно.

Навигация

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

Настройки шапки

В этой опции как раз и есть конкретные настройки самого хедера. Первое, что можно сделать – выбрать отображение формата хедера.

А так же именно здесь вы увидите размеры самого хедера. Можно создать уникальное изображение и именно в этой опции его загрузить. Справа, на рабочем поле вы сразу увидите все настройки.

Публикация хедера

Хочу обратить ваше внимание на то, что публикацию хедера можно отложить. Достаточно просто нажать на шестеренку рядом со словом Опубликовать

У Вас появляется возможность:

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


Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях

Читайте также:  Tp link 3220 настройка 3g мтс

Источник

Оптимизируем WordPress header и удаляем лишний код

Если вы интересовались вопросом оптимизации 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, а если говорить вкратце, то чтобы убрать вызов скрипта нужен такой код:

Читайте также:  Ukrpost настройка the bat

В данном случае хак срабатывает только для самого сайта (фронтэнда), не влияя на админку. Если вызывать функцию 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 файл того плагина, хуки которого собираетесь деактивировать. Там должна встречаться конструкция по типу:

Нашли? — хорошо. Теперь дабы избавиться от вызова функции добавляем в файл functions.php следующую строку:

Сохраняете и смотрите что получилось. Ниже собрал несколько примеров хаков для разных модулей. Возможно, кое-что пригодится.

WP-Syntax

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

qTranslate-X

Модуль добавляет в wordpress header информацию о версии, которую можно скрыть.

Contact Form 7

Для Contact Form 7 решение чуть более сложное. Логично, что вызов плагина не нужен на страницах, где этой самой формы нет. Он лишь создает дополнительную нагрузку. Исправляем ситуацию и проведем оптимизацию wordpress кода с помощью следующих строк:

WP-PageNavi

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

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 и wp_deregister_script. Ниже привожу пример кода, который мне помог решить соответствующую задачу. Названия скриптов нашел в итоговом HTML и разных файлах шаблона.

Читайте также:  Андроид программа для настройки спутникового тв

add_action( ‘wp_enqueue_scripts’, ‘remove_some_stylesheet’, 20 ); function remove_some_stylesheet()

Источник

Как добавить пользовательский JavaScript на WordPress-сайт

Существует несколько способов добавления пользовательского JavaScript в WordPress. В этом руководстве мы рассмотрим каждый из них.

Добавление пользовательского JavaScript на WordPress

Чтобы добавить собственный JavaScript-код на WordPress- сайт, нужно использовать:

Чего не нужно делать

Самый простой способ добавить пользовательский скрипт в WordPress – это использовать тег

1. Использование плагина для добавления пользовательского JavaScript-кода

Использование плагина рекомендуется, если:

1.1. Плагины для редактирования header.php и footer.php

Первый вариант – использование плагина для редактирования шаблонов header.php и footer.php темы оформления WordPress. Если нужно добавить скрипты, которые загружаются до содержимого страницы, необходимо отредактировать шаблон шапки. Скрипты, которые загружаются после содержимого веб-страницы, добавляются в шаблон футера.

Плагин Insert Headers and Footers позволяет редактировать шаблоны хедера и футера. Он добавляет скрипты к хукам действий wp_head или wp_footer соответственно.

1.2. Плагины для добавления пользовательского JavaScript

1.3. Скрипты, специфичные для плагинов

Создатели популярных JavaScript-библиотек часто публикуют бесплатные плагины в репозитории WordPress.org для добавления своих скриптов. Подобные плагины поставляется со встроенными параметрами конфигурации для конкретной JavaScript-библиотеки.

Например, плагин GA Google Analytics позволяет интегрировать Google Analytics на сайт прямо из панели администрирования WordPress. Он поставляется со встроенными функциями, специфичными для скрипта Google Analytics.

2. Редактирование файла functions.php дочерней темы оформления

Также можно использовать встроенные в WordPress функции и хуки действий. В этом случае необходимо отредактировать файл functions.php и вручную загрузить скрипт на используемый сервер. Также желательно создать дочернюю тему оформления для сохранения ваших настроек.

Затем добавьте PHP-код, который ставит в очередь или выводит пользовательский JavaScript-код, в functions.php дочерней темы оформления. Это можно сделать через меню Внешний вид> Редактор тем в панели администрирования WordPress.

2.1. Добавление собственных скриптов в очередь с помощью функции wp_enqueue_script()

С помощью wp_enqueue_script() можно добавить собственный JavaScript в шаблоны хедера и футера. По умолчанию функция размещает скрипты в раздел страницы.

Чтобы добавить скрипт в хедер, нужно определить собственный дескриптор (‘custom’ в примере, приведенном ниже) и путь к скрипту. А также использовать функцию get_stylesheet_directory_uri() для получения URI каталога дочерней темы оформления.

Функция WordPress wp_enqueue_script() и хук действия wp_enqueue_scripts имеют почти одинаковые имена. Но это разные методы.

Функцию wp_enqueue_script() можно использовать для добавления пользовательского JavaScript-кода в шаблон футера. Для этого потребуется определить дополнительные параметры:

Для добавления зависимости, которая не зарегистрирована в WordPress, нужно использовать собственный дескриптор. Но перед этим необходимо зарегистрировать его и поставить зависимость в очередь с помощью функции wp_enqueue_script().

2.2. Вывод встроенного скрипта с помощью хуков действий wp_head и wp_footer

Пример использования хука wp_head для вывода скрипта в шаблоне хедера:

Пример использования wp_footer для вывода скрипт в шаблоне футера:

Скрипты, добавленные с помощью этих хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования WordPress, необходимо использовать хуки действия admin_head и admin_footer в функции add_action().

Заключение

Использование плагина для добавления пользовательского JavaScript является рекомендуемым методом. Эти плагины гарантируют, что скрипты будут загружаться в правильном порядке.

Источник