Emallshop wordpress theme как настроить 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_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ ); wp_enqueue_style( ‘screen-style’ ); > add_action ( ‘wp_enqueue_scripts’, ‘enqueue_styles’ ); // 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 ); /** REGISTER HTML5 OtherScript.js **/ wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false ); wp_enqueue_script( ‘custom-script’ ); > add_action( ‘wp_enqueue_scripts’, ‘enqueue_scripts’ );

В header.php следует прописать код:

Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:

• doctype; (Тип документа)
• языковые атрибуты (ранее использовались условия для браузеров старых версий, однако современный вариант упускает этот момент);
• список метатегов;
• фавикон, RSS, пингбек;
• заголовок;
• при необходимости функции «wp_enqueue_script» и «wp_enqueue_style».

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

Работа с 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_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ ); wp_enqueue_style( ‘screen-style’ ); > add_action( ‘wp_enqueue_scripts’, ‘enqueue_styles’ );

Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:

• Создание «enqueue_styles».
• Вызов «add_action», если происходит событие «wp_enqueue_scripts».

Содержит внутри строки:

/** REGISTER css/screen.cs **/; wp_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ ); wp_enqueue_style( ‘screen-style’ );

Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:

• Выбор доступного имени.
• Указание пути к файлу (в данной ситуации используется константа THEME_DIR).
• Вписываются условия, необходимые файлы для предварительной загрузки, название стилей.
• используемая версия.
• Медиа-атрибут тега link.

Далее, вызывается «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’ ); div> /** REGISTER HTML5 OtherScript.js **/ wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false ); wp_enqueue_script( ‘custom-script’ ); > add_action( ‘wp_enqueue_scripts’, ‘enqueue_scripts’ );

Процесс аналогичен подключению стилей, но используются другие функции («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 для сайта:

/path/favicon.ico”/>

RSS2 Feed” href=” ”/>

Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:

Список стандартных и наиболее применяемых функций:

• wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
• get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).

Заключение

Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.

Источник

Легкий способ изменить шапку сайта на WordPress

Обратно пишу тебе разлюбезный читатель, поскольку выдалась свободная минутка. И одолела меня непреодолимая тяга, поведать о том —

Как легко изменить шапку сайта

Тем паче, обещал я это в прошлой своей статье — Как установить шаблон на WordPress.

Пардоньте, за такой вот сплагиаченный слог приветствия, из фильма «Белое солнце пустыни», не смог удержаться. Надеюсь никто не в обиде.

Сегодня, как уже всем стало понятно, речь пойдет о том, как же можно изменить стандартную шапку блога. Т.е. о том, как вставить новую картинку в верхнюю часть нашего сайта, которая называется Хедер (Header).

Для экспериментов, опять буду использовать клон своего блога, размещенный на локальном сервере.

Итак, поехали.

В первую очередь необходимо зайти в админ панель и немножко изменить код, в двух файлах, которые отвечают за отображение хедера и за стили. Файлы эти называются: header.php и style.css соответственно.

Зачем же, что-то менять? Да еще и в коде. Спросите вы. Отвечаю! Вся беда в том, что функционал шаблона GreenChilli, позволяет вставить картинку размером, всего лишь 286×50 px. Это, как вы понимаете, очень маленький размер, который не совсем соответствует идее блога.

Заходим в админку, переходим к меню «Внешний вид», следом к меню «Редактор» и наблюдаем перед глазами, окно редактора. Ищем справа файл header.php, кнопаем на него, и видим тот самый код, в который сейчас будем вносить изменения. Я выделил кусочек кода, который отвечает за саму картинку в шапке и за вывод формы поиска справа. Как видим этот код заключен между тегами

Использование атрибута id говорит о том, что стилевой идентификатор, в данном случае header, должен быть в единственном экземпляре. Это я так решил поумничать.

Внешний вид идентификатора header, т.е. нашей шапки, заключенного в теги

Код, который отвечает за вывод формы поиска, мы трогать не будем, а вот все остальное безжалостно удалим. Так же необходимо удалить скобочку вот здесь ? Покажите её друзьям:

Источник

Настройки темы. Theme Customizer API

Содержание

Есть два варианта добавления настроек для темы WordPress – добавить новую страницу настроек в админку сайта, либо использовать кастомайзер. Я замечаю, что все классные и свежие темы используют именно второй вариант.

И я думаю, что если это касается именно оформления темы, то этот вариант 100% правильный, а создание страниц настроек в админке – это история больше про плагины WordPress, чем про темы.

Что в видеоуроке?

В этом видеоуроке мы с вами добавим в нашу тему немного настроек, а именно – настройку фиксированной/нефиксированной шапки и позволим пользователям изменять текст в футере сайта.

Кроме того, научу вас делать несколько уровней вложенностей панелей.

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

Чтобы подробнее понять, как всё это будет выглядеть и работать – посмотрите это видео:

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

Как работают опции темы через Theme Customizer API?

Как вы уже поняли из видео чуть выше, Theme Customizer позволяет настраивать тему и сразу же наблюдать все сделанные изменения на страницах сайта.

Если вы занимаетесь созданием качественных тем или же делаете превосходные сайты для клиентов, то предоставление возможности настройки темы через Theme Customizer, на мой взгляд, самый оптимальный и крутой вариант.

Теперь давайте пошагово на примерах рассмотрим, как работать с Theme Customizer и как использовать его в своих проектах.

Шаг 1. Добавление панелей, секций и полей

Всё начинается с использования экшн-хука customize_register , именно в него мы будем добавлять все поля настроек и секции для них.

• Так как мы разрабатываем свою тему, то код в основном можете вставлять в functions.php внутри вашей темы. Если вопрос с местом вставки кода для вас до сих пор не открыт, то рекомендую почитать этот урок.
• Чуть ниже читайте документацию про add_panel(), add_section(), add_setting() и add_control().
• Также для панелей, секций и полей есть ещё и методы remove_panel() , get_panel() и так для каждого.

Подробнее рассматриваем этот шаг в видеоуроке.

Шаг 2. Очистка полей и валидация

Этот шаг нужен для защиты от дурака – чтобы ваш пользователь не вводил в полях то, что не нужно вводить. Очистка состоит из двух шагов (или даже одного).

Сначала мы указываем при регистрации настройки функцию для очистки в параметре sanitize_callback .

А потом создаём эту функцию:

И функцию для валидации:

Что касается вали

Подробнее рассматриваем этот шаг в видеоуроке.

Шаг 3. Вывод настроек на сайте

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

Для получения настроек из базы данных мы можем воспользоваться одной из двух нижеперечисленных функций:

• get_theme_mod() – функция получает настройки непосредственно для текущей темы. Опции одной темы будут недоступны, если вы активируете другую тему! По умолчанию кастомайзер записывает опции именно сюда. Идеально подойдёт для визуальных настроек темы например.
• get_option() – функция получает настройки глобально для всего сайта. Если вы хотите, чтобы ваша опция кастомайзер сохранялась именно туда, то в методе $wp_customizer->add_setting() вам нужно указать параметр type равным option .

Пример добавления класса для хедера:

Это означает, что по умолчанию хедер фиксированный (имеет класс fixed ), но если мы отключаем чекбокс в кастомайзере, то хедер становится обычным (класс fixed исчезает).

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

Подробнее рассматриваем этот шаг в видеоуроке.

Шаг 4. Просмотр в кастомайзере без перезагрузки страницы

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

Для этого нужно сделать несколько мини-шагов в шаге 3.

Сначала нужно убедиться, что у метода $wp_customize->add_setting() параметр transport стоит в значении postMessage .

Круто, теперь нам нужно подключить дополнительный файл .js , например true-customizer.js , при помощи хука customize_preview_init .

Класс, последним шагов нам нужно забиндить переключение настройки на изменение внешнего вида сайта. Например шапка у нас фиксируется добавлением всего лишь одного CSS-класса, тогда:

Подробнее рассматриваем этот шаг в видеоуроке.

Методы

Для того, чтобы урок слишком не затянулся, разберу только методы добавления панелей/секций/полей. Не стану рассматривать методы получения и удаления remove_panel() , get_panel() , которые в общем-то работают довольно интуитивно. И редко могут пригодиться.

$wp_customize->add_panel()

Прежде всего задайте себе вопрос – нужно ли вам несколько уровней вложенностей панелей или нет? Если вы хотите довольствоваться одним уровнем, то возможно вам сразу нужно перейти к документации метода $wp_customize->add_section().

Таблица со стандартными приоритетами панелей:

Название	ID	Приоритет
Свойства сайта	title_tagline	20
Цвета	colors	40
Заголовок	header_image	60
Фон	background_image	80
Меню (Панель)	nav_menus	100
Виджеты (Панель)	widgets	110
Настройки главной страницы	static_front_page	120
По умолчанию	160
Дополнительные стили	custom_css	200

$wp_customize->add_section()

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

$wp_customize->add_setting()

Сам этот метод не добавляет поле настроек, для этого нужен $wp_customize->add_control(), а $wp_customize->add_setting() именно регистрирует настройку и задаёт правила для неё.

Подробно рассматриваем параметры очистки и валидации на видео!

$wp_customize->add_control()

Ура! Вот мы наконец-то и добрались до самих полей.

Источник