Отправляет email-рассылки с помощью сервиса Sendsay

Премиум-шаблоны для Wordpress

  Все выпуски  

Премиум-шаблоны для Wordpress Как создать простую галерею в записи с jQuery Nivo Slider


В создании темы для WordPress добавление или объединение полезных и причудливых особенностей – плюс к его качеству.
Расскажу про процесс создания простой галереи в записи с jQuery Nivo слайдером. Вы увидите, что процесс действительно весьма прост.

Шаг первый: загрузить jQuery.

Для начала мы должны загрузить jQuery в пределах wordpress для слайдера Nivo, чтобы работать когда необходимо. Чтобы достичь этого, Вам необходимо поместить код в файле header.php перед <head> тегом и удостоверяться, что он находится перед функцией wp_head ().

<?php wp_enqueue_script(«jquery»); ?>

Шаг второй: создаём основную функцию.

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

function nivo_post_gallery($atts) {
extract(shortcode_atts(array(
«id» => get_the_ID(),
«width» => 500,
«height» => 300,
«bcolor» => «#000″,
«show_title» => false,
«link_to» => false
), $atts));
}

Как Вы можете видеть, наша функция может получить шесть (6) параметров через переменные.

* id id записи, куда мы вставляем изображения
* width ширина изображений
* height высота изображений
* bcolor цвет границы контейнера нашей галереи
* show_title булевый параметр, который мы можем установить, хотим ли мы показать признак названия изображений или нет
* link_to булевый параметр, который мы можем установить, хотим ли мы добавить ссылку к изображению или нет

Затем мы должны получить все изображения, приложенные к посту и возвратить их метки. Здесь добавлены данные, которые вошли в переменные атрибутов изображений

function nivo_post_gallery($atts) {
extract(shortcode_atts(array(
«id» => get_the_ID(),
«width» => 500,
«height» => 300,
«bcolor» => «#000″,
«show_title» => false,
«link_to» => false
), $atts));

$args = array(
«post_type» => «attachment»,
«post_mime_type» => «image»,
«numberposts» => null,
«post_status» => null,
«post_parent» => $id
);
$attachments = get_posts($args);
if($attachments) :
$output = ‘
‘; foreach($attachments as $attachment) : if($show_title) $title = $attachment->post_title; if($link_to) { $output .= »; } $output .= ‘ ['.$title.'] ‘; if($link_to) { $output .= »; } endforeach; $output .= ‘
‘;
endif;

return $output;
}

Затем мы добавим вызов полученной функции из системы коротких кодов WordPress

add_shortcode(‘nivo-gallery’,'nivo_post_gallery’);

Шаг третий: Nivo Slider

Загрузите Nivo Slider и поместите jquery.nivo.slider.js и nivo-slider.css в вашей папке шаблона.
Чтобы организовывать вещи немного больше, я создал js папку.

Затем создаём функцию инициализации, чтобы включить эти необходимые файлы, которые содержат функциональные возможности и моделирование по умолчанию nivo слайдера при загрузке страницы.

function nivo_gallery_init() {
?>

<?php
}

(дополнительно) Добавление небольшого кода моделирования, чтобы сделать его более симпатичным

function nivo_gallery_init() {
?>

<?php
}

И теперь, давайте вызовем метод Nivo Slider, во время загрузки страницы.

function nivo_gallery_init() {
?>

<?php
}

Финальный шаг добавление вызова функции в WordPress

add_action(‘wp_head’,'nivo_gallery_init’);

И с этим всё, ВУАЛЯ! Мы сделали это!

Только напечатайте [nivo-gallery] в вашем редакторе, и WordPress автоматически заменит текст в вашей записи на нашу галерею с jQuery Nivo слайдером.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru


В избранное