Интеграция 3D-галереи Piecemaker в тему WordPress

3D-галерея

От автора:

Этот учебник продемонстрирует вам, как успешно интегрировать 3D флэш-ротатор изображения Piecemaker в свою тему WordPress. Также мы обсудим установку пользовательской панели администрирования, которая сделает супер легкой персональную настройку работы ротатора для пользователей.

Piecemaker – великолепный ротатор изображений 3D Flash с открытым исходным кодом, созданный Бьорном Крюгером (Björn Crüger) из Modularweb.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

3D-галерея

Краткий обзор

Все файлы, включенные в файл ZIP, для вас уже модифицированы. Еще мы включили папку, в которой находятся все файлы Piecemaker в первоначальном виде. Я советую вам отметиться на сайте Piecemaker и ознакомиться с ним до перехода обратно к этому учебному пособию.

Шаг 1. Модифицируйте ActionScript

Первый шаг – модифицирование ActionScript таким образом, чтобы он хорошо взаимодействовал с WordPress. ActionScript, поставляемый с Piecemaker, определяет три значения, нужные Piecemaker’у для правильного функционирования:

Источник XML.

Источник CSS.

Путь к папке изображений.

Источник XML определяет разнообразные установки Picemaker’а и позволяет определять изображения и их описание. Файл CSS определяет стили панелям характеристик Piecemaker’а, а каталог изображений говорит Piecemaker’у, откуда извлекать изображения.

Откройте файл FLA под названием «piecemakerNoShadow.fla» и откройте окно действий (Actions). В рамке 1 вы увидите действия внизу. Пожалуйста, обратите внимание, что для открытия исходного файла вам понадобится Flash CS4.

3D-галерея

Для того, чтобы Piecemaker правильно заработал в нашей теме WordPress, нужно установить эти переменные динамически. Для этого мы используем FlashVars. FlashVars – это переменные, которые мы установим в своем шаблоне страницы WordPress, и которые при загрузке страницы передадутся флэш-ролику. Далее, удаляем действия по умолчанию в первом кадре флэш-файла и заменяем их на следующий код:

stage.scaleMode = StageScaleMode.NO_SCALE;

// Pull in the Flashvars
var allFlashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;

// Set the required variables for piecemaker
piecemaker.xmlSource = String(allFlashVars.xmlSource);
piecemaker.cssSource = String(allFlashVars.cssSource);
piecemaker.imageSource = String(allFlashVars.imageSource);
piecemaker.dispatchEvent(new Event("properties"));

Вышеуказанный ActionScript сначала загружается в FlashVars, а потом заменяет значения Piecemaker по умолчанию на эти новые переменные. Наш файл Flash уже полностью подготовлен к запуску. Публикуем SWF используя какой-нибудь удобный FTP-клиент.

Шаг 2. Загрузка на сервер файлов и папок

3D-галерея

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

piecemakerCSS.css

piecemakerNoShadow.swf

piecemakerXML.xml

папка ‘images’ (с изображениями)

папка ‘swfobject’ (плюс содержимое)

piecemakerXML.php (нужен для использования с пользовательской панелью администрирования)

Шаг 3. Подключение SWF и установка FlashVars

Наш следующий шаг – вставить в свой шаблон страницы WordPress ролик SWF. Мы используем SWFObject 2 для встраивания клипа, а также определим три переменные FlashVars, упоминавшиеся в Шаге 1.

Сначала нужно сослаться на swfobject в заголовке страницы. Чтобы это сделать, откройте файл темы «header.php» в своем любимом редакторе кода (мой — BBEdit) и добавьте в начало страницы следующий код:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/swfobject/swfobject.js"></script>

Далее откройте шаблон страницы WordPress, где вы хотели бы демонстрировать свой 3D ротатор Piecemaker, и вставьте следующий код:

<div id="flashcontent">
<p>You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">upgrade your Flash Player</a> to version 10 or newer.</p>
</div><!-- end flashcontent -->

