Как редактировать header вордпресс
Файл темы header.php тонкости настройки
Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.
Что такое хедер сайта?
Прямой перевод – «шапка». Находится в верхней части, может быть оформлена по общему стилю или индивидуально. Основные элементы:
Используя правильную компоновку навигационных элементов, привлекательный дизайн и краткую информацию о деятельности сайта, можно значительно улучшить поведенческие факторы, включая первое впечатление посетителей. Header.php находится в корневой директории выбранного шаблона.
Содержимое header WordPress
Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.
Кодовая часть
Необходимо добавить следующие строки в верхнюю часть functions.php:
| define(“THEME_DIR”, get_template_directory_uri()); /*— REMOVE GENERATOR META TAG —*/ remove_action(‘wp_head’, ‘wp_generator’); // ENQUEUE STYLES function enqueue_styles() < wp_enqueue_style( ‘screen-style’ ); /** REGISTER HTML5 Shim **/ wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false ); /** REGISTER HTML5 OtherScript.js **/ wp_enqueue_script( ‘custom-script’ ); |
В header.php следует прописать код:
Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:
Важно: В сети можно встретить рекомендации добавлять комментарии к строкам, ведь – это сократит время поиска нужных кодов. На самом деле, с точки зрения поисковой эффективности – это мусор на который можно сократить страницу. Мы рекомендуем не злоупотреблять комментариями и прибегать к ним в крайних случаях.
Работа с function.php
Указанный ранее код уже помещен в функциональный файл. Некоторые элементы позволяют нам сократить затраты ресурсов сервера на обработку запросов путем создания константы THEME_DIR. Это изложено в первой строке, где сохраняется директория шаблона. Является важным элементом оптимизации темы. Некоторые вебмастера идут сложным путем, вызывая повторные запросы через «get_template_directory_uri()».
Следующая строка избавляет от генератора метатегов, который демонстрирует текущую версию шаблона пользователям (включая злоумышленников).
| /*— REMOVE GENERATOR META TAG —*/; remove_action(‘wp_head’, ‘wp_generator’); |
Добавление CSS
Теперь необходимо добавить тег link в header.php – для этого создается функция:
| // ENQUEUE STYLES; function enqueue_styles() < wp_enqueue_style( ‘screen-style’ ); |
Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:
Содержит внутри строки:
Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:
Далее, вызывается «wp_enqueue_style» и передается имя стиля, который будет применен. Для добавления нескольких образцов в header WordPress можно повторно копировать строки, а также изменять имеющиеся параметры.
Добавление скриптов
Применяя данный код происходит добавление скриптов:
| // ENQUEUE SCRIPTS; function enqueue_scripts() < /** REGISTER HTML5 Shim **/ wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false ); wp_enqueue_script( ‘html5-shim’ ); wp_enqueue_script( ‘custom-script’ ); |
Процесс аналогичен подключению стилей, но используются другие функции («wp_register_script» и «wp_enqueue_script»). Для первой необходимы схожие параметры, как для «wp_register_style» – отличается лишь 5 пункт, в котором определяется, будет ли добавлен вызов через «wp_head» (значение fals) или «wp_footer» (значение true).
Через «wp_enqueue_script» указывается имя скрипта для интеграции. Для большего количества образцов необходимо повторно скопировать код, изменить параметры, имя и директорию.
Header WordPress
Стандартный файл содержит набор тегов и функций, используемых по умолчанию. Рассмотрим их особенности и функционал.
Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).
Добавление метатегов в хедер является важной операцией, поскольку браузеру передается важная информация для правильного отображения темы.
Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:
Указание кодировки для правильного отображения шрифтов:
Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):
Добавление favicon для сайта:
Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:
Список стандартных и наиболее применяемых функций:
Заключение
Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.
Хедер и фон сайта WordPress – как правильно настроить
Но мы все же сегодня обсудим очередную опцию Внешнего вида – Заголовок (Хедер) и фон. В современной версии wordpress, все настройки блога осуществляются через дополнительную опцию Настройки. Поэтому если появляется необходимость работы с заголовком сайта – надо выходить именно через нее
Функции этих настроек очень зависят от настроек самого шаблона. Если шаблон предоставляет множество функций, то и возможности работы с хедером увеличиваются. Не забудьте так же о том, что современные шаблоны предоставляют, так называемые генеральные настройки, которые так же отображаются в разделе – Внешний вид.
Если посмотреть на предыдущий скриншот, то можно увидеть функцию Hestia Options. Это есть выход на основные настройки. Туда надо зайти обязательно. Так как там, возможно, будут предложены дополнительные настройки шаблона, а так же дополнительные плагины. Которые помогут расширить функции темы.
Еще надо заметить, что после активации темы можно сразу определить, есть ли настройки хедера и фона в установленном шаблоне. Если эти функции отображаются в опции Внешний вид, то настроить вы их сможете. Если же их просто нет – то уже и настраивать нечего.
Но, возможно разработчики шаблона предложат вам купить платную его версию. И вот там уже обязательно будут предоставлены дополнительные возможности. Надо сказать. что в библиотеке шаблонов WordPress достаточно бесплатных тем с настройками хедера. Просто поищите повнимательней.
Итак, заходим в настройки. Не ориентируйтесь именно на такие настройки, которые будут показаны на скринах статьи. Так как, еще раз повторюсь, каждый шаблон имеет собственные, отличные от любого другого. А так как показаны настройки Hestia, то они естественно будут отличаться от настроек вашего шаблона.
Если рядом с опцией заголовка стоит стрелочка – значит есть расширенные настройки. Зайдем в них.
В Hestia их три:
Самая верхняя панель
Это дополнительная панель меню, в которой можно установить любой виджет или созданное меню. Для его установки достаточно убрать галочку из чек бокса – Отключить раздел.
Для полноценной работы с настройками – просто очень внимательно читайте все обозначения. Сейчас WP перевел всю консоль на русский язык, поэтому все очень понятно и доступно.
Навигация
В этом разделе можно выбрать формат шапки, добавить в нее виджет и включить поиск в меню. Все очень удобно. Даже есть выход на настройки виджетов.
Настройки шапки
В этой опции как раз и есть конкретные настройки самого хедера. Первое, что можно сделать – выбрать отображение формата хедера.
А так же именно здесь вы увидите размеры самого хедера. Можно создать уникальное изображение и именно в этой опции его загрузить. Справа, на рабочем поле вы сразу увидите все настройки.
Публикация хедера
Хочу обратить ваше внимание на то, что публикацию хедера можно отложить. Достаточно просто нажать на шестеренку рядом со словом Опубликовать
У Вас появляется возможность:
Ну вот пожалуй и все. А сейчас посмотрите видео, где показано несколько вариантов шаблонов с различными настройками.
Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога
Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях 
Произвольная шапка в теме WordPress.
Какие именно параметры? Изображение шапки, цвет текста, а также её ширина и высота. Я считаю, что на своем сайте делать такое смысла нет — гораздо проще зайти в код и поменять там то, что нужно. Однако для клиентов такой функционал может оказаться полезным.
Сама эта возможность WordPress появилась в версии 2.1, я не стану рассматривать, как это работало в старых версиях, а лучше расскажу, как это используется сейчас.
Вот как это выглядит на примере стандартной темы TwentyTwelve (Внешний вид > Заголовок):
Шаг 1. Функция add_theme_support() — подключаем необходимый функционал в теме WordPress
Начиная с версии WordPress 3.4 мы можем использовать функцию add_theme_support() в файле functions.php для задействования данной возможности движка.
Если же вам понадобится обратиться к этой функции из другого файла темы или из файлов плагина, тогда используйте хук after_setup_theme следующим образом:
На самом деле в качестве второго аргумента функции мы можем также передать массив параметров шапки сайта, которые будут задействованы как параметры по умолчанию.
Шаг 2. Выводим шапку и ее параметры
Используйте функцию header_image() для вывода URL изображения шапки, а функцию get_custom_header() — для получения параметров шапки, например:
Смотрите также
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Как изменить текст в шапке сайта в WordPress
Рано или поздно но абсолютно каждому системному администратору приходиться создавать сайт. Как правило все выбирают CMS WordPress. Во первых это самый популярный движок для сайтов. Во вторых на его основе можно создать что угодна, есть очень много плагинов. В третьих у него есть поддержка. И в четвертых он бесплатный. Устанавливают движок, ищут бесплатную тему и начинают заполнять.
Но для того чтобы сайт не был похож на сотни других. Которые используют такой же бесплатный шаблон. Его нужно сделать немного уникальным. Т.е нужно изменить шаблон, цвет, шрифты, какие то элементы добавить или убрать. Сделать это не очень трудно. Давайте посмотрим как можно изменить текст (цвет, шрифт) в шапке сайта.
Редактируем текст в шаблоне сайта для WordPress
Для примера возьмем мой блог. Мы хотим изменить текст заголовка. Выбрать другой цвет и шрифт.
Для этого нажимаем F12. После чего откроется так называемая панель разработчик. С её помощью мы будем искать нужный нам элемент. В правой части кликаем на «Select an element…» и выделяем на сайте тот элемент который хотим изменить.
После чего в панели будет выделен код который отвечает за отображения нашего заголовка, а также его стили которые в свою очередь отвечают за внешний вид элемиента. Нас интересую именно они, site-title и site-title a.
Дальше переходим в панель администратора WordPress. Справа выбираем пункт «Внешний вид» — «Редактор тем.» В правой части выбираем файл Style.css.
Через поиск ищем классы site-title и site-title a.
Класс site-title.
font-family: отвечает за шрифт.
margin: величина отступов со всех сторон.
font-size: размер шрифта.
line-height: межстрочный интервал.
Класс site-title a.
color: цвет текста.
text-decoration: подчеркивание при наведении на ссылку.
Выбираете понравившийся шрифт копируете и вставляете в файл style.css.
Подбираете цвет и копируете в свой файл.
Сохраняем и смотрим что получилось. Можете изменить другие свойства текста. Размер расположение, добавить тени.
Помните сайт должен быть уникальным и не похожим на другие. Если вы используете бесплатные шаблоны то по возможности изменяйте их.
Оптимизируем 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, а если говорить вкратце, то чтобы убрать вызов скрипта нужен такой код:
В данном случае хак срабатывает только для самого сайта (фронтэнда), не влияя на админку. Если вызывать функцию 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()