WordPress-opplæring: Hvordan lage et testimonials-plugin

Så her er vi for den andre ukentlige opplæringen om WordPress. Vi har lært hvordan du oppretter et uendelig rullende WP-nettsted og sideflip-plugin i det siste. I dag lærer vi litt mer om tilpassede innleggstyper, og hvordan du laster inn dataene deres.


Denne funksjonen er veldig viktig på nettstedet ditt, siden den lar deg vise folk som anbefaler deg. Uttalelser er et godt sosialt bevis på at du er vakker. Og du trenger ikke komplekse plugins eller mye kode for å oppnå dette, som du ser med et par filer, kan du lage en sexy presentasjon for dine uttalelser.

La oss komme i gang da!

Glidelås & Installere

Hvis du har det travelt med å sjekke dette, kan du laste ned og installere det.

Du må legge til noen data da, ved å legge til noen få attester ved å bruke de splitter nye attestene du kan se i oversikten:

list-attester

Deretter kan du bruke den grunnleggende kortkoden til å laste inn det:

[attester rand = 0 maks = 5]

Når du har lagt til koden, vil du se noe lignende på siden din:

Hoved-attester

Nå får vi se hvordan du lager og utforsker dette (ved å legge til flere funksjoner og endre utseendet).

Det grunnleggende

Som vi har sagt før, må du legge til overskriftsmetadata, lage plugin-filen og ringe skriptene dine. Lang historie, du oppretter en ny mappe under wp-innhold / plugins med plugin-navnet ditt, og oppretter deretter en fil med samme navn som mappen som skal være din viktigste plugin-fil.

Når du har gjort den kopien og lim inn som følger:

<?php
/ *
Plugin-navn: attester
Beskrivelse: Vis kundehenvisninger.
Versjon: 1.0
Forfatter: Web Revenue Blog
Lisens: GPL2
* /

// forkynne skript og stiler
funksjon plugin_scripts () {
wp_enqueue_script ( ‘jquery’);
wp_enqueue_script (‘flexslider’, plugins_url (‘js / jquery.flexslider-min.js’, __FILE__), array (‘jquery’), ‘2.2’, falsk);
wp_enqueue_script (‘testimonials’, plugins_url (‘js / testimonials.js’, __FILE__), array (‘jquery’), ‘1.0’, falsk);
wp_enqueue_style (‘flexsliderCSS’, plugins_url (‘css / flexslider.css’, __FILE__), falsk, ‘2.2’, ‘alle’);
wp_enqueue_style (‘testimonialsCSS’, plugins_url (‘css / testimonials.css’, __FILE__), falsk, ‘1.0’, ‘alle’);
}
ADD_ACTION ("wp_enqueue_scripts","plugin_scripts");

Dette gjør vi:

  • Fortell til WP hva som er plugin-navnet vårt, forfatteren, hva den gjør
  • Opprette en funksjon, der vi setter inn vanlige skript (som jQuery) og tilpassede skript (som flexslider), og stilark
  • Fortell til WP for å laste inn skriptsfunksjonen i standard skriptsamtalen, slik at de faktisk blir lastet inn på sidene

Det hele er ganske kult, men ikke glem å faktisk opprette filene under / js og / css. Du kan bare laste dem ned i demoinnholdet vårt slik at du ikke trenger å grave mye for å finne flexslider-filene.

Nå har vi alle grunnleggende ting på plass vi kan starte den morsomme delen.

Egendefinert innleggstype

Som standard har WordPress to vanlige innleggstyper, sider og innlegg. Men det har også mange interne innleggstyper (som vedlegg), så definisjonen av “posttype” er: Alle typer data du trenger å lagre.

Ettersom plugin-en vår vil lage en ny funksjonalitet, har WP ikke et innebygd sted å lagre det, så vi må lage det. Ikke vær redd liten gresshoppe, det er ganske enkelt, du kan bruke denne koden:

