28 Февраль 2012

Создание сайта на WordPress. Часть 1

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

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

Видеоурок

Скачать видеоурок (29 МБ, *.mp4).

В видеоуроке я обещал поделиться ссылкой на статью о важности хвостика .html в конце ЧПУ WordPress — вот эта ссылка.

Ранее я публиковал видеуроки и статьи, посвященные установке блога на WP и подготовке к созданию уникальной темы:

Далее я буду считать, что проблем с установкой и подключением заготовки темы у вас возникнуть не должно. Основное внимание мы уделим наполнению файла index.php свежесозданной темы служебными тегами (<!DOCTYPE HTML>, <meta charset="utf-8">, <link rel="stylesheet" href="/style.css">) и SEO-тегами (<title>, <meta name="description">, <meta name="keywords">); а также уберем лишний мусор, создаваемый движком в HTML-файле.

DOCTYPE

Верстку мы будем разрабатывать в соответствии со стандартом HTML5. Оповестим о нашем решении браузер тегом <!DOCTYPE>. В случае верстки в соответствии стандартам HTML5 DOCTYPE должен быть следующим (очень простым):

<!DOCTYPE HTML>

Подробнее о стандартах и их эволюции (статья старая, поэтому в ней я принял решение использовать оптимальный на тот момент стандарт HTML 4.01.).

Кодировка

Текст в файле index.php будем хранить в кодировке utf-8. Это оптимальная кодировка, кроме того, именно в этой кодировке хранится контент в базе данных WordPress.

Подробнее о кодировках, перекодировках и проблеме их выбора.

Раз наш выбор пал на кодировку utf-8, проинструктируем браузер относительно нашего решения следующей директивой (именно так выглядит инструкция кодировки в стандарте HTML5):

<meta charset="utf-8">

В качестве дополнительной информации сообщу интересную вещь. Если даже мы попытаемся сбить браузер с толку неправильным указанием кодировки в директиве, например <meta charset="windows-1251">, умный браузер все равно будет отображать данные в кодировке utf-8. Возникает законный вопрос: «Кто еще сообщил браузеру информацию о кодировке страницы?». Оказывается, этот кто-то движок WordPress, отправивший соответствующие заголовки браузеру (см. рис. 1). Если соответствующего заголовка от сервера получено не будет, браузер воспользуется информацией в директиве <meta charset="windows-1251"> и отобразит кракозябры, т. к., на самом-то деле, контент написан в кодировке utf-8.

Наибольшим приоритетом для браузера обладают заголовки, отправляемые сервером. Менять их можно редактируя файлы движка, либо соответствующими инструкциями в файле дополнительной конфигурации Apache .htaccess (о работе с .htaccess я упоминал в статье по кодировкам).

Заголовки, отправляемы WordPress-ом

Рис. 1. Заголовки, отправленные сервером браузеру пользователя (информация получена плагином HTTP Headers для Google Chrome).

Подключение стилей

Для подключения стилей используется стандартная инструкция:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

