Сегодня я предлагаю подготовить шаблон для будущей уникальной темы блога, в которую мы, в последствии, впишем разработанный дизайн сайта.
Видеоурок
Скачать видеоурок (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 должен быть следующим (очень простым):
1 | <!DOCTYPE HTML> |
Кодировка
Текст в файле index.php будем хранить в кодировке utf-8. Это оптимальная кодировка, кроме того, именно в этой кодировке хранится контент в базе данных WordPress.
Подробнее о кодировках, перекодировках и проблеме их выбора.
Раз наш выбор пал на кодировку utf-8, проинструктируем браузер относительно нашего решения следующей директивой (именно так выглядит инструкция кодировки в стандарте HTML5):
1 | <meta charset="utf-8"> |
Наибольшим приоритетом для браузера обладают заголовки, отправляемые сервером. Менять их можно редактируя файлы движка, либо соответствующими инструкциями в файле дополнительной конфигурации Apache .htaccess (о работе с .htaccess я упоминал в статье по кодировкам).
Рис. 1. Заголовки, отправленные сервером браузеру пользователя (информация получена плагином HTTP Headers для Google Chrome).
Подключение стилей
Для подключения стилей используется стандартная инструкция:
1 | <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> |
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>. Если вы любите древовидные комментарии так, как люблю их я, то код окажется полезным:
1 | <?php |
2 | if ( is_singular() && get_option( 'thread_comments' ) ) |
3 | wp_enqueue_script( 'comment-reply' ); |
4 | ?> |
1 | <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/sdelaysite"> |
Именно по указанной в инструкции ссылке пойдет браузер, когда вы кликните на соответствующую пиктограмку.
Рис. 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"> |
1 | <link rel="pingback" href="http://www.sdelaysite.com/xmlrpc.php"> |
- Ваш друг поставил ссылку в своем блоге на одну из ваших публикаций.
- Если в блоге включен механизм обратных уведомлений, блог вашего друга постарается отправить информацию о ссылке вам.
- Адрес, на который нужно передать информацию о внешней ссылке, указан либо в рассматриваемой директиве, либо в заголовках сервера (см. рис. 1., пункт X-Pingback).
- После получения информации о внешней ссылке на адрес http://vash_blog.ru/xmlrpc.php ваш блог может опубликовать данные обратной ссылки либо в комментариях, либо в админке.
1 | <?php |
2 | wp_head(); |
3 | ?> |
Кроме необходимых данных функция 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' />
<link rel='canonical'...
Вредные теги безжалостно удалим следующим образом:
- Создадим в папке с темой файл functions.php
- В файл поместим код, представленный на листинге ниже.
1 | <?php |
2 |
3 | add_action('init', 'remheadlink'); |
4 |
5 | function remheadlink() |
6 | { |
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); |
13 | } |
Желающим более подробно разобраться в работе с функциями WordPress полезным окажется видеокурс по разработке плагина для WordPress.
Скачать файлы разрабатываемой темы (2.19 кБ, *.zip).
Комментариев нет:
Отправить комментарий