Гаджеты на блоггере — это небольшие готовые модули, которые позволяют быстро подключить к вашему блогу тот или иной функционал. Например блок последних сообщений или форму подписки. Это позволяет очень быстро все настроить — просто выбираете нужные гаджеты, конфигурируете их и размещаете с помощью перетаскивания в нужных местах вашего шаблона.
Но иногда возникает такая задача — выводить определенные гаджеты только на определенных страницах. Например, оставить форму подписки или рекламные баннеры или календарь постов только на главной, а на странице контактов вывести в боковой колонке список ваших профилей в социальных сетях.
Как это делается? Если говорить вкратце — нужно в html-редакторе шаблона вашего блога найти нужный вам гаджет и добавить к нему условие вроде такого: «если открыта такая-то страница, то гаджет показываем, иначе скрываем его».
Задача, казалось бы, простая, но если вы раньше с ней не сталкивались, то у вас сразу возникнут следующие вопросы:
- Как найти код нужного гаджета в коде шаблона?
- Как правильно добавить к нему условие?
- Как правильно написать адрес страницы, для которой будет выполняться условие?
В данном уроке мы последовательно разберем эти три вопроса и научимся управлять показов гаджетов на нашем блоге.
1. Код шаблона проще всего искать с помощью встроенного в браузер инструмента для разработчиков.
Способ 1. Если вы пользуетесь Google Chrome, то нажмите клавишу F12, а лучше выберите на странице нужный гаджет, нажмите по нему правой кнопкой мыши и выберите пункт в самом низу появившегося списка — «Просмотр кода элемента».
Если вы пользуетесь Firefox, то установите себе наиполезнейшее приложение — Firebug. C ним работать аналогично предыдущему варианту — правый клик на гаджете и «Инспектировать элемент с помощью Firebug».
Для Internet Explorer есть расширение — IE Developer Tools, которое тоже вызывается по нажатию F12, в Opera уже встроен инструмент Dragon Fly. Последними двумя я почти не пользовался, поэтому практически ничего толкового не скажу. Знаю только, что они есть и ими можно пользоваться.
Лично я большую часть времени работаю в Chrome, а для создания сайтов часто прибегаю к помощи Firefox — именно из-за установленного там Firebug, поскольку на момент написания поста он остается самым лучшим помощником разработчика.
Посмотрите внимательно на скриншот (при клике откроется в новом окне). Здесь показано, как выглядит интернет-страница с включенным Firebug.
На скриншоте видно, что я выделил гаджет архива, проинспектировал его с помощью Firebug и получил исходный код страницы блога с выделенной строчкой кода, который относится к этому гаджету. Обратите внимание, что выделена строка элемента
- , то есть элемента списка. Если мы станем двигаться вверх по дереву исходного кода, то обнаружим корневой элемент списка
-
- , вложенный в несколько контейнеров div. div с классом «widget-content» отвечает за содержимое гаджета. Над ним идет заголовок блока, заключенный в тег
— «Архив блога». А выше находится контейнер div, который и является контейнером всего гаджета архива. Контейнер гаджета можно узнать потому, что у него всегда идет класс «widget», и через пробел написано название гаджета. В данном случае это «BlogArchive». Если вы на строке с этим контейнером щелкните слева по значку «-«, то есть свернете этот контейнер, то увидите, что он находится на одном уровне с другими подобными контейнерами, которые все имеют класс widget, и через пробел — уникальное название гаджета. На нашем скриншоте мы видим выше такие гаджеты, как «widget Label» (гаджет ярлыков или рубрик), «widget FollowByEmail» (подписка на рассылку), «widget LinkList» (список ссылок), «widget Text» (текстовый гаджет) и «widget Profile» (гаджет автора блога).
Таким образом вы можете понять теперь, как вам найти код нужного вам гаджета. У вас список скорее всего будет другим, но пользуясь данным алгоритмом, вы легко найдете нужный гаджет.
В итоге, нам нужен уникальный id нашего гаджета. Не класс, а именно id! Если у вас на странице есть два гаджета одного типа (а это очень вероятно, особенно если вы используете гаджет html/javascript), то у них будет одинаковый класс «widget HTML».
Два гаджета одного класса можно отличить по id. он то нам и нужен. В той же строке контейнера, где записан класс гаджета, записан и его id. Как правило, это тот же уникальный класс, только вместе с порядковым номером. Например «HTML1» или «Text3».
Данный способ немного сложноват и предполагает наличие хотя бы базовых знаний html, зато позволяет вам использовать его и в других ситуациях. Например, когда нужно правильно определить какой-нибудь лишний кусок дизайна, который хочется удалить.
Способ 2. Еще один более простой способ узнать id гаджета заключается в следующем — на вкладке «Дизайн» в административной панели блоггера открываете нужный вам гаджет и увеличиваете окно на весь экран, чтобы видеть полностью адресную строку:
В конце адреса страницы, после слов widgetid и знака «=» будет нужный нам id нашего гаджета!
Копируем id гаджета, идем в html-редактор шаблона и с помощью поиска (CTRL + F) находим код нашего гаджета.
[box type=»warning»] Перед работой с html-кодом шаблона не забываем делать резервную копию![/box]
Код гаджет имеет примерно такой вид:
[содержимое виджета]
То есть идут две строки открывающие гаджет, потом идет само содержимое, и в конце — две строки закрывающие гаджет.
Например для гаджета профиля в моем блоге используется такой код:
Как видите, от вас потребуется некоторое терпение, чтобы правильно выделить код гаджета.
2. Когда код гаджета найден, и точно определены его начало и конец, можно добавить к нему условие. Для этого заключим содержимое гаджета в условие по следующей схеме:
[содержимое виджета]
То есть после первых двух строк, начиная со строки <b:widget…, вам нужно поставить условие, и перед последними двумя строками, начиная с
Разберем сам код условия:
Слово «if» указывает на условие. После кода «data:blog.pageType» указывается тип страницы, для которого должно быть выполнено условие. То есть, если мы находится на этой странице, то гаджет будет показан. А на всех остальных страницах он будет скрыт. Это один вариант.
Предположим, что мы хотим выводить гаджет везде, кроме определенных страниц. Что нам теперь делать — прописать в условие все страницы, где он будет выводиться? Это может быть очень утомительным. Для этого есть обратное условие. В этом случае после «data:blog.pageType» будет не двойной знак равенства, который указывает на тождество условия заданному типу страницы, а вот такой знак: «!=», который указывает на то, что условие будет работать только в случае неравенства. То есть гаджет будет выводится только в том случае, если мы находимся на любой странице, отличной от указанной в условии. Можно использовать оба эти способа, в зависимости от ситуации.
И не забывайте, что нужно поставить закрывающий тег условия перед двумя последними строками кода гаджета:
3. Как правильно прописать тип страницы — последнее, что мы разберем сегодня. Тут вам все станет понятно из следующего списка:
1. Показ только для главной страницы:
[box type=»warning»] Обратите внимание, что, если вы используете какую-то другую страницу вместо главной, то нужно будет прописать полный адрес используемой страницы (см. 7 пункт)[/box]
2. Показ только для страниц сообщений:
3. Показ только для страниц архива:
4. Показ только для статичных страниц:
5. Показ только для главной и для страниц ярлыков:
6. Показ для статичных страниц и страниц сообщений:
7. Показ только для определенной пользователем страницы (нужно вставить полный адрес страницы):
Ну и конечно, каждое из эти условий можно применить наоборот, если вместо двойного равенства поставить «!=».
Это достаточно сложная тема, работа непосредственно с кодом шаблона. Невсем это нужно, но иногда появляется такая необходимость, и, если вы вооружены необходимым знанием, то у вас все получиться! Если что-то не получается или есть другой опыт решения данного вопроса, то прошу оставлять комментарии.
[box type=»bio»] Понравилась статья — кликните на кнопки социальных сетей внизу. Подпишитесь на рассылку новых сообщений сайта — она находится в правой колонке сверху. Так вы всегда сможете получать самую свежую информацию с этого блога прямо себе на почту! [/box]
-