Обратите внимание на содержимое свойства href. В нем указана функция движка WordPress, возвращающая путь к файлу style.css активной в данный момент темы. Поскольку, в общем случае, мы не знаем, в какой папке будет находится наша тема, оставим данную функцию в покое. Но если вы четко знаете адрес расположения файла стилей, то, для экономии ресурсов и увеличения скорости загрузки страниц, имеет смысл указать прямой путь к данному файлу вместо PHP-кода (например, http://wordpress.loc/wp-content/themes/mytheme/style.css).

SEO-теги

В файле index.php нашей темы, в разделе <head>, имеет смысл указать пустой тег <title></title>, который будет наполнен соответствующим содержимым плагином All in One SEO Pack.

<meta name="description">, <meta name="keywords"> будут сформированы плагином автоматически и подставлены функцией wp_head(), о которой пойдет разговор ниже.

Рис. 2

Рис. 2. Настройка плагина All in One SEO Pack.

Дополнительные служебные теги

Код, подключающий JavaScript для древовидных комментариев, необходимо указать в разделе <head>. Если вы любите древовидные комментарии так, как люблю их я, то код окажется полезным:

<?php
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
?>

Ссылка на RSS блога должна быть указана следующей инструкцией раздела <head>:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/sdelaysite">

В приведенном примере RSS-фид блога формируется удобным сервисом FeedBurner, позволяющим вести статистику подписчиков (подробнее о FeedBurner).

Именно по указанной в инструкции ссылке пойдет браузер, когда вы кликните на соответствующую пиктограмку.

Подписка на RSS согласно соответствующей директиве

Рис. 3. Пиктограмка RSS в браузере Opera.

Стандартный RSS-фид WordPress будет доступен по ссылке vash_blog.ru/feed. Чтобы данный адрес завернуть на FeedBurner воспользуйтесь плагином FD Feedburner Plugin.

Путь к favion указывается следующей инструкцией (в случае моего блога ico-пиктограмма сайта находится по указанному в директиве адресу):

<link rel="shortcut icon" href="http://www.sdelaysite.com/favicon.ico">

Сервис PingBack также требует свою директиву:

<link rel="pingback" href="http://www.sdelaysite.com/xmlrpc.php">

Вкратце PingBack работает следующим образом:

  • Ваш друг поставил ссылку в своем блоге на одну из ваших публикаций.
  • Если в блоге включен механизм обратных уведомлений, блог вашего друга постарается отправить информацию о ссылке вам.
  • Адрес, на который нужно передать информацию о внешней ссылке, указан либо в рассматриваемой директиве, либо в заголовках сервера (см. рис. 1., пункт X-Pingback).
  • После получения информации о внешней ссылке на адрес http://vash_blog.ru/xmlrpc.php ваш блог может опубликовать данные обратной ссылки либо в комментариях, либо в админке.

wp_head();

<?php
wp_head();
?>

Данная функция обязательно должна присутствовать в разделе <head>. Она возвращает в HTML-файл текст, сгенерированный различными плагинами (в том числе и All in One SEO Pack отображает посредством данной функции теги description и keywords).

Кроме необходимых данных функция wp_head выплюнет кучу мусора в HTML-файл, от которой мы и будем избавляться.

Избавление от мусора wp_head()

Мусорные теги, необходимые для работы блог-клиентов. Если вы не используете блог-клиенты, то данные теги — мусор:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://wordpress.loc/xmlrpc.php?rsd" />

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://wordpress.loc/wp-includes/wlwmanifest.xml" />

Мусор, связанный с информированием о последовательности постов (предыдущий пост, следующий... бред какой-то):

<link rel='prev' title='Привет, мир!' href='http://wordpress.loc/...>

<link rel='next'...

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

<meta name="generator" content="WordPress 3.3.1" />

Тег короткой ссылки (кому он нужен вообще?):
<link rel='shortlink' href='http://wordpress.loc/?p=4' />

Единственный полезный тег, автоматически сгенерированный WordPress-ом и подставленный в HTML функцией wp_head(), информирует о том, что данная страница является первоисточником контента. По-моему данная информация должна положительно сказаться на SEO-продвижении статьи. Поэтому его мы оставим в покое:

<link rel='canonical'...

Вредные теги безжалостно удалим следующим образом:

  • Создадим в папке с темой файл functions.php
  • В файл поместим код, представленный на листинге ниже.
<?php

add_action('init', 'remheadlink');

function remheadlink()
{
	remove_action('wp_head', 'rsd_link');
	remove_action('wp_head', 'wlwmanifest_link');
	remove_action('wp_head', 'wp_generator');
	remove_action( 'wp_head', 'wp_shortlink_wp_head');
	remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head');
	remove_action( 'wp_head', 'feed_links_extra', 3);
}

Код устраняет вредные теги.

Желающим более подробно разобраться в работе с функциями WordPress полезным окажется видеокурс по разработке плагина для WordPress.

Скачать файлы разрабатываемой темы (2.19 кБ, *.zip).

← Предыдущая публикация курса Следующая публикация курса →

С уважением, Андрей Морковин.