Четверг , Февраль 2 2017
Главная / Делаем блог / Шаблон WordPress – почему все так сложно?! (продолжение)

Шаблон 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;

А вот высота для каждой кнопки – своя. Уверена, что есть какое-нибудь прекрасное свойство, которое позволяет выстроить элементы вертикально с определенным отступом… Но пока мне о нем неизвестно (если вы знаете – поделитесьsmile. Поэтому мы пропишем общий стиль на страницу 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 символовsmile и логичнее (не повторяются одни и те же свойства стиля 6 раз!). Консорциум Всемирной Паутины – W3C – может нами гордиться!

Поведение

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

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

Автор поста - Екатерина Ручкина

Копирайтер, постоянный автор и админ нескольких сайтов разной тематики, проектов в соцсетях. Благодарю за возрождение блога его нового владельца!

Один комментарий

  1. Вячеслав

    Реанимированные комменты

    ladosha:
    15.05.2012 в 20:19
    Как страшно жить…

    katyaru:
    15.05.2012 в 20:20
    Конечно))) Хорошо тебе смеяться, победитель Яндекса!

    Яна:
    15.05.2012 в 20:23
    «победитель Яндекса» — классно сказано! laugh

    katyaru:
    15.05.2012 в 20:25
    smile

    Александра:
    15.05.2012 в 20:20
    class=»rightbuttons» — коды с подобными кавычками не работают, нужны обычные » или ‘

    Александра:
    15.05.2012 в 20:21
    Странно, но мои обычные кавычки у тебя тоже преобразовались(((

    katyaru:
    15.05.2012 в 20:24
    Просто, чтобы человек мог скопипастить код — я его даю через плагин, а так я записываю только, чтобы показать некоторые моменты. Но ты правильно заметила — надо пояснять такие вещи)

    katyaru:
    15.05.2012 в 20:23
    Я надеялась, что это и так понятно) Но ты права — нужно это отдельно оговаривать, это редактор графический — гад, так их разворачивает.

    Яна:
    15.05.2012 в 20:23
    Очень полезная статья. Я уже три года занимаюсь блогом, а еще не знала этих моментов. Так что заношу статью в закладки, спасибо.

    katyaru:
    15.05.2012 в 20:25
    Я рада)

    Валерия:
    15.05.2012 в 20:47
    ВП для меня — дивная субстанция, однако!.. ))) Но, если что, буду знать, где специалиста найти! )))

    katyaru:
    15.05.2012 в 22:49
    Да уж, такой «доктор Смерть» для шаблона)))

    Zoja:
    16.05.2012 в 00:51
    и я, и я!…

    katyaru:
    16.05.2012 в 00:54
    smile лихие вы, деученки smile

    Галина:
    16.05.2012 в 08:07
    Лёгкая оторопь… надо будет вернуться к этому ещё!

    katyaru:
    16.05.2012 в 11:04
    Не пугай меня!)

    Людмила:
    16.05.2012 в 14:05
    Интересно,когда я ковыряюсь в шаблоне ни о чем «таком» не задумываюсь. А вот прочитала, во-первых, ничего не поняла, а во-вторых стало страшно. Это как будто прыжки в воду — когда прыгаешь и не думаешь о глубине, все нормально, а как только задумался, все с места не свинешся.
    У меня все получаеться методом «тыка». Такнула, получилось — хорошо, не получилось — убрала.

    katyaru:
    16.05.2012 в 14:11
    Нет, это только сначала страшно может показаться — на самом деле, все это ведет к упрощению и логичности. Мы блуждаем по нашим шаблонам, как по лесу. А это неправильно. Если понять, хотя бы поверхностно, основные принципы, то будет гораздо проще управлять блогом.
    Я предпочитаю комбинировать обя метода — метод тыка и метод познания)))

    Алиса:
    17.05.2012 в 01:25
    Для кодов плагин есть. Я делала блог по хтмл5 и коды в него заворачивала. А насчет кнопочек вертикальных. У моего малого в блоге кнопки со всех плагинов почему-то под статьей становились вертикально через приличный промежуток. Пришлось все плагины снести и вывести через скрипт. А вот почему — для меня осталось тайной, покрытой мраком.

    katyaru:
    17.05.2012 в 10:19
    Либо в стилях что-то такое было прописано, либо, может быть, они были в в тегах span — такие элементы всегда с новой строки начинаются

    Как поставить якорь в текст? | БлоготеЙ!:
    14.06.2012 в 15:48
    […] более валидный, то есть, соответствующий последним стандартам W3C. Для шаблонов, написанных на языке xhtml нужно […]

    Как сделать фавиконку | БлоготеЙ!:
    14.06.2012 в 15:51
    […] картинки – фавиконки (favicon), а также, ее размещению в коде шаблона WordPress, мы и посвятим сегодняшнюю […]

    Оптимизация кода картинок | БлоготеЙ!:
    14.06.2012 в 15:52
    […] – атрибут, который признан обязательным великой и могучей организацией W3C (Консорциум Всемирной Паутины). Дело в том, что слова, […]

    Spawnet:
    10.09.2012 в 16:38
    Нашёл что искал.
    спасибо автору.С уважением,spawnet.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

.