О себе

Выкладываю шаблоны, плагины и всё, что связано с Вордпрессом. Я обычный пользователь, который строит свои сайты с помощью данной CMS.
Начинал с версии 2.0.7
Ссылки на всякие «вкусности» доступны после регистрации.
Для тех, кто не хочет регистрироваться - есть подписка на Subscribe.ru(кнопка внизу страницы). При появлении свежей записи Вы получите на почту статью в нормальном виде.
Оказываю услуги по переводу шаблонов, "натягиванию" их на готовый сайт и прочее, прочее, прочее.

Свежие твиты

  • Кому Volvo XC-90? http://t.co/Kt2yEZ7

    12:41, 15 August 2011

  • Art Gallery Developer Pack - http://t.co/jho1OC9 http://t.co/IGeWIs6

    10:25, 15 August 2011

  • Премиум тема Repro depositfiles.com: http://t.co/LwwAeiP via @AddThis

    6:44, 15 August 2011

  • Как в Краснодарском крае идёт борьба с бюрократей http://t.co/PZB45uf. У кого иначе?

    8:34, 21 July 2011

Написать сообщение

http://profirms.ru/ типография Московский печатный двор.

Как создать простую галерею в записи с 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 слайдером.

Рубрики

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

Облако меток