Приветствую вас, уважаемый читатель в свежей публикации курса по созданию сайта на 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 должен быть следующим (очень простым):
Подробнее о стандартах и их эволюции (статья старая, поэтому в ней я принял решение использовать оптимальный на тот момент стандарт HTML 4.01.).
Кодировка
Текст в файле index.php будем хранить в кодировке utf-8. Это оптимальная кодировка, кроме того, именно в этой кодировке хранится контент в базе данных WordPress.
Подробнее о кодировках, перекодировках и проблеме их выбора.
Раз наш выбор пал на кодировку utf-8, проинструктируем браузер относительно нашего решения следующей директивой (именно так выглядит инструкция кодировки в стандарте HTML5):
В качестве дополнительной информации сообщу интересную вещь. Если даже мы попытаемся сбить браузер с толку неправильным указанием кодировки в директиве, например <meta charset="windows-1251">, умный браузер все равно будет отображать данные в кодировке utf-8. Возникает законный вопрос: «Кто еще сообщил браузеру информацию о кодировке страницы?». Оказывается, этот кто-то движок WordPress, отправивший соответствующие заголовки браузеру (см. рис. 1). Если соответствующего заголовка от сервера получено не будет, браузер воспользуется информацией в директиве <meta charset="windows-1251"> и отобразит кракозябры, т. к., на самом-то деле, контент написан в кодировке utf-8.
Наибольшим приоритетом для браузера обладают заголовки, отправляемые сервером. Менять их можно редактируя файлы движка, либо соответствующими инструкциями в файле дополнительной конфигурации Apache
.htaccess (о работе с
.htaccess я упоминал в
статье по кодировкам).
Рис. 1. Заголовки, отправленные сервером браузеру пользователя (информация получена плагином HTTP Headers для Google Chrome).
Подключение стилей
Для подключения стилей используется стандартная инструкция:
1 | <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>. Если вы любите древовидные комментарии так, как люблю их я, то код окажется полезным:
2 | if ( is_singular() && get_option( 'thread_comments' ) ) |
3 | wp_enqueue_script( 'comment-reply' ); |
Ссылка на RSS блога должна быть указана следующей инструкцией раздела <head>:
1 | <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/sdelaysite"> |
В приведенном примере RSS-фид блога формируется удобным сервисом
FeedBurner, позволяющим вести статистику подписчиков (
подробнее о FeedBurner).
Именно по указанной в инструкции ссылке пойдет браузер, когда вы кликните на соответствующую пиктограмку.
Рис. 3. Пиктограмка RSS в браузере Opera.
Стандартный RSS-фид WordPress будет доступен по ссылке vash_blog.ru/feed. Чтобы данный адрес завернуть на FeedBurner воспользуйтесь плагином
FD Feedburner Plugin.
Путь к
favion указывается следующей инструкцией (в случае моего блога ico-пиктограмма сайта находится по указанному в директиве адресу):
1 | <link rel="shortcut icon" href="http://www.sdelaysite.com/favicon.ico"> |
Сервис PingBack также требует свою директиву:
1 | <link rel="pingback" href="http://www.sdelaysite.com/xmlrpc.php"> |
Вкратце PingBack работает следующим образом:
- Ваш друг поставил ссылку в своем блоге на одну из ваших публикаций.
- Если в блоге включен механизм обратных уведомлений, блог вашего друга постарается отправить информацию о ссылке вам.
- Адрес, на который нужно передать информацию о внешней ссылке, указан либо в рассматриваемой директиве, либо в заголовках сервера (см. рис. 1., пункт X-Pingback).
- После получения информации о внешней ссылке на адрес http://vash_blog.ru/xmlrpc.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
- В файл поместим код, представленный на листинге ниже.
3 | add_action('init', 'remheadlink'); |
7 | remove_action('wp_head', 'rsd_link'); |
8 | remove_action('wp_head', 'wlwmanifest_link'); |
9 | remove_action('wp_head', 'wp_generator'); |
10 | remove_action( 'wp_head', 'wp_shortlink_wp_head'); |
11 | remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head'); |
12 | remove_action( 'wp_head', 'feed_links_extra', 3); |
Код устраняет вредные теги.
Желающим более подробно разобраться в работе с функциями WordPress полезным окажется видеокурс по
разработке плагина для WordPress.
Скачать файлы разрабатываемой темы (2.19 кБ, *.zip).
Комментариев нет:
Отправить комментарий