Organisation von Dateien und Funktionen in einem WordPress-Theme – mein aktueller Stand

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 – alle add_action()-Aufrufe.
  • cache-functions.php – alle Funktionen rund um Transients.
  • filter-functions.php – Funktionen, die über add_filter() aufgerufen werden.
  • filters.php – alle add_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 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert