Som webbutvecklare har man med stor sannolikhet byggt en del kampanjsajter genom åren. Många kampanjsajter kretsar kring någon form av tävling eller användargenererat innehåll på ett eller annat sätt. Till min glädje har jag på den senaste tiden upptäck att WordPress fungerar som en perfekt grund till dessa sajter. I detta inlägg tänkte jag visa hur man kan gå tillväga, därav kommer det bli mycket teknisk “mumbo-jumbo” för den oinvigde.
Till både inga löjliga bilresor och place brand har jag använt denna metod som beskrivs nedan. Visst kan man istället använda sig av t ex, TDO Mini Forms men jag gillar att ha full kontroll över processen.
Jag är övertygad över att fler än jag har valt WordPress som verktyg till kampanjsajter, t ex. Nokia Tube music och Telefonjack? Nej tack. Hjälp mig gärna med att fylla på listan!
Principen är ganska enkel. Vad vi vill åstadkomma är att gemene besökare ska kunna posta ett inlägg (eller tävlingsbidrag) utan att behöva logga in. Detta inlägg ska sedan sparas ned som ett helt vanligt inlägg plus information om användaren. Inlägget sparas som ett utkast per automatik så att administratörerna kan granska det innan publicering. På detta vill vi gärna ha ett skydd emot elak spam och någon form av validering av datan. Så här kan flödet beskrivas.
1. Användaren skickar in sitt bidrag.
Utifrån formuläret vi har skapat skickar användaren in sitt bidrag för granskning.
2. Bidraget körs via Akismet.
All data vi får in ifrån användaren körs via Akismet för att avgöra om det är spam eller ej. Om det visar sig vara spam avfärdar vi helt enkelt användaren. Om inte går vi vidare till nästa steg.
3. Spara ned bidrag som ett utkast.
Allt verkar stå rätt till och vi sparar slutligen ner bidraget i vår databas på servern.
4. Meddela användaren att bidraget har tagits emot.
Meddela användaren att bidraget har tagits emot på ett eller annat sätt. Detta kan man göra på flera sätt, ett simpel meddelande som presenteras för användaren eller per e-post.
Nu när vi har en bra överbild över vad vi vill åstadkomma är det dags att skrida till verket.
Vad vi först behöver är ett formulär som användaren kan använda för att posta sitt bidrag. Vi behöver en titel och motivering plus lite information om användaren, som t ex. namn, e-post och telefonnummer. Formuläret nedan innehåller allt vi behöver. Tyvärr så strippar WordPress bort indenteringen.
<form action="" method="post"> <fieldset> <p> <legend>Ditt bidrag</legend> </p> <p> <label for="campaign-post_title">Titel</label> <input type="text" name="campaign[post_title]" id="campaign-post_title" /> </p> <p> <label for="campaign-post_content">Motivering</label> <textarea name="campaign[post_content]" id="campaign-post_content" rows="8" cols="40"></textarea> </p> </fieldset> <fieldset> <p> <legend>Om dig</legend> </p> <p> <label for="campaign-post_author_name">Namn</label> <input type="text" name="campaign[post_author_name]" id="campaign-post_author_name" /> </p> <p> <label for="campaign-post_author_email">Email</label> <input type="text" name="campaign[post_author_email]" id="campaign-post_author_email" /> </p> <p> <label for="campaign-post_author_phone">Telefon</label> <input type="text" name="campaign[post_author_phone]" id="campaign-post_author_phone" /> </p> </fieldset> <p> <input type="submit" name="campaign[submit]" value="Posta" id="campaign-submit" /> </p> </form>
Postdatan som skickas när användaren klickar på “Posta” måste behandlas av en funktion eller dylikt. I detta fall använder vi oss av en funktion. Personligen föredrar jag att placera denna funktion i functions.php tillhörande temat. Vad funktionen gör är att kolla av om någon har fyllt i formuläret och skickat in uppgifterna. Denna kontroll utförs vid varje pageload med hjälp av WordPress egna funktion add_action som gör det möjligt att binda en funktion till en viss händelse (en s.k. hook). I detta fall binder vi funktionen till “init” som står för initialisering (pageload). Det första funktionen gör är att stämma av om postdatan vi söker verkligen har skickats eller inte. Om inte avbryter vi operationen omgående.
<?php
function mytheme_add_post() {
global $micro_akismet;
if (!isset($_POST['campaign']['submit'])) {
return;
}
}
add_action('init', 'mytheme_add_post');
?>
Om man vill kontrollera vissa uppgifter som t ex. att den ifyllda e-postadressen verkligen är en riktig e-postadress ska det ske nu. Förutsagt att man inte gör det innan formuläret skickas med hjälp av JavaScript.
Nästa steg är att kontrollera att uppgifterna vi har fått inte är spam. Detta görs enklast med hjälp av Akismet. Som du säkert redan vet finns det från start ett inbyggt stöd för Akismet när det gäller kommentarerna i WordPress. Dock har jag kommit fram till det är enklare att använda sig Gaby Vanhegans MicroAkismet klass. Jag har själv modifierat klassen lite för att göra det enklare att använda sig av den i WordPress. Denna plugin finns tillgänglig för nedladdning på GitHub. Observera att denna plugin kräver att du har Akismet pluginen aktiverad och konfigurerad. Efter att både Akismet och MicroAkismet pluggarna är aktiverade och klara kan vi äntligen göra en bedömning om uppgifterna vi fått är spam eller ej.
$post_data = $_POST['campaign'];
$vars = array(
'comment_content' => $post_data['post_content'],
'comment_author' => $post_data['post_author_name'],
'comment_author_email' => $post_data['post_author_email']
);
if ($micro_akismet->is_spam($vars)) {
// We caught a spammer.
} else {
// Everything's alright.
}
Om allt är frid och fröjd (ingen spam) kan vi spara ned uppgifterna som ett inlägg med hjälp av funktionen wp_insert_post. Denna funktion tar en array innehållandes en massa argument som första och enda parameter. Vi vill spara inlägget men inte publicera det på direkten för att ge administratörerna en chans att bedöma om inlägget ska publiceras eller inte. Värt att notera är att vi inte behöver escape:a den inkommande datan eftersom wp_insert_post gör det i syfte att skydda mot SQL-injektioner och annat otyg.
$new_post = array(
'post_title' => $post_data['post_title'],
'post_content' => $post_data['post_content'],
'post_status' => 'pending',
'post_author' => 2,
'post_category' => array(10)
);
if ($post_id = (int)wp_insert_post($new_post)) {
// Post inserted successfully.
} else {
// Something went wrong.
}
Det kan vara bra att sätta upp ett användarkonto som får agera skribent åt alla bidrag. Byt ut post_author värde mot användarens id-nummer. Detsamma gäller även kategorier. Man vill med stor sannolikhet tilldela inlägget kategorin Tävling eller liknande. Notera att post_category argumentet alltid måste vara en array, även fast det bara handlar om en kategori. Byt ut post_category’s värde mot id-numret på din eller dina kategorier. För en fullständig dokumentation över alla tillgängliga argument rekommenderar jag dig att läsa igenom dokumentation för funktionen hos WordPress.
Nu när inlägget är har sparats vill vi också spara ner uppgifterna om skribenten. Detta gör vi enklast med hjälp av WordPress egna custom fields. På så sätt försäkrar vi oss om att uppgifterna endast tillhör vårt nyligen sparade inlägg.
<?php
$post_author = array(
'post_author_name' => $post_data['post_author_name'],
'post_author_email' => $post_data['post_author_email'],
'post_author_phone' => $post_data['post_author_phone']
);
foreach ($post_author as $key => $val) {
add_post_meta($post_id, $key, $val);
}
?>
Om du sedan i ditt tema vill visa upp t ex. skribentens namn kan du använda dig av funktionen get_post_meta. Notera denna funktion måste användas innanför post-loopen.
<?php echo get_post_meta($post->ID, 'post_author_name', TRUE); ?>
Då var det (nästan) klart! Personligen föredrar jag att “ajax:ifera” mina formulär för att skapa en trevligare upplevelse. Detta görs enklast med hjälp av jQuery och jForm. Om du bestämmer dig för att använda Ajax är det bra att skicka tillbaka en respons lätt kan tolkas med JavaScript. JSON är rätt det rätta valet för detta jobb. Så här kan en respons se ut i vår funktion.
<?php
$response = array(
'status' => 1,
'message' => 'Your post has been submitted!'
);
die(print(json_encode($response)));
?>
Jag har satt ihop ett demo med all kod ovan, baserat på WordPress default tema. Glöm inte heller att installera MicroAkismet pluginen innan.
Det här är min första renodlade guide. Därav uppskattas all form av feedback och konstruktiv kritik. Gör gärna din röst hörd bland kommentarerna om du har synpunkter eller frågor.
Thumbnailen tillhörande detta inlägg är lånad ifrån jmaclynn.