Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins

Робім убудову слайд-шоў для WordPress

by
Difficulty:BeginnerLength:LongLanguages:

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

Інтэграцыя слайд-шоў у WordPress - вельмі важная функцыя практычна для любой тэмы афармлення, але наколькі складана яе укараніць і наколькі яна гнуткая? У гэтым уроку мы паспрабуем, рознымі спосабамі падключыць адзін з самых папулярных і выкарыстоўваючыхся слайд-шоў на базе jQuery, Nivo Slider.

На самай справе ёсць ужо гатовая убудова WordPress для слайдера Nivo, прама на афіцыйнай старонцы Nivo Slider. Але мы ўсё роўна будзем ствараць яго ў нашым ўроку, і мы вызначана будзем зробім гэта па-іншаму. У гэтым уроку мы збіраемся стварыць плагін Nivo slider, які будзе мець функцыянальнасць фішкі, магчымасць шорткода, і вы нават зможаце інтэграваць яго праз просты выклік функцыі і напісаць код для сваёй тэмы, калі так будзе трэба карыстачу.

Працуючы над гэтым урокам, маецца на ўвазе, што вы выкарыстоўваеце сервер Apache і MySQL лакальна або выдалена, каб мець магчымасць усталяваць WordPress. Акрамя таго, у вас ўстаноўлена версія WordPress 3.1+, у якой ёсць доступ да яе файлавай сістэмы, а таксама што ў вас ёсць базавыя веды PHP, CSS, JavaScript і HTML.

Крок 1 Стварэнне плагіна

Адна з самых простых частак гэтага ўрока. Мы збіраемся стварыць тэчку з імем nivoplugin ўнутры каталога wp-content/plugins ўнутры устаноўленага WordPress. Унутры гэтага каталога мы створым файл nivoplugin.php з наступным кодам:

Гэта асноўная інфармацыя, якую выкарыстоўвае WordPress для ідэнтыфікацыі назвы і інфармацыю плагіна. Такія рэчы, як Plugin Name, Description, Author i Plugin version з'яўляюцца абавязковымі параметрамі, якія дадаюцца ў выглядзе каментароў ў верхняй частцы кожнага плагіна, каб WordPress мог ідэнтыфікаваць убудова, кіраваць ім, запускаць яго і адлюстроўваць неабходную інфармацыю пра гэта на старонцы убудоў.

"Для атрымання дадатковай інфармацыі пра тэкст загалоўка плагіна і іншых варыяцыях, якія можна дадаць да яго, прачытайце Кодэкс напісання плагіна для WordPress".

Крок 2 Стварэнне функцыяналу кіравання слайд-шоў

Слайд-шоў складаецца з малюнкаў, таму, каб зрабіць простую рэалізацыю jQuery Nivo Slider, нам патрэбен спосаб дадання і кіравання выявамі ў панэлі. Наш падыход будзе эфектыўна выкарыстоўваць функцыянальныя магчымасці стварэння адвольных тыпаў запісаў у WordPress. Адвольны тып запісаў будзе выкарыстоўвацца для стварэння новай тыпу старонкі, дзе кожная запіс змяшчае ўсе неабходныя дэталі малюнка: назву і, вядома ж, самую важную частку - выявы. Мы будзем выкарыстоўваць загаловак і рэдактар ​​для атрымання інфармацыі пра назву і апісанні, а таксама функцыі малюнка запісу, каб загрузіць малюнак, кіраваць і ідэнтыфікаваць яго.

У прыведзеным вышэй прыкладзе мы дадаем хук да функцыі np_init, выкарыстоўваючы тэг init, які будзе запускацца да адпраўкі загалоўкаў. Мы павінны зрабіць гэта, для таго каб затым ўключыць ўнутр функцыю register_post_type з яе параметрамі. Гэтая функцыяй, якая выкарыстоўваецца для дадання і кіравання новым карыстацкім тыпам запісаў. Па сутнасці мы ўбудавальных новы карыстацкі тып запісаў з імем np_images і некаторымі аргументамі.

Аргументы ўяўляюць сабой масіў значэнняў, якія ўяўляюць налады нашага новага тыпу запісаў. Такія рэчы, як напрыклад, агульнадаступнасць, мы ўсталёўваем у значэнне true, мы даем ёй ярлык з імем Nivo Images, і ўсталёўваны тое, што кожны пост мае title і thumbnail з назвай зменных і мініяцюрамі ў якасці масіва дадзеных для асноўнага атрыбута supports.

Гэта стварае карыстацкі тып запісаў, і ён выглядае наступным чынам:

На гэтым этапе ў нас ёсць зарэгістраваны і які працуе тып запісаў пад назвай np_images. Мы можам дадаваць новыя запісы, выдаляць іх і рэдагаваць іх, як і звычайныя запісы, але для нашай мэты мы наладжваем іх для кіравання выявамі слайд-шоў. У асноўным гэта месца, дзе мы дадаем фатаграфіі для слайд-шоў Nivo ў якасці запісаў.

Крок 3 Падлучальны скрыпты і стылі Nivo Slider

Гэта можа здацца чымсьці трохі складаным або працаёмкім. Але гэта не так. Мы збіраемся загрузіць бясплатную версію jQuery Nivo Slider і ўключыць у яе неабходныя сцэнары і стылі, каб пазней выкарыстоўваць іх з дапамогай невялікага колькасці кода і малюнкаў.

Каб загрузіць крыніцы, мы пяройдзем на старонку расцэнак на nivo.dev7studios.com і нажмём на кнопку Загрузіць jQuery Plugin (Бясплатная версія) каб загрузіць зыходны код.

Згодна задачам нашага ўрока мы будзем старацца зрабіць усё проста. Мы разархивируем файл і падключым ўвесь каталог у тэчку нашага плагіна. Ўнутры тэчкі nivo-slider у нас ёсць іншая тэчка з імем demo. Мы выдалім яе, паколькі мы не будзем яе выкарыстоўваць, і мы не хочам, перагружаць убудову непатрэбнымі матэрыяламі.

Рэгіструем і падлучальны скрыпты і стылі

Наступная частка гэтага кроку падлучэнне неабходных файлаў слайдера Nivo. У нашым файле nivoplugin.php мы дадамо наступнае:

Гэта будзе пераазначэнне некаторых функцый (другім параметрам з'яўляецца назва функцыі). Нам патрэбныя хуки, каб правільна падключыць скрыпты і стылі ў інтэрфейсу. Давайце паглядзім на функцыі зваротнага выкліку нашых папярэдніх хуков.

Функцыя выкліку скрыпту рэгіструе і падлучае ў 3 важных файла javascript: jQuery (як неабходны кампанент Nivo Slider), базавы файл nivo-slider (jquery.nivo.slider.js) і наш карыстацкі файл сцэнарыя (script.js). Nivo Slider патрабуе, які працуе jQuery, і нам патрэбны спецыяльны скрыпт для яго актывацыі.

Файл script.js:

Скрыпт даволі просты, яму неабходны jQuery каб далучыць функцыю nivoSlider да тэгу з ідэнтыфікатарам slider. Гэты тэг будзе прымаць ўласцівасці і функцыянальнасць nivo-slider.

Нарэшце, на нашым папярэднім этапе функцыя зваротнага выкліку стылю рэгіструе і ўключае ў сябе яшчэ 2 важных файла: файл nivo-slider.css, які мае ўсе стылі, неабходныя для таго, каб слайдэр выглядаў і працаваў адпаведна, і файл default.css ўнутры папкi themes/default, якую мы выкарыстоўваем для тэмы слайд-шоў з дапамогай тэмы nivo-slider па змаўчанні.

Крок 4 Новыя памеры малюнка

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

Па-першае, мы павінны прыняць да ўвагі той факт, што мы выкарыстоўваем выявы ў адвольных паведамленнях у якасці нашых малюнкаў слайд-шоў. Такім чынам, як жа мы зменім памер і абрэж гэтыя фатаграфіі ў адпаведнасці з нашымі патрэбамі? Мы збіраемся дадаць новыя памеры, якія WordPress будзе выкарыстоўваць, каб змяняць і абрэзаць малюнка, пры кожнай новай загрузцы. Каб дадаць новыя памеры малюнка, мы будзем выкарыстоўваць функцыю add_image_size, дадаўшы наступны код ўнутр функцыі np_init:

У прыведзеным вышэй кодзе мы рэалізавалі 2 памеру малюнка, якія мы выклічам пазней, выкарыстоўваючы імёны np_widget для фішкі і np_function для шорткода і функцыю PHP для іх ідэнтыфікацыі.

Яшчэ сёе-тое

Каб уключыць эскізы паведамленняў у убудове, неабходна дадаць наступны радок кода. Мы дадамо яго над лініямі add_action.

"Памеры малюнкаў, дададзеныя з дапамогай функцыі add_image_size, будуць працаваць толькі для новых малюнкаў, якія загружаюцца пасля актывацыі функцыі".

Крок 5 Функцыя PHP

Адной з асноўных асаблівасцяў ўбудовы з'яўляецца функцыя PHP, якую вы можаце выкарыстоўваць у любым месцы вашага кода тэмы для ўстаўкі вялікага слайд-шоў Nivo памерам 600x280.

Паколькі мы выкарыстоўваем карыстацкую запіс для кіравання нашымі малюнкамі слайд-шоў, нам трэба запытаць гэтыя запісы і атрымаць назвы і малюнкі з карыстацкага тыпу запісаў. Для гэтага мы выкарыстоўваем новы цыкл WP_Query з параметрамі зменнай $args, які абярэ патрэбны тып запісаў і створыць слайд-шоў з максімум 5 малюнкаў ў запыце. Затым мы створым зменную $result, якая ўтрымлівае ўвесь HTML-код, неабходны для слайд-шоў Nivo. Мы выкарыстоўваем дэманстрацыйны код HTML з загружанай тэчкі Nivo.

Ўнутры цыклу мы выкарыстоўваем функцыю wp_get_attachment_image_src для здабывання выявы з нашай запісу. Мы выкарыстоўваем значэнне np_function для вызначэння памеру малюнка, якое мы раней дадалі ў np_init. Паколькі мы знаходзімся ўнутры цыклу, мы можам выкарыстоўваць $post->ID для ідэнтыфікацыі паведамленні. Функцыя мае адзін параметр $type, які выкарыстоўваецца для ўстаноўкі памеру малюнка з wp_get_attachment_image_src з дапамогай аднаго з раней зададзеных памераў выявы. Пераменная мае значэнне np_function па змаўчанні. Калі пры выкліку функцыі не зададзены параметр, будзе зададзена пераменная па змаўчанні.

Загалоўкі паведамленняў дадаюцца як значэння ў параметр загалоўка HTML тэга малюнка і бачныя унізе слайд-шоў малюнкаў як плывец тэкст над выявамі ўнутры празрыстага цёмнага фону.

Слайдэр аўтаматычна зменіць памер, як і выявы ўнутры яго, таму, незалежна ад памераў выявы, якія мы выкарыстоўваем, у нас будзе слайд-шоў патрэбнага памеру.

Слайд-шоў у памеры np_function выглядае прыкладна так:

Гэта папярэдні прагляд слайд-шоў ўяўляе сабой рэалізацыю шорткода, якая будзе разгледжана далей.

Крок 6 Шорткод

Іншай важнай асаблівасцю з'яўляецца рэалізацыя шорткода. Гэта на самай справе надзвычай проста рэалізаваць і можа быць выканана з дапамогай адной радкі кода. Проста дадайце гэты радок у функцыю np_init над усім, што там ужо ёсць:

Хук шорткода фактычна выкарыстоўвае нашу функцыю PHP для вяртання змесціва слайд-шоў. На гэтым усё, гэта вельмі простая і хуткая рэалізацыя шорткода. Каб выкарыстоўваць яго, проста дадайце [np-shortcode] у любую запіс або старонку. Гэты тэкст будзе заменены слайд-шоў.

Крок 7 Стварэнне Вiджета

На гэтым этапе мы збіраемся стварыць просты віджэт, які будзе мець адзіную мэту - паказаць невялікае слайд-шоў у бакавой панэлі, дзе б яна не размяшчалася.

У нас ужо ёсць памер, усталяваны для яго на кроку 4, і ў нас ёсць усе астатнія функцыі, якія ўключаюць і генеруюць слайд-шоў Nivo, якія мы можам выкарыстоўваць для інтэграцыі ў віджэт. Такім чынам, усё, што засталося зрабіць цяпер, - гэта стварыць віджэт і выкарыстоўваць папярэдні код.

У гэтай першай частцы мы збіраемся укараніць новы хук, які вы павінны дадаць побач з іншымі. Гэты хук выкарыстоўвае тэг widgets_init і функцыю, якую мы збіраемся назваць np_widgets_init. Гэта функцыя запускаецца пры стварэнні віджэтаў. У выніку мы збіраемся зарэгістраваць віджэт пад назвай np_Widget, як у прыведзеным вышэй прыкладзе.

Клас

Каб стварыць новы віджэт, мы рэалізуем новы клас з імем np_Widget, які пашырае клас WP_Widget. Для начла вызначым, што функцыя __construct з'яўляецца асноўнай і самай важнай функцыяй класа і нашай функцыянальнасцю фішкі. Функцыя мае параметры, якія мы выкарыстоўваем, каб прысвоіць віджэту унікальны ідэнтыфікатар, які ў нашым выпадку называецца np_widget, назва, NivoSlideshow і нават апісанне, як паказана ў наступным кодзе:

Гэта, вядома, толькі пачатак нашага фішкі, ёсць яшчэ некалькі функцый, якія нам трэба рэалізаваць і наладзіць, паколькі яны нам спатрэбяцца для працы.

Кіраўнік Вiджета

Наш віджэт выглядае як і любы іншы віджэт ў панэлі кіравання. Нам трэба даць віджэту назву, якое можа быць уведзена карыстальнікам, а затым захавана убудовай. Для гэтага нам трэба напісаць функцыю form з класа WP_Widget. У гэтай функцыі мы будзем выкарыстоўваць параметр $instance, які функцыя падае для атрымання title, які з'яўляецца зменнай, якая ў далейшым будзе рэалізаваная, захавана і абноўлена. Таму мы ствараем элемент поля ўводу формы, выкарыстоўваючы наступны код:

Гэты код працуе толькі ў панэлі кіравання і неабходны наступным функцый, каб адправіць назву для захавання і наступнага выкарыстання ў інтэрфейсе. Зменная $instance змяшчае значэнне загалоўка і выкарыстоўваецца прама як у прыкладзе вышэй без якога-небудзь іншага запыту або функцыі.

Захаванне дадзеных

Пасля адпраўкі формы з папярэдняй функцыі яе неабходна апрацаваць і захаваць. Гэта робіцца ў функцыі update, якую таксама неабходна дадаць у клас выкарыстоўваючы наступны код:

Значэнне поля перадаецца праз зменную $new_instance, якая пазбаўленая тэгаў, ўстаўлена ў зменную $instance, так што яна можа быць вернута функцыяй і захаваная ў WordPress як частка пашыранай функцыянальнасці вiджету.

Адлюстраванне Вiджету

І апошняе, але не менш важнае: яшчэ адна важная і частка нашага фішкі - гэта яго адлюстраванне. Відавочна, што кожная частка важная для канчатковага выніку, але гэтая частка - тое, што вы ўбачыце ў сваёй тэме.

Функцыя widget кіруе інтэрфейсам фішкі і мае два параметру: $args і $instance. Параметр $args выкарыстоўваецца для атрымання зменных тыпу $before_widget, $after_widget і $before_title, $after_title, якія мы будзем выкарыстоўваць яе ў нашым кодзе. Функцыя вiджету выглядае так:

Для рэалізацыі слайд-шоў мы выкарыстоўваем функцыю np_function, але ў гэтым выпадку мы задаем ёй параметр np_widget, каб мы атрымалі памеры малюнка, якія мы хочам выкарыстаць для фішкі.

Гэта тлумачыць рэалізацыю вiджету Nivo Slider ў нашым убудове. На гэтым этапе вы можаце ўвайсці ў панэль адміністратара і дадаць некалькі запісаў у меню Nivo і прымацаваць да іх выявы, каб яны адлюстроўваліся ў слайд-шоў.

"Для атрымання дадатковай інфармацыі аб API WordPress для віджэтаў вывучыце Кодэкс API для WordPress".

Заключэнне

Вельмі лёгка і хутка можна рэалізаваць слайд-шоў у WordPress, калі вы ведаеце, што робіце, і асабліва калі функцыя слайд-шоў ўжо гатовая, і вы проста ўбудоўваеце яе. Тым не менш вы павінны быць ўважлівыя, і не выкарыстоўваць функцыянальныя магчымасці, якія ўжо існуюць і, вядома, будзе выдатна, калі вы рэалізуеце яго вельмі простым спосабам, так як мы гэта рабілі, паколькі больш гнуткі падыход з выкарыстаннем мноства параметраў і настроек можа ўскладніць сітуацыю, у залежнасці ад неабходнага фукнционала.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.