, opbygge et slideshow stik af for wordpress,,,,, 4,,,,,,,,, 12,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, at integrere lysbilleder funktioner i wordpress er en yderst nødvendige element i næsten ethvert emne, men hvor svært er det at omfatte, og hvor fleksible, er det?i denne forelæsning vil vi på forskellige måder, er en af de mest populære og anvendes jquery slideshows, nivo ål,.,, der er faktisk allerede en kodet wordpress stik af med nivo slider, ikke på den officielle nivo slider side.men vi skal bygge et i denne forelæsning, og vi vil bestemt gøre det anderledes.i denne forelæsning, vi er ved at skabe en nivo slider stik af, som vil have widget funktionalitet, korte kode funktionalitet og du vil være i stand til at integrere det som en enkelt funktion og svær kode det ind i din tema, hvor brugeren ønsker, ved at følge denne forelæsning, er det underforstået, at du kører en apache. og mysql server lokalt eller på afstand for at være i stand til at installere wordpress.også, at du har en 3.1 + version af wordpress installeret, at de har adgang til sagsakterne system, og at de har grundlæggende php, css, javascript og html viden.,, trin 1, skaber det stik af, en af de nemmeste dele af denne forelæsning.vi vil skabe en folder, der hedder, nivoplugin, indenfor, wp indhold /plugins, fortegnelse i din wordpress anlæg.i denne fortegnelse vil vi skabe en, nivoplugin.php, dossier med følgende kode:,, <?php /* stik af navn: nivo stik af beskrivelse: simpel gennemførelse af en nivo lysbilleder i wordpress forfatter: ciprian turcu version: 1, 0 * /?>,, det er de grundlæggende oplysninger, der anvendes ved stik af wordpress at identificere de stik af navn og kontaktoplysninger.sådan, stik af navn, beskrivelse, forfatter, og stik af, version er nødvendige parametre, som er tilføjet som kommenteret tekst på toppen af hver enkelt stik af, så wordpress kan identificere de stik af, styre det, løb det og vise de krævede oplysninger om det i plugins side.,,,,,, "for mere information om stik af header tekst og andre muligheder, der kan føjes til det venligst læse og skrive et stik af i wordpress codex.,,, trin 2, at administrationen lysbilleder forvaltning funktionalitet, lysbilleder er lavet af billeder, så med henblik på at foretage en simpel gennemførelse af jquery nivo slider, vi har brug for en måde at tilføje og forvalte billeder i det administrative udvalg.vores tilgang vil gøre god brug af den sædvane, efter type wordpress funktionalitet.sædvane efter typer vil blive brugt til at skabe en ny skik side, hvor hver post indeholder alle de krævede image oplysninger: navn og naturligvis den vigtigste del, et billede af sig selv.vi skal bruge titlen og redaktør for navn og beskrivelse og var image funktionalitet, upload billedet, forvalte og identificere det.,, funktion np_init() ($args = system (»tâches = > sandt, »mærket« = > nivo billeder,'supports = > system ('title,'thumbnail ')); register_post_type ('np_images, $args)} add_action ('init "," np_init "), i ovennævnte eksempel er der tilføjet et hook på, np_init, funktion ved hjælp af lokalitet klo mærker, der vil løbe, før de personer, løb.vi er nødt til at gøre dette, så vi kan medtage i, register_post_type, fungere med dens parametre.denne funktion er den funktion, der anvendes til at tilføje en ny skik og lede efter type.vi er en ny skik efter type, der hedder, np_images, med nogle argumenter, for det første er et system af værdier, som repræsenterer de indstillinger af ny skik efter type.ting som, hvis det er bestemt til at anvendes offentligt, det offentlige til sandt, vi giver det en etiket med navn, nivo billeder, og det er, at hver enkelt post har en titel og en var billede med variabler, titel, og virksomhed beskrevet, som en antennegruppe til de vigtigste attribut, støtter..,, skaber dette sædvane efter type, og det ser sådan ud:,,,,,, at vi på dette punkt har et registreret og sædvane efter type ved navn, np_images,.vi kan tilføje nye stillinger, slette dem, og udgive dem som med faste stillinger, men skræddersyet til vores formål at forvalte billeder til lysbilleder.det her er stedet, hvor vi tilføje billeder til nivo lysbilleder som stillinger.,, trin 3, herunder nivo slider manuskripter og styles, det lyder som noget, der er lidt kompliceret og tidskrævende, lidt mere end normalt.det er det ikke.vi kommer til at downloade gratis jquery version af nivo slider og omfatter de nødvendige manuskripter og styles, således at vi senere kan bruge dem med en toldkodeks og billeder.,, at downloade de kilder, vi vil gå til prisfastsættelse, side om nivo.dev7studios.com og klik på jquery stik af (fri version), downloade, knap de glemte at downloade kilder, i forbindelse med denne forelæsning, kommer vi til at holde tingene simple.vi trække filen, og omfatter hele adresseregister i vores stik af registret.i, nivo slider, vi har en mappe, der hedder demo mappe.vi skal slette det, som vi ikke har brug for det, og vi vil ikke have en rodet stik af med unødvendige ting.,, registrering og herunder manuskripter og styles, den næste del af dette skridt, herunder de nødvendige nivo slider filer.i vores nivoplugin.php, sag, vi vil gerne tilføje følgende:,, add_action ('wp_print_scripts "," np_register_scripts'); add_action ('wp_print_styles "," np_register_styles), vil det være for nogle funktioner (det andet parameter er funktion navn).vi har brug for disse kroge til at omfatte manuskripter og styles i forenden.lad os se på callback funktioner af vores tidligere kroge.,, funktion np_register_scripts() (hvis (!is_admin()) (//register wp_register_script ('np_nivo-script, plugins_url ('nivo-slider /jquery. nivo. slider. js, __file__) system ('jquery')); wp_register_script ('np_script, plugins_url ('script. js, __file__)); //enqueue wp_enqueue_script ('np_nivo-script '); wp_enqueue_script ('np_script ");}} funktion 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-slider /themes /default /default. css, __file__)); //enqueue wp_enqueue_style ('np_styles'); wp_enqueue_style ('np_styles_theme");}, manuskript callback funktion, registre og omfatter 3 vigtige javascript filer: jquery (somen dependancy af nivo slider), nivo slider base fil (, jquery. nivo. slider. js,) og vores skik manuskript fil (, manuskript. js,).nivo slider kræver jquery til at arbejde, og vi har brug for en speciel manuskript at aktivere den.,, script.js fil:,, jquery (dokument). klar (funktion ($) {$('# slider'). nivoslider().}), det er ret simpelt, det kræver jquery at fastgøre, nivoslider, funktion, at mærket med id, slider,.- du tager den, nivo slider, egenskaber og funktioner, endelig i vores foregående etape, stil callback funktion, registre og omfatter 2 vigtigere sager: den, nivo-slider.css, sag, der har alle stilarter, der er nødvendige for at gøre de slider ud og arbejde, og en, default.css, fil inde i den, temaer /default, folder, som vi anvender til at tema diasshowet med misligholdelse, nivo slider, tema.,, løntrin 4 nye image størrelser, som nævnt i begyndelsen, det pædagogiske kommer til at omfatte gennemførelsen af en dims, en shortcode og funktion for hårdt indkodning af ål, om nødvendigt ved hjælp af stik af vi er ved at opbygge.for shortcode og funktion, har vi brug for det samme billede, størrelser og widget - en mindre størrelse for den højde og bredde af billederne. først skal vi tage hensyn til den kendsgerning, at vi bruger taget billeder i skik stillinger til vores lysbilleder billeder.så hvordan kan vi resize og afgrøde, de billeder til at passe vores nødvendige behov?vi er nødt til at tilføje nye image størrelser wordpress vil resize og afgrøder til hvert nyt image upload.at tilføje et nyt image størrelser, vi vil bruge den, add_image_size, funktion ved tilføjelse af følgende kode i, np_init, funktion:,, add_image_size ('np_widget, 180, 100, sande); add_image_size ('np_function, 600, 280, sande), i ovennævnte kildekode, gennemførte vi 2 image størrelse vi ringer senere ved hjælp af de navne, np_widget, dims og np_function, for shortcode og folkesundhedsprogrammet funktion at identificere dem, en ting mere, for at gøre det muligt for post thumbnails i stik af følgende linje kode, der skal indsættes i vores stik af.vi er nødt til at tilføje den over, add_action, linjer.,, add_theme_support ("post - thumbnails);,,," billede størrelser med tilføjelse af, add_image_size, kun vil arbejde for nye billeder, der er uploadet efter funktion er aktiveret. ",,, løntrin 5 på den funktion, som er en af de vigtigste træk ved stik af, er et php funktion, som de kan bruge, hvor som helst i temaet kode at indsætte den store 600x280 nivo lysbilleder.,, fordi vi bruger skik stillinger til at forvalte vores billeder i diasshowet, vi har brug for at sætte spørgsmålstegn ved disse stillinger og få navne og billeder fra sædvane efter type.for at vi skal bruge en ny, wp_query, loop med parametre for $args, variabel, der udvælger sædvane efter type og skaber et slideshow i maksimalt 5 billeder fra forespørgslen.næste, skaber vi en variabel, $resultat, der har alle http: //- kode, der er nødvendige for nivo lysbilleder.vi bruger de demo html kode papiret fra vores nivo manuskript downloade mappe.,, funktion np_function ($type ='np_function ') ($args = system ('post_type = > np_images,'posts_per_page = > 5); $resultat = < div klasse = "en indpakning tema default" > "$resultat. = < div id =" skyder "klasse =" nivoslider ">'; //loop $loop = nye wp_query ($args), mens ($loop - > have_posts()) ($loop - > the_post() og $the_url = wp_get_attachment_image_src (get_post_thumbnail_id ($post - > id), $); $resultat. = < img afsnit =". get_the_title(). "" src = ".$the_url [0]. "data tommelfinger = ".$the_url [0]. "i alt = "/>"} $resultat. = < /div > "$resultat. = < div id =" htmlcaption "klasse =" nivo html overskrift ">" $resultat. = < stærk > denne < /stærk > er et eksempel på en < em > html < /em > teksten med < en href = "#" > en forbindelse < /a >. "$resultat. = <. /div >" $resultat. = < /div > « tilbage $resultat;}, i det, vi bruger, wp_get_attachment_image_src, funktion for at hente var billede fra vores skik post.vi bruger den, np_function, værdi for størrelsen af det billede, som vi tidligere har tilføjet, np_init,.fordi vi er i kredsløb, kan vi bruge $post - > id, til at identificere den post.funktionen er en parameter, $type, som anvendes til at fastsætte størrelsen af de billeder, wp_get_attachment_image_src, med en af de tidligere fastsatte image størrelser.variablen er en standardværdi på, np_function,.hvis der ikke er givet, når det fungerer parameter misligholdelse variabel vil sparke i.,, titlerne på de stillinger, tilføjes som værdier til afsnit html parameter i det billede, mærke og er synlige på bunden af det billede, lysbilleder som flydende tekst i de billeder inde i en gennemsigtig mørk baggrund.,, en automatisk ændret som billedet størrelser i den, så det billede størrelser, vi bruger, vil vi få et slideshow af denne størrelse.,, lysbilleder i, np_function, størrelse ser sådan ud:,,,,,, at dette forpremiere på diasshowet er shortcode gennemførelse, som vil være dækket, næste trin 6.,, den shortcode,, en anden vigtigste træk er shortcode gennemførelse.det er faktisk meget let at gennemføre, og som kan gøres med en linje i kode.bare tilføje denne linje i, np_init, funktion over alt, hvad der er der allerede:,, add_shortcode ('np-shortcode "," np_function), den shortcode klo vil bruge vores php funktion til at vende tilbage til indholdet af lysbilleder.det er meget enkel og hurtig gennemførelse af shortcode.for at bruge det, så blot tilføje [np shortcode] i indholdet af en stilling eller side.denne tekst vil blive erstattet med den faktiske lysbilleder.,, trin 7 bygning den dims, i dette skridt, vi ønsker at opbygge et enkelt dims, der har som eneste formål at vise et lille slideshow i den aftale, hvor det er placeret, har vi allerede den størrelse, der er fastsat i det i punkt 4, og vi har alle andre funktioner, som omfatter og skaber nivo lysbilleder, som vi kan bruge til at integrere sig i den dims.så alt hvad vi skal gøre nu, er at bygge den dims og integrere den foregående kodeks.,, funktion np_widgets_init() {register_widget ('np_widget)} add_action ('widgets_init "," np_widgets_init "), i denne første del vil vi gennemføre en ny krog, at man bør tilføje, blandt andre.denne klo anvender, widgets_init, mærke og bruger en funktion, som vi skal navn, np_widgets_init,.denne funktion er, når widgets er skabt.som følge heraf skal vi registrere den dims under navnet, np_widget som i eksemplet ovenfor.,, klasse, for at skabe en ny dims, vi er i færd med at gennemføre en ny klasse, der hedder, np_widget, der forlænger, wp_widget, klasse.som en første funktion, __construct, er den primære og vigtigste funktion i klassen og vores widget funktionalitet.funktionen er parametre, som vi bruger til at give det en unik id - dims i vores tilfælde er nævnt ved navn, np_widget, et navn, nivo lysbilleder, og endda en beskrivelse, som viser følgende kode:,, klasse np_widget udvider wp_widget {offentlige funktion __construct() (moder: __construct ('np_widget "," nivo lysbilleder., system ('description = > __ ('nivo lysbilleder dims "," text_domain)))), skal dette naturligvis kun begyndelsen på vores dims, der er et par andre funktioner, er vi nødt til at gennemføre og konfigurere, som vi har brug for dem til at arbejde, backend widget.,,, den dims er som enhver anden dims i enden.vi er nødt til at give den dims en overskrift, der har mulighed for at få input af brugeren, og senere reddet af stik af.for at gøre dette er vi nødt til at skrive, form, funktion udvides fra, wp_widget, klasse.i denne funktion, vi skal bruge $eksempel parameter, at funktion giver, for at få den titel, som er en variabel senere gennemføres, reddede og ajourføres.så skaber vi form input element ved anvendelse af følgende kode:,, offentlige funktion form ($instans) (hvis (isset ($) ['title '])) ($afsnit = $instans ['title']} andre {$afsnit = __ ('widget lysbilleder, text_domain)}?> < p > < etiket til = "<?php echo $- > get_field_id ('title)?> "> <?folkesundhedsprogrammet aspektet _e ('title: ").> < /etiketten > < input = "klasse widefat" id = "<?php echo $- > get_field_id ('title)?> "navn =" <?php echo $- > get_field_name ('title)?> "type =" tekst "værdi =" <?php echo esc_attr ($afsnit).> "/> < /p > <?php}, denne kode kun kører i enden og er forpligtet af følgende funktioner for at indsende afsnit navn for at spare og senere anvendelse i forenden.de $instans, variable er værdien af titlen og anvendes direkte som ovenstående eksempel med ingen andre spørgsmål eller funktion.,, at data efter formularen indgives fra den tidligere funktion, skal det behandles og reddede.dette er sket i, ajourføre, funktion, at vi også er nødt til at tilføje, at klassen med følgende kode:,, offentlige funktion ajourføring ($new_instance, $old_instance) ($) = array(). $instans ['title '] = strip_tags ($new_instance ['title']); tilbage $), f.eks. værdien af området er passeret, $new_instance, variable, som er splittet af rfid - brikker, der indsættes i $instans, variable, således at det kan blive returneret af funktionen og reddet af wordpress som en del af en udvidet dims, dims funktionalitet, front - - og sidst, men ikke mindst, er et andet meget vigtigste og repræsentativ del af vores dims er forenden funktionalitet.det er klart, at alle våben er vigtigt for det endelige resultat at arbejde, men det er, hvad du ser i dit tema.,,, dims, funktion er at forvalte forenden af dims og har to parametre: $args og $eksempel.de $args parameter, bruges til at få variabler som $before_widget, $after_widget og $before_title, $after_title, at vi kommer til at bruge i vores gennemført kode.den dims funktion ser sådan ud:,, offentlige funktion widget ($args $instans) (ekstrakt ($args); //titlen $afsnit = apply_filters ('widget_title, $instans ['title ']); echo $before_widget; hvis (!tom ($afsnit) echo $before_title.$titel.$after_title; echo np_function ('np_widget) echo $after_widget;}, til at gennemføre diasshowet, vi bruger den funktion, np_function, men i dette tilfælde, vi giver det parameter, np_widget, så vi får billedet størrelser, vi ønsker for den dims.,, omfatter den dims gennemførelse af nivo slider i vores stik af.på dette punkt kan man gå ind i administrationen af panelet og tilføje nogle stillinger i nivo billeder menu og lægger viste billeder til dem, således at de forekommer i lysbilleder.,,, "for flere oplysninger om wordpress widgets api - wordpress codex widgets api -.,,, konklusion, det er meget nemt, og hurtigt at gennemføre et slideshow i wordpress, hvis du ved, hvad du laver, og især hvis diasshowet funktion er allerede bygget, og du er bare af.du er nødt til at være forsigtige med ikke at anvende visse funktioner, som allerede er der, og det er selvfølgelig let, hvis man gennemfører den på en grundlæggende måde, som vi gjorde, som en mere fleksibel tilgang med mange muligheder og kendetegn kan komplicere tingene lidt, afhængigt af hvad de egenskaber, der er.