Die gute Organisation der Dateien und Funktionen in einem WordPress-Theme (beziehungsweise natürlich ganz allgemein einem Code-Projekt) hilft dabei, das ganze übersichtlich zu halten. Hier stelle ich kurz meinen aktuellen Stand in Sachen Organisation der Dateien und Funktionen eines WordPress-Themes vor.
Die folgende Struktur ist von meinem Photographus-Theme. Ich führe hier nicht komplett alle Dateien und Ordner auf (im GitHub-Repo findet ihr alles), es fehlen:
- die einzelnen SCSS-Dateien, die importiert werden.
- Dateien und Ordner für Build-Skripte und andere Dev-Tools.
Hier die Datei- und Ordner-Struktur des Themes (Format übernommen von der Jekyll-Doku):
.
├── assets/ # all JS, CSS, images
| ├── css/
| └── scss/
| ├── abstracts/
| ├── base/
| ├── components/
| ├── conditionals/
| ├── layout/
| ├── templates/
| ├── editor-style.scss
| └── photographus.scss
| ├── images/
| └── starter-content/
| └── featured-image-about-page.jpg
| └── js/
| ├── customize-controls.js
| ├── customize-preview.js
| ├── functions.js
| └── masonry.js
├── inc/ # files with functions
| ├── customizer/
| ├── callbacks.php
| ├── register.php
| └── scripts-and-styles.php
| ├── actions.php
| ├── cache-functions.php
| ├── filter-functions.php
| ├── filters.php
| ├── front-page-panel-functions.php
| ├── template-functions.php
| ├── template-tags.php
| └── theme-updates.php
├── languages/ # language files folder (if not on W.org)
├── partials # template parts
| ├── attachment/
| └── content-image.php
| ├── footer/
| ├── nav.php
| ├── theme-author.php
| └── widget-area.php
| ├── front-page/
| ├── content-latest-posts-panel-short-version.php
| ├── content-latest-posts-panel.php
| ├── content-post-and-page-panel.php
| └── content-post-grid-panel.php
| ├── header/
| ├── branding.php
| └── nav.php
| └── post/
| ├── content-none.php
| ├── content-single.php
| └── content.php
├── templates/ # page templates
| ├── large-featured-image-no-sidebar.php
| ├── large-featured-image.php
| ├── large-portrait-featured-image-no-sidebar.php
| ├── large-portrait-featured-image.php
| └── no-sidebar.php
├── archive.php
├── comments.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── image.php
├── index.php
├── page.php
├── readme.md
├── screenshot.png
├── search.php
├── sidebar.php
├── single.php
└── style.css
Code-Sprache: PHP (php)
Erklärung der Struktur
Auf der obersten Ebene befinden sich lediglich die Dateien, die sich nicht in einen Unterordner verschieben lassen.
Der assets
-Ordner
Im assets
-Ordner finden die SCSS-, JavaScript- und Bild-Dateien Platz. Im scss
-Ordner befinden sich weitere Ordner mit Dateien, die in die editor-style.scss
und photographus.scss
importiert werden:
abstracts/
ist für die Dateien mit Variablen, Mixins und Funktionen.base/
für das Styling der grundlegenden HTML-Elemente.components/
für die Dateien, die das Styling von Komponenten übernehmen (etwa einen Beitrag, Kommentar und ein Grid-Item).conditionals/
für Browser-spezifische Styles.layout/
für Layout-Styles (Grids, Header, Footer et cetera).templates/
für Template-spezifische Styles (Front-Page-Template-Styles, Regeln für Seiten ohne Sidebar …).
Die Organisation des SCSS ist von verschiedenen Ansätzen inspiriert – spontan fällt mir Atomic Design und RSCSS ein.
Der inc
-Ordner
Im inc
-Ordner sind alle PHP-Funktionen des Themes zu finden. Die functions.php
besteht lediglich aus Aufrufen, um diese Dateien einzubinden. Die Funktionen sind – wenn möglich und sinnvoll – je nach Aufgabenbereich in unterschiedliche Dateien gruppiert.
actions.php
– alleadd_action()
-Aufrufe.cache-functions.php
– alle Funktionen rund um Transients.filter-functions.php
– Funktionen, die überadd_filter()
aufgerufen werden.filters.php
– alleadd_filter()
-Aufrufe.front-page-panel-functions.php
– alle Funktionen, die die Front-Page-Panels-Funktion des Themes betreffen.template-functions.php
– alle Funktionen, die nicht direkt aus den Template-Dateien aufgerufen werden und sich nicht mehr sinnvoll in andere Dateien gruppieren lassen.template-tags.php
– alle Funktionen, die direkt aus den Template-Dateien aufgerufen werden.theme-updates.php
– Funktionen für die Theme-Update-Funktion.
Da ich die Customizer-Funktionalitäten in drei Dateien unterteilt habe, gibt es dafür einen eigenen Unterordner customizer
.
callbacks.php
– alle Customizer-Callback-Funktionen.register.php
– Funktion zur Erstellung von Settings, Controls und Sections.scripts-and-styles.php
– Funktionen um Skripte und Stylesheets in den Customizer einzubinden.
Der partials
-Ordner
Der partials
-Ordner ist für Dateien, die sich um die Anzeige von Theme-Teilen kümmern und in andere Dateien eingebunden werden. So gibt es hier beispielsweise die Datei header/branding.php
, die den Website-Titel und die Beschreibung anzeigt, und die post/content*
-Dateien für die Anzeige des Beitragsinhalts.
Der templates
-Ordner
Im Ordner templates
sind alle Post-Type-Templates-Dateien zu finden.
Soweit zu meinem aktuellen Stand, der natürlich nur genau das ist: mein aktueller Stand und vermutlich eher nicht die eleganteste oder beste Lösung. Habt ihr Anmerkungen, Fragen und/oder Verbesserungsvorschläge? Dann schreibt einen Kommentar 🙂