Opprette Nifty Petitions Inside Your Posts

WordPress er en flott multi-purpose plattform. Du kan lage mange nettsteder med mange forskjellige formål: Et bedriftsnettsted, en fotopresentasjon, en nyhetsportal, en restaurantside med interaktive menyer ... Åh, og blogger, selvfølgelig. Du kan blogge med WordPress. Glemte det.

Merkelig, ideelle organisasjoner har en tendens til å overse denne fleksibiliteten og dra nytte av det. I denne opplæringen skal vi vise hvordan du lager et enkelt petisjonsskript for å demonstrere hvordan en organisasjon kan dra nytte av WordPress.

Hva bygger vi, akkurat?

Jeg er en stor fan av kortkoder (som du kan se fra mine tidligere innlegg), så vi skal lage en rekke kortkoder og noen nyttige funksjoner for kortkodene som skal brukes. Vi skal få alle disse sammen i en fil som heter petition.php og bruk den som et WordPress-plugin.

Hjelperfunksjoner

Siden vi skal bruke dem i våre kortkoder, syntes jeg det var bedre å lage og forklare dem først.

En grunnleggende e-post validering funksjon

Hvis du bruker PHP5 på serveren din, skal vi bruke de innebygde e-postvalidatorene for vår funksjon:

 // e-postadresse validering funksjon funksjon validate_email ($ email) hvis ($ email == ") return false; else return filter_var ($ email, FILTER_VALIDATE_EMAIL);

Og hvis du bruker noe gammelt som PHP4, kan du bruke en annen funksjon som bruker vanlige uttrykk:

 // e-postadresse validering funksjon funksjon validate_email ($ email) hvis ($ email == ") return false; else $ eregi = preg_replace ('/([a-z0-9_.-]+)' . '@'. '([a-z0-9 .-] +) 2 255'. '' '' ([az] +) 2,10 / i ', ", $ e-post);  returner tomt ($ eregi)? sant: false;

Vennligst merk: Du kan ikke bruke begge!

Funksjonen til å sende inn meldingene

Vi kunne opprette og bruke en annen databasetabell for å inneholde petisjonenes innleveringer, men jeg tror ikke at det er en god praksis. Og hei, hva er galt med egendefinerte felt?

 // Send signeren med en "petition_submission" metatast til innleggsfunksjonen ($ navn, $ email, $ date) global $ post; $ array = array ('name' => $ navn, 'email' => $ email, 'date' => $ date); $ petition_meta = serialize ($ array); add_post_meta ($ post-> ID, 'petition_submission', $ petition_meta); returnere sant;

Som du kan lese fra koden;

Vi tok $ name, $ epost og $ dato variabler i funksjonen (fra kortnummeret som vi kommer til om et minutt)
Sett de tre variablene sammen ved å lage en matrise og serialisere den
Og lagret dataene som et egendefinert felt som heter 'Petition_submission'

Enkelt, ikke sant? Nå kan vi komme til ganske hardt del.

Funksjonen for å hente innleveringene

Vi kan nå lagre innleveringene, men hvordan skal vi få dem og gjøre ting med dem? Dette er hvordan:

 // hente innleveringene fra postfunksjonen get_the_submissions ($ number = 5) $ petition_meta = get_post_custom_values ('petition_submission'); hvis ($ petition_meta) $ output = array_slice ($ petition_meta, $ nummer * -1); returner array_reverse ($ output);

Husk da jeg sa det kommer til å bli ganske hardt? Jeg løy:

Vi tildelte verdiene til postmetasene med "petition_submission'-tasten til en array-variabel
Da fikk vi $ nummer (5 som standard) av innleveringer fra enden av arrayet (legg merke til -1)
Og vi kom tilbake reversert liste over det skårede arrayet for å bestille det nyeste til eldste

Ekstra: CSS Selectors to Use

Vi bruker noen CSS selectors i koden, så legg dem i din style.css fil av temaet ditt:

 #petition_form  #petition_form label font-weight: bold; skriftstørrelse: større; linjehøyde: 150%;  #petition_form input display: block; margin: 5px 0; polstring: 3px;  #petition_name width: 200px;  #petition_email width: 200px;  #petition_submit padding: 5px;  .petition_success color: # 693;  .petition_error color: # A00;  .petition_list listestil: none; margin: 0; polstring: 0;  .petition_list li bakgrunnsbilde: ingen! viktig;  .petition_list span display: inline-block; bredde: 45%; polstring: 1%; margin: 1%; bakgrunnsfarge: #FAFAFA;  .submission_name  .submission_date font-style: kursiv; farge: # 888;

Du er velkommen til å redigere standardverdiene til egenskapene :)

kortkoder

