Статьи

Создание темы WordPress из статического HTML: настройка заголовка

Декабрь 21, 2018

До сих пор в этой серии вы узнали, как создать базовую тему из статического HTML. Вы сделали следующее:

  • Подготовил вашу разметку для WordPress
  • Преобразовал ваш HTML в PHP и разделил ваш файл на файлы шаблонов
  • Отредактировал таблицу стилей и загрузил вашу тему в WordPress
  • Добавлен цикл в ваш индексный файл

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

  • Добавить автоматически сгенерированные метатеги вместо существующих статических в разделе <head>
  • Замените статический заголовок и описание сайта тем, которое вы (или другие пользователи вашей темы) можете обновить через администратора WordPress.
  • Добавьте wp_head действия wp_head в ваш заголовочный файл для использования плагинами

Что вам нужно

  • Ваш редактор кода по выбору
  • Браузер для тестирования вашей работы
  • Установка WordPress, локальная или удаленная
  • Если вы работаете локально, вам понадобится MAMP, WAMP или LAMP, чтобы запустить WordPress
  • Если вы работаете удаленно, вам понадобится FTP-доступ к вашему сайту и учетная запись администратора в вашей установке WordPress

1. Добавление метатегов в заголовочный файл

Вам нужно добавить два мета-тега в вашу тему: <title> и метатег charset .

Обновление метатега Charset

Найдите строку, которая гласит:

1
<meta charset=»utf-8″ />

Замените это на это:

1
<meta charset=»<?php bloginfo( ‘charset’ ); ?>» />

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

Обновление <title>

На данный момент тема имеет статический тег title, добавленный с помощью следующего кода в header.php :

1
WordPress Theme Building — Creating a WordPress Theme from Static HTML

Добавив динамически генерируемый тег заголовка, вы можете воспользоваться дополнительными функциональными возможностями, предлагаемыми WordPress для них, что даст вам преимущества SEO и удобства использования.

Удалите приведенный выше код и замените его следующим:

01
02
03
04
05
06
07
08
09
10
<?php
global $page, $paged;
wp_title( ‘|’, true, ‘right’ );
// Add the blog name.
bloginfo( ‘name’ );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo » | $site_description»;
?>

Этот код делает несколько вещей:

  1. Сначала он использует шаблонный тег wp_title() для вывода заголовка текущей страницы, за которым следует разделитель справа.
  2. После этого он использует шаблонный тег bloginfo() с параметром 'name' для вывода имени самого сайта.
  3. Если посетитель находится на домашней странице (которую он проверяет с помощью условных тегов is_home() || is_front_page() ), он выводит описание сайта с помощью get_bloginfo() шаблона get_bloginfo() с параметром 'description'

Теперь сохраните ваш заголовочный файл.

2. Добавление динамически генерируемого заголовка и описания сайта

Следующим шагом является замена вашего статического заголовка и описания сайта на динамическое.

Все еще в header.php, найдите следующий код:

1
2
3
4
5
6
<div class=»site-name half left»><!— site name and description  —></div>
 
<div class=»site-name half left»>
    <h1 class=»one-half-left» id=»site-title»><a title=»Creating a WordPress theme from static html — home» rel=»home»>WordPress Theme Building</a></h1>
    <h2 id=»site-description»>Creating a WordPress theme from static html</h2>
</div>

Замените его кодом ниже:

1
2
3
4
5
6
<div class=»site-name half left»><!— site name and description  —></div>
 
<div class=»site-name half left»>
    <h1 id=»site-title»></h1>
    <h2 id=»site-description»></h2>
</div>

Этот код делает следующее:

  • Оборачивает ссылку на домашнюю страницу вокруг заголовка сайта с помощью echo home_url()
  • Отображает заголовок сайта с помощью bloginfo() шаблона bloginfo() с параметром 'name'
  • Отображение описания сайта снова с использованием тега шаблона bloginfo() , на этот раз с параметром 'description'

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

Я изменил свой, и вы можете увидеть результаты ниже. Обратите внимание, что это также отражено в заголовке, как показано в верхней части окна браузера.

создание-WordPress-тема-из-статики-HTML-мета-теги, сайт-титульное описание добавленного

3. Добавление к вашей теме wp_head действий wp_head

wp_head действия wp_head необходим для добавления в каждую тему. Он размещается сразу после закрывающего </head> в вашем файле header.php и используется многими плагинами для подключения их функциональности к вашей теме. Если вы не добавите его, вы обнаружите, что плагины, активированные на сайтах, использующих вашу тему, могут не работать.

wp_footer действия wp_footer аналогичен и находится в файле footer.php — мы вернемся к этому в восьмой части этой серии.

Сразу над закрывающим </head> добавьте следующий код:

1
<?php wp_head();

Теперь сохраните ваш файл. Вы все сделали!

Резюме

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

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

Ресурсы

37
Share: