Share
In deze beginnershandleiding leer je over het maken van je eigen ProcessWire CMS-thema's. We zullen een supereenvoudige site maken met sjablonen, velden, themastructuren en PHP-variabelen.
Vergeet niet om snel aan de slag te gaan door de eerste van onze zelfstudies te volgen ProcesWire CMS installeren en installeren.
In tegenstelling tot andere CMS's zoals WordPress, heeft ProcessWire geen themaselectieproces als onderdeel van de beheerder, waar u thema's kunt wijzigen door op een goed gelabelde knop te drukken. Dit is echter niet noodzakelijk een slechte zaak. ProcessWire heeft zijn eigen systeem: de map "site / templates" die alle bestanden bevat die bij uw thema horen.
De beste manier om een leeg thema te maken, is door het te selecteren website-blank profiel tijdens het installeren van ProcessWire (PW). Site-blank bevat de meest elementaire sitestructuur binnen uw "site / sjablonen" -map - dit omvat mappen en bestanden
U kunt desgewenst na de installatie een nieuwe "site / sjablonen" -map maken in plaats van te beginnen met het profiel van de site-blank, maar zorg ervoor dat u ten minste de bovenstaande bestanden hebt.
Door te leren hoe PW zijn pagina's doorloopt, kunnen we later onze aangepaste sjablonen maken.
Wanneer een PW-pagina wordt aangevraagd (bijvoorbeeld www.benbyford.com/about), kijkt PW naar de pagina binnen de CMS en controleert hij welke sjabloon is toegewezen; in dit geval heb ik de sjabloon "basispagina" toegewezen; het bestand "basic-page.php" binnen de "site / templates /" wordt weergegeven en de gevraagde HTML wordt naar de gebruiker verzonden (PW maakt ook eenvoudig gebruik van andere formaten zoals JSON of XML mogelijk).
Tip: standaard worden sjablonen binnen PW aangeduid met dezelfde naam als hun PHP-sjabloonbestand, maar u kunt de sjabloonnaam en het bijbehorende bestand op elk gewenst moment na het maken wijzigen binnen de PW-beheerder.
Laten we bijvoorbeeld wat HTML & PHP toevoegen aan ons "home.php" -bestand:
<?php echo $page->titel; ?> titel; ?>
Ga nu naar de URL van uw site in de browser en merk het op titel en h1 moet nu worden gevuld met de titel van uw startpagina (standaard: Huis).
Het maken van veel sjablonenbestanden met zeer vergelijkbare HTML is niet erg efficiënt, dus laten we een paar .inc PHP-bestanden maken die in elke sjabloon kunnen worden opgenomen. Een gemeenschappelijk structuurpatroon binnen het thema is het maken van "head.inc" en "foot.inc" -bestanden die worden gebruikt om veelgebruikte HTML-code te construeren zoals onze , navigatie, logo, footer en scripts.
Laten we ons "home.php" -bestand opnieuw bewerken om het bovenstaande te implementeren:
titel; ?>
Voeg onze head.inc toe:
<?php echo $page->titel; ?>
En foot.inc:
Waarom zou ik het .inc-bestandstype gebruiken dat ik je hoor horen? Nou, bij het toevoegen van een nieuwe sjabloon in de admin van PW kijkt het systeem naar de site / templates / map voor nieuwe .php-bestanden die nog niet door een sjabloon zijn gebruikt. Door het .inc-bestandstype te gebruiken in plaats van .php raakt u niet in de war tussen sjabloonbestanden en bestanden die u wilt omvatten in je sjabloon.
U kunt zoveel pagina's maken als u wilt voor pagina's op uw PW-site, ga wild! Laten we bijvoorbeeld een nieuwe sjabloon maken voor een nieuwe pagina met de naam "Contact". Ik begin met:
Het CMS weet nu wat uw nieuwe sjabloonbestand is en het wordt nu weergegeven als een sjabloonoptie bij het maken van een nieuwe pagina. Probeer een nieuwe pagina onder uw huis te makenpagina, noem het "Contact" en selecteer onze nieuwe contact-paginasjabloon. U hebt nu ten minste twee actieve sjablonen op uw site: "home", en “contact-pagina”.
Verbazingwekkend! We weten nu hoe u sjabloonbestanden kunt maken, deze kunt toevoegen aan PW en pagina's kunt maken met onze nieuwe sjablonen.
Ten slotte willen we weten hoe we inhoud aan de PW-beheerder kunnen toevoegen in onze sjablonen en zelfs vanilla PHP kunnen gebruiken op onze site. Een van mijn favoriete dingen over PW is dat het de thema-coder direct toegang geeft tot inhoud via variabelen en een reeks nuttige functies voor de meest eenvoudige functionaliteit. Alles wat het niet heeft, kunt u zelf in PHP schrijven zonder u zorgen te hoeven maken over wat het systeem met uw code zou kunnen doen. Je moet ook geen strikte klassenstructuren of haken volgen (ik kijk naar jou Drupal). Met andere woorden: het geeft je een set tools en gaat dan uit je weg.
Voor een samengevatte lijst van alle variabelen en functies binnen PW, bekijk de Cheatsheet API van Processwire en voor verdere uitleg, zie de PW-variabele docs.
Laten we snel enkele van de hoofdvariabelen illustreren om onze sjablonen functioneler te maken.
Als we onze home.php opnieuw bewerken, voegen we de inhoud van de paginatitel, het hoofdgedeelte en de zijbalk toe met behulp van de $ pagina veranderlijk. $ paginageeft u toegang tot alle inhoud die is geüpload naar die pagina binnen de PW-beheerder.
". $ pagina-> titel.""; // output body copy echo $ page-> body;?>sidebar; ?>
Laten we ook een eenvoudige navigatie toevoegen aan onze hoofd.inc met behulp van de $ pagina's veranderlijk. $ pagina's geeft u toegang tot andere pagina's met uw site, die u vervolgens kunt vragen voor inhoud.
<?php echo $page->titel; ?>
Nu weet u wat van de basisprincipes van thema's in PW. Ik zou u willen verzoeken om eens naar enkele van de andere siteprofielen te kijken die bij de PW-download horen om te zien hoe ze gestructureerd zijn. Naar mijn mening kan experimenteren en feedback krijgen van de gemeenschap enorm nuttig zijn.
Tip: u zult veel modules vinden die u kunnen helpen bij het bouwen van uw site op de modulespagina. Als je minnaar bent van LESS en scripts-minificatie, raad ik de AIOM-module aan.
En let natuurlijk op toekomstige tutorials hier bij Envato Tuts+.
Accentsconagua