WordPress-tutorial: Sådan opretter du et testimonials-plugin

Så her er vi til vores anden ugentlige tutorial om WordPress. Vi har lært, hvordan man opretter et uendeligt rullende WP-sted og en side-flip-plugin tidligere. I dag lærer vi lidt mere om tilpassede indlægstyper, og hvordan man indlæser deres data.


Denne funktion er virkelig vigtig på dit websted, da det giver dig mulighed for at vise folk, der anbefaler dig. Udtalelser er et godt socialt bevis på din awesomeness. Og du behøver ikke komplekse plugins eller en masse kode for at opnå dette, som du ser med et par filer, kan du oprette en sexet præsentation til dine vidnesbyrd.

Lad os komme i gang!

Zip & Installere

Hvis du har travlt med at kontrollere dette, kan du downloade og installere det.

Du bliver nødt til at tilføje nogle data derefter ved at tilføje et par attester ved hjælp af de helt nye attester, som du kan se i dit betjeningspanel:

list-testimonials

Så kan du bruge den grundlæggende kortkode til at indlæse det:

[vidnesbyrd rand = 0 max = 5]

Når du har tilføjet den kode, vil du se noget lignende på din side:

vigtigste-testimonials

Nu får vi se, hvordan man opretter og udforsker dette (ved at tilføje flere funktioner og ændre udseendet).

Det grundlæggende

Som vi tidligere har sagt, skal du tilføje overskridelsesmetadata, oprette plugin-filen og kalde dine scripts. Lang historie kort, du opretter en ny mappe under dit wp-indhold / plugins med dit plugins navn, og opret derefter en fil med det samme navn som den mappe, der skal være din vigtigste plugin-fil.

Når du har gjort den kopiér og indsæt som følger:

<?php
/ *
Plugin Navn: Udtalelser
Beskrivelse: Vis kundevurderinger.
Version: 1.0
Forfatter: Web Revenue Blog
Licens: GPL2
* /

// udskrivning af manuskripter og stilarter
funktion 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 er, hvad vi gør:

  • Fortæller WP, hvad der er vores plugins navn, forfatter, hvad det gør
  • Oprettelse af en funktion, hvor vi indsætter regelmæssige scripts (som jQuery) og brugerdefinerede scripts (som flexslider) og Stylesheets
  • At fortælle WP for at indlæse scripts-funktionen i dets standard scripts-opkald, så de bliver faktisk indlæst på siderne

Det hele er temmelig cool, men glem ikke at faktisk oprette filerne under / js og / css. Du kan bare downloade dem i vores demoindhold, så du ikke behøver at grave meget for at finde flexslider-filerne.

Nu har vi alle basale ting på plads, hvor vi kan starte den sjove del.

Den tilpassede posttype

Som standard har WordPress 2 almindelige indlægstyper, sider og indlæg. Men det har også en masse interne posttyper (som vedhæftede filer), så definitionen af ​​”posttype” er: Hver type data, du har brug for at gemme.

Da vores plugin opretter en ny funktionalitet, har WP ikke et indbygget sted at gemme det, så vi er nødt til at oprette det. Vær ikke bange for lille græshoppe, det er ganske enkelt, du kan bruge denne kode:

// den sorte magi for at oprette posttypen
funktion create_post_type () {
register_post_type (
‘vidnesbyrd’, // ny indlægstype
array (
‘labels’ => array (
‘navn’ => __ (‘Udtalelser’),
‘singular_name’ => __ (‘Testimonial’)
),
‘offentlig’ => true, / * Posttypen er beregnet til offentlig brug. Dette inkluderer i frontenden og i wp-admin. * /
‘understøtter’ => array ( ‘title’, ‘editor’, ‘thumbnail’, ‘custom_fields’),
‘hierarkisk’ => falsk
)
);
}

Her bruger vi bare funktionen register_post_type () til at fortælle til WP “Hey Buddy, vi er nødt til at gemme denne type data, skal du være klar til at modtage dem”.

Vi fortæller ham også, at denne type data kaldes “vidnesbyrd”, de skal være tilgængelige for offentlig adgang (så det rent faktisk opretter et nyt menupunkt i dit betjeningspanel til det), de felter, vi har brug for, og hvis det er hierarkisk eller ikke (som sider, som vi har forældre- og børnesider).

Derefter skal vi kalde det, hver gang vi indlæser WordPress. Denne krog vil gøre det:

add_action (‘init’, ‘create_post_type’);

De tilpassede felter

Nu har vores brugerdefinerede posttype titlen (personens navn), indholdet (personens vidnesbyrd), et billede (vist billede), men det mangler et link, da hvis personen er flink nok til at tale om dig, skal du i det mindste linke til deres side, ikke?

Vi kunne gøre dette med sædvanlige brugerdefinerede felter, men det er meget bedre at have et “lukket” felt, hvor brugeren ikke behøver at skrive feltens navn, og også hvor du kan tilføje nogle valideringsregler.

Først og fremmest har vi brug for at oprette en ny metabox, som er de dejlige paneler, du har i dit indlægsredigeringsområde, hvert lille panel er en metabox. Denne funktion opretter og kalder den:

// tilføje URL-metafeltfeltet
funktion add_custom_metabox () {
add_meta_box (‘custom-metabox’, __ (‘Link’), ‘url_custom_metabox’, ‘testimonials’, ‘side’, ‘low’);
}
add_action (‘admin_init’, ‘add_custom_metabox’);

