Accentsconagua

Slik utvikler du et enkelt innholdsskapsverktøy med WordPress

Kode
Share

Selv om noen ser deling som en av kjerneprinsippene på Internett, er det tider hvor vi bare vil dele litt informasjon med en bestemt gruppe mennesker.

Denne informasjonen, la oss kalle det "premium content" for all hensikt, vil bare bli delt med brukere som gir oss noetilbake. Denne "noe" kan være en e-postadresse, en PayPal-donasjon, eller bare en del på Facebook.

I denne veiledningen vil jeg forklare hvordan du lager et innholdsskuffeprofil som med en enkel kodenavn lar oss velge hvilket innhold vi ønsker å gjøre premie.

Vi vil dekke to eksempler:

  1. Når eksempel er det en enkel kortkode som lar oss vise innhold til brukere som er registrert på nettstedet.
  2. Den andre kortkoden vil kreve at brukeren må dele innholdets URL på Facebook for å kunne lese resten av innholdet.

I WordPress Social Invitasjoner bruker vi et svært liknende innholdsskap som bare viser innhold til brukere som inviterte vennene sine.

Merk: I stedet for å legge til kode i et temaets funksjonsfil og / eller stylesheeet, anbefaler jeg å lage et plugin for å legge det til nettstedet ditt. Denne metoden holder alt på ett sted og lar deg bruke kortnummeret på et hvilket som helst annet nettsted.

Hva du trenger for denne opplæringen

For å fullføre denne opplæringen må du:

  • et nettsted med WordPress installert
  • en kodeditor
  • eventuelt et FTP-program for å laste opp pluginet ditt

Sette opp pluggen

Start med å åpne en ny fil i tekstredigeringsprogrammet, og gi det et navn. I eksemplene vi skal se i denne artikkelen, ser du at jeg har kalt min wptuts-innhold-locker.php men du kan ringe deg hva du vil.

I filen legger du inn følgende kode:

Dette setter opp pluginet ditt og forteller WordPress sitt navn og versjon.
Legge til kortnummerfunksjonen
Under åpnings kommentaren må vi legge til funksjonen som vil opprette kortnummeret og koble den til add_shortcode Handlingskrok:
// registrer kortnummeret som aksepterer en parameter add_shortcode ('premium-content', 'wptuts_content_locker'); // shortcode-funksjonen wptuts_content_locker ($ atts, $ content) ekstrakt (shortcode_atts (array ('method' => ", $ atts)); global $ post; // hvis metoden ikke er 'facebook' sjekk for logget bruker hvis ('facebook'! = $ metode) if (is_user_logged_in ()) // Vi returnerer innholdsretoen do_shortcode ($ content); else // Vi returnerer en påloggingslenke som omdirigerer til dette post etter at brukeren er logget tilbake '
Du må ID)). '"> Logg inn for å se dette innholdet
';  // Vi bruker facebook-metoden ellers // Sjekk om vi har en informasjonskapsel som allerede er angitt for dette innlegget hvis (isset ($ _COOKIE ['wptuts-lock'] [$ post-> ID])) Vi returnerer innholdsretoen do_shortcode ($ content); // Vi ber brukeren å like innlegg for å se innhold ellers return "
Vennligst del dette innlegget for å se innholdet 
'; 
Vi kan nå bruke vår kortkode som dette:
[premium-innhold] Premium-innhold går her [/ premium-innhold]
Men vent! La oss se nærmere på koden ovenfor. 
Som du kan se, aksepterer vår kortkode et argument som vil dele vår kode i to seksjoner. Dette argumentet som jeg kalte "metode" skiller mellom bruk av "Like on Facebook" -tilnærming eller en "enkel innlogget bruker" sjekk.
Begge metodene er like i logikken som du kan se i følgende grafikk:
Hvis brukeren ikke er logget, viser vi en påloggingslink ved hjelp av wp_login_url funksjonen og vi sender også post / sideadressen. På den måten, etter at brukeren logger på, blir han omdirigert tilbake til innlegget.
Facebook-metoden er litt mer kompleks og innebærer bruk av informasjonskapsler. Vi bruker dem til å lagre post-ID, for å vite hvilke innlegg brukeren delte og hvilke som ikke gjør det.
JavaScript-filen
Vi trenger også noe javascript som skal håndtere informasjonskapselskapet og Facebook tilbakeringingen. La oss lage en fil som heter script.js og lim inn koden nedenfor:
 funksjon createCookie (navn, verdi, dager) var utløper; hvis (dager) var date = new Date (); date.setTime (date.getTime () + (dager * 24 * 60 * 60 * 1000)); utløper = "; utløper =" + date.toGMTString ();  else expires = "";  document.cookie = escape (navn) + "=" + escape (verdi) + utløper + "; bane = /";  (funksjon ($) $ (funksjon () FB.Event.subscribe ('edge.create', funksjon (href) createCookie ('wptuts-lock [' + wptuts_content_locker.ID + ']' true 9999 ); location.reload (););); (jQuery));
