Share
I dag er bildeleddere trenden, og du kan se dem på hvert annet nettsted. Når det er sagt, skyve lagerfotografier, selv med de mest avanserte og vakre animasjonene, bygger egentlig ikke tillit til kundene dine. En bedre tilnærming ville være å bruke kundefortellinger i vår skyveknapp. Med riktig styling kan denne metoden være like visuelt engasjerende og gjør brukeren mer trygg i å bruke (og kjøpe) produktet enn å vise dem tilfeldige lagerfotografier.
"... glidende lagerfotografier ... bygger egentlig ikke tillit til kundene dine."
Vi kommer til å lage en klientanmeldelsesklipper. Du vil kunne legge til nye kundeattester i administrasjonen, og vise dem på nettstedet ditt via kortkoder. For å skyve utsagnene vil vi bruke det gratis SlideJS jQuery-plugin. På denne måten får du høyere kontroll over animasjonen og effektene.
Vi ønsker den nye funksjonen som et plugin, så vi kan bruke det med alle temaer. For å gjøre dette først oppretter vi en ny mappe som heter testimonialslider i wp-innhold / tillegg mappe (jeg antar at du har WordPress allerede installert).
Deretter opprett en ny .php filen i den. La oss kalle det testimonialplugin.php og skriv noen kommentarer i det, så WordPress gjenkjenner det som et plugin.
Du kan gi mye mer informasjon enn dette (som du kan se i Plugins-delen av WordPress Codex), men for vårt formål er dette nok. Med disse få linjene vil du kunne se pluginet ditt og aktivere det gjennom WordPress plugin manager. Så la oss bare gjøre det og aktivere det.
Hvis du vil legge til anbefalinger på en brukervennlig måte, er det best å gjøre det med egendefinerte innleggstyper. Fordi vitnemålene ikke vil være stå alene, vil vi ikke bruke alle funksjonaliteter, akkurat det som er nødvendig for vår hensikt.
Legg denne koden til vår testimonialplugin.php fil (før den avsluttende PHP-taggen)
Accentsconagua
funksjon testimonials_init () $ args = array ('public' => true, 'label' => 'Client Testimonials', 'støtter' => array ('title', 'editor', 'custom-fields')); register_post_type ('testimonials', $ args); add_action ('init', 'testimonials_init'); I testimonials_init () funksjon vi først satt inn noen parametere for vår posttype. Vi ønsker at den skal være offentlig, og også å bli kalt "Kundeuttalelser". Støttedelen av arrayet kan være litt forvirrende. Det står at vi vil at vår posttype skal ha en tittel og også redaktøren der vi kan skrive innholdet vårt. Men hvorfor ønsker vi å støtte tilpassede innleggstyper?
Slik at brukerne ikke trenger å lære noen spesiell markering hvis de vil legge til navnet på klienten eller muligens en hjemmeside!
Å gjøre grensesnittet brukervennlig er svært viktig når du bruker CMS, da brukervennlighet er en av hovedgrunnene til at du bruker WordPress.
Som sagt, gir du tilpassede felt for dine egendefinerte verdier, gjør pluginet ditt mye mer brukervennlig. Her kan du velge mellom et par alternativer:
Jeg kan skrive om disse alternativene i en annen opplæring, men i utgangspunktet er de to første alternativene ikke veldig brukervennlige. Å skape metaboxer, men ikke så vanskelig, tar litt tid, så vi går med det tredje alternativet og legger til noen standard tilpassede feltbokser.
Legg til disse linjene etter forrige kodeblokk:
funksjon set_testimonial_custom_fields ($ post_id) if ($ _GET ['post_type'] == 'testimonials') add_post_meta ($ post_id, 'Klientnavn', 'true'; add_post_meta ($ post_id, 'Link', 'true ); returnere sann; add_action ('wp_insert_post', 'set_testimonial_custom_fields'); I set_testimonial_custom_fields () funksjon vi først sjekke om vi lager et innlegg av typen 'attester'. Hvis vi gjør det, bruker vi add_post_meta () WordPress-funksjonen for å legge til et egendefinert felt. Den første parameteren er IDen til innlegget vi lager, det andre er navnet på det egendefinerte feltet, det tredje er standardverdien til det egendefinerte feltet (her bruker vi en tom streng), og den fjerde er en boolsk verdi som bestemmer om feltet er unikt. Hvis satt true, betyr det at du bare kan ha ett av disse feltene per innlegg.
Med denne koden kan du enkelt utvide plugin-modulen og legge til enda flere ekstra felt i posttypen.
Jeg nevnte i oversikten at vi skal bruke jQuery-plugin Slide.JS for å skyve våre testimonials. For å gjøre dette bør vi inkludere skriptet i pluginet vårt.
Først hodet til SlideJS hompage og last det ned. Hvis du vil gjøre litt ekstra tilpasning på lysbildefremvisningen, vil du kanskje bokmerke docs siden, da du kan lese dokumentasjonen for pluginet der.
Så, etter at du lastet ned .zip-filen, trekk den ut. Gå til Lysbilder / kilde mappe (i .zip-filen) og pakke ut filen slides.min.jquery.js til plugin-mappen din. Du vil kanskje opprette en js mappe i plugin-katalogen din for å lagre den så alle JavaScript-filene dine kommer på ett sted.
La oss nå fortelle om WordPress å inkludere våre skript hvis vårt plugin er aktivt
// Legge til Slide.js-skriptet og skriptfunksjonen testimonials_register_scripts () // Bare legg til dette skriptet hvis vi ikke er i administrasjonspanelet hvis (! Is_admin ()) // Registrerer skript wp_register_script ('testimonials_slide_js', plugins_url ( 'js / slides.min.jquery.js', __FILE__), array ('jquery')); wp_register_script ('testimonials_script', plugins_url ('js / script.js', __FILE__), array ('jquery')); // Enqueing skript wp_enqueue_script ('testimonials_slide_js'); wp_enqueue_script ( 'testimonials_script'); add_action ('wp_print_scripts', 'testimonials_register_scripts'); Vi bruker wp_print_scripts krok for å legge til skriptene i hodet på sidene. I testimonials_register_scripts funksjon vi registrerer første gang, og enqueuing skriptene. Her er noen ting å se etter ...
"... du burde bare laste opp skriptene (og stilene) du trenger"
Vi bruker den betingede taggen med is_admin () WordPress-funksjonen og bare legg skriptet til hodet hvis vi ikke er i administrasjonspanelet. Det er en liten optimalisering. I utgangspunktet bør du bare laste inn skriptene (og stilene) du trenger, og bare når du trenger dem.
Når vi bruker wp_register_script () funksjon for å registrere vår slides.min.jquery.js plugin, setter vi jQuery som en avhengighet, så de blir lastet i riktig rekkefølge. Sist, ikke bekymre deg for script.js filen ennå, vil vi lage den snart.
La oss nå vise våre vitnemål! I dette trinnet oppretter vi en funksjon som kan vise vitnemålene med riktig oppføring. Ta en titt på koden først, og vær ikke redd, det kan være litt mer komplisert enn de forrige kodene, men jeg vil forklare alt for deg.
// Vise testimonials funksjonen display_testimonial_slider () // Vi vil bare ha innlegg i testamente type $ args = array ('post_type' => 'testimonials', 'posts_per_page' => 5); // Vi lager vår html i resultatvariabelen $ resultat. = ''; $ the_query = ny WP_Query ($ args); // Opprette en ny sidekrets mens ($ the_query-> have_posts ()): $ the_query-> the_post (); $ client_name_value = get_post_meta (get_the_ID (), 'Klientnavn', sant); $ link_value = get_post_meta (get_the_ID (), 'Link', true); $ resultat. = ''; // Viser innholdet $ resultat. = ''.Get_the_content ().''; // Viser forfatteren av testamentet og oppretter også en lenke dersom Link Custom-feltet er gitt hvis ($ link_value! = ") $ Result. = ''. $ Client_name_value.'; ellers $ resultat. = ''. $ Client_name_value.'; $ resultat. = ''; EndWhile; $ resultat. = ''; returnere $ resultat; La oss se koden trinnvis! Først setter vi parametrene til sidekretsen. Vi er bare interessert i 'attester'skrive innlegg og vi vil bare ha fem av dem. Så skaper vi $ resultater variabel. Vi lagrer HTML-oppslaget vårt i den. Hvis du sjekker SlideJS-dokumentene eller eksemplene, kan du se at vi trenger noen spesifikk markering for plugin-modulen til å fungere. Vi skaper det og sammenkaller alt til $ resultater variabel. I løkken får vi innholdet i vår anbefaling og får også verdiene til Klientnavn og Link tilpassede felt (hvis vi har en lenke, vil klientnavnet være klikkbart). Vi bruker også litt ekstra oppslag, så det vil være enkelt hvis du vil stil dem.
Vår glidebryter er ikke fullt funksjonell enda, siden det ikke skyver innleggene våre, men det ville være bra hvis vi kunne se om det viser oss våre testimonialer riktig i det minste. Så la oss legge til en kortkode slik at vi kan se hva vi viser!
// Legge til shortcode add_shortcode ('klienterklæringer', 'display_testimonial_slider'); Som du kan se, er det veldig enkelt å legge til koden for kortnummer. Nå hvis skrive [kundeanmeldelser] i vår side eller innlegg kan vi se klientens vitnemål, som du kan se på bildet (jeg la til noen anbefalinger, så vi har noe å vise).
Nå som vi er sikre på at våre vitnemål vises riktig, la oss få dem til å glide! Husker du script.js fil som vi la til i hodet på siden vår? Nå skal vi lage det! Så, hvis du ikke allerede har gjort det, opprett en tom fil som heter script.js i js mappe i plugin katalogen og legge til følgende kode:
jQuery (function () jQuery ("# slides"). lysbilder (generatePagination: false, play: 3000);); Jeg ville ikke ha paginering for glidebryterne og sette den til Auto spill, så det er diskret skyve på toppen eller hvor du vil ha det til. Hvis du vil bruke ekstra funksjoner i SlideJS, kan du enkelt gjøre det ved å lese dokumentasjonen.