Funktionen add_meta_box () kræver disse parametre:

  1. ID – Den unikke id for det. Du kan bruge noget unikt her som “enhjørning-spise-regnbue” eller “vidnesbyrd-link”. Alt, der kan bruges internt
  2. Titel – Hvad vises der for brugeren? Her er det vigtigt at bruge funktionen __ (), det er den funktion, der tillader brugere fra fremmedsprog at oversætte dit plugin med .po-filer (uden at redigere plugin-filer)
  3. Tilbagekald – Funktionen, hvor du har det faktiske indhold af metabox
  4. Posttype – I vores tilfælde ønsker vi, at det kun skal være synligt for vidnesbyrd
  5. Kontekst – hvor på siden skal du vise den
  6. Prioritet – Hvis det skulle være før andre elementer med samme position eller efter dem

Nu er vi nødt til at oprette funktionen url_custom_metabox (), da vi har kaldt den.

// HTML til admin-området
funktion url_custom_metabox () {
global $ post;
$ urllink = get_post_meta ($ post->ID, ‘urllink’, sandt);

// validering!
if (! preg_match ( "/ HTTP (r): ///", $ urllink) && $ urllink! = "") {
$ fejl = "Denne URL er ikke gyldig";
$ urllink = "http: //";
}

// output invid url-besked, og tilføj http: // til inputfeltet
if (isset ($ fejl)) {ekko $ fejl; }
?>

URL:

<?php
}

Ok, oversæt dette nu til almindeligt engelsk:

  • Den globale variabel $ post kaldes, så vi kan vide, hvad der er POSTID for det aktuelle emne
  • Vi indlæser den aktuelle værdi for webadressen
  • Vi validerer Hvis den værdi, som brugeren har indsat, er gyldig. Hvis der er mindst én “http” eller “https” forekomst, er værdien OK, ellers er den gyldig, og vi er nødt til at bruge standardværdien
  • Så viser vi fejlene, hvis der er nogen
  • Nu starter vi den egentlige HTML og tilføjer standardværdien i inputfeltet, som vi har fået i PHP

Efter dette punkt skal vi faktisk gemme, hvad der sendes af brugeren. Vi bruger krogen “save_post”, så hver gang WordPress gemmer et indlæg, kalder det denne funktion:

// gemmer brugerdefinerede feltdata
funktion 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 tjekker vi bare, om der er nogen postdata kaldet “sitelink”, som er vores feltnavn. Hvis der er et undersidelink, så lad os gemme det.

Når alt er på plads, er det her, hvordan din nye udtalelsesside ser ud:

ny-vidnesbyrd

Indlæser vores brugerdefinerede data

Nu skal vi faktisk indlæse vores varer, og vi bruger funktionen get_posts (), mest fordi vi kun har enkle data, så vi ikke har brug for en ordentlig WP-loop (det vil tilføje en masse DB-opkald, og vi don har ikke brug for det).

Så lad os først oprette en funktion til at få vores websteds link, hvis der er nogen.

// returner URL for et indlæg
funktion get_url ($ post) {
$ urllink = get_post_meta ($ post->ID, ‘urllink’, sandt);

returner $ urllink;
}

Nu kan vi starte kortkodefunktionen. En enkel måde at standardisere og validere kortkodedataene er at oprette attributterne til loopen som en matrix, så vi kan tilføje nye elementer, som vi har brug for dem, som dette:

// registrering af kortkoden for at vise vidnesbyrd
funktion load_testimonials ($ a) {

$ args = matrix (
"post_type" => "Begejstring"
);

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

// HTML OUTPUT
}
add_shortcode ("Begejstring","load_testimonials");

Som du kan se, har vi kortkodeattributterne indlæst og sendt til $ args-matrixen, når de validerer, i det format, som WordPress har brug for det, så vi kan indlæse poster ved hjælp af dem.

Nu skal vi tilføje noget HTML-kode der, efter flexsliders standardstruktur. Sådan ser det ud:

ekko ”;
ekko ‘

    ‘;

    foreach ($ poster som $ post) {
    // få tommelfingerbillede
    $ url_Themes = wp_get_attachment_Themes_url (get_post_ymsnail_id ($ post)->ID));
    $ link = get_url ($ post);
    ekko ‘

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

    ‘. $ Indlæg->POST_TITLE.’

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

    ‘. $ Indlæg->POST_CONTENT.’
    ‘; }
    if (! tom ($ link)) {echo ‘Besøg side

    ‘; }
    ekko ‘

  • ‘;
    }

    ekko ‘

‘;
ekko ”;

Vent, men hvorfor skulle vi oprette HTML-koden inde i PHP-funktionen? Det skyldes, at vi kun betinget kan indlæse indhold, hvis brugeren har tilføjet indhold, så du ikke har tomme HTML-tags, bare venter på at redde dit layout.

Hvad med sidebjælken?

De fleste mennesker vil bare vise vidnesbyrd i sidefeltet, og dette plugin fungerer ikke rigtig godt, da tekst widgets ikke behandler kortkoder. Der er en enkel løsning til dette, bare tilføj dette i din kode:

add_filter (‘widget_text’, ‘do_shortcode’);

Hvad er det næste?

Så nød du denne tutorial? Hvad ville du tilføje som en mulighed for din testimonial shortcode? Har du ideer til fremtidige indlæg? Fortæl os det ved hjælp af 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