// den svarte magien for å lage innleggstypen
funksjon create_post_type () {
register_post_type (
“attester”, // ny innleggstype
array (
‘etiketter’ => array (
‘name’ => __ (‘Vitnesbyrd’),
‘singular_name’ => __ (‘Testimonial’)
),
‘offentlig’ => true, / * Innleggstypen er ment for offentlig bruk. Dette inkluderer i frontenden og i wp-admin. * /
‘støtter’ => array ( ‘tittel’, ‘redaktør’, ‘miniatyr’, ‘custom_fields’),
‘hierarkisk’ => falsk
)
);
}

Her bruker vi bare register_post_type () -funksjonen for å fortelle til WP “Hey Buddy, vi trenger å lagre denne typen data, vær klar til å motta den”.

Vi forteller ham også at denne typen data kalles “attester”, den skal være tilgjengelig for offentlig tilgang (så det oppretter faktisk et nytt menyelement i dashbordet ditt for det), feltene vi trenger på det, og hvis det er hierarkisk eller ikke (som sider som vi har foreldre- og barnesider).

Da må vi kalle det hver gang vi laster inn WordPress. Denne kroken vil gjøre det:

add_action (‘init’, ‘create_post_type’);

De tilpassede feltene

Nå har den egendefinerte innleggstypen tittelen (personens navn), innholdet (personens attest), et bilde (vist bilde), men det mangler en kobling, siden hvis personen er hyggelig nok til å snakke om deg, bør du i det minste lenke til nettstedet deres, ikke sant?

Vi kan gjøre dette med vanlige tilpassede felt, men det er mye bedre å ha et “lukket” felt, der brukeren ikke trenger å skrive inn feltnavn, og også der du kan legge til noen valideringsregler.

Først av alt må vi lage en ny metaboks, som er de fine panelene du har i redigeringsområdet for innlegget ditt, hvert lite panel er en metaboks. Denne funksjonen vil opprette og kalle den:

// legge til metafeltet URL
funksjon add_custom_metabox () {
add_meta_box (‘custom-metabox’, __ (‘Link’), ‘url_custom_metabox’, ‘attester’, ‘side’, ‘lav’);
}
add_action (‘admin_init’, ‘add_custom_metabox’);

Funksjonen add_meta_box () krever disse parametrene:

  1. ID – Den unike identifikatoren for det. Du kan bruke noe unikt her som “enhjørning-spise-regnbue” eller “vitnesbyrd-kobling”. Alt som kan brukes internt
  2. Tittel – Hva blir vist for brukeren? Her er det viktig å bruke __ () -funksjonen, det er funksjonen som lar brukere fra fremmedspråk oversette plugin-modulen din med .po-filer (uten å redigere plugin-filer)
  3. Tilbakeringing – funksjonen der du har det faktiske innholdet i metaboks
  4. Innleggstype – I vårt tilfelle ønsker vi at den bare skal være synlig for attester
  5. Kontekst – Hvor på siden du vil vise den
  6. Prioritet – Hvis det skal være foran andre elementer i samme posisjon eller etter dem

Nå må vi opprette url_custom_metabox () -funksjonen, siden vi har kalt den.

// HTML for adminområdet
funksjon url_custom_metabox () {
global $ post;
$ urllink = get_post_meta ($ innlegg->ID, ‘urllink’, sant);

// validere!
if (! preg_match ( "/ HTTP (s?): ///", $ urllink) && $ urllink! = "") {
$ feil = "Denne nettadressen er ikke gyldig";
$ urllink = "http: //";
}

// output invid url-melding og legg http: // til inndatafeltet
if (isset ($ -feil)) {ekko $ -feil; }
?>

URL:

<?php
}

OK, oversetter dette til vanlig engelsk:

  • Den globale variabelen $ post kalles, så vi kan vite hvilken som er POSTID for det nåværende elementet
  • Vi laster inn den nåværende verdien for nettadressen
  • Vi validerer Hvis verdien som bruker satt inn er gyldig. Hvis det er minst én “http” eller “https” forekomst, er verdien OK, ellers er den gyldig og vi må bruke standardverdien
  • Så viser vi feilene, hvis det er noen
  • Nå starter vi selve HTML-en, og legger til standardverdien i inputfeltet som vi har fått i PHP