<script type="text/javascript">
		var flashvars = {};
		flashvars.xmlSource = "<?php bloginfo('template_url'); ?>/piecemakerXML.xml";
		flashvars.cssSource = "<?php bloginfo('template_url'); ?>/piecemakerCSS.css";
		flashvars.imageSource = "<?php bloginfo('template_url'); ?>/images";
		var attributes = {};
		attributes.wmode = "transparent";
		swfobject.embedSWF("<?php bloginfo('template_url'); ?>/piecemakerNoShadow.swf", "flashcontent", "960", "610", "10", "<?php bloginfo('template_url'); ?>/swfobject/expressInstall.swf", flashvars, attributes);
</script>

Объяснение кода

Этот объем кода – просто стандартный код с swfobject, использующийся для вставки флэш в любую веб-страницу. То важное, что нас должно заинтересовать – это FlashVars:

flashvars.xmlSource = "<?php bloginfo('template_url'); ?>/piecemakerXML.xml";
flashvars.cssSource = "<?php bloginfo('template_url'); ?>/piecemakerCSS.css";
flashvars.imageSource = "<?php bloginfo('template_url'); ?>/images";

Заметьте, что мы назвали свои FlashVars так, как определили их в ActionScript в Шаге 4. К тому же мы пользуемся встроенной в WordPress функцией bloginfo() для ссылки на точное местонахождение трех нужных файлов.

Вот оно! Ну, как бы…

Вышеуказанные шаги дадут вам возможность успешно развернуть 3D ротатор изображений Piecemaker в своей теме WordPress, но мы-то хотим пойти еще дальше. В следующих шагах мы обсудим, как создать пользовательскую панель администрирования, позволяющую нам модифицировать установки Piecemaker’а прямо на сервере WordPress.

Если вы не интересуетесь установкой административной панели, можете перейти на вебсайт Piecemaker, прочесть документацию и начать делать действительно очень потрясную анимацию.

Шаг 4. Создайте панель администрирования

Мы не будем расписывать, как «с нуля» создается административная панель. Вместо этого предлагаем ознакомиться с очень подробным учебником здесь на Nettuts: Как создать лучшую панель WordPress.

После того, как вы установите свою панель администрирования согласно инструкциям указанного учебника, можно переходить к следующему шагу.

Шаг 5. Определите новую панель опций

3D-галерея

Теперь нам нужно добавить дополнительные опции к панели администрирования, которую вы только что создали. Откройте файл темы «functions.php» и замените первый участок кода на следующий:

<?php
$themename = "Nettuts";
$shortname = "nt";

