Статьи

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

Январь 4, 2019

Из этого туториала Вы узнаете, как успешно интегрировать ротатор изображений Piecemaker 3D Flash в тему WordPress. Мы также обсудим настройку пользовательской панели администратора, которая облегчит пользователям настройку ротатора.

Piecemaker — великолепный ротатор 3D-изображений с открытым исходным кодом, созданный Бьорном Крюгером из Modularweb. Вы можете просмотреть создателя в действии на Sansation , первой премиальной теме WordPress на ThemeForest, включающей Piecemaker.

Piecemaker

предварительный просмотр

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

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

Шаг 1. Изменить ActionScript

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

  • Источник XML
  • Исходный код CSS
  • путь к папке с изображениями.

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

Откройте FLA-файл с именем «piecemakerNoShadow.fla» и откройте окно «Действия». В кадре 1 вы увидите действия ниже. Обратите внимание, что вам нужен Flash CS4, чтобы открыть исходный файл.

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

01
02
03
04
05
06
07
08
09
10
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. Загрузите файлы и папки

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

  • piecemakerCSS.css
  • piecemakerNoShadow.swf
  • piecemakerXML.xml
  • папка ‘images’ (с вашими изображениями в ней)
  • папка ‘swfobject’ (плюс содержимое)
  • piecemakerXML.php (нужно для использования с пользовательской панелью администратора)

Шаг 3. Вставьте SWF и установите FlashVars

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

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

1
<script type=»text/javascript» src=»<?php bloginfo(‘template_url’); ?>/swfobject/swfobject.js»></script>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<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:

1
2
3
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 в шаге on4. Мы также используем встроенную функцию WordPress bloginfo () для ссылки на точное расположение трех необходимых файлов.

Это оно! Ну вроде …

Описанные выше шаги позволят вам успешно развернуть Piecemaker 3D Image Rotator в вашей теме WordPress, но мы собираемся сделать еще один шаг вперед. В следующих шагах мы обсудим, как создать пользовательскую панель администратора, которая позволит вам настраивать параметры Piecemaker прямо из серверной части WordPress.

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

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

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

После того, как вы ознакомились с этим руководством и у вас есть настройки панели администратора, перейдите к следующему шагу

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

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

01
02
03
04
05
06
07
08
09
10
11
<?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 есть немало настроек, и мы не хотим заставлять наших пользователей настраивать все эти опции, если они этого не хотят.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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 (eg 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 (eg 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, начиная с третьего шага. Вместо того, чтобы указывать наш xmlSource на файл XML, нам нужно указать его на файл PHP. Используя файл PHP вместо файла XML, мы можем получить все значения, которые были установлены пользователем на нашей панели пользовательских параметров. Это всего лишь одна строка кода, которую нужно заменить:

1
flashvars.xmlSource = «<?php bloginfo(‘template_url’); ?>/piecemakerXML.php»;

Шаг 7. Создайте наш XML-файл с PHP

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
<?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, а не текст / html по умолчанию. Мы также включим некоторые начальные теги настроек Piecemaker.

1
2
3
4
5
6
7
<?php
header(«Content-type: text/xml»);
echo ‘<?xml version=»1.0″ encoding=»utf-8″ ?>
<Piecemaker>
  <Settings>
    <imageWidth>830</imageWidth>
    <imageHeight>360</imageHeight>’;

Теперь мы собираемся вывести переменные, которые мы сохранили, в правильные теги XML и закрыть тег настроек Piecemaker.

01
02
03
04
05
06
07
08
09
10
11
12
13
echo ‘<segments>’.
echo ‘<tweenTime>’.
echo ‘<tweenDelay>’.
echo ‘<tweenType>’.
echo ‘<zDistance>’.
echo ‘<expand>’.
echo ‘<innerColor>’.
echo ‘<textBackground>’.
echo ‘<textDistance>’.
echo ‘<shadowDarknent>’ .
echo ‘<autoplay>’ .
echo ‘
</Settings>

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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.
      Ӂ<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.
      Ӂ<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.
      Ӂ<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.
      Ӂ<a href=»http://themes.5-squared.com/sansation/?style=cool_blue» target=»_blank»>hyperlinks</a>
    </Text>
  </Image>
</Piecemaker>’;
?>

Вывод

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

33
Share: