Приветствую вас, уважаемый читатель в свежей публикации курса по созданию сайта на 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). Подключение стилей
Для подключения стилей используется стандартная инструкция:
Обратите внимание на содержимое свойства 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>. Если вы любите древовидные комментарии так, как люблю их я, то код окажется полезным:
В приведенном примере RSS-фид блога формируется удобным сервисом FeedBurner, позволяющим вести статистику подписчиков (подробнее о FeedBurner).
Именно по указанной в инструкции ссылке пойдет браузер, когда вы кликните на соответствующую пиктограмку. Рис. 3. Пиктограмка RSS в браузере Opera.
Стандартный RSS-фид WordPress будет доступен по ссылке vash_blog.ru/feed. Чтобы данный адрес завернуть на FeedBurner воспользуйтесь плагином FD Feedburner Plugin.
Путь к favion указывается следующей инструкцией (в случае моего блога ico-пиктограмма сайта находится по указанному в директиве адресу):
Ваш друг поставил ссылку в своем блоге на одну из ваших публикаций.
Если в блоге включен механизм обратных уведомлений, блог вашего друга постарается отправить информацию о ссылке вам.
Адрес, на который нужно передать информацию о внешней ссылке, указан либо в рассматриваемой директиве, либо в заголовках сервера (см. рис. 1., пункт X-Pingback).
После получения информации о внешней ссылке на адрес http://vash_blog.ru/xmlrpc.php ваш блог может опубликовать данные обратной ссылки либо в комментариях, либо в админке.
Данная функция обязательно должна присутствовать в разделе <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" />
Единственный полезный тег, автоматически сгенерированный WordPress-ом и подставленный в HTML функцией wp_head(), информирует о том, что данная страница является первоисточником контента. По-моему данная информация должна положительно сказаться на SEO-продвижении статьи. Поэтому его мы оставим в покое:
<link rel='canonical'...
Вредные теги безжалостно удалим следующим образом:
Создадим в папке с темой файл functions.php
В файл поместим код, представленный на листинге ниже.
Комментариев нет:
Отправить комментарий