Интеграция Fading кнопки Navigation Если в CSS для вашего тема также в подкаталог в вашей теме (например, "CSS" папке), то начиная с "точка-точка-слэш для резервного копирования одной директории первый смысл.

Я разговаривал с Даррен Хойт недавно о строительстве лучшего интерактивной кнопки. Цель кнопка обеспечивает три государства: регулярно, Hover, и активной (нажатой). Это является стандартной любой хороший кнопки, но мы не собираемся интегрировать некоторыеFading последствий в нее, чтобы действительно сделать кнопку удовлетворяющие взаимодействовать. Вот демо, и теперь мы собираемся показать вам, как интегрировать его в WordPress.

Я сказал (громко) и раньше, что да, это будет работать с WordPress. Яне имел в виду ничего особенного, а просто любая старая техника. WordPress не волнует, что вы используете в нем. Jquery Любой Ol 'плагина вы сможете найти все будет прекрасно работать. На этот раз я собираюсь пройти через этот процесс. Это будет конкретный Тсвою технику, но эта серия шагов может быть применена к включению почти любой другой JavaScript "Thingy" вы найдете и вы хотите использовать в Интернете.

Что мы имеем здесь? Разметка - У нас есть некоторые HTML, который должен быть на месте для меняработу. CSS - У нас есть некоторые места в CSS, что разметка потребности Изображения - куда им идти? Jquery зависимость - этот метод будет опираться на JQuery, так что мы должны убедиться, что имеющиеся плагина Jquery - нам нужен конкретный плагин загружен что оУра Кнопка будет использоваться сценарий - у нас есть наш собственный JavaScript нам нужно запустить

Лучше просто взять это по кусочкам.

1. Разметка

Как любой хороший семантической разметки навигации, мы съемка для разметки следующим образом:

<ul id="nav"> <li> <; HREF ="#"> Ознакомьтесь </ A> </ LI> <li> <a href="#"> Свяжитесь с нами </ A> </ LI> </ UL>

Это жестко, хотя, и это не хорошо. С WordPress, мы можем иметь эту навигацию легко быть динамичными, с помощью весельяction создать его вместо. Считая эту навигацию будет список страниц, мы будем использовать соответствующую функцию:

<ul id="nav"> <? PHP wp_list_pages ( "title_li ="); </ UL>

Эта функция может быть настроена тонну, поэтому проверить йE Кодекса, если вам нужно добавить страницы, исключать страницы, идти только один уровень и т.д.

2. CSS

У нас есть некоторые CSS, что делает это меню выглядеть так, как она делает:

# (список NAV-стиль: нет;) # (NAV Ли Дисплей: встроенный;) # NAV Ли (Дисплей: BloCK; обивка: 10px 0; текстовые украшения: нет; ширина: 200px; текстовых Align: центр; текста тени: 0-1px 0 RGBA (0, 0, 0, 0.8); FONT-WEIGHT: Bold; текстовых Преобразование: заглавные; COLOR: # FFF; шрифта: Bold .8 Em 'Lucida Grande', Arial; фона: # 90b339 УрL (.. / Images / кнопка-bg.png) 0-183px повторяю-X;-МОЗ границы радиуса: 5px;-WebKit границы радиуса: 5px; границу: 1px твердо # 608925; Float: слева; разницы : 0 10px 10px 0;)

Теперь нам нужно рассмотреть, где это необходимо CSS. Это будет шоуN на каждой странице сайта? Если да, то она должна идти в основном CSS, что ваша тема уже используется. Загрузка дополнительных файлов CSS только для этого, вероятно, является излишним. Если это специальное навигации используется только на одном (или очень мало) страницсайта, то вам, вероятно, не следует помещать его в основной стиль, но оставить его отдельно и загрузить файл с CSS условные метки в заголовке.

3. Изображения

Нам нужны изображения для нашей кнопки. Очевидно, что в WordPress у нас есть "темы". Navigatiна, безусловно, частью темы, поэтому изображения принадлежат там. Если Вы блоги, и использование фотографий в ваших статей, я бы утверждать, эти образы не принадлежат в папке темы изображений, но в папку с изображениями в корне. Те, которые не зависят от TОн текущей темы вашего блога, а что-то вроде навигации.

