Шаблон WordPress – почему все так сложно?! (продолжение)

Часто у начинающих блоггеров опускаются руки – ну не получается внести какие-то важные изменения в тему WordPress! Такие проблемы возникают и у тех, кто сначала пробовал создать блог на Блогспот, а потом «дозрел» до самостоятельного проекта, и у тех, кто сразу «кинулся на амбразуру» WordPress… Вообще, каждый может попасть в подобную ситуацию. И тогда возникает вопрос: «Ну, зачем, зачем столько отдельных страниц в шаблоне?! Почему стили записаны каким-то другим языком?! Что это за подключаемые сценарии JavaScript?!»

Я тоже часто так восклицала (точнее, ворчала тихонечко). Но не останавливала своих попыток расшифровать кодированные письмена. И вот, хочу с вами поделиться своими, вполне поверхностными, знаниями. (для лучшего понимания, рекомендую прочитать предшествующие публикации этой серии: о структуре темы и странице header.php, о страницах index.php и single.php, о странице style.php)

Содержимое, представление и поведение

В голову сразу приходит бред про трех поросят, лебедя, рака и щуку, три тополя… Так что же это? – А это, между прочим, основополагающий принцип создания современных веб-ресурсов. В том числе, наших блогов – их содержимое, представление и поведение должны быть независимы друг от друга и максимально разделены. Так уж решил Консорциум Всемирной Паутины или W3C.

Как бы сложно все это ни казалось на первый взгляд – такое разделение значительно упрощает структуру любого шаблона, в том числе и WordPress, делает ее более логичной. Только представьте себе махину кода, в котором записано все сразу: и метаданные, и стиль для каждого элемента, и само содержание, и еще парочка десятков сценариев!

А так мы, по крайней мере, знаем, куды бечь. Если ошибки в тексте – исправляем его в редакторе, если не тот цвет заголовков – меняем его в style.php, хотим что-то вставить внутрь постов – редактируем страницу single.php, и т.д.

Удобно и не только нам

Естественно, разработчики этих стандартов заботятся не столько об удобстве блоггеров, сколько о пользователях Интернета в целом.

1. Изживается разнообразие программ, которые могут быть установлены или не установлены на разных устройствах. Сегодня можно серфить по Интернету, используя, чуть ли не крышку унитаза – и она должна отображать ваш сайт так же корректно, как стационарный компьютер. А для этого, все ресурсы должны быть унифицированы.
2. Все больше ценится скорость загрузки. А это зависит от простоты кода – если не пихать в него все подряд, то и ошибок будет меньше, и любое устройство «прочитает» его значительно быстрее.

Практический пример

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

Содержание

Какое у них содержание? – Это иконки кнопок соцсетей и всплывающие подсказки, типа, «поделиться в Facebook»;

Представление

За их представление отвечает правило стиля, которое мы прописали прямо в коде. И это уже противоречит правилам, о которых мы говорим. Чтобы исправить ситуацию, нужно перенести описание стиля на страницу style.php. Сначала посмотрим на сам код:

<span style=»display:scroll;position:fixed;bottom:460px;right:100px;»>

Можно беспрепятственно прописать в CSS правила, общие для всего набора кнопок соцсетей, а именно: display:scroll;position:fixed; right:100px;

А вот высота для каждой кнопки – своя. Уверена, что есть какое-нибудь прекрасное свойство, которое позволяет выстроить элементы вертикально с определенным отступом… Но пока мне о нем неизвестно (если вы знаете – поделитесь. Поэтому мы пропишем общий стиль на страницу style.php, а высоту будем подписывать в коде. Надеюсь, разработчики международных Интернет-стандартов не заклеймят нас вечным позором.

Итак, открываем наши таблицы стилей (style.php) и добавляем туда (в самый конец документа) такое правило (собранное из предыдущего кода — я назвала его rightbuttons – вы можете назвать, как хотите):

.rightbuttons {

display:scroll;

position:fixed;

right:100px;

}

Теперь можно прописать код для кнопок социальных сетей на странице single.php так (привожу только теги span сверху вниз – код для вывода иконок и ссылки на социальные сети не меняются):

<span style=»bottom:460px;» class=»rightbuttons»>

<span style=»bottom:420px;» class=»rightbuttons»>

<span style=»bottom:380px;» class=»rightbuttons»>

<span style=»bottom:340px;» class=»rightbuttons»>

<span style=»bottom:300px;» class=»rightbuttons»>

<span style=»bottom:260px;» class=»rightbuttons»>

Теперь код стал немного короче (на 186 символов и логичнее (не повторяются одни и те же свойства стиля 6 раз!). Консорциум Всемирной Паутины – W3C – может нами гордиться!

Поведение

Ну, с поведением у нас тоже – не идеально. Сценарии появления подтверждающих окошек разных социальных сетей вписаны прямо в ссылки. Но пока мы не будем ничего трогать. Просто оценим на этом примере, насколько «многослойным» оказывается любой, вполне примитивный на первый взгляд, код.

Именно разделять и разносить эти слои по отдельным полочкам призывает нас W3C. Нравится нам это или нет, но за такими шаблонами – будущее. А зачастую и настоящее.