Файл header php что это и где находится
тогда все файлы header.php находятся по следующим адресам:
C:\WordPress 3.9.1 RU\wp-admin\admin-header.php
C:\WordPress 3.9.1 RU\wp-admin\custom-header.php
C:\WordPress 3.9.1 RU\wp-content\themes\twentyfourteen\inc\custom-header.php
C:\WordPress 3.9.1 RU\wp-content\themes\twentythirteen\inc\custom-header.php
C:\WordPress 3.9.1 RU\wp-content\themes\twentytwelve\inc\custom-header.php
C:\WordPress 3.9.1 RU\wp-content\themes\twentyfourteen\header.php
C:\WordPress 3.9.1 RU\wp-content\themes\twentythirteen\header.php
C:\WordPress 3.9.1 RU\wp-content\themes\twentytwelve\header.php
C:\WordPress 3.9.1 RU\wp-includes\theme-compat\header.php
C:\WordPress 3.9.1 RU\wp-admin\menu-header.php
C:\WordPress 3.9.1 RU\wp-blog-header.php
Выбирайте тот, который вам нужен.
Если мы говорим об удалённом сервере, то путь к искомым файлам будет следующий (корневой директорий может быть отличный от www, например public_html):
Вставить код в раздел head на WordPress – темы, плагины и php функции
Большинство скриптов и систем аналитики требуют чтобы подключение к серверам происходило в шапке сайта, где располагается вся служебная информация. Чтобы добавить код в head WordPress не нужно придумывать сложных схем, стоит применить некоторые методы, описанные в статье.
Не путайте head и header, второй это тег семантической разметки сайта, который отображается и показывает, что здесь находится шапка сайта.
Файлы темы оформления
Любой WordPress сайт (а правильней говорить тема, потому как сайт будет работать при активации одной из установленных тем) на самом деле является набором файлов. Где-то там на стороне вашего хостинг-провайдера эти файлы обрабатываются серверами, и вам на монитор возвращается готовый результат — собственно сайт. То, что вы видите, когда заходите по адресу через веб-браузер.
В случае с WordPress этот набор файлов будет отличаться в каждой теме по-своему. Но есть одна общая черта: этот набор состоит из файлов с расширением .php, .css и .js (сам WordPress целиком написан на языке PHP, так что .php файлы — основная часть любой темы оформления).
В каждой теме оформления должен присутствовать минимальный набор файлов для корректной работы в среде движка WordPress. Вы можете открыть папку со своей активной темой ( корень_сайтаwp-contentthemesваша_тема) и, скорее всего, вы найдете там все эти файлы:
Далее мы поговорим об этих файлах подробнее.
Шаг 3. Использование кеширования браузера
С использованием кеширования мы даем браузеру полную инструкцию по работе с определенными файлами на определенный период времени. Когда файл нужен снова, браузер достает его из своего локального кеша вместо того, чтобы снова запрашивать его с сервера.
Работа сайта без кеширования имеет столько же смысла, сколько езда в магазин на стаканом воды каждый раз, когда испытываешь жажду. Не только непрактично и недальновидно, но и требует много усилий!
Кеширование браузера действительно удобно для того, чтобы получить пользователей, которые возвращаются, то есть это может создать лояльных постоянных посетителей, что также сэкономит много трафика.
Для серверов с Apache
Apache задействует модули mod_expires и mod_headers.
Добавьте эти правила в .htaccess для установки заголовков Expires:
.htaccess правила для установки заголовка Cache-control:
Обратите внимание :
- Нет нужды устанавливать директиву max-age с помощью заголовка Cache-Control, поскольку она уже установлена с помощью модуля mod_expires.
- must-revalidate значит, что как только ответ устаревает, его нужно перепроверить; это не значит, что он будет проверяться каждый раз.
С помощью .htaccess
Для серверов с Apache
mod_pagespeed – это модуль Apache, разработанный Google, он может быть использован как другие модули.
Сейчас только GoDaddy и DreamHost поддерживают модуль mod_pagespeed, так что если вы размещаетесь у них, просто скопируйте и вставьте следующий код в ваш файл .htaccess:
Многие из вас хостятся у других хостинг-провайдеров, которые не поддерживают модуль mod_pagespeed.
Вы можете использовать модуль mod_deflate (Apache 1.3x использовал mod_gzip, но, начиная с Apache 2x, используется mod_deflate).
Применяем плагин ClearfyPRO
Любимый ClearfyPRO умеет все, также прописывать html и другие виды спецификации в head блога.
Есть переключатель можно на время отключить отображение, чтобы не приходилось стирать и заново загружать код. Аналогично можно удалить стили recentcomments. Полезно узнать что ClearfyPRO оптимизирует, ускоряет и улучшает seo в WordPress дополнительно по 49 требованиям. Для читателей WPCourses делаем скидку на покупку.
Обобщенная структура WordPress темы
Темы с возможностью добавлять код html в head
Встроенное дополнение.
Видим текстовую область, вставляете туда необходимый скрипт или мета информацию, и обновления уже не страшны. Посмотрите повнимательнее, проверьте все вкладки, скорее всего такая возможность для контента есть.
Если не нашли таких настроек, то переходим к другим методам, чтобы добавить код в раздел в хеад.
Подробнее о файлах и коде
На изображении выше вы видите, что за каждую область сайта отвечает определенный файл в папке темы оформления. Вы видите 4 области, которым соответствуют 4 файла, но на самом деле файлов больше. Я опишу только самые важные файлы темы.
2. Сторонние программы для правки кода
- Плюсы: очевидны, удобная разметка и подсветка синтаксиса. Например в Notepad++, нажимая на любой тег, подсвечивается и его закрывающийся тег-собрат. Это очень удобно.
- Минусы: это все же отдельные программы, с которыми вам придется самому разобраться. Некоторые программы бесплатные, а некоторые платные.
Что такое хедер сайта?
Прямой перевод – «шапка». Находится в верхней части, может быть оформлена по общему стилю или индивидуально. Основные элементы:
- название;
- слоган;
- логотип компании;
- контактные данные;
- навигация
Используя правильную компоновку навигационных элементов, привлекательный дизайн и краткую информацию о деятельности сайта, можно значительно улучшить поведенческие факторы, включая первое впечатление посетителей. Header.php находится в корневой директории выбранного шаблона.
Содержимое header WordPress
Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.
Кодовая часть
Необходимо добавить следующие строки в верхнюю часть functions.php:
/** REGISTER HTML5 Shim **/
/** REGISTER HTML5 OtherScript.js **/
В header.php следует прописать код:
Подробно рассмотрев пример, указанный выше, разделим его на несколько важных элементов, обязательных в файле:
- doctype; (Тип документа)
- языковые атрибуты (ранее использовались условия для браузеров старых версий, однако современный вариант упускает этот момент);
- список метатегов;
- фавикон, RSS, пингбек;
- заголовок;
- при необходимости функции «wp_enqueue_script» и «wp_enqueue_style».
Работа с function.php
Указанный ранее код уже помещен в функциональный файл. Некоторые элементы позволяют нам сократить затраты ресурсов сервера на обработку запросов путем создания константы THEME_DIR. Это изложено в первой строке, где сохраняется директория шаблона. Является важным элементом оптимизации темы. Некоторые вебмастера идут сложным путем, вызывая повторные запросы через «get_template_directory_uri()».
Следующая строка избавляет от генератора метатегов, который демонстрирует текущую версию шаблона пользователям (включая злоумышленников).
Добавление CSS
Теперь необходимо добавить тег link в header.php – для этого создается функция:
Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:
- Создание «enqueue_styles».
- Вызов «add_action», если происходит событие «wp_enqueue_scripts».
Содержит внутри строки:
Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:
- Выбор доступного имени.
- Указание пути к файлу (в данной ситуации используется константа THEME_DIR).
- Вписываются условия, необходимые файлы для предварительной загрузки, название стилей.
- используемая версия.
- Медиа-атрибут тега link.
Далее, вызывается «wp_enqueue_style» и передается имя стиля, который будет применен. Для добавления нескольких образцов в header WordPress можно повторно копировать строки, а также изменять имеющиеся параметры.
Добавление скриптов
Применяя данный код происходит добавление скриптов:
/** REGISTER HTML5 Shim **/
Процесс аналогичен подключению стилей, но используются другие функции («wp_register_script» и «wp_enqueue_script»). Для первой необходимы схожие параметры, как для «wp_register_style» – отличается лишь 5 пункт, в котором определяется, будет ли добавлен вызов через «wp_head» (значение fals) или «wp_footer» (значение true).
Через «wp_enqueue_script» указывается имя скрипта для интеграции. Для большего количества образцов необходимо повторно скопировать код, изменить параметры, имя и директорию.
Шаг 2. Отключение ETags
ETags (Entity Tags – теги объектов) — это механизм, который веб-серверы и браузеры используют для определения, совпадает ли компонент в кеше браузера с оригинальным. ETags были добавлены в качестве механизма для проверки актуальности объектов.
Этот метод является более гибким, чем проверка по дате последнего изменения. ETag — это строка, которая идентифицирует конкретную версию компонента. Единственным ограничением будет то, что строка должна быть взята в кавычки. Основной сервер определяет ETag компонента, используя заголовок ETag.
Чтобы отключить ETags, вставьте это в свой файл .htaccess:
wp_head()
Это очень важная функция, вы обязательно должны вызвать эту функцию! С помощью этой функции WordPress добавляет код из плагинов, JavaScript библиотек и т.д.
В наших уроках мы часто приводим примеры по улучшению и расширению встроенных возможностей WordPress. Часто это просто описание по настройке интересного плагина или виджета, а часто мы приводим в тексте фрагменты кода, который нужно вставить в тот или другой файл темы, чтобы добиться желаемого результата.
Как оказалось, для многих фраза — Вставьте этот код в functions.php — ничего не говорит, поэтому в этом уроке я постараюсь показать максимально упрощенно, что это за код, и как именно его нужно добавлять в файлы вашей темы. Эта заметка скорее для новичков, так что если вы профи в WordPress — ничего нового вы здесь не увидите.
Шаг 1. Введение
В этом файле у нас не только логотип и меню, есть еще также тег head и много других тегов, например: link, script, meta и title.
Я написал пример файла header.php. Я постарался создать максимально полный файл, но не стесняйтесь комментировать это руководство с советами по поводу содержимого.
Помните, что ваша "шапка" – это контент, который отображается на всех страницах вашего сайта. Например, логотип и меню показываются на всех страницах, так что они будут добавлены в header.php.
Если элемент отображается только на конкретной странице, вам нужно еще раз подумать, нужно ли добавлять этот элемент в файл вашей шапки.
Давайте же приступим к работе, я надеюсь, вам понравится!
Плагин для вставки кода Head & Footer Code
Точечным решением для вордпресс является Head & Footer Code , устанавливается стандартно – поиском из админки или загрузкой архива.
- Поле активации в одноименный пункт в Инструментах.
- Находим область HEAD Code.
- Помещаем требуемый код.
- Выставляем приоритет – не всегда срабатывает, но он определяет выше или ниже будет располагаться конфигурация, прописанная выше, между открывающим и закрывающим тегами.
- Внизу нажимаем обновить.
Зачем нужен блок в коде страницы?
Это контейнер для метаданных (данные о данных), который помещается между HTML-тегами и . Информация из этого блока не отображается в окне браузера, но помогает ему в обработке страницы. Также помогает поисковым системам в индексации страницы.
Как добавить код в Head WordPress
Разберем простые и рабочие методы.
Плагин Clearfy Pro
Если используете это многофункциональное решение, то устанавливать больше ничего не надо. Код в шапку можно добавить двумя кликами. Для этого просто перейдите в Clearfy Pro и на вкладке Код вставьте свои данные в поле Код в .
После того, как нажмете кнопку Сохранить настройки, плагин добавит ваш код на все страницы сайта.
Плагин Head, Footer and Post Injections
Еще один плагин для вставки кода в шапку и подвал.
Первым делом установите и активируйте дополнение. Затем перейдите в админ-раздел Настройки > Header and Footer, откройте вкладку Head and Footer.
В блок page section injection добавьте свой код и кликните Сохранить.
Правка файлов темы
Работать нужно с файлом header.php, который отвечает за работу верхней части WP-сайта. В каждой теме его содержимое отличается.
На примере покажем работу с темой Twenty Twenty.
Если открыть указанный файл, то нужный блок будет в самом его начале.
Свой код вставьте перед закрывающим тегом .
После сохранения изменений, добавленные строки начнут работать.
Файл functions.php
Для этого в самый конец вставьте код
Строку замените на свой код и сохраните изменения.
Шаг 3. Файл functions.php
Давайте поговорим о файле functions.php, мы добавили следующие строки в файл:
Первая строка создает константу THEME_DIR, которая хранит директорию шаблона. Мы создаем эту константу для того, чтобы оптимизировать тему. Если вы посмотрите в наш файл header.php, вы увидите, что нам нужно использовать директорию несколько раз, мы используем ее также в файле functions.php, чтобы вывести путь к теме. Если мы постоянно вызываем get_template_directory_uri(), мы просто создаем запросы. Создавая константу и используя ее, мы экономим ресурсы процессора, поскольку мы вызываем функцию только один раз.
Эта строка удаляет тег Meta Generator, поскольку этот тег показывает всем установленную версию WordPress. Эта информация может позволить злоумышленнику узнать баги вашей версии и использовать их.
Header WordPress
Стандартный файл содержит набор тегов и функций, используемых по умолчанию. Рассмотрим их особенности и функционал.
Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).
Добавление метатегов в хедер является важной операцией, поскольку браузеру передается важная информация для правильного отображения темы.
Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:
Указание кодировки для правильного отображения шрифтов:
Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):
Добавление favicon для сайта:
Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:
Список стандартных и наиболее применяемых функций:
- wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
- get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).
Как добавить код в Head WordPress
Разбираемся как быстро добавить код в Head WordPress.
Это HTML-блок, в котором обычно размещают метаданные страниц сайта. Находится сразу после тега .
Информация из этого места в коде страницы не отображается на сайте. Блок нужен, чтобы помогать браузеру правильно выводить содержимое страниц, а также поисковым системам индексировать ресурс.
sidebar.php — Боковая панель
Боковая панель — это блок сопровождающей информации, где выводятся виджеты, форма поиска, социальные кнопки, облако меток, реклама, баннеры и прочая информация. Боковая панель может быть справа от основной части или слева. Может быть 2 боковые панели сразу, а может отсутствовать вообще.
Фрагмент файла:
Код этого файла говорит о том, что сайдбар в этой теме полностью настраивается через Консоль. И только панель поиска жестко закреплена в верхней позиции. А значит, чтобы добавить или изменить любой элемент в боковой панели, нужно зайти в меню Внешний вид → Виджеты, и там перетащить в область сайдбара нужные элементы:
Если шаблон не обновляется
Самый простой методом – добавить код напрямую в файлы шаблона. Но есть несколько ограничений:
- Продукт не должен обновляться, например у вас собственная разработка, сделанная на заказ.
- Возможны споры, отслеживать через дебаг режим будет невозможно.
Открываете файл header.php (находится в корне темы), обычно он отвечает за показ первого экрана в WordPress. Используйте соединение по FTP, чтобы при ошибках откатить изменения. Я покажу на примере стандартного редактора в админке WP.
Добавить код вручную.
Перешел в редактор тем, нашел файл, потом вставил тестовый тег и обновил. Так он выглядит на главной странице.
Если обновляется, то данный метод сразу не подходит, переходим к другим способам.
Шаг 4. header.php
Сначала я перечислю здесь ссылки на библиотеки, которые мы можем использовать в этом шаблоне, я уже использую jQuery и HTML5 Shim в этом шаблоне, но вы можете добавить другие.
- jQuery – библиотека для добавления симпатичных эффектов в вашу тему, я думаю, вы неверное знаете эту библиотеку, она уже включена в WordPress по умолчанию.
- Modernizr – эта библиотека позволяет вам знать точно возможности, которые поддерживает браузер пользователя.
- HTML5 Shim – эта библиотека позволяет браузерам, у которых нет своей встроенной поддержки разметки HTML5, поддерживать ее.
- Respond.js – позволяет браузерам, у которых нет встроенной поддержки CSS3 медиа-запросов, начать их поддерживать.
Вы можете скачать эти библиотеки и изменить пути в вашем файле header.php.
header.php — Шапка
Шапка — это верхняя область сайта, в которой содержится логотип, название сайта, верхнее навигационное меню, дополнительно могут вставляться рекламные баннеры, закрепленные страницы. Это верхняя (первая) область, соответственно и обрабатываться этот файл будет в первую очередь. Это означает, что в файл header.php также прописываются все подключаемые JavaScript файлы, CSS файлы и так далее.
Если шаблон не обновляется
Самый простой методом – добавить код напрямую в файлы шаблона. Но есть несколько ограничений:
- Продукт не должен обновляться, например у вас собственная разработка, сделанная на заказ.
- Возможны споры, отслеживать через дебаг режим будет невозможно.
Открываете файл header.php (находится в корне темы), обычно он отвечает за показ первого экрана в WordPress. Используйте соединение по FTP, чтобы при ошибках откатить изменения. Я покажу на примере стандартного редактора в админке WP.
Добавить код вручную.
Перешел в редактор тем, нашел файл, потом вставил тестовый тег и обновил. Так он выглядит на главной странице.
Если обновляется, то данный метод сразу не подходит, переходим к другим способам.
Добавление скриптов
Теперь мы рассмотрим функцию, которая добавляет наши скрипты.
Здесь процесс тот же, разница в том, что мы используем другие функции для добавления скриптов.
Чтобы добавить скрипты, мы используем функции wp_register_script и wp_enqueue_script. Функция wp_register_script требует следующих параметров:
Затем мы вызываем функцию wp_enqueue_script и передаем в качестве параметра имя нашего скрипта, который мы хотим добавить.
Чтобы добавить больше скриптов в ваш файл, просто скопируйте эти две строки и измените имена, директорию и другие параметры.
Темы с возможностью добавлять код html в head
Встроенное дополнение.
Видим текстовую область, вставляете туда необходимый скрипт или мета информацию, и обновления уже не страшны. Посмотрите повнимательнее, проверьте все вкладки, скорее всего такая возможность для контента есть.
Если не нашли таких настроек, то переходим к другим методам, чтобы добавить код в раздел в хеад.
functions.php — Файл конфигурации темы
Это файл, которого "не видно" на сайте, но который играет очень важную роль в правильной работе темы оформления. Фактически, здесь содержатся инструкции по работе административной части темы оформления, здесь регистрируются все дополнительные функции, которые может задействовать тема, сюда включаются для загрузки все прочие компоненты и модули темы, которые были вынесены разработчиком в рамках отдельных файлов, чтобы потом можно было заменить одну составляющую вместо всего файла functions.php целиком.
Другими словами, этот файл отвечает за основную функциональную составляющую темы оформления. И именно в functions.php вставляется большинство примеров кода из наших уроков.
Фрагмент файла:
В этот файл приходится чаще всего вставлять код из примеров в наших уроках. Делается это очень просто: скопируйте код из урока, нажав по этой кнопке:
(это картинка, а не фрагмент кода)
Затем откройте файл functions.php (или другой нужный файл) с помощью встроенного редактора или сторонней программы (как было описано выше), опуститесь в конец файла и вставьте код перед закрытием php тега ?>
Это основное и единственное правило — не нарушить целостность и структуру уже существующего кода.
Как добавить код в head WordPress?
Для ВордПресс есть несколько методов. Выбирайте тот, который вам удобен.
Через плагин
Этот способ самый простой и рекомендуется новичкам.
Head, Footer and Post Injections
Это бесплатное WP-расширение, которое самостоятельно добавляет код в head.
Для этого, во-первых, установите плагин.
После активации откройте в админке раздел Настройки > Header and Footer и перейдите на вкладку Head and Footer.
Тут есть 2 текстовых поля. Первое отвечает за вывод в нем кода на всех страницах сайта. Второе добавляет код только на главной странице ВП-сайта.
Чтобы ваши изменения вступили в силу, не забудьте нажать кнопку Сохранить.
Clearfy Pro
- установите и активируйте расширение;
- в админ-меню кликните Clearfy Pro;
- перейдите на вкладку Код;
- активируйте опцию Код в и вставьте свой код.
Через правку шаблона темы
Если вы не хотите устанавливать дополнительные плагины на свой веб-ресурс, то код в head можно добавить вручную в нужном шаблоне вашей WordPress-темы.
Для этого перейдите в каталог wp-content/themes и найдите файл header.php.
Не рекомендуется изменять файлы родительской темы ВордПресс. Для этого используйте дочерние . Они позволяют делать правки без опасения, что они пропадут при следующем обновлении темы.
В каждой теме содержимое файла header.php может отличаться. Но основные его блоки похожие.
Нужный код нужно добавить перед закрывающим тегом .
Через хук WordPress
ВордПресс имеет специальный хук, который добавит код в head. Чтобы его использовать, откройте файл functions.php. Это основной конфигурационный файл темы, который находится в корне ее папки. Например, для указанной темы он находиться по адресу
Чтобы добавить стиль или скрипт в шапку сайта, в самый конец этого файла вставьте код
Вместо строки добавьте свой код.
С помощью header.php
Если ваш сервер не поддерживает mod_deflate или mod_gzip, вы можете использовать этот PHP скрипт для gzip сжатия, он работает и на Apache, и на Nginx.
Просто скопируйте это в файл header.php вашей темы:
Ниже представлен график, который показывает скорость загрузки моего сайта с и без gzip сжатия.
Файл темы header.php тонкости настройки
Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.
Применяем PHP инструкцию
Помещаем его в файл function php. Видим место куда добавлять, вводите любой HTML и js script, после сохранения изменений, ваша функция выведется после отработки основных сценариев wp_head. Также отключается xml rpc протокол в WordPress.
Применяя четыре простых способа смогли добавить любой код в head любимой CMS WordPress, советую использовать плагины, если нет подходящих мест в шаблоне.
footer.php — Подвал
Аналогично шапке, это нижняя область сайта, которая может содержать копирайты, контактную информацию, дополнительное меню, счетчики метрики и так далее. Если провести аналогию с Microsoft Word, то шапка и подвал — это верхний и нижний колонтитулы. Это те части сайта, которые всегда будут отображаться сверху и снизу, куда бы вы не перешли в рамках сайта.
Заключение
Таким образом осуществляется настройка header WordPress. Файл требует вмешательства только на начальном этапе подготовки темы. Повторное использование необходимо при подключении дополнительных функций, скриптов или таблиц стилей. Рассмотрены основные теги и их предназначение. Разработчики постоянно модернизируют платформу для минимизации человеческих действий в редактировании подобных файлов. Для безопасности, не рекомендуется использовать сторонние и непроверенные скрипты.
В этом руководстве мы поговорим о header.php, обязательном файле для каждой WordPress темы. Я покажу вам хороший пример этого файла и дам советы по поводу, что в нем должно быть, а чего быть не должно.
Вы также можете ознакомиться с этой информацией, посмотрев наш видео урок:
Шаг 1. Gzip сжатие файлов
Стоит сжимать с помощью gzip ваши HTML документы, скрипты и таблицы стилей. Более того, стоит сжимать любой текстовый ответ, включая XML и JSON.
Изображения и PDF файлы не нужно сжимать с помощью gzip, поскольку они уже сжаты. Попытки сделать это приведут только к расходу CPU и могут даже увеличить размер файла.
Сжатие файлов также сэкономит немного трафика.
Применяем PHP инструкцию
Помещаем его в файл function php. Видим место куда добавлять, вводите любой HTML и js script, после сохранения изменений, ваша функция выведется после отработки основных сценариев wp_head. Также отключается xml rpc протокол в WordPress.
Применяя четыре простых способа смогли добавить любой код в head любимой CMS WordPress, советую использовать плагины, если нет подходящих мест в шаблоне.
Шаг 2. Готовый Код
Здесь вы можете получить полный код для использования в вашей теме. Прочтите другие шаги для того, чтобы понять, что конкретно делает каждая строка.
Для начала, вставьте эти строки в верх вашего файла functions.php: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript)
Теперь в файл header.php добавьте эти строки: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript)
В шапке "должны" быть некоторые вещи. Этот шаблон, который я сделал, делает следующее: (в следующих шагах я поговорю о каждом конкретном)
- доктайпы;
- условия для IE8, 7, 6;
- мета теги для того, чтобы тема правильно воспринималась;
- фавиконка, RSS и пингбек;
- заголовок;
- следуя официальным правилам WordPress, добавления скриптов и стилей с помощью функций wp_enqueue_script и wp_enqueue_style;
- Оптимизированный с помощью констант код без тега Meta Generator (для безопасности);
- чистый и откомментированный код.
Дальше мы будем говорить о коде, который мы использовали. Вы узнаете о том, зачем нужно его использовать.
1. Встроенный редактор WordPress
Находится в Консоли в меню Внешний вид → Редактор.
- Плюсы: всегда под рукой, можно оперативно внести небольшие правки в код при условии, что вы точно знаете, куда лезете.
- Минусы: для правки доступны не все файлы темы и синтаксис не подсвечивается, делая этот редактор абсолютно непригодным для серьезной работы с кодом.
Внешний вид сайта
Теперь поговорим о структуре внешнего облика WordPress сайта. Для того, чтобы не было путаницы типа " Я хочу добавить эту штучку вот сюда" или " Мне нужно вставить эту кнопку туда", определенные области WordPress темы принято называть своими именами. Случайный посетитель, попавший на любой сайт, видит то, что видит: кнопочки, панельки, заголовки, ссылки и так далее. Человек более подкованный в WordPress видит этот сайт более структурно.
Я специально скомпоновал изображение так, чтобы было видно все основные области.
Как видите, главная страница нашего блога состоит из 4-х частей: шапки, подвала, основной части и боковой панели. Справедливо отметить, что такая структура является наиболее распространенной в большинстве тем оформления WordPress.
Теперь, когда вы знаете название областей внешнего представления WordPress сайта, вы можете говорить: " Мне нужно добавить еще один баннер в подвале", или " Я хочу вставить виджет в боковую панель", или " Нужно изменить порядок меню в шапке".
Плагин для вставки кода Head & Footer Code
Точечным решением для вордпресс является Head & Footer Code , устанавливается стандартно – поиском из админки или загрузкой архива.
- Поле активации в одноименный пункт в Инструментах.
- Находим область HEAD Code.
- Помещаем требуемый код.
- Выставляем приоритет – не всегда срабатывает, но он определяет выше или ниже будет располагаться конфигурация, прописанная выше, между открывающим и закрывающим тегами.
- Внизу нажимаем обновить.
Применяем плагин ClearfyPRO
Любимый ClearfyPRO умеет все, также прописывать html и другие виды спецификации в head блога.
Есть переключатель можно на время отключить отображение, чтобы не приходилось стирать и заново загружать код. Аналогично можно удалить стили recentcomments. Полезно узнать что ClearfyPRO оптимизирует, ускоряет и улучшает seo в WordPress дополнительно по 49 требованиям. Для читателей WPCourses делаем скидку на покупку.
Добавление вашего CSS
Здесь мы создали функцию для добавления тегов link в header.php. Официальное руководство WordPress указывает, что лучший способ добавления стилей (.css) и скриптов (.js) – это использование функций wp_enqueue_script и wp_enqueue_style. Больше об этом можно узнать в здесь .
Сначала мы создаем функцию под названием enqueue_styles и затем мы вызываем функцию add_action. Эта строка говорит WordPress, что он должен вызвать нашу функцию, когда происходит событие ‘wp_enqueue_scripts’, что происходит при нашем вызове wp_head() в header.php!
Внутри нашей функции у нас следующие строки:
Сначала мы зарегистрируем нашу таблицу стилей и добавим ее в очередь WordPress.
Мы используем функцию wp_register_style, чтобы зарегистрировать стиль. Эта функция требует следующее:
Затем мы вызываем функцию wp_enqueue_style и передаем в качестве параметра имя нашего стиля, который будет добавлен.
Чтобы добавить в файл больше стилей, просто скопируйте эти две строки и измените имя, директорию и другие параметры.
Какие еще файлы мы забыли?
Я просто коротко перечислю с описанием:
Вот и все! Надеюсь этот урок разъяснил некоторые моменты, и теперь вам будет проще ориентироваться, в какой именно файл нужно вставлять дополнительный код.
Скорость загрузки сайта очень важна для каждого блога или сайта, особенно для тех, кто использует виртуальный хостинг — самый дешевый вариант услуг хостинга. В статье будет представлено несколько трюков с .htaccess и header.php, которые увеличат скорость загрузки вашего сайта на 50-70%.
Веб-разработчики уделяют все больше внимания производительности, которая сейчас является одной из самый горячих тем веб-разработки. Скорость загрузки — это больше чем просто параметр. Скорость — самый важный параметр. Если ваш сайт или блог медленный, люди не будут им пользоваться.
Что значит скорость для крупных интернет-проектов :
- для Google — увеличенное на 500 миллисекунд время загрузки приводит к уменьшенному на 20% количеству поисков.
- для Yahoo — увеличенное на 400 миллисекунд время загрузки приводит к 5-9% возрастанию количества людей, который нажимают "назад" до того, как страница загрузилась.
- для Amazon — увеличенное на 100 миллисекунд время загрузки приводит к 1% спаду продаж.
Google, стремясь сделать сеть быстрее, написали в блоге , что "мы решили учитывать скорость сайта в нашем поисковом ранжировании".
Так что медленный сайт также ухудшит ваши позиции в поисковой выдаче.
Таким образом, скорость загрузки очень важна. CDN (Content Delivery System – система доставки контента) для этих целей хороша, но до определенного уровня, и хорошие CDN провайдеры немного дороговаты.
Хорошая новость в том, что некоторые самые важные оптимизации скорости могут быть сделаны с помощью простых трюков с .htaccess. Они могут сделать любой сайт быстрее, сжимая контент и включая кеширование браузера, соответствуют рекомендациям по ускорению сайта Yahoo! и не будут стоить вам ни копейки.
index.php — Основная часть
Основная часть (она же контентная) отвечает за вывод ленты ваших постов (записей, публикаций, это все синонимы). В этом файле содержится код для вывода заголовка записи, миниатюры, автора, даты публикации, меток, анонса записи, кнопки для продолжения чтения записи далее.
Фрагмент файла:
Шаг 4. Уменьшение размера базы данных MySQL
Начиная с WordPress 2.6, WordPress автоматически сохраняет посты во время написания, они остаются в базе данных MySQL как версии документов даже после того, как пост сохранен. Большая база данных также увеличивает время загрузки сайта. Я предлагаю отказаться от сохранения версий.
Вставьте следующий код в wp-config.php для отключения сохранения версий:
Если вы решили оставить эту возможность, вы также можете хранить версии в базе данных на протяжении фиксированного количества дней, например, 10 дней.
style.css — Таблица стилей оформления
Еще один очень важный файл, без которого не будет работать ни одна тема оформления WordPress. Этот файл как раз лучше всего "видно" на главной странице любого WordPress сайта.
Все оформление, фон, шрифты, цвета, интервалы отступа, заливка, тени, градиенты — за все это отвечает единый файл style.css, поэтому его важность сложно переоценить.
Фрагмент файла:
Этот файл отличается от всех, описанных выше, так как он целиком написан, используя разметку веб-стилей CSS. Поэтому весь код, что касается настройки оформления в наших уроках, добавляется в этот файл. Просто откройте этот файл, прокрутите в конец и добавьте свой css код начиная с новой пустой строки.
Doctype
В этом шаблоне мы используем стандартный доктайп HTML5:
В этой части, мы использовали некоторые условия для IE , которые добавляют класс в соответствии с версией IE, или не добавляет ничего, если браузер не IE 8 или ниже (Firefox, IE9, Chrome и другие).
Это действительно удобно потому, что вы можете создать правило внутри CSS файла, чтобы оно подействовало на объект, если браузер IE 7:
Но вы также можете создать отдельный файл CSS и привязать его внутри области условий, мы будем говорить об этом на следующих шагах. Выбор за вами.
Мета-теги очень важны, т.к. они передают некоторую информацию браузеру, чтобы быть уверенными в том, что ваша тема будет правильно воспринята.
Эта строка подтверждает, что браузер не будет использовать Quirks Mode, это очень полезно, так как этот режим может поломать разметку.
Эта строка сообщает браузеру кодировку, чтобы избежать неизвестных символов.
Просто основные мета теги, которые могут улучшить SEO вашей темы. Вы можете добавить ключевые слова, которые описывают сайт и написать название вашего бизнеса.
Этот тег удаляет/сбрасывает любое увеличение мобильным устройством, по типу iPad и iPhone, очень удобно, если вы работаете с гибкой разметкой.
Эта строка добавляет фавиконку для вашей страницы, добавляет немного профессионального вида вашему сайту.
Ссылка на RSS ленту вашего сайта.
Ссылка на пингбек URL вашего сайта.
Тег заголовка очень важен, поскольку он заменяет заголовок по умолчанию и улучшает ваши позиции в поисковых системах.
Вставить код в раздел head на WordPress – темы, плагины и php функции
Большинство скриптов и систем аналитики требуют чтобы подключение к серверам происходило в шапке сайта, где располагается вся служебная информация. Чтобы добавить код в head WordPress не нужно придумывать сложных схем, стоит применить некоторые методы, описанные в статье.
Не путайте head и header, второй это тег семантической разметки сайта, который отображается и показывает, что здесь находится шапка сайта.
И еще кое-что…
Добавления заголовка expires не повлияет на скорость загрузки сайта при первом посещении, но вы удивитесь, насколько уменьшится время загрузки для следующего просмотра страницы или посещения вернувшегося пользователя.
Проследите, как работает ваш сайт: покажите количество запросов и время обработки.
Просто вставьте следующий код после текста копирайтов в файле footer.php вашей темы:
Вы знаете или используете какие-то другие методы оптимизации времени загрузки вашего сайта или блога? Не забудьте поделиться с ними в комментариях.
Хотите быстро добавить код в head WordPress? Разберем простые и рабочие способы.
Код в шапку сайта вставляют с разных причин. Это может быть статистика от Google или Яндекс, JavaScript-скрипт какого-либо сервиса (например, реклама), новая функция сайта, CSS-стиль своего блока.
Как редактировать код?
Не буду особо распинаться. Скажу коротко, у вас 2 варианта:
Читайте также: