Bruke WordPress Meta Boxes å bygge en grunnleggende SEO Plugin

En av kjernefunksjonene som WordPress tilbyr for å utvide funksjonaliteten, er Meta Box API. Disse meta-boksene lar deg enkelt legge til flere data i innholdet ditt. For eksempel, Postetiketter Meta Box lar deg sette koder for innlegget ditt.

I denne artikkelen vil vi bygge et grunnleggende SEO-plugin som legger til en metabeskrivelse, og en Open Graph-tittel og beskrivelsestag til hode element av WordPress-sider. Ved å gjøre dette, lærer vi også hvordan du lager en tilpasset metakasse, hvordan du kan sanitere data fra brukeren, hvordan du lagrer dataene til et innlegg eller en side, og hvordan og henter de lagrede dataene.

Fordi jeg ikke vil forklare hver eneste bit av hva kodene bruker i denne opplæringen, antas en grunnleggende kunnskap om metakasser og hva PHP-funksjonene gjør. Hvis du ikke er kjent med det grunnleggende, så en god start i hvordan du oppretter egendefinerte WordPress Write / Meta-bokser.

Opprette Meta Box

Først må vi bestemme hvor stor meta-boksen skal vises. 

I vårt plugin vil meta-boksen bli lagt til i post og side skjerm. For å oppnå dette, opprettes en funksjon som inneholder en variabel som lagrer en rekke hvor å vise meta-boksen og a for hver loop som løper gjennom matrisen og legg til meta-boksen til den oppgitte skjermen ved hjelp av add_meta_box funksjon. 

Og til slutt er funksjonen koblet til add_meta_boxes handling.

funksjonen tes_mb_create () / ** * @array $ skjermbilder Skriv skjerm som skal vise meta-boksen * @values ​​post, side, dashboard, lenke, vedlegg, custom_post_type * / $ screens = array ('post', 'page' ); foreach ($ skjerm som $ skjerm) add_meta_box ('tes-meta', 'Søkemotoroppføring', 'tes_mb_function', $ skjerm, 'normal', 'høy');  add_action ('add_meta_boxes', 'tes_mb_create');

Alternativt kan du legge til en dobbel add_meta_box funksjon for å inkludere meta-boksen på både post- og sideskjerm som slik:

funksjon tes_mb_create () add_meta_box ('tes-meta', 'Søkemotoroppføring', 'tes_mb_function', 'post', 'normal', 'high'); add_meta_box ('tes-meta', 'Søkemotoroppføring', 'tes_mb_function', 'side', 'normal', 'høy');  add_action ('add_meta_boxes', 'tes_mb_create');

Koding av Meta Box-feltene

Fra koden ovenfor kalles tilbakeringingsfunksjonen for å skrive ut HTML-koden for redigering av skjermseksjonen som tes_mb_function som er det tredje argumentet passert til add_meta_box funksjon.

I vårt plugin koder vi bare to HTML-skjemafelt for å håndtere tittel- og beskrivelsesdataene.

funksjon tes_mb_function ($ post) / / henter metadataverdiene hvis de eksisterer $ tes_meta_title = get_post_meta ($ post-> ID, '_tes_meta_title', true); $ tes_meta_description = get_post_meta ($ post-> ID, '_tes_meta_description', true); // Legg til et nonce-felt slik at vi kan sjekke det senere når valideringen av wp_nonce_field ('tes_inner_custom_box', 'tes_inner_custom_box_nonce'); ekko '
 
 
 
Tittel Tag:
  
 
 
 
Meta Beskrivelse:
 '. esc_attr ($ tes_meta_description). '
 
 
 
';  

Forklaringen av tes_mb_function Koden ovenfor er som følger:

• Hent og lagre metadataverdiene i en variabel bare hvis den eksisterer. Dette gjøres for å fylle feltene med sine verdier når det er presentert i databasen.
• En nonce-feed er lagt til, slik at vi kan sjekke det senere under verifisering før dataene som er lagt inn i skjemafeltene, lagres i databasen.
• HTML-skjemaet som består av et tekstfeltinngangselement og et tekstområde for å fange opp tittel- og beskrivelsestagdataene, blir echoed / skrevet ut.
  

På dette punktet bør du se meta-boksen på innleggs- og sideskjermen.

Lagring av Meta Box-data

En metakasse er ikke fullført før den kan lagre dataene i databasen. Navnet på funksjonen for å håndtere lagring av data vil være tes_mb_save_data. Koden er som følger.

