Dynamische paginasjablonen in WordPress, deel 3

In de eerste twee delen van deze zelfstudiegroep hebben we besproken wat dynamische paginasjablonen waren en waarom ze nodig waren. We hebben ook gekeken naar de code die nodig is om ze te implementeren. 

In deze derde en laatste zelfstudie in de serie maak ik twee voorbeelden van volledig werkende dynamische paginasjablonen die u kunt gebruiken in uw eigen projecten. Deze zijn speciaal gekozen om gemakkelijk uitbreidbaar te zijn om aan uw behoeften te voldoen en zijn bedoeld als inspiratie voor elk ander type dynamische paginasjablonen die u maar kunt bedenken.

De twee dynamische paginasjablonen die we binnenkort zullen bekijken, zijn:

• Eenvoudig contactformulier
• Blog Postarchief

Naast het implementeren van onze paginasjablonen, laat ik je ook zien hoe je extra Pools kunt toevoegen, via aangepaste CSS en JavaScript, om interactie veel intuïtiever te maken voor eindgebruikers..

Bovendien bekijken we hoe u paginasjablonen kunt gebruiken ieder berichttype. Sinds WordPress 4.7 kunt u het berichttype opgeven waaraan een paginasjabloon is gekoppeld. We zullen zien hoe u een bestaande dynamische paginasjabloon kunt wijzigen om van deze nieuwe functie te profiteren, zodat deze met elk berichttype werkt.

We hebben veel te behandelen in deze tutorial, dus laten we aan de slag gaan!

Thema-instellingen

We zullen opnieuw een WordPress Twenty Seventeen kindthema gebruiken, net als in deel 2 van deze tutorialserie, om onze dynamische paginasjablooncode toe te voegen. Laten we beginnen met een leeg kindthema.

Maak een onderliggende themaportefeuille genaamd twentyseventeen-kind en voeg de volgende bestanden toe:

• functions.php
• style.css

Binnen style.css, toevoegen:

/ * Theme Name: Twenty Seventeen Child Beschrijving: Twenty Seventeen Child Theme Auteur: David Gwyer Sjabloon: twentyseventeen Versie: 0.1 Licentie: GNU General Public License v2 of later Licentie URI: http://www.gnu.org/licenses/gpl- 2.0.html Tekstdomein: twintig-zeventien-kind * /

En van binnen functions.php, toevoegen:

in het(); 

Voeg het kindthema toe aan uw WordPress themabestand zoals we eerder deden. Als je niet zeker weet hoe je dit moet doen, raadpleeg dan deel 2 van deze tutorialserie.

We hebben nu een werkend (blanco) kindthema voor ons klaar om onze dynamische paginasjablooncode aan toe te voegen.

Dynamische vormpaginasjabloon

Onze eerste echte implementatie van een dynamische paginasjabloon is een eenvoudig contactformulier. We zullen de volgende velden toevoegen:

• titel
• Naam
• Onderwerpen
• E-mail
• Telefoonnummer

Dit zijn tekstinvoervelden, behalve de kop, die een standaard HTML-headinglabel is.

Voordat we de eigenlijke paginasjabloon implementeren, moeten we echter aangepaste besturingselementen toevoegen aan de pagina-editor waarmee we de uitvoer van paginasjablonen kunnen wijzigen. Wanneer we vervolgens de paginasjabloon maken, wordt deze weergegeven volgens de besturingsinstellingen van de pagina-editor.

In deel 2 van deze zelfstudiereeks heb ik gezegd dat er geen eenvoudige manier is om aangepaste besturingselementen rechtstreeks toe te voegen aan de metagox 'Pagina-eigenschappen', waar de vervolgkeuzelijst met paginasjablonen zich bevindt.

Dit betekent dat we onze dynamische paginasjabloon-besturingselementen voor nu elders moeten toevoegen. Ik zal je laten zien hoe je deze beperking een beetje later kunt omzeilen, met een beetje CSS en JavaScript-magie. Maar voorlopig moeten we het doen met het toevoegen van onze aangepaste besturingselementen aan een afzonderlijke metabox.

In de DPT_Twenty_Seventeen_Child klasse, registreer twee nieuwe actiehaken in de in het methode en een nieuwe methode genaamd page_template_meta_boxes.

De load-post.php en load-post-new.php actiehaken worden uitgevoerd wanneer een bericht (van een willekeurig type) wordt bewerkt of gemaakt. Wanneer dit gebeurt, registreren we een andere actiehaak add_meta_boxes dat zal de creatie van onze aangepaste metabox activeren, die gedaan wordt via de add_page_template_meta_boxes callback-functie. Laten we die functie nu implementeren.
De daadwerkelijke weergave van de metabox-besturingselementen wordt afgehandeld via de display_form_page_template_meta_box callback-functie, die hierboven als een van de argumenten is opgegeven add_meta_box ().
Voeg hier besturingselementen toe ... 
Voor nu heb ik wat tijdelijke tekst toegevoegd, zodat we onze nieuwe metabox in de pagina-editor kunnen zien.
Onthoud van te voren dat ons formulierpaginasjabloon een kop en vier tekstvelden heeft. Er zijn veel manieren waarop we kunnen kiezen om de formulieruitvoer aan te passen, maar in dit geval voegen we selectievakjes toe voor elk veld waarmee we hun zichtbaarheid kunnen wijzigen. Bijwerken display_form_page_template_meta_box () om de volgende code op te nemen.
ID, 'pt_chk_form_heading', true); $ name = get_post_meta ($ object-> ID, 'pt_chk_form_name', true); $ subject = get_post_meta ($ object-> ID, 'pt_chk_form_subject', true); $ email = get_post_meta ($ object-> ID, 'pt_chk_form_email', true); $ phone = get_post_meta ($ object-> ID, 'pt_chk_form_phone', true); ?> 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
 
We nemen een nonce-veld op voor beveiliging, dat later zal worden geverifieerd, net voordat we de formulierwaarden opslaan in de database.
Opmerking: als om welke reden dan ook de nonce-waarde niet kan worden geverifieerd, worden de instellingen niet opgeslagen. 
Vervolgens worden de huidige formulierwaarden opgehaald uit de database voordat de aangepaste formuliervelden worden uitgevoerd in de metabox.
Momenteel worden onze selectievakjes niet opgeslagen wanneer het bericht wordt bijgewerkt. Om de instellingen van het formulier te behouden, moeten we een nieuwe hook registreren in de in het() methode die triggert tijdens een save_post actie, en implementeer vervolgens het terugbellen om handmatig meta-instellingen bij te werken.
post_type) return $ post_id;  $ heading = isset ($ _POST ['pt_chk_form_heading'])? $ _POST ['pt_chk_form_heading']: "; update_post_meta ($ post_id, 'pt_chk_form_heading', $ heading); $ name = isset ($ _POST ['pt_chk_form_name'])? $ _POST ['pt_chk_form_name']:"; update_post_meta ($ post_id, 'pt_chk_form_name', $ name); $ subject = isset ($ _POST ['pt_chk_form_subject'])? $ _POST ['pt_chk_form_subject']: "; update_post_meta ($ post_id, 'pt_chk_form_subject', $ subject); $ email = isset ($ _POST ['pt_chk_form_email'])? $ _POST ['pt_chk_form_email']:"; update_post_meta ($ post_id, 'pt_chk_form_email', $ email); $ phone = isset ($ _POST ['pt_chk_form_phone'])? $ _POST ['pt_chk_form_phone']: "; update_post_meta ($ post_id, 'pt_chk_form_phone', $ phone); 
Nadat de nonce-waarde voor formulieren en gebruikersmachtigingen zijn geverifieerd, samen met een controle om te controleren of we het juiste berichttype hebben, kunnen we de geposte formulierwaarden testen en de waarden veilig opslaan in de database.
Onze selectievakjes zijn nu volledig functioneel, dus we kunnen doorgaan en de eigenlijke paginasjabloon implementeren! Voeg in de hoofdthema van het root-thema een nieuwe map toe met de naam pagina-templates, en voeg een nieuw bestand toe met de naam form-page-template.php.
Voeg de volgende code toe aan het nieuwe bestand om een ​​blanco paginasjabloon te maken.
 
 
 
  
 
 
 
Om de complexiteit van de code te verminderen, valideert ons contactformulier de gebruikersinvoer niet, en hebben we de gebruikelijke formuliercontroles en validatie uitgevoerd, omdat we ons puur willen concentreren op het dynamisch maken van de formulieruitvoer zonder externe code.
Eerst moeten we de selectievakjes van het dynamische contactformulier ophalen.
Dan kunnen we de formuliercode toevoegen. Dit is erg vergelijkbaar voor elk formulierveld. Laten we eens kijken naar de naam veldcode.
  
 
We testen de waarde van het selectievakje van de paginasjablooninstellingen en geven alleen het formulierveld af als dit is aangevinkt. Anders wordt niets uitgevoerd. Dit wordt herhaald voor elk formulierveld.
Nadat het formulier is verzonden, sturen we een e-mail naar de beheerder van de site en geven een bericht weer op het scherm. Alles bij elkaar opgeteld, hebben we onze sjabloon voor de uiteindelijke paginasjabloon.
 
 
 
 E-mail succesvol verzonden!
";?> 
  
Dynamische vormpaginasjabloon!
    
    
    
    
  
 
  
 
 
 
Als u wilt testen of alles goed werkt, controleert u of alle selectievakjes voor formulierpagina's zijn aangevinkt en werkt u het bericht bij. Kijk dan eens naar de paginasjabloon aan de voorkant.
Probeer nu het vinkje bij enkele selectievakjes voor formulierpagina's te verwijderen. Alleen de gespecificeerde velden worden uitgevoerd. U hebt volledige controle over hoe het formulier wordt weergegeven! In de onderstaande schermafbeelding heb ik de selectievakjes e-mail en telefoon uitgeschakeld.
Opmerking: als u werkt aan een lokale WordPress-omgeving, dan is de mail functie verzendt de e-mail mogelijk niet. Het werkt alleen als u een e-mailserver hebt ingesteld.
Het formulier kan eenvoudig worden uitgebreid om een ​​willekeurig aantal besturingselementen van elk type toe te voegen. U kunt bijvoorbeeld een optioneel CAPTCHA-veld aan uw formulier toevoegen of de volgorde van de uitgevoerde velden of zelfs de tekst voor de koptekst / labels van het formulier opgeven. Het punt hier is dat u dynamische paginasjablonen kunt gebruiken om uw formulier naar wens aan te passen. De mogelijkheden zijn letterlijk eindeloos!
Onze paginasjabloonregelingen organiseren
U hebt misschien gemerkt dat er een aantal bruikbaarheidsproblemen zijn met de beheerfuncties voor onze dynamische paginasjabloon. Functioneel is het prima, maar idealiter moeten de dynamische bedieningselementen voor paginasjablonen zich in dezelfde metabox bevinden als de vervolgkeuzelijst met paginasjablonen. 
Vergeet niet dat de reden dat we onze bedieningselementen voor paginasjablonen eerst aan een afzonderlijke metabox moesten toevoegen, was omdat er momenteel geen WordPress-hook beschikbaar is om aangepaste besturingselementen rechtstreeks aan de meta-vakken van de paginasjabloon toe te voegen.
Wanneer een dynamische paginasjabloon is geselecteerd, willen we alleen dat de besturingselementen die aan die sjabloon zijn gekoppeld zichtbaar zijn. We kunnen beide vereisten invullen door enkele aangepaste CSS en JavaScript toe te voegen aan de pagina-editor.
Concreet moeten we:
 
Verberg de meta-box van het formulier.
 
Wacht tot de pagina voor de beheereditor volledig is geladen.
 
Verplaats de formulierbesturingselementen naar de metagox 'Paginakenmerken'.
 
Geef alleen de besturingselementen van het beheerdersformulier weer als de bijbehorende paginasjabloon is geselecteerd.
 
Begin met toevoegen css en js mappen naar de hoofdmap van uw kindthema. Binnen in de css map maak een style.css bestand, en in de js map maak een script.js het dossier. Je kunt deze alles wat je wilt echter wel noemen. Vergeet niet om een ​​notitie van de bestandsnamen te maken, en vervang ze in de code van wachtrij-scripts.
Vervolgens moeten we beide bestanden in de wachtrij plaatsen enkel en alleen op het scherm van de pagina-editor. We willen niet dat ze worden toegevoegd allemaal admin pagina's. Registreer een nieuwe actiehaak in de in het() methode om scripts op beheerderspagina's te laden en de callback-functie toe te voegen om de scriptbestanden in te checken.
Merk op hoe we ons richten op de pagina berichttype en vervolgens de post-new.php of post.php admin pagina's. Dus, in principe, tenzij we in de pagina-editor zitten, worden onze scripts niet geladen, wat we willen.
Laten we nu verder gaan en beginnen met het toevoegen van CSS en JavaScript om de besturingselementen van formulierpagina's aan te passen. Verberg eerst de hele meta-doos met CSS door deze toe te voegen aan style.css:
# form-page-template-meta-box display: none; 
We hadden dit met JavaScript kunnen doen, maar we willen dat de formulier-metabox onmiddellijk wordt verborgen. Als we het via JavaScript hadden gedaan, zouden we moeten wachten tot de pagina is geladen en zou je een kleine flits zien als de metabox op het scherm werd weergegeven en vervolgens verborgen was met JavaScript. Dus het gebruik van CSS in dit geval is beter.
Nu voor de JavaScript. Voeg dit toe aan script.js.
jQuery (document) .ready (functie ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); // Verplaats besturingselementen naar de metabox 'Page Attributes' en verberg ze op standaard form_controls.insertAfter ('#page_template') .hide (); function displayControls (ptStr, sel) if (ptStr! == pt.val ()) sel.hide (); else sel.toggle () ; // Bel op page load displayControls ('paginasjablonen / formulier-pagina-template.php', form_controls); // Telkens wanneer dropdown-wijzigingen worden weergegeven pt.on ('change', function () displayControls ( this.value, form_controls);););
Ik ga niet in op een groot aantal details over het JavaScript, maar hier is het overzicht.
We cachen eerst een paar CSS-selectors en verplaatsen de besturingselementen voor beheerdersformulieren naar de Paginakenmerken metabox. Dan hebben we een displayControls () functie die de formulierbesturingselementen verbergt of weergeeft, afhankelijk van de huidige waarde van de vervolgkeuzelijst met paginasjablonen. Wij bellen displayControls () bij het laden van de pagina en telkens wanneer de vervolgkeuzelijst wordt gewijzigd, om er zeker van te zijn dat we altijd synchroon lopen.
Met de toegevoegde CSS en JavaScript worden de besturingselementen voor formulierpagina's nu weergegeven in de juiste metabox en worden alleen weergegeven als de bijbehorende paginasjabloon is geselecteerd.
Dit ziet er veel beter uit en is veel intuïtiever voor de gebruiker. Omdat metaboxen kunnen worden verplaatst in WordPress-beheerdersschermen, hoeven onze dynamische paginasjabloonregelaars zich niet altijd in de buurt van de vervolgkeuzelijst met paginasjablonen te bevinden! We hebben dit probleem op een elegante manier opgelost om ervoor te zorgen dat onze bedieningselementen altijd direct onder de vervolgkeuzelijst met paginasjablonen worden weergegeven!
Blog Posts Dynamische paginasjabloon
Ons volgende dynamische paginasjabloon toont een lijst met uw laatste blogberichten. Maar in plaats van alleen alle berichten te vermelden, implementeren we een keuzelijst (vergelijkbaar met een vervolgkeuzelijst) waarmee u de postcategorie kunt kiezen. Niet alleen dat, je zult ook in staat zijn om te selecteren meerdere postcategorieën.
Begin door een nieuwe metabox toe te voegen in add_page_template_meta_boxes ().
En nu moeten we de callback-functie implementeren om onze metabox te maken.
ID, 'blog_category', waar); $ categories = get_categories (); ?> 
 :  % 3 $ s (% 4 $ s)', esc_attr ($ categorie-> cat_ID), esc_attr (geselecteerd ($ categorie-> cat_ID, $ this-> q ($ categorie-> cat_ID, $ blog_category))), esc_html ($ categorie-> cat_name), esc_html ( $ categorie-> category_count)); ?>  
 
Laten we dit opsplitsen. We definiëren eerst een variabele om de lijst met geselecteerde postcategorieën (indien aanwezig) bij te houden vanaf de laatste keer dat het bericht werd bijgewerkt. Een andere variabele slaat een reeks van alle bestaande categorieën op.
Opmerking: we hebben al een nonce-veld van onze vorige paginasjabloon, zodat we hier geen ander veld hoeven te gebruiken, omdat we op dezelfde beheerderspagina zijn.
Vervolgens doorlopen we de lijst met sitecategorieën en voeren we een vervolgkeuzemenu uit. Elke categorie die eerder was geselecteerd, wordt opnieuw geselecteerd om alles gesynchroniseerd te houden.
Je hebt misschien gemerkt dat een van de argumenten voor gekozen() is een functieaanroep. Normaal gebruiken we gewoon gekozen() om twee waarden te vergelijken om te bepalen of het huidige item als geselecteerd moet worden gemarkeerd. Omdat we echter meer dan één categorie kunnen selecteren, is onze database-instelling altijd een reeks waarden (zelfs als we eigenlijk slechts één categorie selecteren).
De functie q () is een hulpfunctie waarmee we het huidige lijstitem kunnen vergelijken met de reeks opgeslagen categorieën.
Voor elke categorie wordt de categorie-ID doorgegeven q () samen met de opgeslagen categoriereeks. Als de huidige categorie in de lijst met opgeslagen categorieën staat, wordt de huidige categorie teruggegeven gekozen() en komt overeen met het eerste argument. Dit zal veroorzaken gekozen() om de huidige categorie te markeren als geselecteerd. Dit is een elegante manier om meerdere opties voor één besturingselement af te handelen.
Het enige wat we nu hoeven te doen, is updaten save_page_template_meta () om te gaan met het opslaan van blogpostcategorieën. Voeg deze code toe om precies dat te doen.
Nu moeten we de paginasjabloon voor blogberichten maken. Binnen uw kindthema's pagina-templates map, maak een nieuw bestand met de naam blog-pagina-template.php, en voeg de volgende code toe.
 
 
 
  $ paged, 'cat' => $ cat, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post'); $ blog_posts = nieuwe WP_Query ($ query_args); ?> have_posts ()):?> have_posts ()): $ blog_posts-> the_post (); ?>    
 
 
 
Het enige echte verschil met onze vorige dynamische paginasjabloon is de code in de 
 HTML-tag, dus laten we dit nu eens nader bekijken.
We stellen eerst de waarde in van de wisselbare queryvariabele, die wordt gebruikt om berichten over meerdere pagina's weer te geven, afhankelijk van het aantal pagina's dat wordt geretourneerd uit onze WordPress-query. Vervolgens krijgen we alle geselecteerde categorieën in de metabox van de pagina-editor. De categoriearray wordt omgezet in een tekenreeks en krijgt een standaardwaarde als deze leeg is. Een nieuwe WordPress-query wordt vervolgens gemaakt en de resultaten worden in een standaardlus uitgevoerd.
Het belangrijkste hier is dat we precies kunnen bepalen welke categorieën worden doorgegeven aan het query-object, via de selecties die in de metagame van de pagina-editor zijn gemaakt. 
Het enige dat we nu moeten doen is de metabox van de blogcategorieën verbergen en het lijstbeheer verplaatsen naar de Paginakenmerken metabox. Net zoals we eerder deden.
Binnen style.css werk de stijlen bij om de metatab met blogposts te verbergen:
# form-page-template-meta-box, # blog-page-template-meta-box display: none; 
De script.js bestand heeft een beetje meer code nodig om te worden toegevoegd. Hier is het volledig bijgewerkte bestand.
jQuery (document) .ready (functie ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); var blog_post_controls = $ ("#blog_pt_wrapper"); // Besturingselementen verplaatsen naar 'Page Attributes' metabox en verberg ze standaard form_controls.insertAfter ('#page_template') .hide (); blog_post_controls.insertAfter ('#page_template') .hide (); function displayControls (ptStr, sel) if ( ptStr! == pt.val ()) sel.hide (); else sel.toggle (); // Bel op page load displayControls ('pagina-sjablonen / formulier-pagina-template.php', form_controls); displayControls ('paginasjablonen / blog-pagina-sjabloon.php', blog_post_controls); // Oproep telkens drop-down veranderingen pt.on ('veranderen', functie () var controls; if (this.value === 'paginasjablonen / formulier-pagina-sjabloon.php') controls = form_controls; blog_post_controls.hide (); else if (this.value === 'paginasjablonen / blog-pagina-template.php ') controls = blog_post_controls; form_controls.hide () else // verberg alle blog_post_controls.h ide () form_controls.hide ();  displayControls (this.value, controls); ); );
De meeste veranderingen die het vermelden waard zijn, zijn in de .op ( 'change') functie. Omdat we nu meer dan één dynamische paginasjabloon hebben, moeten we testen om te zien welke is geselecteerd in de vervolgkeuzelijst en dit in de bijbehorende elementselector doorgeven aan displayControls ().
We moeten ook alle andere besturingselementen voor paginasjablonen verbergen, behalve de geselecteerde. En als de standaardpaginasjabloon wordt weergegeven, verbergen we alle bedieningselementen voor paginasjablonen. De JavaScript-code kan verder worden geoptimaliseerd, maar omdat we slechts twee dynamische paginasjablonen actief hebben, is deze goed genoeg voor onze behoeften.
Nu deze wijzigingen zijn aangebracht, hebben we nu twee werkende dynamische paginasjablonen met elk van hun bijbehorende besturingselementen direct onder de vervolgkeuzelijst met paginasjablonen weergegeven.
Paginasjablonen voor iedereen
Eerder heb ik gezinspeeld op hoe je in WordPress 4.7+ nu paginasjablonen kunt toewijzen ieder berichttype. Voorafgaand aan WordPress 4.7 kon je ze alleen toewijzen aan pagina's, maar niet meer!
Het enige wat u hoeft te doen is een extra regel toevoegen aan het opmerkingenblok in de kop van de paginasjabloon en een door komma's gescheiden lijst met postsoorten opgeven waarvan u wilt dat de paginasjabloon beschikbaar is op.
De naam van het berichttype moet hetzelfde zijn als de slug die is ingevoerd toen het berichttype voor het eerst werd geregistreerd, anders wordt het genegeerd.
We kunnen dus paginasjablonen weergeven voor elk berichttype, maar hoe zit het met dynamische paginasjablonen? Met slechts een paar aanpassingen kunnen deze ook worden ondersteund. Laten we eens kijken wat nodig is.
Gelukkig zijn, naast het toevoegen van een regel code bovenaan je paginasjabloon, alle noodzakelijke wijzigingen in één bestand: functions.php.
Ten eerste moeten we de CSS van de dynamische paginasjabloon en JavaScript niet alleen op pagina's in wachtrij plaatsen, maar voor alle berichttypen die we dynamische paginasjablonen willen ondersteunen. Dus, in enqueue_editor_scripts (), we kunnen zoiets doen.
Nu worden de scripts van de dynamische paginasjabloon geladen op pagina's en het aangepaste berichttype van de film.
Volgende, in add_page_template_meta_boxes (), update elke instantie van add_meta_box (



		
			
	   
	




Code