Как создать тему для WordPress. Часть 2: настройка header.php

Это второй урок из серии о том, как создать собственную тему для WordPress. Из него вы узнаете, какие функции должны быть в файле header.php.

Запись обновлена 6 сентября 2015 года

В этом уроке подразумевается, что вы уже выполнили шаги из части 1.

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

Языковые атрибуты html

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

Настройка title

Сейчас в нашей теме заголовок страницы задан через теги title. Но ведь заголовок должен быть разным на всех страницах, правильно? Поэтому надо сделать динамический вывод заголовка. Для этого найдем строку, которая выводит заголовок:

и заменим ее на динамический вывод:

wp_title добавляет заголовок текущей страницы.

Определение кодировки

Также сделаем автоматическое определение кодировки. Замените строку

на

Добавим wp_head

Теперь, перед закрывающим тегом head, добавим функцию wp_head, которая будет загружать стандартные скрипты, стили, мета-теги и другую важную информацию:

Удаляем ненужное

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

Тег body

Кроме этого, нужно добавить стандартные классы для тега body. Сейчас он у нас выглядит так:

Добавим классы через функцию body_class();

На этом мы закончили с редактированием файла header.php (в дальнейшем нужно будет вынести скрипты и стили в файл functions, но давайте сначала сделаем основной функционал). Можно переходить к файлу index.php. О том, как его настроить, вы узнаете из следующего урока.

Исходный код урока доступен здесь.

Чтобы не пропустить следующий урок, подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке!




22 комментария к “Как создать тему для WordPress. Часть 2: настройка header.php”

  1. Димон

    А что это за переменная $class в функции ? Где она объявлена? Каково ее значение?

    Ответить
  2. tom

    тег не закрыт, в начале статьи

    Ответить
  3. tom

    И разве это хорошо добавлять wp_head(), мне кажется из-за кол-ва скриптов которые будут загружаться в самом начале , мы очень потеряем в page speed! Разве не достаточно функции wp_footer() ?

    Ответить
    • Ирина

      Да, wp_head должен быть обязательно, иначе плагины, которые используют хуки типа add_action(‘wp_head’, ‘your_function’);, чтобы добавить свои стили и скрипты, работать не будут. При этом, у разработчиков плагинов часто нет возможности загрузить скрипты, и особенно стили (так как они всегда должны быть в разделе head) в футере темы.

      Ответить
      • tom

        Все было бы хорошо, если бы они через хуки в head только стили вешали, а через footer скрипты! А то я как -то поставил себе плагин слайдера так мне в head где-то 10 ментатов прилетело, думал состарюсь пока страница загрузится)) Спасибо вам за ваши записки, у вас случайно нет статей про хуки, как с ними работать?

        Ответить
        • Ирина

          Это проблема, да) Но могу сказать, что есть некоторые скрипты, которые только в head работают (например, если это что-то с jQuery). Статей пока нет на эту тему, но постараюсь что-нибудь написать в течение месяца.

          Ответить
  4. Дмитрий

    /* <body class="left-sidebar" > */

    добавит еще один атрибут class и их станет два, чего быть не должно.

    Ответить
  5. Sanes

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

    Ответить
  6. Ксения

    Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)

    Ответить
  7. Виктор

    А что делать с и так далее? Надеюсь, мы вернемся к header.php? 🙂 Ведь, в навигационном меню, мы не ставили php.

    Ответить
  8. Виктор

    Извините, я имел ввиду “navbar-collapse” и “nav navbar-nav” Неужели мы так и оставим такое меню, как на шаблоне? 😀

    Ответить
  9. Мария

    Я что-то пропустила, наверное. Как подключаются css файлы?

    Ответить
    • Виктор

      Мария, в header.php
      <link rel="stylesheet" href="/style.css” />

      Между тегами “head”

      Ответить
    • Виктор

      Ой, комментарий не вывел функцию: bloginfo(‘stylesheet_directory’); 🙁

      Ответить

Оставить комментарий