Существует, вероятно, уже папку с изображениями в папке темы, поэтому поставил изображения там. Если не сделать одну и положил их в этом. В предыдущем шаге, мы ссылаются BACkground изображение на наши ссылки на якорь. Обратите внимание на URL с начала "../". Это относительный путь из файла CSS в файл изображения. Если для вашего CSS тема также в подкаталог в вашей теме (например, "CSS" папке), то начиная сточка-точка-слэш для резервного копирования одной директории первый смысл. Если ваш CSS закладывает прямо в папке вашей темы, просто запустите ссылку на это изображение с "Images /".

В этой демонстрации, мы используем одно изображение с градиентом. Это произT путь, о технике, как и все мы делаем, это сдвиг изображения вверх и вниз для выполнения различных состояний кнопки.

4. Jquery иждивенцев

Все, что мы должны сделать здесь, это убедиться, что загружена Jquery. Не жесткий кодекс новой тяжелойCT ссылка на Jquery. Как показано в статье связано с выше идет в, вы должны позволить WordPress знаю, что вы используете JavaScript библиотеку, так что другие вещи, которые также намерены использовать его не идет и загружать свои собственные копии слишком и вызвать конфликты. Короче говоря: не яперед вашими wp_head (); крючком:

<? PHP wp_enqueue_script ( "JQuery");?> 5. Jquery Plugin

Теперь нам нужно связать файл плагина, который не поставляется вместе с WordPress. Технически вы можете использовать wp_enqueue_script здесь хорошо, но польза делуIng поэтому это время довольно минимальным, так как не именовании существует для каждого плагина неясной там. В этом случае, просто бросить файл плагина в "JS" папки внутри вашей темы и связать его вот так:

<тип скрипта = 'Текст / JavaScript' SRC = '<? PHP bloginfo (' stylesheet_directory ');
?> / JS / plugin.js '> </ script>

В нашем случае, мы будем с помощью плагина фон позицию для Jquery выполнить часть эффекта.

6. Пользовательские сценарии

Теперь мыв состоянии, как будто мы с CSS. Есть ли файл сценария, который уже работает на каждой странице сайта? И это меня будет выполняться на каждой странице сайта? Если да, то вы можете отказаться от JavaScript в файл, в КиС чистыми вещами, а не загрузить другой файл. Если нет никакого JavaScript, Вы можете соединить Ваш скрипт так же, как мы загрузили плагина:

<тип скрипта = 'Текст / JavaScript "SRC =' <? PHP bloginfo ( 'stylesheet_directory');
? &GT; / JS / script.js '> </ script>

За нашу кнопку, мы делаем некоторые довольно простые вещи. Мы собираемся переложить фон позицию градиента изображения немного, чтобы придать ему тонким эффектом опрокидывания. Тогда мы будем использовать MouseDown событие Simulсъели "активном" состоянии:

$ (функция () ($ ( "# NAV Ли"). Hover (функция () ($ (это). Animate ((backgroundPosition: "0-140px"), 100)), функция () ($ (это ). Animate ((backgroundPosition: "0-183px"), 100))). мышивниз (функция () ($ (это). CSS ((backgroundPosition: "0-220px" ...)); мы сделали это!

Так что охватывает теорию установки в уже существующие в демо-сайта WordPress. Короче говоря, вы должны прервать Помимо того, что предусмотрено и выяснить, T он лучшее место, чтобы поставить или воссоздать все детали в Разумный путь. И снова проверить блога Даррен Хойт по происхождению этой кнопки техники.

ОП: 10px; "> Как стать? Получить книгу!
Узнайте, как отвечать на ваши навыки веб-дизайна на новый уровень путем создания сайтов с WordPress.
Подпишитесь сейчас специальная скидка - Coming Эта осень!

© 2009 копаться в WordPress | PermalinК | 19 комментариев | Добавить в Delicious
Категория: JavaScript | Tagged: кнопки, страницы, тем