[Wordpress] Thema mappenstructuur; client-/serverside

[TheNephilim]

Gezien ik toch al bezig ben met een 'rampage' wat betreft werkwijze en dergelijke; dit ook maar eens in de groep gooien.

Wordpress thema's

Die maak ik, voor klanten. Dat kunnen bedrijven zijn die techniek uitbesteden en zelf alleen een ontwerp maken. Soms besteden wij juist het ontwerp uit, maar die eerste komt het vaakst voor.

Een 'Wordpress theme' is een kant en klaar pakket, alles moet erin zitten. Dat betekend één mapje met waarin client- en serverside code. Over het algemeen php, html/css en enkele afbeeldingen. Ik vroeg me af of het patroon dat veel frameworks gebruiken, ook niet te gebruiken is in een thema. Dus dingen meer gescheiden en vooral het vendor mapje vind ik een interessante. Makkelijk zien wat er allemaal gebruikt word.

Goed, dat is makkelijker gezegd dan gedaan. Hieronder dus een schets van hoe het er nu uit ziet en daarna een nieuwe situatie. Goed om voor mezelf eens uiteen te zetten, maar wellicht hebben jullie tips.

Huidige situatie

code:

theme/
-- libraries/
-- resources/
-- -- css/
-- -- fonts/
-- -- img/
-- -- js/
-- -- -- bootstrap/
-- -- less/
-- -- -- bootstrap/

De eerste; libraries/ komt eigenlijk niet vaak voor. De meeste websites hebben geen 3rd party libs nodig. Meestal werken we met plugins, waar bepaalde functionaliteit in zit. De rest van de functionaliteit zit verwerkt in de functions.php van het thema, of in het parent theme die we gebruiken. Daar wil ik overigens vanaf, een parent theme.

Beter, handiger, overzichtelijker?

code:

theme/
-- static/
-- -- css/
-- -- fonts/
-- -- img/
-- -- js/
-- less/
-- vendor/
-- -- bootstrap/
-- -- -- less/
-- -- -- fonts/
-- -- -- img/
-- -- -- js/
-- functions.php
-- header.php
-- index.php
-- footer.php

static/ lijkt me wat duidelijker dan resources/ voor de statische content. assets/ is ook nog een kandidaat, alleen duidt de eerste meer op statische content.

less/ is een niveau hoger te vinden. Daarin zit een custom.less waarin we alle benodigde Boostrap less files en de eigen stijl, compileren naar één custom.min.css die in assets/css/ terecht komt. De less/ directory moet niet gedeployed worden, maar slechts in onze eigen repository en lokale dev-mapjes aanwezig zijn.

Het nadeel is dat in vendor/ zowel client- als serverside code aanwezig is. Moet niet heel veel uitmaken, gezien de 'vendors' neem ik aan verschillend zijn in hun doel.

Dus...

Het doel is om duidelijke structuur te krijgen in de folders. De vraag die nog rest is, waar laat ik extra classes en dergelijke? Het liefst zou ik autoload gebruiken, maar dat is misschien wat lastig met spul van 3rd parties. Anyway, ik heb nog een folder nodig waar ik dat in kwijt kan. libraries/ wellicht, of iets in die richting.

Heeft iemand nog tips? Ik heb het idee dat het zoiets moet worden, maar heb toch het idee dat het beter kan.