Share
Integrering av lysbildefremvisning i WordPress er en svært nødvendig funksjon for nesten alle temaer, men hvor vanskelig er det å inkludere og hvor fleksibel er det? I denne opplæringen skal vi på forskjellige måter inkludere en av de mest populære og brukte jQuery lysbildefremvisningene, Nivo Slider.
Det er faktisk allerede et kodet WordPress-plugin for Nivo Slider, rett på den offisielle Nivo Slider-siden. Men vi kommer til å bygge en i denne opplæringen uansett, og vi skal definitivt gjøre det annerledes. I denne opplæringen skal vi lage en Nivo-skyveplugin som vil ha widgetfunksjonalitet, kortkodesfunksjonalitet, og du vil til og med kunne integrere den som en enkel funksjonssamtale og hardkodes den inn i ditt tema hvor som helst brukeren ønsker.
Ved å følge denne opplæringen, er det underforstått at du kjører en Apache og MySQL-server lokalt eller eksternt for å kunne installere WordPress. Også at du har en 3,1 + versjon av WordPress installert som du har tilgang til filsystemet, og at du har grunnleggende PHP, CSS, JavaScript og HTML kunnskap.
En av de enkleste delene av denne opplæringen. Vi skal lage en mappe som heter nivoplugin inne i wp-innhold / tillegg katalog inne i WordPress installasjonen. I den katalogen vil vi opprette en nivoplugin.php fil med følgende kode:
Dette er grunnleggende plugin-informasjonen som brukes av WordPress, for å identifisere pluginnavnet og detaljene. Ting som Plugin Name, Beskrivelse, Forfatter og Plugg inn versjonen kreves parametere som legges til som kommentert tekst øverst på hvert plugin, slik at WordPress kan identifisere pluginet, administrere det, kjøre det og vise den nødvendige informasjonen om den på plugin-siden.
"For mer informasjon om plugin header tekst og andre alternativer som kan legges til det, vennligst les Skriv et plugin i WordPress Codex."
Lysbildefremvisningen er laget av bilder, så for å gjøre en enkel implementering av jQuery Nivo Slider trenger vi en måte å legge til og administrere bilder i administrasjonspanelet. Vår tilnærming kommer til å gjøre god bruk av tilpasset posttype WordPress-funksjonalitet. Egendefinerte posttyper vil bli brukt til å opprette en ny egendefinert side der hvert innlegg inneholder alle nødvendige bildedetaljer: navnet og selvfølgelig den viktigste delen, selve bildet. Vi skal bruke tittelen og redaktøren for navn og beskrivelse informasjon og funksjonen bildefunksjonalitet for å laste opp bildet, administrere og identifisere det.
Accentsconagua
funksjon np_init () $ args = array ('public' => true, 'label' => 'Nivo Images', 'støtter' => array ('title', 'miniatyrbilde')); register_post_type ('np_images', $ args); add_action ('init', 'np_init'); I eksempelet ovenfor legger vi til en krok til np_init funksjonen ved hjelp av init hook-koden som vil løpe før hodene går. Vi må gjøre dette, så vi kan da inkludere inni register_post_type Funger med parametrene. Denne funksjonen er funksjonen som brukes til å legge til og administrere en ny tilpasset posttype. I utgangspunktet inkluderer vi en ny tilpasset posttype som heter np_images med noen argumenter.
Argumentene er en rekke verdier som representerer innstillingene for den nye egendefinerte innleggstypen. Ting som om det er ment å bli brukt offentlig, setter vi offentlige til sanne, vi gir det en etikett med navnet Nivo bilder og vi setter det faktum at hvert innlegg har en tittel og et kjennetegnet bilde med variablene tittel og thumbnail som en matrise til hovedattributtet støtter.
Dette skaper egendefinert innleggstype, og det ser slik ut:
På dette tidspunktet har vi en registrert og arbeider egendefinert posttype med navnet np_images. Vi kan legge til nye innlegg, slette dem og redigere dem som med vanlige innlegg, men skreddersydd for vårt formål å administrere bilder for lysbildeserien. I utgangspunktet er dette stedet der vi legger til bilder for Nivo lysbildeserie som innlegg.
Dette kan høres ut som noe litt komplisert eller tidkrevende litt mer enn vanlig. Det er ikke. Vi skal laste ned den gratis jQuery-versjonen av Nivo Slider og inkludere de nødvendige skript og stiler, slik at vi senere kan bruke dem med tilpasset kode og bilder.
For å laste ned kildene, går vi til prissiden på nivo.dev7studios.com og klikker på jQuery Plugin (Free version) nedlasting knappen til venstre for å laste ned kildene.
I forbindelse med denne opplæringen skal vi holde ting veldig enkle. Vi pakker ut filen og inkluderer hele katalogen i vår plugin katalog. Inne i nivo-glidebryteren mappe vi har en annen mappe som heter demo. Vi skal slette det da vi ikke har noe for det, og vi vil ikke ha et rotete plugin med unødvendige ting i det.
Den neste delen av dette trinnet inkluderer de nødvendige Nivo Slider-filene. I vår nivoplugin.php fil vil vi legge til følgende:
add_action ('wp_print_scripts', 'np_register_scripts'); add_action ('wp_print_styles', 'np_register_styles'); Dette kommer til å hekte til noen funksjoner (den andre parameteren er funksjonsnavnet). Vi trenger disse krokene for å inkludere skript og stiler riktig inn i fronten. La oss se på tilbakeringingsfunksjonene til våre tidligere kroker.
funksjonen np_register_scripts () if (! is_admin ()) // register wp_register_script ('np_nivo-script', plugins_url ('nivo-slider / jquery.nivo.slider.js', __FILE__), array ('jquery')) ; wp_register_script ('np_script', plugins_url ('script.js', __FILE__)); // enqueue wp_enqueue_script ('np_nivo-script'); wp_enqueue_script ( 'np_script'); funksjon np_register_styles () // register wp_register_style ('np_styles', plugins_url ('nivo-slider / nivo-slider.css', __FILE__)); wp_register_style ('np_styles_theme', plugins_url ('nivo-skyve / temaer / standard / default.css', __FILE__)); // enqueue wp_enqueue_style ('np_styles'); wp_enqueue_style ( 'np_styles_theme'); Skript tilbakeringingsfunksjonen registrerer og inneholder 3 viktige javascriptfiler: jQuery (som en avhengighet av Nivo Slider), nivo-slider base fil (jquery.nivo.slider.js) og vår tilpassede skriptfil (script.js). Nivo Slider krever jQuery å fungere, og vi trenger et tilpasset skript for å aktivere det.
jQuery (dokument) .ready (funksjon ($) $ ('# slider'). nivoSlider ();); Skriptet er ganske enkelt, det krever at jQuery legger til nivoSlider funksjon til taggen med ID for glidebryteren. Den taggen skal ta nivo-glidebryteren egenskaper og funksjonalitet.
Til slutt registrerer stil tilbakeringingsfunksjonen i vårt forrige trinn og inneholder 2 viktige filer: nivo-slider.css fil som har alle stilene som trengs for å få skyvekontrollen til å se og fungere tilsvarende, og a default.css fil inne i temaer / default mappe som vi bruker til temaet lysbildeserien med standard nivo-glidebryteren tema.
Som nevnt i begynnelsen, vil denne opplæringen dekke implementeringen av en widget, en shortcode og en funksjon for hardkoding av glidebryteren om nødvendig ved å bruke pluginet vi bygger. For kortkoden og funksjonen trenger vi ganske mye de samme bildestørrelsene og for widgeten en mindre størrelse for bildens høyde og bredde.
Først må vi ta hensyn til det faktum at vi bruker uthevede bilder i egendefinerte innlegg for bildene våre. Så hvordan skal vi endre størrelsen og beskjære bildene slik at de passer til våre behov? Vi skal legge til nye bildestørrelser som WordPress vil endre størrelse og beskjære på hver ny bildeopplasting. For å legge til de nye bildestørrelsene vil vi bruke add_image_size funksjon ved å legge til følgende kode inne i np_init funksjon:
add_image_size ('np_widget', 180, 100, true); add_image_size ('np_function', 600, 280, true); I den ovennevnte kildekoden implementerte vi 2 bildestørrelser som vi vil ringe senere ved å bruke navnene np_widget for widget og np_function for shortcode og PHP-funksjon for å identifisere dem.
For å aktivere innlegg miniatyrbilder i plugin må følgende linje kode legges til i plugin-modulen. Vi skal legge den over ADD_ACTION linjer.
add_theme_support ('post-miniatyrer'); Msgstr "Bildestørrelser lagt til med
add_image_sizevil bare fungere for nye bilder som lastes opp etter at funksjonen er aktivert. "
En av hovedtrekkene til plugin er en PHP-funksjon som du kan bruke hvor som helst i temakoden din for å sette inn den store 600x280 Nivo lysbildeserien.
Fordi vi bruker tilpassede innlegg til å administrere bildene våre til lysbildeserien, må vi spørre disse innleggene og få titlene og bildene fra den egendefinerte innleggstypen. For det skal vi bruke en ny WP_Query loop med parametrene til $ args variabel som velger den egendefinerte innleggstypen og lager en lysbildeserie med maksimalt 5 bilder fra spørringen. Deretter oppretter vi en variabel $ resultat som har all HTML koden som trengs for Nivo lysbildeserie. Vi bruker demo HTML kode wrappers fra vår Nivo script nedlastingsmappe.
funksjon np_function ($ type = 'np_function') $ args = array ('post_type' => 'np_images', 'posts_per_page' => 5); $ result = ''; $ resultat. = ''; // loop $ loop = ny WP_Query ($ args); mens ($ loop-> have_posts ()) $ loop-> the_post (); $ the_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), $ type); $ resultat. = '
'; $ resultat. = ''; $ resultat. = ''; $ resultat. = 'Dette er et eksempel på a HTML bildetekst med en lenke. '; $ resultat. = ''; $ resultat. = ''; returnere $ resultat; Inne i løkken bruker vi wp_get_attachment_image_src Funksjon for å hente det uthevede bildet fra vårt tilpassede innlegg. Vi bruker np_function verdi for størrelsen på bildet som vi tidligere har lagt til i np_init. Fordi vi er inne i løkken, kan vi bruke $ Post-> ID å identifisere innlegget. Funksjonen har en parameter, $ typen, som brukes til å sette bildestørrelsen fra wp_get_attachment_image_src med en av de tidligere innstilte bildestørrelsene. Variabelen har standardverdien for np_function. Hvis ingen parameter er gitt når du ringer til funksjonen, vil standardvariabelen sparke inn.
Titlene på innleggene legges til som verdier til tittel HTML-parameteren til bildemerket og er synlig nederst i bildediasshowet som flytende tekst over bildene i en gjennomsiktig, mørk bakgrunn.
Skyvekontrollen endres automatisk som bildestørrelsene inni den, så uansett bildestørrelser vi bruker, skal vi ha en lysbildefremvisning av den størrelsen.
Lysbildefremvisningen i np_function størrelsen ser slik ut:
Denne forhåndsvisningen av lysbildeserien er shortcode implementeringen som vil bli dekket neste.
En annen hovedfunksjon er shortcode implementering. Dette er faktisk ekstremt enkelt å implementere og kan gjøres med en linje med kode. Bare legg til denne linjen i np_init fungere over alt som er der inne allerede:
add_shortcode ('np-shortcode', 'np_function'); Kortnummerkroken vil faktisk bruke vår PHP-funksjon for å returnere innholdet i lysbildeserien. Det er alt, veldig enkel og rask implementering av kortnummeret. For å bruke den, legg bare til [NP-snarvei] i innholdet av et innlegg eller en side. Denne teksten vil bli erstattet med den faktiske lysbildefremvisningen.
I dette trinnet skal vi bygge en enkel widget som bare har til formål å vise en liten lysbildefremvisning i sidefeltet hvor det er plassert.
Vi har allerede størrelsen satt for den i trinn 4, og vi har all annen funksjonalitet som inkluderer og genererer Nivo lysbildeserie som vi kan bruke til å integrere i widgeten. Så alt som gjenstår nå er å bygge widgeten og integrere den forrige koden.
funksjon np_widgets_init () register_widget ('np_Widget'); add_action ('widgets_init', 'np_widgets_init'); I denne første delen skal vi implementere en ny krok som du bør legge til blant de andre. Denne kroken bruker widgets_init tag og bruker en funksjon som vi skal nevne np_widgets_init. Denne funksjonen kjører når widgets er opprettet. Som et resultat vil vi registrere widgeten under navnet np_Widget som i eksemplet ovenfor.
For å lage en ny widget, implementerer vi en ny klasse som heter np_Widget som strekker seg WP_Widget klasse. Som en første funksjon __construct er den primære og viktigste funksjonen til klassen og av vår widgetfunksjonalitet. Funksjonen har parametere som vi bruker for å gi widgeten en unik ID som i vårt tilfelle er oppkalt np_widget, et navn, Nivo Slideshow, og til og med en beskrivelse som følgende kode viser:
klasse np_Widget utvider WP_Widget offentlig funksjon __construct () foreldre :: __ construct ('np_Widget', 'Nivo Slideshow', array ('beskrivelse' => __ ('A Nivo Slideshow Widget', 'text_domain'))); Dette er selvfølgelig bare starten på vår widget, det er noen andre funksjoner vi trenger å implementere og konfigurere ettersom vi trenger dem til å fungere.
Widgeten ser ut som en hvilken som helst annen widget i bakenden. Vi må gi widgeten en tittel som har mulighet til å bli lagt inn av brukeren og senere lagret av plugin. For å gjøre dette må vi skrive skjema funksjon utvidet fra WP_Widget klasse. I denne funksjonen skal vi bruke $ forekomst parameter som funksjonen gir for å få tittel som er en variabel som senere ble implementert, lagret og oppdatert. Så vi lager skjemainngangselementet ved hjelp av følgende kode:
offentlig funksjonsformular ($ forekomst) if (isset ($ instance ['title'])) $ title = $ instance ['title']; ellers $ title = __ ('Widget Slideshow', 'text_domain'); ?>
Denne koden kjøres bare i bakenden og kreves av følgende funksjoner for å sende tittelnavnet for lagring og senere bruk i forenden. De $ forekomst variabel har verdien av tittelen og brukes direkte som eksempelet ovenfor uten andre forespørsler eller funksjonsanrop.
Lagre dataene
Etter at skjemaet er sendt fra forrige funksjon, må det behandles og lagres. Dette gjøres i Oppdater funksjon som vi også må legge til i klassen med følgende kode:
offentlig funksjon oppdatering ($ new_instance, $ old_instance) $ instance = array (); $ instance ['title'] = strip_tags ($ new_instance ['title']); returner $ instance;
Verdien av feltet sendes gjennom $ new_instance variabel som er fjernet av koder, satt inn i $ forekomst variabel slik at den kan returneres av funksjonen og lagres av WordPress som en del av den utvidede widgetfunksjonaliteten.
Widget Front-End
Sist men ikke minst er en annen svært viktig og også representativ del av vår widget frontendens funksjonalitet. Åpenbart er hvert stykke viktig for sluttresultatet til å fungere, men denne delen er det du ser i temaet ditt.
De widget funksjonen styrer den forreste enden av widgeten og har to parametere: $ args og $ forekomst. De $ args parameter brukes til å få variabler som $ before_widget, $ after_widget og $ before_title, $ after_title som vi skal bruke i vår implementerte kode. Widgetfunksjonen ser slik ut:
offentlig funksjon widget ($ args, $ instance) ekstrakt ($ args); // tittelen $ title = apply_filters ('widget_title', $ instance ['title']); ekko $ before_widget; hvis (! tomt ($ tittel)) ekko $ before_title. $ tittel. $ After_title; ekko np_funksjon ('np_widget'); ekko $ after_widget; For å implementere lysbildeserien bruker vi funksjonen np_function men i dette tilfellet gir vi det parameteren np_widget slik at vi får de bildestørrelsene vi ønsker for widgeten.
Dette dekker widget-implementeringen av Nivo Slider i plugin-modulen. På dette tidspunktet kan du gå inn i administrasjonspanelet og legge til noen innlegg i Nivo-bildemenyen og legge til kjente bilder til dem slik at de vises i lysbildeserien.
"For mer informasjon om WordPress Widgets API sjekk WordPress Codex Widgets API."
Konklusjon
Det er veldig enkelt og raskt å implementere en lysbildefremvisning i WordPress hvis du vet hva du gjør, og spesielt hvis lysbildeserien er allerede bygget, og du integrerer bare den. Likevel må du være forsiktig så du ikke bruker noen funksjonalitet som allerede er der, og selvfølgelig er det enkelt hvis du implementerer det på en veldig grunnleggende måte som vi nettopp gjorde, som en mer fleksibel tilnærming med mange alternativer og funksjoner kan komplisere ting litt, avhengig av hva funksjonene er.