$categories = get_categories('hide_empty=0&orderby=name');
$wp_cats = array();
foreach ($categories as $category_list ) {
       $wp_cats[$category_list->cat_ID] = $category_list->cat_name;
}
array_unshift($wp_cats, "Choose a category");
$tween_types = array("linear","easeInSine","easeOutSine", "easeInOutSine", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeOutInCubic", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeOutInQuint", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeOutInCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeOutInBack", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeOutInQuad", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeOutInQuart", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeOutInExpo", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeOutInElastic", "easeInBounce", "easeOutBounce", "easeInOutBounce", "easeOutInBounce");

Кусок вышеприведенного кода идентичен показанному в учебнике, но мы добавили новый массив с именем $tween_types. Этот массив содержит все разнообразные анимационные эффекты, доступные с помощью PieceMaker’а. Мы используем этот массив для формирования в своей пользовательской панели администрирования выпадающего списка разных анимационных эффектов. Можете просмотреть документацию Tweener для повторения визуализации многочисленных анимационных эффектов Piecemaker.

Кроме того, в файле functions.php добавьте следующий массив снизу тех, что вы уже создали в учебнике.

Таким образом, создается новая скользящая панель опций, подобная тем, что вы создали в учебном пособии. Это длинный участок кода, но он следует той же самой логике, что и учебник. Мы просто создаем переменные для всех возможных установок, которые нам придется определить в XML-файле Piecemaker’а. Важно обратить внимание на то, что мы постарались определить каждой опции значения по умолчанию (значения в ‘std’ – это значения по умолчанию). Для Piecemaker’а существует достойное количество установок, и нам не нужно заставлять своих пользователей устанавливать все эти опции, если они не хотят.

array( "name" => "3D Rotator Options",
"type" => "section"),
array( "type" => "open"),

array( "name" => "Segments",
"desc" => "Number of segments in which the image will be sliced.",
"id" => $shortname."_segments",
"type" => "text",
"std" => "9"),

array( "name" => "Tween Time",
"desc" => "Number of seconds for each element to be turned.",
"id" => $shortname."_tween_time",
"type" => "text",
"std" => "3"),

array( "name" => "Tween Delay",
"desc" => "Number of seconds from one element starting to turn to the next element starting.",
"id" => $shortname."_tween_delay",
"type" => "text",
"std" => "0.1"),

array( "name" => "Tween Type",
"desc" => "Type of animation transition.",
"id" => $shortname."_tween_type",
"type" => "select",
"options" => $tween_types,
"std" => "Choose a category"),

array( "name" => "Z Distance",
"desc" => "to which extend are the cubes moved on z axis when being tweened. Negative values bring the cube closer to the camera, positive values take it further away. A good range is roughly between -200 and 700.",
"id" => $shortname."_z_distance",
"type" => "text",
"std" => "25"),

array( "name" => "Expand",
"desc" => "To which etxend are the cubes moved away from each other when tweening.",
"id" => $shortname."_expand",
"type" => "text",
"std" => "9"),

array( "name" => "Inner Color",
"desc" => "Color of the sides of the elements in hex values (e.g. 0x000000 for black)",
"id" => $shortname."_inner_color",
"type" => "text",
"std" => "0x000000"),

array( "name" => "Text Background Color",
"desc" => "Color of the description text background in hex values (e.g. 0xFF0000 for red)",
"id" => $shortname."_text_background",
"type" => "text",
"std" => "0x666666"),

array( "name" => "Text Distance",
"desc" => "Distance of the info text to the borders of its background.",
"id" => $shortname."_text_distance",
"type" => "text",
"std" => "25"),

array( "name" => "Shadow Darkness",
"desc" => "To which extend are the sides shadowed, when the elements are tweening and the sided move towards the background. 100 is black, 0 is no darkening.",
"id" => $shortname."_shadow_darkness",
"type" => "text",
"std" => "25"),

array( "name" => "Auto Play",
"desc" => "Number of seconds to the next image when autoplay is on. Set 0, if you don't want autoplay.",
"id" => $shortname."_autoplay",
"type" => "text",
"std" => "2"),

array( "type" => "close"),

Шаг 6. Обновите шаблон страницы

В этом шаге нам нужно слегка трансформировать шаблон страницы WordPress Шага 3. Вместо ссылки xmlSource на файл XML мы должны ссылать его на файл PHP. Используя файл PHP вместо файла XML, мы можем извлекать все значения, установленные пользователем в своей панели опций. Нужно заменить всего одну строку кода:

flashvars.xmlSource = "<?php bloginfo('template_url'); ?>/piecemakerXML.php";

Шаг 7. Сгенерируйте файл XML при помощи PHP

Мы почти закончили! В этом шаге мы создадим файл PHP, на который сослались в коде вверху. Этот файл PHP будет использован для извлечения всех значений из пользовательской панели опций и формирования файла XML, который нужен Piecemaker’у для должного функционирования. Код очень длинный, поэтому я попытаюсь разбить его на более удобоваримые части.

Создайте пустой файл PHP, назовите его «piecemakerXML.php» и вставьте в начало файла следующий код:

<?php require_once( '../../../wp-load.php' );
$segments = get_option('nt_segments');
$tweentime = get_option('nt_tween_time');
$tweendelay = get_option('nt_tween_delay');
$tweentype = get_option('nt_tween_type');
$zdistance = get_option('nt_z_distance');
$expand = get_option('nt_expand');
$innercolor = get_option('nt_inner_color');
$textbackground = get_option('nt_text_background');
$textdistance = get_option('nt_text_distance');
$shadow = get_option('nt_shadow_darknent');
$autoplay = get_option('nt_autoplay');
?>

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

Остальной код извлекает данные из пользовательской панели опций и сохраняет значения в переменных. Мы употребим эти переменные для генерации остальных установок Piecemaker’а.

Далее, нам нужно установить заголовок типа содержимого так, чтобы браузер знал, что мы собираемся вывести XML-контент, а не text/html, используемый по умолчанию. Мы также включим кое-какие первоначальные тэги установок Piecemaker.

<?php
header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="utf-8" ?>
<Piecemaker>
  <Settings>
	<imageWidth>830</imageWidth>
	<imageHeight>360</imageHeight>';

Теперь мы выведем переменные, сохраненные нами в корректных тэгах XML и закроем тэг установок Piecemaker.

echo '<segments>'. $segments . '</segments>';
echo '<tweenTime>'. $tweentime . '</tweenTime>';
echo '<tweenDelay>'. $tweendelay . '</tweenDelay>';
echo '<tweenType>'. $tweentype . '</tweenType>';
echo '<zDistance>'. $zdistance . '</zDistance>';
echo '<expand>'. $expand . '</expand>';
echo '<innerColor>'. $innercolor . '</innerColor>';
echo '<textBackground>'. $textbackground . '</textBackground>';
echo '<textDistance>'. $textdistance . '</textDistance>';
echo '<shadowDarknent>' . $shadow . '</shadowDarknent>';
echo '<autoplay>' . $autoplay .  '</autoplay>';
echo '
</Settings>

Последний шаг – вывод изображений, которые нам нужно включить в ротатор вместе с их характеристиками, а также мы закроем тэг XML Piecemaker’а.

<Image Filename="image1.jpg">
    <Text>
      <headline>Description Text</headline>
      <break>Ӂ</break>
      <paragraph>Here you can add a description text for every single slide.</paragraph>
      <break>Ӂ</break>
      <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline>
      Ӂ<a href="http://themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a>
    </Text>
  </Image>

  <Image Filename="image2.jpg">
    <Text>
      <headline>Description Text</headline>
      <break>Ӂ</break>
      <paragraph>Here you can add a description text for every single slide.</paragraph>
      <break>Ӂ</break>
      <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline>
      Ӂ<a href="http://themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a>
    </Text>
  </Image>

  <Image Filename="image3.jpg">
    <Text>
      <headline>Description Text</headline>
      <break>Ӂ</break>
      <paragraph>Here you can add a description text for every single slide.</paragraph>
      <break>Ӂ</break>
      <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline>
      Ӂ<a href="http://themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a>
    </Text>
  </Image>

  <Image Filename="image4.jpg">
    <Text>
      <headline>Description Text</headline>
      <break>Ӂ</break>
      <paragraph>Here you can add a description text for every single slide.</paragraph>
      <break>Ӂ</break>
      <inline>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu quam dolor, a venenatis nisl. Praesent scelerisque iaculis fringilla. Sed congue placerat eleifend.</inline>
      Ӂ<a href="http://themes.5-squared.com/sansation/?style=cool_blue" target="_blank">hyperlinks</a>
    </Text>
  </Image>
</Piecemaker>';
?>

Заключение

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

Автор: Sean Corey

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: http://net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. Сергей Симферополь

    Приветствую! Очень понравился ваш проект. Но вторая половина вашего туториала безполезна… в ZIP связке что вы предлагаете уже все есть. Но пишу по тому что piecmaker правильно не работает(именно 2ой) как правильно указать данную в хелпе ссылку : «4. To add your piecemaker into the post or page just simple type [piecemaker id='your_id'/] your_id = id of the piecemaker (it is displayed in the Piecemakers section).» Очень нужна ваша помошь! спосибо

  2. tstas

    А как сделать что бы на теме прокручивалось то что надо, а не то что вставлено. Картинки заменил в папке, а крутится всё равно то же что и раньше : (

  3. Игорь

    Здравствуйте! А если ли какой-нибудь плагин, который может создавать слайд-шоу на локальном сервере?

  4. Александр

    Не уверен, что это по теме статьи, но спрошу:

    Как можно вырезать/вставить элемент каталога с сайта ru.oriflame.com/products/…jhtml?per=201115 так, как это выполнено на сайте orifl.ru/glavnaya_stranica/katalog_oriflejm/.

    Какие при этом могут возникнуть сложности при вставке этого элемента в части размеров поля контента используемой темы WP? И как можно это обойти? С уважением.

    • Андрей Кудлай

      Если Вы о флеш-альбоме, то, скорее всего, никак. Простенький флеш еще можно «позаимствовать» с другого сайта. Если же флеш управляем (например, через XML), то процедура его «заимствования» значительно усложняется и зачастую просто невозможна.
      Проще найти аналогичное решение в сети, благо их много. Также под WP существует соответствующий плагин галереи в формате альбома на флеше.

      • Андрей Кудлай

        Я же уже вроде как ответил:
        «под WP существует соответствующий плагин галереи в формате альбома на флеше»… неужели так сложно по этим данным поискать в гугле?.. :)
        Вот пример одного из таких альбомов — pageflipgallery.com/demo
        Есть и другие подобные решения. Также можно написать что-то свое, но для этого необходимы навыки работы с Flash и знания ActionScript.

        • Александр

          Андрей, Ваш предыдущий ответ действительно мне помог. Я уже реализовал аналогичный Вашему просмотр альбома. Правда, для этого необходимо подготавливать Галерею снимков страниц Каталога продукции. Но этот Каталог регулярно (раз в 3 недели) меняется на главном сайте производителя. А в приведенных примерах, похоже, реализован вариант, когда нет потребности в манки-джоб: подготовки каждой из 170 страниц Каталога для включения в Галерею. Подозреваю, что изображения для этого Флэш-каталога грузятся с сайта производителя, без необходимости их предварительной подготовки. (Запрета производителя на тиражирование страниц Каталога нет). Можно ли это реализовать в WP? Или это реализуется через другой движок? Подскажите новичку: где поискать решение? Похоже, из блогов, обучающих сайто-строению, на которых я уже побывал, только Ваш активно живет. Никто не ответил на мой аналогичный вопрос. С уважением.

      • Андрей Кудлай

        Флеш практически всегда управляется файлами XML (кстати, если интересна работа с XML из PHP, то вскоре будет соответствующий урок), где прописывается, к примеру, какую картинку или текст выводить в том или ином разделе (кадре, слое) флеша. Соответственно, если такой файл обновить (это будет своеобразная БД для флеша), то уже его (обновленный) можно скинуть администратору дочернего сайта, с тем, чтобы просто заменить имеющийся XML-файл на новый (это как экспорт/импорт БД). Таким образом, «обезьянней работы» не будет — содержимое делается только 1 раз, а затем итоговый файл тиражируется… но делать его все равно нужно. Со 100% уверенностью сказать, что там реализовано именно так не могу, но, скорее всего, именно так.

  5. maxon4ig

    Здравствуйте, с праздниками! У меня стоит piecemaker 2 плагином на вордпрессе, появилась необходимость вставить слайдер на прямую в шаблон. Какой код использовать?
    код:
    пока не помогает =\

  6. Артем

    Вы проверяли у себя на сайте? Не работает ничего…

    • Андрей Кудлай

      Этот урок не наш, а переводной с достаточно авторитетного ресурса. У себя не проверяли, но на момент публикации урока демо источника работало исправно.

  7. Олег

    Все работает.
    У меня около 30 фото которые меняются. Но учитывая что форум, при переходе на другую страницу открывается постоянно одна и та же фото.
    Как сделать чтобы выбор фото генерировался автоматом

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree