Как да създадете своя WordPress слайдер с изображения

Въпреки че има много плъгини плъзгачи (сегашното ми фаворит - Ниво плъзгач), няма приставка за FlexSlider - слайдер, който има клавишни комбинации и който работи с приплъзване на сензорния екран.

За да започнете, изтеглите изходния код, който скоро ще се наложи.

Ето как тя ще се погледнете слайдер:

Етап 1. Получаване на

Създадох три константи: пътя към приставката. плъгин името и версията на приставката. които е необходимо да се актуализира и да, ако е необходимо, да уведоми WordPress Plugin Directory на промени.

Моля, обърнете внимание, започвам всички мои константи "EFS". Аз ще направя същото и с името на функцията, така че да не създават конфликти с други плъгини или ядро ​​WordPress.

Сега, когато сме готови с подготовката, нека добавим кодови файлове и FlexSlider на.

Стъпка 2: Добавяне FlexSlider

В двете линии, ние зададете име всеки скрипт, а след това се свързват файлове .js и .css. Имайте предвид, че ние използваме нашия постоянен ESF_PATH. Трябва да използваме пълния път, в противен случай файловете няма да privyazhutsya правилно.

Може да забележите, че имаме и трети вариант в wp_enqueue_script. Това е набор от други скриптове, от която зависи сценария. В този случай, такъв сценарий - това JQuery. Налице е пълен списък на скриптове, които са включени в WordPress. Можете да използвате всеки от тях, като се използва посочения масив от зависимости.

И накрая, трябва само да копирате папка / тема / папка във вашата / Envato-гъвкава плъзгач /.

Стъпка 3. кратък код и шаблон тагове

На следващо място, ние създаваме нашия кратък номер (Кратък, кратък номер) и шаблон маркер. Кратък ще позволи на потребителите да вмъкват плъзгача и да е страница, или по пощата. Начално ръководство за SHORTCODE можете да видите тук.

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

Сега кодът изглежда достатъчно проста. За кратък номер ние наричаме нашата обща функция efs_get_slider () и връща резултата. Маркерът шаблон получаваме резултати. Аз умишлено пропусна въвеждане efs_get_slider (). защото все още не сме определя как ние ще се направи снимка.

За да бъде добавянето на неограничен брой снимки в плъзгача удобен за потребителя, ние ще създаде отделен вид пост.

Стъпка 4. персонализирана пост тип слайдер Изображение

Първото нещо, което ще направя - това ще създаде нов файл, наречен "слайдер-IMG-type.php", където всички ще ни код за персонализиран вид пост. Първо ще известна подготовка, както направихме за приставката.

Както можете да видите, всичко, което все още трябва да направите е да създадете няколко константи (които ще бъдат много удобни за по-сложни персонализирани видове пунктове) и се добавя поддръжка за миниатюри за новия тип.

Единственото нещо, което все още го правя тук, той ще регистрира нов потребителски пост тип. Повече за персонализираните видове съобщения, можете да намерите в ръководството, за да се създаде голям портфейл. Точно преди затварянето PHP маркера, добавете следния код:

Създали сме функция за регистриране на потребителски пост тип, който използва блоковете за титлата, редактирате и миниатюри. Освен това, ние добавихме действие WordPress. да се обадя тази функция веднага след WordPress инициализация.

Всичко! Последното нещо, което трябва да направите, е да включите новия файл, добавяне на require_once ( "слайдер-IMG-type.php '); в Envato-гъвкава slider.php. Аз го добавя непосредствено над призива на нашите скриптове.

Сега, когато знаем как да се приложи слайдер изображение, нека да се върнем и да попълните нашата обща функция за плъзгача.

Стъпка 5. Генериране на плъзгача

След това, ние създаваме WordPress контур, събиране на всички видове съобщения слайдер изображение (нашия обичай пост тип) и показва по-голяма версия на изображението.

След това, ние се върнат всички генерирани HTML като променлива, която може да се извлече (шаблона ни таг), или да се върнат (нашия кратък номер).

няколко коментара

Етап 6. Изпитване

заключение

Това е всичко. Разбира се, има няколко неща, които могат да бъдат подобрени в приставката. Например, за да добавите поддръжка за разширени опции за конфигуриране, които могат да предложат FlexSlider, или да добавят поддръжка за имена.

Както бе споменато, този плъгин ви дава всичко необходимо, за да се създаде един наистина прост, лесен за управление, лесно да поставите версия FlexSlider за WordPress!

Ако не сте сигурни за вложките или добавяне на файлове, можете да изтеглите изходния код на връзката в най-висшето ръководство. На добър час!

Източник: WP.tutsplus.com

Благодаря ви много за статията към плъзгача изглеждаше по-хубав и стрели не се отклоняват от плъзгача в flexslider.css файл, трябва да добавят стил:
.flexslider фон: няма повторение превъртане 0 0 #FFFFFF;
граница: 4 пкс твърдо #FFFFFF;
граничен радиус: 4 пкс 4 пкс 4 пкс 4 пкс;
кутия сянка: 0 1px 4px RGBA (0, 0, 0, 0.2);
марж: 0 0 60px;
позиция: относителна;
>

Ами тук е вкус и цвят, както се казва)

Със сигурност вече имаме готови решения под формата на плъгини. Можете да търсите в официалния WordPress хранилището, или в търсачката плъгини.