Accentsconagua
Tekstgebied: ". $ Textarea."
"; echo"Selectievakje: ". $ Selectievakje."
"; echo"Keuzerondjes: ". $ Radio."
"; echo"Dropdown: ". $ Select."
"; echo"Sitemap
"; echo"- ". wp_list_pages (array ('title_li' =>")). "
Share
In deel 1 van deze tutorialserie heb ik het basisconcept van dynamische paginasjablonen geïntroduceerd en een standaard paginasjabloon gemaakt als basis voor toekomstig werk. Een WordPress-thema voor kinderen op basis van het Twenty-Seventeen bovenliggende thema werd gebruikt om de paginasjabloon te implementeren.
In deze zelfstudie leer je meer specifieke details over dynamische paginasjablonen en hoe je deze kunt gebruiken in je eigen WordPress-projecten.
Ik zal je ook stap voor stap laten zien hoe je de paginasjabloon uit de eerste tutorial kunt uitbreiden en deze kunt veranderen in je allereerste werkende dynamische paginasjabloon!
Dus hoe kunnen we paginasjablonen flexibeler maken en waarom zou dit hoe dan ook nuttig zijn?
Laten we zeggen dat u een portfoliosjabloon hebt met een galerij met individuele portfolio-items. Elk item zou een vaste maat hebben en er zouden er maar zoveel op elke rij passen.
We kunnen natuurlijk een andere paginasjabloon toevoegen om portefeuilles in verschillende grootten weer te geven. Maar wat als we kleine, middelgrote of grote portfolio's wilden laten zien? Hiervoor hebben we drie afzonderlijke paginasjablonen nodig, elk met verschillende formaten voor de portfolio-items.
Dit kan onmiddellijk flexibeler worden gemaakt door een vervolgkeuzemenu toe te voegen om de portfoliogrootte (te weten Small, Medium of Large) te selecteren. Dit is handiger voor de gebruiker, omdat het vak voor de paginasjabloon minder vol zit met onnodige keuzes.
Het is ook logischer voor de ontwikkelaar, die slechts één paginasjabloon heeft om te onderhouden in plaats van drie! Dit volgt het Do not Repeat Yourself (DRY) software-ontwikkelingsprincipe.
Het is vermeldenswaard dat niet elke paginasjabloon noodzakelijkerwijs baat heeft bij dynamisch zijn. Als je een paginasjabloon hebt die maar één ding doet, en één ding, dan is dat prima. Het zou geen zin hebben om in dit geval aangepaste besturingselementen en extra logica toe te voegen aan een paginasjabloon.
Maar zoals u aan het einde van deze zelfstudie zult zien, zouden veel paginasjablonen veel baat hebben bij een grotere flexibiliteit.
Een ander handig voorbeeld voor een dynamische paginasjabloon is een contactformulier. Er zijn veel aangepaste besturingselementen die kunnen worden toegevoegd om deze paginasjabloon zeer flexibel te maken.
In plaats van een vaste reeks formuliervelden uit te voeren, kunnen bijvoorbeeld paginasjabloonopties worden toegevoegd om bepaalde velden weg te laten. Of kan een Captcha-veld optioneel worden weergegeven om spam-submissies te voorkomen? Er zijn zo veel verschillende manieren waarop u een contactformulier kunt aanpassen.
Ik maak een dynamische paginasjabloon voor formulieren in deel 3 van deze tutorialserie. Maar laten we eerst beginnen met het maken van een dynamische paginasjabloon voor algemene doeleinden.
Om te beginnen maken we een standaard dynamische paginasjabloon om te laten zien hoe alle onderdelen bij elkaar passen. Aangepaste besturingselementen worden toegevoegd aan de pagina-editor die later wordt gebruikt om de uitvoer van paginasjablonen te beheren.
De besturingselementen voor aangepaste paginasjablonen die we binnenkort zullen toevoegen, zijn:
Idealiter moeten de besturingselementen direct onder het vervolgkeuzemenu Paginasjabloon worden toegevoegd om duidelijk te maken dat ze verband houden met een paginasjabloon.
WordPress biedt hiervoor echter geen hooks, dus u moet het (voorlopig) doen met het toevoegen van aangepaste paginasjabloonbesturingselementen aan een afzonderlijke aangepaste metabox. In deel drie van deze tutorialserie zal ik je laten zien hoe je dit probleem kunt omzeilen.
Haken zijn fundamenteel voor de ontwikkeling van WordPress. Ze stellen ontwikkelaars in staat om de codebasis uit te breiden zonder toevlucht te hoeven nemen tot het bewerken van kernbestanden, wat over het algemeen als een slecht idee wordt beschouwd. Dit komt omdat elke aangepaste code zou worden weggevaagd wanneer een WordPress-update wordt uitgevoerd (wat vrij regelmatig kan gebeuren).
Om onze metabox op het paginabewerkingsscherm weer te geven, voegt u de load-post.php en load-post-new.php haakt aan het kindthema in het() methode die we in deel 1 hebben gemaakt.
We gebruiken twee WordPress-hooks om ervoor te zorgen dat de metabox op de pagina-editor wordt weergegeven, of u nu een nieuwe pagina maakt of een bestaande bewerkt. Er is ook een
save_posthaak die het opslaan van post-metadata verwerkt, wat ik later zal bespreken.Voeg de volgende vier klassemethoden toe om gegevens voor de metabox te maken, weer te geven en op te slaan.
/ * Meta-vakhaak toevoegen. * / public function page_template_meta_box () add_action ('add_meta_boxes', array ($ this, 'add_page_template_meta_box'));/ * Registreer metabox. * / public function add_page_template_meta_box () add_meta_box ('page-template-meta-box', esc_html __ ('Paginasjabloon metabox', 'twenty-seventeen-child'), array ($ this, 'display_page_template_meta_box'), 'pagina ',' side ',' default ');/ * Render metabox op de pagina-editor. * / public function display_page_template_meta_box ($ object) wp_nonce_field (basename (__FILE__), 'page_template_meta_box_nonce');Ik zal hier niet te gedetailleerd ingaan op WordPress metaboxen, omdat dat een hele tutorial op zichzelf kan zijn, maar let op de volgende punten over de code die ik hierboven heb toegevoegd:
page_template_meta_box () en add_page_template_meta_box () klassemethoden registreren de metabox met WordPress.add_page_template_meta_box (), de 'pagina' parameter geeft aan dat deze metabox alleen wordt weergegeven in de 'pagina' berichttype-editor in de WordPress-beheerder.display_page_template_meta_box () klassemethode maakt de metabox en stelt een nonce in om de formulierbesturingselementen veiliger te maken.Als alles goed is, zou je nu een metabox moeten laten weergeven op de pagina-editor, zoals hieronder getoond.
Het is op dit moment echter een beetje leeg, dus laten we wat besturingselementen toevoegen.
Als u zich van boven zult herinneren, gaan we een tekstvak, tekstgebied, selectievakje, keuzerondje en selectiekaderregelaars aan de metabox toevoegen. Begin door de volgende code toe te voegen aan de display_page_template_meta_box () methode onder de nonce-functie.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true);
Hiermee worden de huidige waarden van onze metabox-besturingselementen opgehaald en in lokale variabelen opgeslagen. Voeg direct de volgende HTML toe om de metabox-besturingselementen weer te geven.
?>
/>
>
>
>
Elk besturingselement bevindt zich in een alineatag en de huidige waarde wordt bijgewerkt via de lokale variabele die we eerder hebben gemaakt. Dit zorgt ervoor dat de metabox-besturingselementen altijd de juiste instellingen weergeven.
Dit gebeurt echter niet tenzij we de huidige metabox-besturingsgegevens opslaan in de WordPress-database.
Iets eerder registreerde ik een haak om een klassenmethode uit te voeren elke keer dat de pagina-editor werd bijgewerkt. Laten we die methode nu aan onze kindthema-klasse toevoegen.
post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['page-template-textarea'])? $ _POST ['pagina -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? $ _POST ['pagina -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value);De
save_page_template_meta ()klassenmethode verwerkt het opslaan van de metaboxbesturingsgegevens. Het slaat alleen de metabox-gegevens op als de nonce wordt geverifieerd, de huidige gebruikers berichten kunnen bewerken en we staan op het admin-scherm van de page editor.Als aan die voorwaarden is voldaan, extraheren we de gegevens voor elk besturingselement dat is opgeslagen in de globale
$ _POSTvariabel. Deze variabele wordt ingesteld elke keer dat een formulier wordt ingediend.Ten slotte worden de controlegegevens van de metabox in de WordPress-database opgeslagen als metagegevens voor de huidige pagina.
Als de besturingselementen voor aangepaste paginasjablonen zijn toegevoegd, zou onze metabox er zo uit moeten zien.
Voer wat tekst in voor het tekstvak en het tekstgebied en maak selecties voor het selectievakje, keuzerondje en selectievak. Druk op Update om uw wijzigingen op te slaan en wanneer de pagina-editor opnieuw laadt, moeten uw metabox-besturingselementen de gegevens weergeven die u zojuist hebt ingevoerd.
De volledige broncode voor het onderliggende thema functions.php-bestand wordt hieronder weergegeven.
ID, 'page_template_text', true); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true); ?>post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['page-template-text'])? $ _POST ['page-template-text']: "; update_post_meta ($ post_id, 'page_template_text', $ page_template_text_value); $ page_template_textarea_value = isset ($ _POST ['page-template-textarea'])? $ _POST ['pagina -template-textarea ']: "; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['page-template-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align'])? $ _POST ['pagina -template-align ']: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['page-template-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value); $ ts_child_theme = nieuw DPT_Twenty_Seventeen_Child (); $ ts_child_theme-> init ();
/>
>
>
>
Het laatste stukje van de puzzel is om de metabox-besturingsgegevens in onze paginasjabloon aan de voorkant te gebruiken. Open de
testpagina-template.phpbestand dat we in deel 1 hebben gemaakt en vervang de inhoud door deze bijgewerkte code.Tekstvak: ". $ Text.""; echo" Tekstgebied: ". $ Textarea."
"; echo"Selectievakje: ". $ Selectievakje."
"; echo"Keuzerondjes: ". $ Radio."
"; echo"Dropdown: ". $ Select."
"; echo"Sitemap
"; echo"". wp_list_pages (array ('title_li' =>")). "
"; endwhile; // Einde van de lus.?>Zorg ervoor dat de 'Paginasjabloon testen' de momenteel geselecteerde paginasjabloon is en bekijk de pagina aan de voorkant.
Zoals u kunt zien, bevat de paginasjabloon nu de waarden die zojuist zijn ingesteld voor de metabox-besturingselementen op de pagina-editor. Dit is de kern van de rest van de zelfstudie, aangezien we op dit eenvoudige voorbeeld voortbouwen en verschillende voorbeelden van volledig werkende dynamische paginasjablonen maken die u kunt gebruiken in uw eigen WordPress-projecten..
Conclusie
In deze zelfstudie hebben we besproken hoe u een functionerend dynamisch paginasjabloon kunt maken. Op dit moment is onze basissjabloon, ook al functioneel, niet erg nuttig.
In het derde en laatste deel van deze tutorialserie laat ik je zien hoe je verschillende dynamische paginasjablonen kunt maken, van begin tot eind, die je kunt gebruiken (en uitbreiden) in je eigen WordPress-projecten..
Als u vragen heeft, kunt u een bericht achterlaten in de opmerkingen hieronder. Ik zou graag uw mening horen over de tutorial.
