Share
Vorige week hebben we geïntroduceerd hoe we aangepaste metaboxen kunnen maken in de post-editor en de gegevens kunnen bewaren die je erin zet. Maar wat zijn enkele praktische toepassingen van deze techniek? Vandaag is het de bedoeling om drie voorbeelden uit de echte wereld te bespreken van het gebruik van aangepaste metaboxen om de berichtpagina te verbeteren.
In het introductieartikel hebt u alles geleerd over het implementeren van metaboxen en het opslaan / opschonen van de gegevens die erin worden geplaatst. Dat is geweldig! Maar het is tijd om verder te gaan dan de conceptuele informatie en die aangepaste metaboxen aan het werk te zetten.
Het scenario: U voert een website uit die voornamelijk inspirerende inhoud publiceert. Een van de dingen die je consequent doet, is aanhalingstekens bovenaan elke post. Als u deze aanhalingstekens wilt scheiden van de inhoud, wilt u ze verplaatsen naar een aangepaste metabox.
In het artikel 'Hoe kan ik' hebben geleerd hoe je meta-dozen daadwerkelijk kunt implementeren, maar hier volgt een korte beoordeling.
Haak een functie in de add_meta_boxes die een oproep bevat naar de add_meta_box functie.
Maak een functie met dezelfde naam als de $ callback gespecificeerd in add_meta_box. Dit is het stuk dat daadwerkelijk metabox-inhoud weergeeft.
Accentsconagua
ID, '_cd_quote_content', waar); $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce om de intentie later te verifiëren wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Koppel een functie aan save_post die eerst omgaat met het verifiëren van rechten en intenties en dan opschoont en de gegevens opslaat.
array ()); if (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['_ cd_quote_content'], $ allowed)); if (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author']))); if (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['_ cd_quote_date']))); ?>
We zouden de gegevens die zijn opgeslagen in onze metaboxen kunnen gebruiken door de sjabloonbestanden van onze thema's te bewerken. Maar dat is te gemakkelijk. Om onze quote-code modulair te houden (één plugin-bestand), gebruiken we filterhaken, onderdeel van de Plugin-API. Filterhaken zijn iets anders dan acties. Wanneer u in een filter haakt, is het doel meestal om te wijzigen hoe een deel van de inhoud op een pagina wordt weergegeven. In ons geval gaan we inhaken de inhoud, en als we op een enkele berichtpagina staan met een citaat, voegen we deze hierboven toe.
Een andere manier om actie versus filterhaken te bedenken is dat jij echo dingen uit in acties (bijv. wp_head, zie sectie 2), maar met filters die u in een of meerdere variabelen invoert, wijzigt u ze en vervolgens terugkeer hen.
Om onze quote weer te geven, houden we ons aan de inhoud, die standaard één variabele doorgeeft: de inhoud van een bepaalde post. In onze gekoppelde functie zorgen we ervoor dat we op één bericht zitten en, als dat niet het geval is, de inhoud op de juiste manier retourneren (geen wijzigingen).
Vervolgens krijgen we onze $ bericht variabel. Omdat we op de hoogte zijn, bellen we gewoon wereldwijde $ post. Dan zullen we onze prijsopgave ontvangen, als er geen waarde terugkomt, weten we dat er geen offerte is ingevoerd en we sturen de inhoud opnieuw zonder wijziging.
ID, '_cd_quote_content', waar); // Borgtocht als we geen offerte hebben; als (leeg ($ quote)) $ inhoud retourneert; ?>
Nu we ervoor hebben gezorgd dat we op één bericht zitten en we een offerte hebben, zorgen we ervoor dat alles bij elkaar wordt gezet. Eerst bellen we onze auteur en haar datums via get_post_meta (), dan kunnen we beginnen met het bouwen van een string in de $ out variabel. Eerst voegen we een toe en ons citaat. Vervolgens controleren we of het auteursveld is ingevuld. Als dit het geval was, starten we een alinea voor de auteur en controleren of er een datum was en voeg die ook toe aan de alinea. Ten slotte voegen we onze afsluiting toe label.
ID, '_cd_quote_content', waar); // Borgtocht als we geen offerte hebben; als (leeg ($ quote)) $ inhoud retourneert; // Verzamel ons citaat $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Citaat; if (! empty ($ author)) $ out. = ''; ?>-'. $ Auteur; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ uit. = '
'; $ uit. = '
Nu de meest cruciale stap: terugkeren van de combinatie van onze nieuw gemaakte $ out string die de quote en de originele inhoud bevat $ inhoud.
ID, '_cd_quote_content', waar); // Borgtocht als we geen offerte hebben; als (leeg ($ quote)) $ inhoud retourneert; // Verzamel ons citaat $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = ''. $ Citaat; if (! empty ($ author)) $ out. = ''; // Retourneer de waarden: citeer eerst, dan retourneert de inhoud $ out. $ Inhoud; ?>-'. $ Auteur; if (! empty ($ date)) $ out. = '('. $ date. ')'; $ uit. = '
'; $ uit. = '
Dat is het! Je kunt het resultaat zien.
Het scenario: Je hebt een actieve community van lezers die regelmatig je artikelen op Facebook delen. Dit is geweldig en het stuurt veel verkeer op jouw manier. Maar je begint te merken dat de afbeeldingen die verschijnen met je artikelen op Facebook, niet ideaal zijn. Je bent ook niet blij met hoe de titels van je berichten eruit komen te zien. De oplossing is om Open Graph-metatags toe te voegen om te bepalen hoe uw artikelen worden weergegeven. In plaats van dit automatisch te laten regelen, besluit u om een aangepaste metabox te implementeren om ervoor te zorgen.
Je hebt dit waarschijnlijk al lang niet, maar hier is de code voor het opstarten van je metabox.
ID, '_cd_opengraph_title', waar); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', true); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', true); // Voeg een nonce veld toe wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Kleine, vierkante afbeeldingen werken het beste.
Om die knop "Uploaden Afbeelding" te laten werken, moeten we een beetje JavaScript toevoegen dat de ingebouwde WordPress-uploader kaping geeft. Dit betekent dat we nog een andere actiehaak gaan gebruiken. Deze keer is het admin_print_script - $ page.
Bij het toevoegen van scripts en / of stijlen aan het admingebied van WordPress, is er één gouden regel: voeg alleen de scripts / stijlen toe waar u ze nodig hebt. Dit voorkomt dat uw plug-in / thema iets anders per ongeluk breekt. admin_print_scripts - $ page laat je alleen scripts invoegen (via de functie wp_enqueue_script) alleen op de $ pagina gespecificeerd. In dit geval moeten we ons script toevoegen aan de post.php en post-new.php -schermen. Hiervoor moet dezelfde functie in beide worden gehaakt.
En het javascript.
jQuery (document) .ready (function () var ogfield = null; jQuery ('# cdog-thickbox') .click (function () ogfield = jQuery ('input # og-image') .attr ('naam' ); 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 = function (html) var ogimg; if (ogfield) ! = null) ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-image') .val (ogimg); tb_remove (); ogfield = null; else window.send_to_editor_old (html);;); Eerst zorgen we ervoor dat de thickbox-uploader verschijnt wanneer op de knop wordt geklikt, en we stellen een variabele in die WordPress vertelt dat op onze knop is geklikt. Vervolgens slaan we de window.send_to_editor functie met een nieuwe naam. Dit is de functie die de HTML van de afbeelding daadwerkelijk in het postbewerkingsgebied invoegt. We gaan deze functie kapen om het src-attribuut naar ons eigen formulierveld te sturen, maar alleen als de thickbox is opgevoed door onze knop.
We gaan in de wp_head actie om onze metatags toe te voegen in de sectie. Eerst zorgen we ervoor dat we op een enkele postpagina staan en stellen we vervolgens onze $ bericht veranderlijk. $ bericht mag op dit moment niet leeg zijn, omdat WordPress al heeft besloten welk type object het rendert en welk sjabloonbestand het moet gebruiken. Maar in het geval dat dit het geval is, halen we de post op met get_queried_object ().
get_queried_object (); ?>
Vervolgens kunnen we elke Open Graph-variabele doorlopen en alles ophalen met get_post_custom (), en, als het daar is, echo het uit in het hoofdgedeelte van onze pagina.
get_queried_object (); $ values = get_post_custom ($ post-> ID); if (isset ($ values ['_ cd_opengraph_title'])) echo ''. "\ n"; if (isset ($ values ['_ cd_opengraph_desc'])) echo ''. "\ N"; if (isset ($ values ['_ cd_opengraph_image'])) echo ''. "\ N"; ?>
Het scenario: Je vertrouwt sterk op de sidebar-paginasjabloon van Twenty Eleven. Maar u wilt voor elke pagina kunnen schakelen tussen de linker en rechter zijbalk.
De volgende code zou iets beters zijn in het functiedossier van een thema. Dat gezegd hebbende, omdat we hier een plug-in gebruiken, kunnen we inhaken op de in het en met onze functiecontrole om ervoor te zorgen dat Twenty Eleven het huidige thema is. Als dat niet het geval is, zullen we de plug-in deactiveren. Eerst zullen we echter een constante definiëren die de URL bevat van de directory waarin onze plug-in zich bevindt.
Dezelfde routine als voorheen: voeg de metabox toe, render deze en sla de gegevens op. Deze keer zullen we echter onze metabox weergeven op het bewerkingsscherm voor pagina's. We gaan ook een handige wordpress-functie gebruiken genaamd get_template_directory_uri, die een string retourneert die de URI van de directory voor het huidige thema bevat. We gaan dit gebruiken om een paar afbeeldingen te lenen die Twenty Eleven gebruikt op de pagina met thema-opties. We gaan ook de constante gebruiken die we eerder hebben gedefinieerd om een eigen afbeelding toe te voegen.
ID, '_cd_post_layout', waar); // Stel onze lay-outvariabele in, zelfs op nieuwe berichten als (leeg ($ layout)) $ layout = 'default'; // Themamap voor het lenen van 2011-afbeeldingen $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> Om onze metabox een beetje mooier te maken, moeten we ook ons eigen stylesheet toevoegen. Onthouden admin_print_scripts - $ page uit het tweede scenario hierboven? Het heeft een broer, admin_print_styles - $ page, wat, zoals de naam al aangeeft, het mogelijk maakt om stylesheets toe te voegen aan de wordpress admin op specifieke pagina's. We moeten deze functie gebruiken voor post.php en post-new.php. We gebruiken ook wp_enqueue_style (); het werkt hetzelfde als wp_enqueue_script (), dat we in het tweede voorbeeld hierboven hebben gebruikt.
En de CSS.
div.cd-layout width: 200px; float: left; div.cd-layout input display: block; # cd-sidebar-pos .clearfix: after clear: both; inhoud: "; weergave: blok; tekengrootte: 0; regelhoogte: 0; zichtbaarheid: verborgen; breedte: 0; hoogte: 0; # cd-zijbalk-pos labelbereik weergave: blok; marge-boven: 5px;
Twenty Eleven bereikt zijn zijbalkpositionering door in een genoemd filter te haken body_class. Dit maakt deel uit van de functie genaamd , welke, als je eerder een thema hebt ontworpen, je waarschijnlijk hebt gebruikt. Als de standaardlay-out twee kolommen is, voegt Twenty Eleven een van de twee extra items toe aan body_class: rechterzijbalk of linkerzijbalk. Je kunt de code hiervoor zien in de thema's inc map in het bestand theme-options.php.
Onze eigen code gaat ook inhaken body_class. Eerst zorgen we ervoor dat we op een pagina staan en dat die pagina de pagina gebruikt Sidebar-sjabloon. Dan zullen we de $ bericht variabele of stel deze in als deze leeg is. Let op twee extra argumenten voor add_filter. 99 is de prioriteit. We willen dat dit als laatste vuurt, dus we gebruiken een hoger nummer. 1 is het aantal of de argumenten die naar onze functie moeten worden verzonden.
body_class zal een reeks van alle items verzenden die in de body_class () uitgangsfunctie. Van hieruit moeten we alleen onze eigen meta-waarden krijgen. Als onze waarde 'juist' is, zoeken we naar 'left-sidebar' in de bodyclass-array. Als het er is, schakelen we het uit en vervangen het door "rechterzijbalk". Andersom als onze waarde is overgebleven.
ID, '_cd_post_layout', waar); // als we de juiste lay-out gebruiken, voeg dan toe ($ layout == 'right') $ key = array_search ('left-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'right-sidebar'; elseif ($ layout = 'left') $ key = array_search ('right-sidebar', $ classes); if ($ key) unset ($ classes [$ key]); $ classes [] = 'left-sidebar'; retourneer $ klassen; ?> Het bovenstaande zou werken, maar we hebben een klein detail weggelaten. Als een gebruiker toevallig de thema-opties van Twenty Eleven had ingesteld op een weergave met één kolom, zou geen van de opties in onze metabox werken. Dus laten we het aanpassen add_meta_box bel een beetje. Eerst krijgen we de opties van Twenty Eleven, dan zorgen we ervoor dat de optie voor de thema-opmaak niet op één kolom staat. Als het thema is ingesteld op één kolom, voegen we de metabox niet toe.
Zoals je je misschien kunt voorstellen, zijn er veel andere toepassingen voor aangepaste metaboxen? dit zijn maar een paar praktische voorbeelden om je geest aan het werk te krijgen. In combinatie met aangepaste berichttypen kunt u uiterst aangepaste bewerkingsschermen maken. De echte kracht van aangepaste metaboxen ligt echter in de manier waarop thema-ontwerpers en plugin-ontwikkelaars gebruiksvriendelijkere interfaces kunnen maken voor instellingen op post- of pagina-niveau.
We hopen dat je de tutorial leuk vond!
