IRC-сервер - Irc.Online.com.ua

Файл темы header.php — тонкости настройки

Опубликовано: 01.09.2018

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

Вы также можете ознакомиться с этой информацией, посмотрев наш видео урок:

Шаг 1. Введение

В этом файле у нас не только логотип и меню, есть еще также тег head и много других тегов, например: link , script , meta и title .

Я написал пример файла header.php . Я постарался создать максимально полный файл, но не стесняйтесь комментировать это руководство с советами по поводу содержимого.

Wordpress создание темы - Урок 3 подключение css, js. Работаем c header.php

Помните, что ваша "шапка" – это контент, который отображается на всех страницах вашего сайта. Например, логотип и меню показываются на всех страницах, так что они будут добавлены в header.php .

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

WordPress Theme Development Tutorial 5: header.php and footer.php

Давайте же приступим к работе, я надеюсь, вам понравится!

Шаг 2. Готовый Код

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

Для начала, вставьте эти строки в верх вашего файла functions.php : (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript )

define("THEME_DIR", get_template_directory_uri()); /*--- REMOVE GENERATOR META TAG ---*/ remove_action('wp_head', 'wp_generator'); // ENQUEUE STYLES function enqueue_styles() { /** REGISTER css/screen.css **/ 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 ); wp_enqueue_script( 'html5-shim' ); /** 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 добавьте эти строки: (помните, что вам нужно будет отредактировать пути к вашим файлам CSS и JavaScript )

<!doctype html>      <html <?php language_attributes(); ?>>  <head>  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="description" content="Keywords"> <meta name="author" content="Name"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <link rel="shortcut icon" href="<?php echo THEME_DIR; ?>/path/favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />  <title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?></title>  <?php wp_head(); ?> </head> <body <?php body_class(); ?>>

В шапке "должны" быть некоторые вещи. Этот шаблон, который я сделал, делает следующее: (в следующих шагах я поговорю о каждом конкретном)

доктайпы; условия для IE8, 7, 6; мета теги для того, чтобы тема правильно воспринималась; фавиконка, RSS и пингбек; заголовок; следуя официальным правилам WordPress, добавления скриптов и стилей с помощью функций wp_enqueue_script и wp_enqueue_style ; Оптимизированный с помощью констант код без тега Meta Generator (для безопасности); чистый и откомментированный код.

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

Шаг 3. Файл functions.php

Давайте поговорим о файле functions.php , мы добавили следующие строки в файл:

define("THEME_DIR", get_template_directory_uri()); /*--- REMOVE GENERATOR META TAG ---*/ remove_action('wp_head', 'wp_generator'); // ENQUEUE STYLES function enqueue_styles() { /** REGISTER css/screen.cs **/ 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 ); wp_enqueue_script( 'html5-shim' ); /** 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' );

Первая строка создает константу THEME_DIR , которая хранит директорию шаблона. Мы создаем эту константу для того, чтобы оптимизировать тему. Если вы посмотрите в наш файл header.php , вы увидите, что нам нужно использовать директорию несколько раз, мы используем ее также в файле functions.php , чтобы вывести путь к теме. Если мы постоянно вызываем get_template_directory_uri() , мы просто создаем запросы. Создавая константу и используя ее, мы экономим ресурсы процессора, поскольку мы вызываем функцию только один раз.

/*--- REMOVE GENERATOR META TAG ---*/ remove_action('wp_head', 'wp_generator');

Эта строка удаляет тег Meta Generator , поскольку этот тег показывает всем установленную версию WordPress. Эта информация может позволить злоумышленнику узнать баги вашей версии и использовать их.

Добавление вашего CSS

// ENQUEUE STYLES function enqueue_styles() { /** REGISTER css/screen.cs **/ 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' );

Здесь мы создали функцию для добавления тегов link в header.php . Официальное руководство WordPress указывает, что лучший способ добавления стилей (. css ) и скриптов (. js ) – это использование функций wp_enqueue_script и wp_enqueue_style . Больше об этом можно узнать в здесь .

Сначала мы создаем функцию под названием enqueue_styles и затем мы вызываем функцию add_action . Эта строка говорит WordPress, что он должен вызвать нашу функцию, когда происходит событие ‘ wp_enqueue_scripts ’, что происходит при нашем вызове wp_head() в header.php !

Внутри нашей функции у нас следующие строки:

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

