7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Plugins

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

Scroll to top
Read Time: 11 mins

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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.