Отзивчив слайдер за WordPress, XoZblog - Уроци и статии за създаване на сайт, блог

Здравейте, скъпи читатели на XoZblog! Днес ще ви покажа как можете да интегриратеJQuery плъзгач във вашия WordPress блог. В този урок ще разгледаме подробно всяка стъпка от създаването на слайдер. Ще използваме красивияFlexSlider 2 скрипт от WooThemes, както и потребителски типове публикации, за да манипулираме по-удобно изображения. Освен това плъзгачът ще бъде адаптивен, т.е. Размерите на изображението ще се адаптират към разделителната способност на екрана.

И така, какво ни трябва. На първо място, трябва да изтеглите самия плъгин - хранилището на GitHub. От изтегления архив получаваме:

  • flexslider.css
  • images/bg_direction_nav.png
  • jquery.flexslider-min.js

wordpress

Стъпка 1: Инсталиране

Нека се подготвим за тези 3 файла от изтегления архив, папки в директорията с активната тема. В зависимост от темата или настройката можете да поставите файловете където пожелаете, просто ние ще се позоваваме на тези файлове и трябва да знаем къде се намират.

За този урок ще използваме темата по подразбиранеTwenty Eleven. Нека създадем плъзгаща се папка в директорията inc. Сега нека създадем още няколко папки в папката на слайдера:

  • css
  • изображения
  • js

Преместваме файла flexslider.css в папкатаcss, bg_direction_nav.png в папкатаimages и jquery.flexslider-min.js, познахте, в папкатаjs. Сега нека създадем още 2 файла и да ги поставим в корена на папката на слайдера:

  • slider.php - създава шаблон на слайдер и вмъква изображения;
  • slider_post_type.php - за потребителски тип публикации.

Папкатаплъзгач изглежда по следния начин:

xozblog

Преди да продължите, отворете файла functions.php на вашата активна тема и добавете следните два реда в края на файла, за да заредите двата PHP файла, които току-що създадохте. Проверете внимателно пътищата:

Сега преминаваме към кодирането 🙂

Стъпка 2: Персонализиран тип публикация и таксономия на плъзгача

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

Отворете slider_post_type.php и добавете следния код, за да създадете персонализиран тип:

// Персонализиран тип публикация за плъзгача

функция register_slides_posttype ( ) < $labels = масив ( 'name' => _x ( 'Слайдове' , 'общо име на тип публикация' ), 'singular_name' => _x ( 'Слайд' , 'единствено име на тип публикация' ), 'add_new' => __ ( 'Добавяне на нов' ), 'add_new_item' =&g t; __ ('Добавяне на нов слайд'), 'edit_item' => __ ('Редактиране на слайд'), 'new_item' => __ ('Нов слайд'), 'view_item' => __ ('Преглед на слайда'), 'search_items' => __ ( 'Намиране на слайд s' ) , 'not_found' => __ ( 'Слайд' ), 'not_found_in_trash' => __ ( 'Слайд' ) , 'parent_item_colon' => __ ( 'Слайд' ), 'menu_name' => __ ( ' Слайдове' ) ) ;

$supports = array ('title', 'thumbnail', 'cat-slides') ;

) ; register_post_type ('слайдове', $post_type_args); > add_action ('init', 'register_slides_posttype') ;

Добавен персонализиран тип публикация! Забележете, че в масива за поддръжка посочваме, че по подразбиране полето за заглавие се добавя към страницата за създаване на слайд, блок за прикачване на миниатюра и, най-важното, използваната персонализирана таксономия на cat-slides.

Използване на функциятаregister_taxonomy добави нашата таксономия. Първият параметър е името, вторият е типът на приложените записи и аргументите.

Мета поле за въвеждане на URL

След това ще добавим метакутия (поле за въвеждане на данни), където има поле за URL адреса на слайда. По този начин, като щракнете върху слайда, потребителят стига до посочения URL адрес. Първо формираме допълнителен блок:

// Мета кутия за URL адрес на изображение $slidelink_2_metabox = array ( 'id' => 'slidelink' , // id 'title' => 'Slide link' , // title 'page' => array ( 'slides' ) , // за всички публикации от тип slides 'context' => 'normal' , 'pri ority' = > 'по подразбиране' , 'fields' => масив ( // едно поле за URL

масив ( 'name' => 'URL адрес на слайд' , 'desc' => '' , 'id' => 'wptuts_slideurl' , 'class' => 'wptuts_slideurl' , 'type' => 'text' , 'rich_editor' => 0 , 'max' =>0 ) , ) ) ;

add_action ('admin_menu', 'wptuts_add_slidelink_2_meta_box') ; функция wptuts_add_slidelink_2_meta_box()

foreach ( $slidelink_2_metabox [ 'page' ] като $page ) < add_meta_box ( $slidelink_2_metabox [ 'id' ] , $slidelink_2_metabox [ 'title' ] , 'wptuts_show_slidelink_2_box' , $page , 'normal' , 'default' , $slidelink_2_metabox ) ; > >

Чрез функцията add_meta_box добавяме поле за въвеждане на URL само за публикации с тип слайдове. Третият параметър е променливата за обратно извикване — тя е представена като името на функцията, която ще покаже HTML на нашия метабокс (в този случай това е функцията wptuts_show_slidelink_2_box).

Функцията за показване еwptuts_show_slidelink_2_box. Всъщност имате нужда от обикновено поле с тип текст:

// функция за показване на метабокс функция wptuts_show_slidelink_2_box( ) < глобална $поща; глобален $slidelink_2_metabox ; глобален $wptuts_prefix; глобална $wp_version;

// използване на nonce за тестване на echo ' ' ;

foreach ( $slidelink_2_metabox [ 'fields' ] as $field )

// получаване на текущи данни за публикация $meta = get_post_meta ( $post -> ID, $field [ 'id' ], true) ;

Сега в блока ще се появи поле за въвеждане на връзка.

И последното нещо при въвеждането на връзка е запазването й:

// Записване на въведената връзка add_action ( 'save_post' , 'wptuts_slidelink_2_save' ) ; функция wptuts_slidelink_2_save ( $post_id ) < глобална $поща; глобален $slidelink_2_metabox ;

// проверка if ( ! wp_verify_nonce ( $_POST [ 'wptuts_slidelink_2_meta_box_nonce' ] , basename ( __FILE__ ) ) ) < върни $post_id; >

// проверка за разрешение за редактиране if ( 'page' == $_POST [ 'post_type' ] ) < if ( ! current_user_can ( 'edit_page' , $post_id ) ) < върни $post_id; > > elseif (! current_user_can ('edit_post', $post_id)) < върни $post_id; >

foreach ( $slidelink_2_metabox [ 'fields' ] as $field )

$old = get_post_meta ($post_id, $field ['id'], true); $new = $_POST [ $field [ 'id' ] ] ;

if ( $new && $new != $old ) < if ( $field [ 'type' ] == 'date' ) < $new = wptuts_format_date ($new) ; update_post_meta ($post_id, $field ['id'], $new); > иначе < if ( is_string ( $new ) ) < $ново = $ново; > update_post_meta ($post_id, $field ['id'], $new);

Резултатът от всички извършени манипулации ще бъде завършена страница за създаване / редактиране на слайд. С помощта на блокаЗапис на миниатюра прикачваме слайд снимка и вполеURL адрес на слайд поставете връзката.

слайдер

Стъпка 3: Включване на стилове и плъзгащ се скрипт

Отворетеslider.php. Сега свързваме скрипта и стиловете, необходими за работата на слайдера. Можете да копирате кода от flexslider.css във вашия style.css файл, ако е необходимо.

Ако използвате различна файлова структура, не забравяйте да проверите пътя от файла flexslider.css до изображението на стрелката!

Стъпка 4: Инициализирайте плъзгача

Сега трябва да инициализираме плъзгача с помощта на метода .flexslider с параметри. Така че нека добавим следния код към файлаslider.php :

// Проверка за публикации if ( $the_query -> have_posts ( ) ) < // Шаблон за слайдер ?>

have_posts ( ) ) : $the_query -> съобщението(); ?>

Има и моменти, когато трябва да вмъкнете плъзгач в публикация в блог. За това се използват кратки кодове (Shortcode ). Така че нека създадем кратък код за нашия плъзгач. Следният код също е във файла slider.php:

Сега плъзгачът е готов! И може да се използва директно на страници с публикации с помощта на кратък код.

статии

Плъгин за WordPress

Ако не ви се губи време за създаване на този слайдер, изпробвайте готовияплъгин за WordPress — Captain Slider. Отидете на страницата с плъгини. Илиизтеглете ИЗТОЧНИЦИ, бутони в началото на урока и точно по-долу!

статии

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