Сначала мы зарегистрируем нашу таблицу стилей и добавим ее в очередь WordPress.

Мы используем функцию wp_register_style , чтобы зарегистрировать стиль. Эта функция требует следующее:

Параметр #1 : Имя, которое вы можете выбрать, что-то вроде mystyle , mediaqueries … Параметр #2 : Путь к файлу, обратите внимание, что мы здесь используем константу THEME_DIR . Параметр #3 : Здесь вы пишете ваши зависимости, названия файлов стилей, которые нужно загрузить перед этим файлом. Параметр #4 : Версия. Параметр #5 : Медиа-атрибут для тега link .

Затем мы вызываем функцию wp_enqueue_style и передаем в качестве параметра имя нашего стиля, который будет добавлен.

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

Добавление скриптов

Теперь мы рассмотрим функцию, которая добавляет наши скрипты.

// 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' ); /** 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_script требует следующих параметров:

Параметр #1 : Имя, которое вы можете выбрать, что-то вроде jquery , dojo , и т.п. Параметр #2 : Путь к файлу, обратите внимание, что мы здесь используем константу THEME_DIR . Параметр #3 : Здесь вы пишете ваши зависимости, названия файлов скриптов, которые нужно загрузить перед этим файлом. Параметр #4 : Версия. Параметр #5 : Здесь вы говорите, будет этот скрипт добавлен в вызове функции wp_head() (обычно в header.php ) или wp_footer() (обычно в footer.php ). Если вы передадите false , он будет загружен в wp_head() . Если вы передадите true , будет загружен в wp_footer() .

Затем мы вызываем функцию wp_enqueue_script и передаем в качестве параметра имя нашего скрипта, который мы хотим добавить.

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

Шаг 4. header.php

Сначала я перечислю здесь ссылки на библиотеки, которые мы можем использовать в этом шаблоне, я уже использую jQuery и HTML5 Shim в этом шаблоне, но вы можете добавить другие.

jQuery – библиотека для добавления симпатичных эффектов в вашу тему, я думаю, вы неверное знаете эту библиотеку, она уже включена в WordPress по умолчанию. Modernizr – эта библиотека позволяет вам знать точно возможности, которые поддерживает браузер пользователя. HTML5 Shim – эта библиотека позволяет браузерам, у которых нет своей встроенной поддержки разметки HTML5, поддерживать ее. Respond.js – позволяет браузерам, у которых нет встроенной поддержки CSS3 медиа-запросов, начать их поддерживать.

Вы можете скачать эти библиотеки и изменить пути в вашем файле header.php .

Doctype

В этом шаблоне мы используем стандартный доктайп HTML5 :

<!doctype html>

Тег <html>

<html class="no-js" <?php language_attributes(); ?>>

В этой части, мы использовали некоторые условия для IE , которые добавляют класс в соответствии с версией IE , или не добавляет ничего, если браузер не IE 8 или ниже (Firefox, IE9, Chrome и другие).

Это действительно удобно потому, что вы можете создать правило внутри CSS файла, чтобы оно подействовало на объект, если браузер IE 7:

/* RUNS ON ALL BROWSERS */ #mymenu { width: 400px; } /* RUNS ONLY ON IE7 */ .ie7 #mymenu { width: 200px; }

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

Теги <meta>

Мета-теги очень важны, т.к. они передают некоторую информацию браузеру, чтобы быть уверенными в том, что ваша тема будет правильно воспринята.

Эта строка подтверждает, что браузер не будет использовать Quirks Mode , это очень полезно, так как этот режим может поломать разметку.

Эта строка сообщает браузеру кодировку, чтобы избежать неизвестных символов.

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

Этот тег удаляет/сбрасывает любое увеличение мобильным устройством, по типу iPad и iPhone, очень удобно, если вы работаете с гибкой разметкой.

Теги <link>

Эта строка добавляет фавиконку для вашей страницы, добавляет немного профессионального вида вашему сайту.

Ссылка на RSS ленту вашего сайта.

Ссылка на пингбек URL вашего сайта.

Тег <title>

Тег заголовка очень важен, поскольку он заменяет заголовок по умолчанию и улучшает ваши позиции в поисковых системах.

wp_head()

<?php wp_head(); ?>

Это очень важная функция, вы обязательно должны вызвать эту функцию! С помощью этой функции WordPress добавляет код из плагинов, JavaScript библиотек и т.д.

Источник:

IRC (Internet Relay Chat)