Vi fullførte hjelpefunksjonene og CSS-koden. Nå, la oss komme til den morsomme delen - kortkodene!

Vi kunne gjøre med bare en stor kortkode for å legge ved skjemaet, oppgi oppføringene og vise antall innleveringer, men ... hvorfor drepe all moroa? Dessuten vil separate kortkoder for disse tre elementene frigjøre oss til å bruke dem hvor vi vil i innholdet vårt.

Sa jeg deg hvordan jeg kjærlighet kortkoder?

Kortnummeret for petisjonen

Denne funksjonen er lang, så jeg skal forklare koden inne i koden, med PHP kommentarer:

 funksjonen petition_form_sc ($ atts) // trekk ut kortkodeparametere ekstraktet (shortcode_atts (array (// tekstverdien av send-knappen 'submit' => 'Send', // teksten for feilmeldingen 'error' => 'Din e-postadresse er ikke gyldig. Vennligst skriv inn skjemaet med et gyldig navn og e-postadresse.', // teksten når innsendingen er vellykket 'suksess' => 'Ditt innlegg har blitt lagret. deg! '), $ atts)); // HTML-elementene i vår petitionsformular $ form = ' Navn:  Epostadresse:   
'; // hvis skjemaet er "POST" ed ... hvis ($ _SERVER ['REQUEST_METHOD'] == 'POST') // ... få navnet ... $ name = $ _POST ['petition_name']; // ... og e-postadressen ... $ email = $ _POST ['petition_email']; // ... og datoen for "akkurat nå", med datoformatet for dine WP-alternativer. $ date = date (get_option ('date_format')); // validere e-postadressen først! hvis (validate_email ($ email) == true) // e-postadressen er gyldig! Husk funksjonen nedenfor? innsending ($ navn, $ email, $ date); // vi sendte variablene med innlevering () -funksjonen, nå skriver vi ut suksessmeldingen uten form: retur ''. $ suksess. '
'; // (Hvis du vil at skjemaet skal skrives ut igjen etter innlevering, legger du bare til. $ skjema før semikolon.) ellers // e-postadressen er IKKE gyldig! vi burde skrive ut feilmeldingen med skjemaet: returnere'. $ feil. '
'. $ Skjema;  // og hvis skjemaet ikke er "POST" ed (som betyr at den besøkende bare besøkte siden), bare vis skjemaet! ellers return $ form;  add_shortcode ('petition_form', 'petition_form_sc');

Jeg prøvde å være så klar som jeg kan være, men hvis du tror at jeg har forlatt noe, kan du spørre meg ved å kommentere dette innlegget!

Kortnummeret for listen over innleveringer

"Siste oppføringer" delen er bevis at folk er med i din sak, så vi må liste minst et antall innleveringer.

Dette er heller ikke en kort funksjon, så jeg skal forklare koden med kommentarer igjen:

 funksjonen petition_list_sc ($ atts) // trekk ut kortkodeparametere ekstraktet (shortcode_atts (array (// vi kunne angi et standardnummer, men husk, det gjorde vi allerede i get_the_submissions () funksjonen :) 'number' => ") $ atts)); // få $ nummer siste innleveringer ... $ submissions = get_the_submissions ($ nummer); // ... og liste dem! $ output = ''; hvis ($ innleveringer) foreach ($ innsending som $ innsending) // unserialize data $ signer = unserialize ($ innsending); // unserialize dataene igjen, vet ikke hvorfor ... $ signer = unserialize ($ signer); // du vil kanskje endre denne delen, men standardformatet ser bra ut med CSS i denne opplæringen. $ output. = ''; $ output. = ''. $ signer ['navn']. ''; $ output. = ''. $ signer ['date']. ''; $ output. = '
';  $ output. = '
'; returnere $ output;  add_shortcode ('petition_list', 'petition_list_sc');

Igjen, vær så snill å spørre hva du vil spørre ved å kommentere dette innlegget.

Kortnummeret for petisjonstellingen

Dette er en veldig liten funksjon, bare for å få hvor mange oppføringer er sendt inn:

 funksjon petition_count_sc () $ petition_meta = get_post_custom_values ('petition_submission'); retur telle ($ petition_meta);  add_shortcode ('petition_count', 'petition_count_sc');

Som du kan se, kaster det bare de egendefinerte feltene i en matrise og teller det og returnerer nummeret.

Konklusjon

Jeg bør understreke at dette er et veldig enkelt eksempel for å vise at organisasjoner kan dra nytte av WordPress ved å bruke skript som disse. Hvis du kan tenke på en forbedring for dette skriptet (eller opplæringen), vennligst del dine tanker i kommentarene nedenfor. Takk for at du leste!

Kode