funksjon tes_mb_save_data ($ post_id) / * * Vi må bekrefte dette kom fra skjermen vår og med riktig autorisasjon, * fordi save_post kan utløses andre ganger. * / / Sjekk om vår nonce er satt. hvis (! isset ($ _POST ['tes_inner_custom_box_nonce'])) returnere $ post_id; $ nonce = $ _POST ['tes_inner_custom_box_nonce']; // Bekreft at nonce er gyldig. hvis (! wp_verify_nonce ($ nonce, 'tes_inner_custom_box')) returnere $ post_id; // Hvis dette er en autosave, har skjemaet ikke blitt sendt, så vi vil ikke gjøre noe. hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnere $ post_id; // Kontroller brukerens tillatelser. hvis ('side' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) returnere $ post_id;  ellers hvis (! current_user_can ('edit_post', $ post_id)) returnere $ post_id;  / * OK, det er trygt for oss å lagre dataene nå. * / // Hvis gamle oppføringer eksisterer, hent dem $ old_title = get_post_meta ($ post_id, '_tes_meta_title', true); $ old_description = get_post_meta ($ post_id, '_tes_meta_description', true); // Sanitiser brukerinngang. $ title = sanitize_text_field ($ _POST ['tes_meta_title']); $ description = sanitize_text_field ($ _POST ['tes_meta_description']); // Oppdater meta-feltet i databasen. update_post_meta ($ post_id, '_tes_meta_title', $ title, $ old_title); update_post_meta ($ post_id, '_tes_meta_description', $ description, $ old_description);  add_action ('save_post', 'tes_mb_save_data');

La oss undersøke ovennevnte kode:

• Først bekrefter vi at dette kom fra vår skjerm og med riktig autorisasjon, fordi lagre post kan utløses andre ganger og også verifisere at nonceen tidligere satt inn tes_mb_function er gyldig.
• Så, hvis en oppføring allerede finnes i databasen, henter vi den og lagrer den inn $ OLD_TITLE og $ old_description variabel. Vi gjør dette fordi update_post_meta funksjon som lagrer dataene til databasen, krever eventuelt en gammel verdi som skal kontrolleres før oppdatering av meta-boksdatabasen med de nye verdiene.
• Etter det blir de innsendte dataene sanitized ved hjelp av WordPress ' sanitize_text_field funksjon som konverterer HTML til sin enhet, striper alle tagger, fjern linjeskift, faner og ekstra hvitt mellomrom, stripe oktetter.
• Metadataene oppdateres til databasen via update_post_meta.
• Endelig, den tes_mb_save_data er hekta til lagre post handling for å lagre metaboksdataene når innlegget eller siden er oppdatert.

Bruk av lagrede data

Ikke glem, de lagrede dataene skal brukes til å legge til en åpen graf tittel og beskrivelse samt meta beskrivelse tag i hode element på hver side.

For å gjøre dette, vil vi opprette en funksjon som heter tes_mb_display som vil inneholde de ønskede kodene og etterpå, koble den inn i  wp_head handling.

funksjon tes_mb_display () global $ post; // hente metadataverdiene hvis de eksisterer $ tes_meta_title = get_post_meta ($ post-> ID, '_tes_meta_title', true); $ tes_meta_description = get_post_meta ($ post-> ID, '_tes_meta_description', true); ekko '      ';  add_action ('wp_head', 'tes_mb_display'); 

• For å kunne oppdage post-ID-en, tar vi en referanse til innlegget ved hjelp av $ post objekt global.
• Metadataene hentes deretter fra databasen og lagres til $ tes_meta_title og $ tes_meta_description variabler, henholdsvis. 
• Deretter definerte vi metataggen som skal settes inn i malen hode element.
• Til slutt knytter vi funksjonen til wp_head.

Hvis du har lagt til og lagret en tittel og en beskrivelse mot et innlegg eller en side, bør du se på sidenkilden om at det er åpen grafikkittel og beskrivelsestegn ved siden av meta-beskrivelsen som brukes av søkemotorer..

Sammendrag

I denne artikkelen opprettet vi et grunnleggende SEO-plugin som legger til en metabeskrivelse og Open Graph-koder som brukes av søkemotorer sosiale nettverk til overskriftsdelen av WordPress.

Vi lærte å lage metakasser, det danner felt, sanitiserer dataene før de lagres til databasen og henter de lagrede dataene for bruk.
En ekstra oppgave å lære mer om denne prosessen: Utvid dette pluginet og legg til et meta søkeordfelt i meta-boks-skjemaet og inkludere det blant kodene som er satt inn i WordPress-header.