Share
Förra veckan introducerade vi hur man skapar anpassade metakasser i efterredigeraren och spara de data du lägger i dem. Men vad är några praktiska tillämpningar av denna teknik? Idag är målet att gå över tre verkliga världsexemplar på att använda anpassade metakasser för att förbättra postsidan.
I introduktionsartikeln lärde du dig allt om hur man implementerar metakasser och spara / städa data som går in i dem. Den stora! Men det är dags att gå utöver den konceptuella informationen och sätta de anpassade meta-rutorna på jobbet.
Scenariot: Du driver en webbplats som främst publicerar inspirerande innehåll. En av de saker du gör konsekvent sätter citat högst upp på varje inlägg. För att skilja dessa citat från innehållet, vill du flytta dem till en anpassad meta-låda.
I "How to" -artikeln lärde du dig att faktiskt genomföra metakassor, men här är en snabb recension.
Haka en funktion in i add_meta_boxes som innehåller ett samtal till add_meta_box fungera.
Skapa en funktion med samma namn som $ callback specificeras i add_meta_box. Detta är det stycke som faktiskt visar meta box innehåll.
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 att verifiera avsikt senare wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Haka in en funktion i spara inlägget de första handtagen verifierar behörigheter och avsikt och rensar och sparar sedan data.
array ()); om (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ tillåtet)); om (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author']))); om (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['_ cd_quote_date']))); ?>
Vi kunde använda de data som sparats i våra metakasser genom att redigera tematets mallfiler. Men det är för lätt. För att hålla vår citatkod modulär (en plugin-fil) använder vi filterhakar, en del av plugin-API. Filterhakar är lite annorlunda än åtgärder. När du hakar i ett filter, är det för det mesta att ändra hur en del innehåll visas på en sida. I vårt fall kommer vi att kroka in i innehållet, och om vi finns på en enskild postsida som har ett citat lägger vi till det ovan.
Ett annat sätt att tänka på action vs filter krokar är det du eko saker ut i handlingar (t.ex. wp_head, se avsnitt 2), men med filter tar du in en eller flera variabler, ändrar dem, då lämna tillbaka dem.
För att visa vår offert kommer vi att haka i innehållet, som passerar en variabel som standard: innehållet i ett visst inlägg. Inom vår krokade funktion ser vi till att vi befinner oss på ett enda inlägg och, om vi inte är, returnerar innehållet rätt sätt (inga ändringar).
Därefter får vi vårt $ post variabel. Eftersom vi är i slingan, ringer vi bara globala $ posten. Då får vi vår offert, om inget värde kommer tillbaka, vet vi att inget offert har angetts och vi återkommer innehållet igen utan ändringar.
ID, '_cd_quote_content', true); // Bail om vi inte har ett citat; om (tomt ($ quote)) returnera $ innehåll ?>
Nu när vi har kontrollerat att vi är på ett enda inlägg och vi faktiskt har ett citat, tar vi hand om att sätta ihop saker. Först ringer vi vår författare och hennes datum via get_post_meta (), då kan vi börja bygga en sträng i $ ut variabel. Först lägger vi till en och vårt citat. Då kontrollerar vi om fältet för författare fylldes i. Om det var så startar vi en paragraf för författaren och kolla om det fanns ett datum och lägg till det till stycket också. Slutligen lägger vi till vår stängning märka.
ID, '_cd_quote_content', true); // Bail om vi inte har ett citat; om (tomt ($ quote)) returnera $ innehåll // Montera vår offert $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Citat; om (! tom ($ författare)) $ ut. = ''; ?>-'. $ Författare; om (! tomt ($ datum)) $ ut. = '('. $ date. ')'; $ ut. = '
'; $ out. = '
Nu är det mest avgörande steget: återkommer kombinationen av vår nyskapade $ ut sträng som innehåller citatet och det ursprungliga innehållet som finns i $ innehåll.
ID, '_cd_quote_content', true); // Bail om vi inte har ett citat; om (tomt ($ quote)) returnera $ innehåll // Montera vår offert $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Citat; om (! tom ($ författare)) $ ut. = ''; // Återgå värdena: citera först, sedan returnerar innehållet $ ut. content $; ?>-'. $ Författare; om (! tomt ($ datum)) $ ut. = '('. $ date. ')'; $ ut. = '
'; $ out. = '
Det är allt! Du kan se resultatet.
Scenariot: Du har en aktiv grupp av läsare som regelbundet delar dina artiklar på Facebook. Det här är fantastiskt, och det skickar mycket trafik på din väg. Men du börjar märka att bilderna som visas med dina artiklar på Facebook är mindre än idealiska. Du är inte heller nöjd med hur dina inläggstitlar kommer ut. Lösningen är att lägga till Open Graph metataggar för att styra hur dina artiklar visas. Snarare än att låta detta tas om hand automatiskt, bestämmer du dig för att genomföra en anpassad meta-box för att ta hand om det.
Du har förmodligen det här nu, men här är koden för att få din meta-box att 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); // Lägg till ett nonce-fält wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Små, kvadratiska bilder fungerar bäst.
För att göra det "Upload Image" -knappen arbete måste vi lägga till lite javascript som kapar den inbyggda WordPress-uppladdaren. Det betyder att vi ska använda ännu en handlingskrok. Den här gången är det admin_print_script - $ sida.
När du lägger till skript och / eller stilar i adminområdet i WordPress finns det en gyllene regel: Lägg bara till skript / format där du behöver dem. Detta förhindrar att din plugin / tema bryter mot något annat olyckshändelse. admin_print_scripts - $ sida låter dig bara sätta in skript (via wp_enqueue_script-funktionen) endast på $ sida specificerad. I det här fallet måste vi lägga till vårt skript till post.php och post-new.php skärmar. Detta kräver att samma funktion i båda fallen.
Och javascript.
jQuery (dokument) .ready (funktion () var ogfield = null; jQuery ('# cdog-thickbox') .click (funktion () ogfield = jQuery ('input # och-image') .attr ); tb_show ("," media-upload.php? typ = bild & TB_iframe = true "); return false;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = function (html) var ochimg; ! = null) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # och-bild') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Först försäkrar vi dig om att thickbox-uppladdaren dyker upp när du klickar på knappen, och vi ställer in en variabel som berättar för WordPress att det var vår knapp som klickades. Därefter räddar vi window.send_to_editor funktion med ett nytt namn. Det här är den funktion som faktiskt sätter in bildhtml i postredigeringsområdet. Vi kommer att kapra denna funktion för att skicka på src-attributet till vårt eget formulärfält, men endast om tjockleken har tagits upp med vår knapp.
Vi ska kroka in i wp_head Åtgärd för att lägga till våra metataggar i sektion. Först ska vi se till att vi är på en enda inläggssida, och sedan ställa in vår $ post variabel. $ post bör inte vara tomt just nu eftersom WordPress redan har bestämt vilken typ av objekt det ska göra och vilken mallfil den behöver använda. Men om det är så hämtar vi inlägg med get_queried_object ().
get_queried_object (); ?>
Därefter kan vi gå igenom varje Open Graph-variabel, hämta allt med get_post_custom (), och, om det finns där, echo den ut i huvuddelen av vår sida.
get_queried_object (); $ values = get_post_custom ($ post-> ID); om (isset ($ values ['_ cd_opengraph_title'])) echo ''. "\ n"; om (isset ($ värden ['_ cd_opengraph_desc'])) echo ''. "\ N"; om (isset ($ värden ['_ cd_opengraph_image'])) echo ''. "\ N"; ?>
Scenariot: Du är starkt beroende av tjugo elva sidofält sidmall. Men du vill kunna byta mellan vänster och höger sidofält för varje sida.
Följande kod skulle vara något bättre kvar i ett temas funktionsfil. Som sagt, för att vi använder ett plugin här kan vi haka i i det och med vår funktionskontroll för att se till att tjugo elva är det aktuella temat. Om inte, avaktiverar vi pluginprogrammet. Först bestämmer vi emellertid en konstant som innehåller webbadressen till katalogen där vårt plugin finns.
Samma rutin som tidigare: lägg till metakassen, gör den och spara data. Den här gången kommer vi dock att visa vår metakassa på redigeringsskärmen för sidor. Vi kommer också att använda en smidig wordpress-funktion som heter get_template_directory_uri, som returnerar en sträng som innehåller URI i katalogen för det aktuella temat. Vi ska använda detta för att låna några bilder som tjugo elva använder på teman alternativ sida. Vi ska också använda den konstant som vi definierade tidigare för att lägga till en egen bild.
ID, '_cd_post_layout', true); // Ange vår layoutvariabel, även på nya inlägg om (tomt ($ layout)) $ layout = 'default'; // Tema katalog för att låna 2011 bilder $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> För att prettify vår meta box lite behöver vi också lägga till vårt eget stylesheet. Kom ihåg admin_print_scripts - $ sida från det andra scenariot ovan? Den har en bror, admin_print_styles - $ sida, som, som namnet antyder, låter dig lägga till stylesheet till wordpress admin på specifika sidor. Vi måste ansluta till den här funktionen för post.php och post-new.php. Vi använder också wp_enqueue_style (); det fungerar detsamma var som wp_enqueue_script (), som vi använde i det andra exemplet ovan.
Och CSS.
div.cd-layout bredd: 200px; flyta till vänster; div.cd-layoutingång display: block; # cd-sidebar-pos .clearfix: efter clear: both; innehåll: "; display: block; fontstorlek: 0; linjehöjd: 0; synlighet: dold; bredd: 0; höjd: 0; # etikettstorlek för cd-sidobar-pos display: block; margin-top: 5px;
Tjugo elva uppnår sin sidospår positionering genom att koppla in i ett filter som heter body_class. Detta är en del av den funktion som kallas , som, om du har utformat ett tema tidigare, har du antagligen använt. Om standardlayouten är två kolumner, lägger tjugo elva ett av två ytterligare objekt till body_class: högra sidor eller vänster sidor. Du kan se koden för detta i tematets inc mappen i filen theme-options.php.
Vår egen kod kommer också att haka in body_class. Först ska vi se till att vi är på en sida och att den sidan använder Sidofältmall. Då får vi det $ post variabel eller ställ in den om den är tom. Lägg märke till två ytterligare argument för add_filter. 99 är prioriteringen. Vi vill att detta ska elda senast, så vi använder ett högre antal. 1 är numret eller argumenten som ska skickas till vår funktion.
body_class kommer att skicka en uppsättning av alla objekt som kommer att gå in i body_class () utgångsfunktion. Härifrån behöver vi bara få våra egna metavärden. Om vårt värde är "rätt", letar vi efter "vänster sidebar" i klassklassmatrisen. Om det är där kommer vi att stänga av det och ersätta det med "högra sidor". Omvänt om vårt värde är kvar.
ID, '_cd_post_layout', true); // Om vi använder rätt layout lägger du till om ($ layout == 'right') $ key = array_search ('left sidebar', $ classes); om ($ key) unset ($ classes [$ key]); $ klasser [] = 'högra sidebar'; elseif ($ layout = 'left') $ key = array_search ('right sidebar', $ classes); om ($ key) unset ($ classes [$ key]); $ klasser [] = 'vänster sidebar'; returnera $ klasser; ?> Ovanstående skulle fungera, men vi har släppt ut en liten detalj. Om en användare råkade ha tjugo elva temainställningar som ställts in på en kolonnskärm, skulle ingen av alternativen i vår metabox fungera. Så kan vi ändra add_meta_box ring lite. Först får vi tjugo elva alternativ, så ska vi se till att alternativet för temalayout inte är inställt på en kolumn. Om temat är inställt på en kolumn, lägger vi inte till metaboxen.
Som du kan tänka dig finns det många andra användningsområden för anpassade metakassor? Det här är bara några praktiska exempel för att få ditt sinne att fungera. När de kombineras med egna posttyper tillåter de dig att skapa extremt anpassade redigeringsskärmar. Den verkliga styrkan hos anpassade metakasser ligger emellertid i hur temat designers och plugin-utvecklare kan skapa mer användarvänliga gränssnitt för inställningar på post eller sidnivå.
Vi hoppas att du njöt av handledningen!
