Share
I forrige uke presenterte vi hvordan man lager tilpassede metakasser i postredigeren og lagrer dataene du legger inn i dem. Men hva er noen praktiske anvendelser av denne teknikken? I dag er målet å gå over tre virkelige eksempler på bruk av tilpassede metakasser for å forbedre innleggssiden.
I introduksjonsartikkelen lærte du alt om hvordan du implementerer metakasser og lagrer / rydder dataene som går inn i dem. Så bra! Men det er på tide å gå utover den konseptuelle informasjonen og sette de tilpassede meta-boksene på plass.
Scenariet: Du driver et nettsted som først og fremst publiserer inspirerende innhold. En av de tingene du gjør konsekvent er satt sitater øverst på hvert innlegg. For å skille disse sitatene fra innholdet, vil du flytte dem til en tilpasset meta-boks.
I "How to" artikkelen lærte du hvordan du faktisk implementerer metakasser, men her er en rask gjennomgang.
Ta en funksjon inn i add_meta_boxes som inneholder et anrop til add_meta_box funksjon.
Opprett en funksjon med samme navn som $ tilbakeringing spesifisert i add_meta_box. Dette er stykket som faktisk viser meta-boksinnhold.
Accentsconagua
ID, '_cd_quote_content', true); $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce å verifisere intensjon senere wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Ta en funksjon inn i lagre post de første håndtakene verifiserer tillatelser og intensjoner og renser og lagrer dataene.
array ()); hvis (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ tillatt)); hvis (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author']))); hvis (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['_ cd_quote_date']))); ?>
Vi kan bruke dataene som er lagret i våre metakasser ved å redigere temaets malfiler. Men det er for enkelt. For å beholde våre sitatkodemodulære (en plugin-fil), bruker vi filterkroker, en del av Plugin API. Filter kroker er litt forskjellig fra handlinger. Når du henger inn i et filter, er det for det meste å endre hvordan et innhold vises på en side. I vårt tilfelle skal vi hekte inn innholdet, og hvis vi er på en enkelt innleggsside som har et tilbud, legger vi til det ovenfor.
En annen måte å tenke på handling mot filter kroker er det deg ekko ting ut i handlinger (for eksempel wp_head, se avsnitt 2), men med filtre du tar inn en eller flere variabler, endre dem, så komme tilbake dem.
For å vise tilbudet vårt, hekser vi på innholdet, som passerer en variabel som standard: innholdet i et gitt innlegg. Innenfor vår hekta funksjon, sørger vi for at vi er på ett enkelt innlegg, og hvis ikke, returnerer innholdet riktig måte (ingen endringer).
Neste opp får vi vår $ post variabel. Fordi vi er i løkken, ringer vi bare globalt $ innlegg. Da får vi vårt tilbud, hvis ingen verdi kommer tilbake, vet vi at ingen tilbud ble oppgitt, og vi returnerer innholdet igjen uten endring.
ID, '_cd_quote_content', true); // Kreditt hvis vi ikke har et tilbud; hvis (tomt ($ quote)) returnerer $ content; ?>
Nå som vi har sørget for at vi er på et enkelt innlegg, og vi faktisk har et tilbud, tar vi oss av å sette ting sammen. Først vil vi ringe forfatteren vår og hennes datoer via get_post_meta (), da kan vi begynne å bygge en streng i $ ut variabel. Først legger vi til en og vårt tilbud. Deretter sjekker vi for å se om forfatterfeltet var fylt ut. Hvis det var så begynner vi et avsnitt for forfatteren, så sjekk for å se om det var en dato og legg til det i avsnittet også. Til slutt legger vi til lukkingen vår stikkord.
ID, '_cd_quote_content', true); // Kreditt hvis vi ikke har et tilbud; hvis (tomt ($ quote)) returnerer $ content; // Samle våre sitater $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Sitat; hvis (! tom ($ forfatter)) $ ut. = ''; ?>-'. $ Forfatter; hvis (! tom ($ date)) $ out. = '('. $ date. ')'; $ ut. = '
'; $ ut. = '
Nå er det mest avgjørende trinnet: å returnere kombinasjonen av vår nyopprettede $ ut streng som inneholder sitatet og det opprinnelige innholdet som finnes i $ innhold.
ID, '_cd_quote_content', true); // Kreditt hvis vi ikke har et tilbud; hvis (tomt ($ quote)) returnerer $ content; // Samle våre sitater $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Sitat; hvis (! tom ($ forfatter)) $ ut. = ''; // Returner verdiene: sitat først, så returnerer innholdet $ ut. $ Innhold; ?>-'. $ Forfatter; hvis (! tom ($ date)) $ out. = '('. $ date. ')'; $ ut. = '
'; $ ut. = '
Det er det! Du kan se resultatet.
Scenariet: Du har et aktivt fellesskap av lesere som regelmessig deler artiklene dine på Facebook. Dette er kjempebra, og det sender mye trafikk på din måte. Men du begynner å merke seg at bildene som dukker opp med artiklene dine på Facebook, er mindre enn ideelle. Du er heller ikke fornøyd med hvordan innleggets titler kommer ut. Løsningen er å legge til Open Graph meta tags for å kontrollere hvordan artiklene dine vises. Snarere enn å la dette bli tatt vare på automatisk, bestemmer du deg for å implementere en tilpasset meta-boks for å ta vare på den.
Du har sikkert dette ned nå, men her er koden for å få meta-boksen din til å gå.
ID, '_cd_opengraph_title', true); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', true); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', true); // Legg til et nonce-felt wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Små, firkantede bilder fungerer best.
For å gjøre at "Upload Image" -knappen fungerer, må vi legge til litt javascript som kaprer den innebygde WordPress-opplasteren. Dette betyr at vi skal bruke enda en handlingskrog. Denne gangen er det admin_print_script - $ side.
Når du legger til skript og / eller stiler i administrasjonsområdet til WordPress, er det en gylden regel: Legg bare til skriptene / stilene der du trenger dem. Dette forhindrer at plugin / tema bryter noe annet ved et uhell. admin_print_scripts - $ side lar deg bare sette inn skript (via wp_enqueue_script-funksjon) bare på $ side spesifisert. I dette tilfellet må vi legge til vårt skript til post.php og post-new.php skjermer. Dette krever krok samme funksjon i begge deler.
Og javascript.
jQuery (dokument) .ready (funksjon () var ogfield = null; jQuery ('# cdog-thickbox') .click (funksjon () ogfield = jQuery ('input # og-image') .attr ); tb_show ("," media-upload.php? type = image & TB_iframe = true "); return false;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = funksjon (html) var ogimg; if ! = null) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-bilde') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Først sørger vi for at thickbox-opplasteren dukker opp når du klikker på knappen, og vi konfigurerer en variabel som forteller WordPress at det var vår knapp som ble klikket. Deretter lagrer vi window.send_to_editor Funger med et nytt navn. Dette er funksjonen som faktisk legger inn bilde HTML i postredigeringsområdet. Vi skal kapre denne funksjonen for å sende på src-attributtet til vårt eget skjemafelt, men bare hvis tykkeskuffen ble tatt opp av vår knapp.
Vi skal hekte inn i wp_head handling for å legge til våre metakoder i seksjon. Først vil vi sørge for at vi er på en enkelt innleggsside, og deretter setter vi opp $ post variabel. $ post bør ikke være tomt på dette tidspunktet, da WordPress allerede har bestemt hva slags objekt det gjengis og hvilken malfil den må bruke. Men i tilfelle det er, henter vi innlegget med get_queried_object ().
get_queried_object (); ?>
Deretter kan vi gå gjennom hver Open Graph-variabel, hente alt sammen med get_post_custom (), og, hvis det er der, ekko det ut i hovedenheten på siden vår.
get_queried_object (); $ values = get_post_custom ($ post-> ID); hvis (isset ($ values ['_ cd_opengraph_title'])) ekko ''. "\ n"; hvis (isset ($ values ['_ cd_opengraph_desc'])) ekko ''. "\ N"; hvis (isset ($ values ['_ cd_opengraph_image'])) ekko ''. "\ N"; ?>
Scenariet: Du stole tungt på tjue elleve sidebar sidemalen. Men du vil kunne bytte mellom venstre og høyre sidefelt for hver side.
Følgende kode vil være noe bedre igjen i et temas funksjonsfil. Når det er sagt, fordi vi bruker et plugin her, kan vi hekte inn i i det og med vår funksjonskontroll for å sikre at Tjue elleve er det nåværende temaet. Hvis ikke, deaktiverer du pluginet. Først vil vi imidlertid definere en konstant som inneholder nettadressen til katalogen der pluginet vårt ligger.
Samme rutine som før: Legg til meta-boksen, gjør den, og lagre dataene. Denne gangen kommer vi til å vise vår metakasse på redigeringsskjermen for sider. Vi skal også bruke en nifty wordpress-funksjon kalt get_template_directory_uri, som returnerer en streng som inneholder URI-katalogen for det aktuelle temaet. Vi skal bruke dette til å låne noen bilder som tjue elleve bruker på siden for temaalternativer. Vi skal også bruke den konstanten vi definerte tidligere for å legge til et eget bilde.
ID, '_cd_post_layout', true); // Sett vår layoutvariabel, selv på nye innlegg hvis (tomt ($ layout)) $ layout = 'default'; // Tema katalog for å låne 2011 bilder $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> For å prettify vår meta-boksen litt, må vi også legge til vårt eget stilark. Huske admin_print_scripts - $ side fra det andre scenariet ovenfor? Den har en bror, admin_print_styles - $ side, som, som navnet antyder, lar deg legge stilark til wordpress admin på bestemte sider. Vi må koble til denne funksjonen for post.php og post-new.php. Vi bruker også wp_enqueue_style (); det fungerer det samme var som wp_enqueue_script (), som vi brukte i det andre eksemplet ovenfor.
Og CSS.
div.cd-layout bredde: 200px; float: venstre; div.cd-layoutinngang display: block; # cd-sidebar-pos .clearfix: etter clear: both; innhold: "; display: blokk; skriftstørrelse: 0; linjehøyde: 0; synlighet: skjult; bredde: 0; høyde: 0; # etikettområde for CD-sidebar-pos display: block; margin-top: 5px;
Tjuefem fullfører sin sidebarposisjonering ved å hekte inn i et filter som kalles body_class. Dette er en del av funksjonen som kalles , som, hvis du har designet et tema før, har du sannsynligvis brukt. Hvis standardoppsettet er to kolonne, legger tjuefem til ett av to ekstra elementer til body_class: høyre sidebar eller venstre sidebjelke. Du kan se koden for dette i temaets inc mappe i filen tema-options.php.
Vår egen kode kommer også til å hekte inn body_class. Først vil vi sørge for at vi er på en side, og at den siden bruker Sidebarmal. Da får vi det $ post variabel eller sett den hvis den er tom. Legg merke til to ytterligere argumenter for add_filter. 99 er prioritet. Vi vil at dette skal brann sist, så vi bruker et høyere tall. 1 er nummeret eller argumentene som skal sendes til vår funksjon.
body_class vil sende et utvalg av alle elementene som vil gå inn i body_class () utgangsfunksjon. Herfra trenger vi bare å få våre egne meta verdier. Hvis verdien vår er "riktig", vil vi se etter "left-sidebar" i legemetallarmen. Hvis det er der, vil vi deaktivere det og erstatte det med "høyre sidebar". Omvendt hvis verdien vår er igjen.
ID, '_cd_post_layout', true); // hvis vi bruker riktig layout, legg til hvis ($ layout == 'right') $ key = array_search ('left sidebar', $ classes); hvis ($ key) unset ($ classes [$ key]); $ klasser [] = 'høyre sidebar'; elseif ($ layout = 'left') $ key = array_search ('right-sidebar', $ klasser); hvis ($ key) unset ($ classes [$ key]); $ klasser [] = 'venstre sidebar'; returnere $ klasser; ?> Ovennevnte ville fungere, men vi har slått ut en liten detalj. Hvis en bruker skjedde å ha tjueemanns temaalternativer satt til en kolonnevisning, ville ingen av alternativene i meta-boksen virke. Så vi kan endre ut add_meta_box ring litt. Først får vi tjue elleve alternativer, så sørger vi for at alternativet for temaoppsett ikke er satt til en kolonne. Hvis temaet er satt til en kolonne, legger vi ikke til meta-boksen.
Som du kanskje kan forestille deg, er det mange andre bruksområder for tilpassede metakasser? disse er bare noen få praktiske eksempler for å få tankene dine til å fungere. Når de kombineres med egendefinerte innleggstyper, kan de lage ekstremt tilpassede redigeringsskjermbilder. Den virkelige styrken til tilpassede metakasser ligger imidlertid i hvordan temadesignere og pluginutviklere kan skape mer brukervennlige grensesnitt for innstillinger for innstillinger på siden eller på sidenivå.
Vi håper du likte opplæringen!
