Виджетизация тем для WordPress
Вот скачали классную тему для WordPress, поднастроили ее маленько под свои нужды, порадовались тому, как легко все получается, захотели настроить сайдбар, набить его своими виджетами и обломались.
В администраторской консоли в списке виджетов Appearance->Widgets обнаружили жуткую ругань вордпресса. Она жаловался, что тема, видите ли, как-то не так устроена, и виджеты в ее сайдбаре он показывать не хочет. Ну, как ребенок маленький, честное слово! То есть, что-то похожее на виджеты в сайдбаре, конечно, есть, да вот не совсем то, что хотелось бы, и настроить это “что-то похожее” не получается. В поисках истины заглянули в интернет и вот что узнали…
Оказывается, чтобы вордпрессовская тема поддерживала виджеты, она должна удовлетворять некоторым критериям. А если тема критериям не удовлетворяет, то ядро вордпресса в растерянности разводит руками и признает, что оно не знает, как в “эту хрень” вообще вставлять виджеты.
Я для примера специально взял тему, которая не поддерживает виджеты, называется эта тема marque.
Итак, вы скачали тему marque для вордпресса вот здесь, распаковали ее и закинули на ваш хостинг в папочку вордпресса /wp-content/themes/. Затем активировали тему в панели Appearance->Themes.
И вот теперь начинаются танцы с бубном. Можно, кстати, приобрести в магазине музыкальных инструментов штуковину, которую эскимосы в рот вставляют и зудят на ней. Очень помогает при проведении подобных процедур.
Итак, первый шаг.
Сам исходник сайдбара хранится вот здесь: /wp-content/themes/marque/sidebar.php, именно его мы и будем исправлять в первую очередь. Нам нужно сделать так, чтобы в нем обязательно присутствовал один ненумерованный список <ul></ul>. Именно этот список ядро вордпресса заполнит впоследствии виджетами.
Поэтому вы сначала сохраняете копию этого файла (а вдруг там что интересное есть), а затем начинаете без зазрения совести переписывать весь код сайдбара с нуля. Нам нужно, чтобы в нем осталось вот что:
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<li>
<h2>Заголовок виджета №1</h2>
Тело виджета №1
</li>
<li>
<h2>Заголовок виджета №2</h2>
Тело виджета №2
</li>
<?php endif; ?>
</ul>
Итак, что мы здесь видим. 1) UL-список, 2) PHP-блок if-endif 3) html-код внутри PHP-блока.
Блок if-endif проверяет включена ли в вордпрессе возможность динамического добавления виджетов в сайдбар. И если она НЕ включена, то выводит в результирующий документ тот html-код, что находится в этом блоке, то есть в данном случае два элемента списка <li>. Если же поддержка динамического сайдбара включена, то от всего этого остается лишь вот что:
</ul>
Страшно, да? Вот именно этот пустой список впоследствии и будет наполнен виджетами. Кстати, если поддержка виджетов включена, но ни один виджет не выбран, то будет отображен сайдбар по умолчанию, то есть как раз вся та разметка, что вы видите в первом листинге.
Итак, теперь шаг второй.
Проверяем, есть ли в папке /wp-content/themes/marque/ файлик functions.php. Конечно, если тема не поддерживает виджеты, то файлика этого Вы там не обнаружите. Создайте его и напишите внутри вот что:
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));
?>
Этот код зарегистрирует сайдбар и задаст для его отображения некоторые параметры. В данном случае, каждый виджет он обернет в тег <LI>, а заголовок у каждого виджета будет обернут в тег <H2>. Первое нам необходимо, чтобы список <UL> был валидным (чтобы он содержал в себе не всякий текстовый мусор, а именно элементы <LI>), а второе – чтобы затем с легкостью подправив файл стилей styles.css данного шаблона, мы могли отрегулировать требуемый нам внешний вид заголовков виджетов.
И последний, третий шаг. (необязательный)
Правка файла стилей. Сначала найдите его здесь: /wp-content/themes/marque/style.css и проконтролируйте, чтобы в нем существовало или появилось следующее:
h2 {
font-size: 12px;
margin: 0px 0 6px 0;
padding: 3px 0 3px 5px;
font-weight: bold;
color: #ffffff;
border-bottom: #3d3d3d 1px solid;
background: url(“images/title.jpg”) repeat-x;
}
h2 a,
h2 a:visited,
h2 a:hover,
h2 a:visited:hover {
text-decoration: none;
color: #ffffff;
}
Здесь мы полностью отрегулировали внешний вид заголовков виджетов. Первый стиль для H2 вы задаете самостоятельно, сообразно Вашим требованиям к внешнему виду заголовков. В приведенном примере заголовки будут заполнены фоном images/title.jpg. Ну а вторая часть стиля для H2 просто отменяет подчеркивания и изменение цвета для заголовков, если они вдруг (не приведи Господи!) содержат ссылки.
Вот и все. Наслаждайтесь.
А вот здесь лежат исправленные файлы.
—————————————————–
Хостинг изображений – radikal.ru
О применении мозга в дизайне
Здравствуйте, мои дорогие любители дизайна. Это снова я, снова с новой (ух ты:-) ) писаниной. Восхотелось мне чего-нибудь сегодня покритиковать. Благо и претендент удачный нашелся.
Но покритиковать не просто так, а конструктивно. Предложить свое. Чтобы знали, что хозяин блога не только тявкать исподтишка и плевать на спину может (это, кстати, очень просто), а может предложить еще что-то свое.
Итак, претендент. Чтобы было понятно, о чем конкретно я веду речь – ниже будет маленькая иллюстрация (увеличивающаяся по клику):
Что мы тут, уважаемые граждане, видим? Мрак и ужас мы тут видим, помноженные еще на два мрака и ужаса. Причем, что интересно – технически грамотно (см. исходный код) выполненные мрак и ужас. Даже без таблиц.
Есть некая идея: грамотный мерчандайзинг – это очень сложно (тонкий намек в виде паззла), но мы совсем недорого возьмем решение этой проблемы на себя, и все у вас будет в лучшем виде. Это вот была идея.
А дальше начинается полная, простите, годзилла. Злая и некормленная:
– шрифты. О, эти болдовые газетные шрифты… как они меня успели достать в свое время!
– цвета. Сине-зеленая тоска.
– качество графики. За гранью бобра и козла.
– кадрирование фото. За той же самой гранью. Не надо так кадрировать фото. Я не верю, что женская грудь с бейджем символизирует собой “мерчандайзовый аудит”. Вот не верю и все. А обучение мерчандайзингу в полях…
– заголовки подразделов. Граждане, имейте совесть. У меня зрение стопроцентное, и то прочитывал с пятого раза. А у кого не стопроцентное?
– форма кусочков паззла нефункциональна. Это видно глазу, и сразу понимаешь – что нет, не справятся ребята со своей задачей. Такие кусочки не состыковать.
И ведь этот сайт должен продавать.
Короче, решил я действовать в рамках той же идеи. С паззлами. Получилось так:
В общем, я не говорю, что это идеально и суперзашибенно (будь у меня реальный заказчик – я бы долго обсуждал с ним внешний вид пиктограмм, а также сделал бы два-три варианта фона), но в целом:
– сплэшскрин приобрел более яркий и прикольный (жена подсказала – гламурный) вид;
– пиктограммки оживили страницу (и позволили избавиться от фото вообще, ибо кадрирование в таких сложных рамках – полный аллес гемахт);
– появляющиеся при ховере названия разделов реализуются легко (одним лишь CSS), а то, что они появляются и исчезают позволяет избавиться от лишней “замусоренности” страницы.
Вот как-то так. Вынимательно слушаю комментаторов.
PS: Там еще есть флешь-версия сайта, это отдельная и весьма грустная песня, которую я как-нибудь тоже перепою на новый лад.
—————————————————–
Хостинг изображений – radikal.ru
Еще порция простоты и изящества
Простое и кроссбраузерное решение для создания резинового блока с фиксированными отступами:
<style>
body
{
padding:0;
margin: 0;
}
</style>
</head>
<body>
<div style=”position: absolute; left: 100px; right: 100px; height:100%; background:#f00; min-width: 300px; overflow: auto;”></div>
</body>
Прошу обратить внимание, что задание position:absolute; делает div потомком уже не body, а непосрдественно окна браузера.
—————————————————–
Хостинг изображений – radikal.ru
Голосовалка…
…для оценки ядрености хвотографических карточек. Применяется цветовое кодирование: 1 – красный, 5 – зеленый. Между ними – переходы. Запросто реализуется на js, особенно, если онклики привязать к чекбоксам, или радиобаттонам, а сами их засунуть в инвизибльный div. Можыд кому идея пригодицца.
—————————————————–
Хостинг изображений – radikal.ru
Как реализовать кнопку, не используя, собственно, кнопку?
Вопрос достаточно интересный. Как сделать эмуляцию кнопки, которая реагирует на наведение курсора не прибегая к слайд-эффектам, основанным на ява-скриптах? С помощью CSS – очень просто. Для меня, кстати, было настоящим открытием, что в CSS свойство “hover” применимо практически к любому элементу. Но, обо всем по порядку.
#button {
width: 60px;
height: 30px;
background: url(1.jpg);
}
#button:hover {
width: 60px;
height: 30px;
background: url(2.jpg);
}
#button a {
text-decoration: none;
font-size: 18px;
}
#button a:hover {
text-decoration: none;
font-size: 18px;
}
HTML:
<body>
<div id=”button”><a href=”#”> </a></div>
</div>
Неразрывных пробелов добавлять по вкусу до тех пор, пока область ссылки начисто не перекроет область эмулированной кнопки.
А можно поступить проще и написать текст кнопки в ссылке, вместо пробелов. А для того, чтобы ссылка полностью перекрывала область кнопки – правильно расставить padding’и. Тут уж все зависит от вашей фантазии.
—————————————————–
Хостинг изображений – radikal.ru