Etter dette punktet må vi faktisk lagre det som blir sendt av brukeren. Vi bruker “save_post” -kroken, så hver gang WordPress lagrer et innlegg, vil det kalle denne funksjonen:

// lagrer tilpassede feltdata
funksjon save_custom_url ($ post_id) {
global $ post;

if (isset ($ _ POST [‘siteurl’])) {
update_post_meta ($ post->ID, ‘urllink’, $ _POST [‘siteurl’]);
}
}
add_action (‘save_post’, ‘save_custom_url’);

Her sjekker vi bare om det er noen postdata som heter “nettstedslink” som er feltnavnet vårt. Hvis det er en nettstedkobling, la oss lagre den.

Etter at alt er på plass, vil du se hvordan den nye attesteringssiden din vil se ut:

ny-vurdering

Laster inn tilpassede data

Nå må vi faktisk laste inn varene våre, og vi bruker get_posts () -funksjonen, mest fordi vi bare har enkle data, slik at vi ikke trenger en ordentlig WP-loop (som vil legge til mange DB-samtaler og vi virkelig ikke trenger ikke det).

Så la oss først lage en funksjon for å få koblingen til nettstedet vårt, hvis det er noe.

// returner URL for et innlegg
funksjon get_url ($ post) {
$ urllink = get_post_meta ($ innlegg->ID, ‘urllink’, sant);

returner $ urllink;
}

Nå kan vi starte kortkodefunksjonen. En enkel måte å standardisere og validere kortkodedataene er å lage attributtene for loopen som en matrise, slik at vi kan legge til nye elementer som vi trenger dem, slik:

// registrere kortkoden for å vise attester
funksjon load_testimonials ($ a) {

$ args = matrise (
"post_type" => "attester"
);

if (isset ($ a [‘rand’]) && $ a [‘rand’] == true) {
$ args [‘orderby’] = ‘rand’;
}
if (isset ($ a [‘max’])) {
$ args [‘posts_per_page’] = (int) $ a [‘max’];
}
// få alle attester
$ posts = get_posts ($ args);

// HTML-UTGANG
}
add_shortcode ("attester","load_testimonials");

Som du ser har vi kortkodeattributtene lastet og sendt til $ args-matrisen når de validerer, i formatet som WordPress trenger det, slik at vi kan laste innlegg ved å bruke dem.

Nå må vi legge til noen HTML-kode der, etter flexsliders standardstruktur. Slik ser det ut:

ekko ”;
ekko ‘

    ‘;

    foreach ($ innlegg som $ post) {
    // få tommelbilde
    $ url_ampoo = wp_get_attachment_ounger_url (get_post_ymsnail_id ($ post)->ID));
    $ link = get_url ($ post);
    ekko ‘

  • ‘;
    if (! tom ($ url_tatt)) {echo ‘‘; }
    ekko ‘

    ‘. $ Post->POST_TITLE.

    ‘;
    if (! tom ($ post)->post_content)) {echo ‘

    ‘. $ Post->POST_CONTENT.
    ‘; }
    if (! tom ($ link)) {echo ‘Besøk nettsted

    ‘; }
    ekko ‘

  • ‘;
    }

    ekko ‘

‘;
ekko ”;

Vent, men hvorfor skulle vi lage HTML-koden inne i PHP-funksjonen? Det er fordi vi betinget kan laste innhold bare hvis brukeren har lagt til innhold, slik at du ikke har tomme HTML-koder, bare venter på å rote opp utformingen din.

Hva med sidefeltet?

De fleste vil bare vise attester i sidefeltet, og denne pluginen fungerer ikke veldig bra siden tekst widgets ikke behandler kortkoder. Det er en enkel løsning for dette, bare legg til dette i koden din:

add_filter (‘widget_text’, ‘do_shortcode’);

Hva blir det neste?

Så, likte du denne opplæringen? Hva vil du legge til som et alternativ for din testimonial shortcode? Har du noen ideer til fremtidige innlegg? Gi oss beskjed ved hjelp av kommentarfeltet!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map