I dette skriptet skal vi legge til en tilbakeringingsfunksjon til FB edge.create event. Spesifikt vil denne funksjonen lage informasjonskapselen vi bruker i vårt hovedskript for å sjekke om brukeren delte innlegget. Når informasjonskapselen er opprettet, vil skriptet laste på siden for å vise premiuminnholdet.
Legge til skriptene i vårt plugin
Nå må vi legge til skriptfilen vår i pluginet, men la oss først lage en veldig grunnleggende CSS-fil for å stilte pluginet vårt. 
Opprett en fil som heter style.css og legg til følgende kode:
/ * Stylesheet for Tuts + Content Locker Shortcode * / .wptuts-content-locker bredde: 80%; skjerm: blokk; grense: 3px dashed #ccc; polstring: 20px; tekst-align: center; margin: 20px auto .wptuts-content-locker div.fb-like.fb_iframe_widget overflow: hidden; 
La oss nå registrere våre skript i wp_enqueue_scripts krok:
// Registrer stilark og javascript med krok 'wp_enqueue_scripts', som kan brukes til frontend CSS og JavaScript add_action ('wp_enqueue_scripts', 'wptuts_content_locker_scripts'); // funksjon som enqueue script bare hvis shortcode er brukt funksjon wptuts_content_locker_scripts () global $ post; wp_register_style ('wptuts_content_locker_style', plugins_url ('style.css', __FILE__)); wp_register_script ('wptuts_content_locker_js', plugins_url ('script.js', __FILE__), array ('jquery'), 'true') hvis (has_shortcode ($ post-> post_content, premiuminnhold)) wp_enqueue_style wptuts_content_locker_style '); wp_enqueue_script (' wptuts_content_locker_js-fb ',' http://connect.facebook.net/en_US/all.js#xfbml=1 ', array (' jquery '), ", FALSE); wp_enqueue_script ('wptuts_content_locker_js'); wp_localize_script ('wptuts_content_locker_js', 'wptuts_content_locker', array ('ID' => $ post-> ID)); 
Vær oppmerksom på at vi bruker has_shortcode funksjon. På den måten skal vi bare inkludere JavaScript og CSS-filene når det trengs, og ikke på hver side av nettstedet vårt. 
Vi benytter oss også av localize_script fungere for å passere post-ID riktig til JavaScript-filen.
Konklusjon og kode
I ca 120 kodelinjer opprettet vi et enkelt, men svært nyttig innholdsskuffeprosjekt. Det var lett, rett?
Skjønnheten i denne plugin er at du kan justere den til arbeid med hvilken som helst metode du kan tenke på. For eksempel, i stedet for en Facebook-lignende, kan du be brukerne til å Tweet om nettstedet ditt, legge til en PayPal-donasjonskobling, eller noe annet du kan bilde.
Du kan ta tak i koden fra GitHub eller prøve en demo.





	
	
			
	   
	







Kode
×