Skins

Ein Skin ist – technisch gesehen – ein einfacher Ordner, der alle für die Darstellung im Website-Frontend maßgeblichen Ressourcen in (möglichst) einheitlicher, strukturierter Form enthält:

• Templates (PHP)
• JavaScript-Dateien
• CSS-Dateien
• Bilddateien
• Fonts

Ordner

Basis-Plugin

Mitgelieferte Kickstart-Skins sind im Verzeichnis des Kickstart-Basis-Plugins unter skins zu finden:

.../wp-content/plugins/immonex-kickstart/skins/

Aktuell ist hier nur der Ordner des Standard-Skins enthalten (default):

.../wp-content/plugins/immonex-kickstart/skins/default

!> Die Ordnernamen sind unabhängig vom eigentlichen (angezeigten) Skin-Namen, der in der Datei index.php festgelegt wird.

Add-ons

Analog zum Basis-Plugin befinden sich Skins installierter Add-ons im jeweiligen Add-on-Plugin-Verzeichnis:

.../wp-content/plugins/ADD-ON-ORDNERNAME/skins/

Beispiel Team Add-on:
.../wp-content/plugins/immonex-kickstart-team/skins/

Custom Skins

Der passende, update-sichere Ort für eigene oder angepasste Skins ist der Unterordner immonex-kickstart im (Child-)Theme-Verzeichnis:

.../wp-content/themes/(CHILD-)THEME-NAME/immonex-kickstart/

Für Custom Add-on Skins entsprechend:
.../wp-content/themes/(CHILD-)THEME-NAME/ADD-ON-ORDNERNAME/
Beispiel Team Add-on: .../wp-content/themes/(CHILD-)THEME-NAME/immonex-kickstart-team/

Auswahl

Skin-Auswahl (Basis-Plugin) unter immonex → Einstellungen

Die zugehörige Ordner-Struktur könnte so aussehen:

.../wp-content/plugins/immonex-kickstart/skins
╷
├── /default
└── /one
.../wp-content/themes/(CHILD-)THEME-NAME/immonex-kickstart
╷
├── /agnus
├── /denise
└── /paula

Add-on-Skins werden im zugehörigen Tab der Plugin-Optionen oder – je nach Einsatzbereich – auch auf alternativen Seiten ausgewählt.

Aufbau

Der grundlegende Aufbau eines Kickstart-Skins ist denkbar einfach:

skin-name
╷
├── /css
│   ╷
│   └── index.css
│
├── /js
│   ╷
│   └── index.js
│
└── index.php

Die Dateien index.css und index.js des aktiven Skins werden im Frontend automatisch eingebunden. Das gilt auch für weitere Dateien mit den folgenden Namen, sofern vorhanden:

• extend.css / extend.js
• custom.css / custom.js
• frontend.css / frontend.js
• skin.css / skin.js

Je nach Umfang bietet es sich an, bei der Entwicklung mit mehreren Quelldateien zu arbeiten, die anschließend per Bundler bzw. Präprozessor à la webpack, Sass & Co. kompiliert werden. Die kompilierten und/oder minimierten Varianten der Dateien sollten in diesem Fall im Ordner assets gespeichert werden:

skin-name
╷
├── /assets
│   ╷
│   ├── index.css
│   └── index.js
…

Auch die Aufteilung der CSS- und JS-Dateien in separate Unterordner ist hier möglich:

…
╷
├── /assets
│   ╷
│   ├── /css
│   │   ╷
│   │   ├── index.css
│   │   ├── custom.css
│   │   …
│   └── /js
│       ╷
│       ├── index.js
│       ├── extend.js
…       …

Jede der o. g. CSS/JSS-Dateien wird nur einmalig eingebunden. Sind mehrere Dateien gleichen Namens im Skin-Ordner enthalten, erfolgt die entsprechende Priorisierung anhand der Unterordner in dieser Reihenfolge:

• assets/css/ / assets/js/
• assets/
• css/ / js/

Ist also bspw. eine Datei custom.css in den Unterordnern assets und css enthalten, wird nur die Variante im Ordner assets im Website-Frontend geladen.

Die Datei index.php enthält aktuell nur den Namen des Skins für die Ausgabe:

<?php
/**
 * Skin Name: Quiwi
 */
die( "Don't event think about it!" );

Individuelle Anpassung

Partiell

Ist ein mitgeliefertes Kickstart-Skin grundsätzlich passend und sollen nur geringfügige optische Anpassungen vorgenommen werden, ist in den meisten Fällen das Überschreiben bzw. Ergänzen der betreffenden CSS-Stile via Customizer ausreichend. Auch bei weitergehenden Änderungen muss aber nicht zwingend mit einem individuellen Skin mit vollem Dateiumfang (Custom Skin) gearbeitet werden.

Stattdessen besteht die Möglichkeit, nur die anzupassenden Dateien eines vorhandenes Plugin-Skins im Child-Theme-Ordner zu überschreiben, dessen Name dem des Basis-Skin-Ordners (im Plugin-Verzeichnis) entspricht.

Sollen bspw. nur eigene Varianten der Dateien index.css und single-property.php zum Einsatz kommen, alles andere aber weiterhin vom Standard-Skin (Ordnername default) übernommen werden, ergibt sich die folgende Struktur:

Standard-Skin-Ordner (Plugin-Verzeichnis)

.../wp-content/plugins/immonex-kickstart/skins
╷
└── /default
    ╷
    ├── /assets ← Plugin-Version < 1.8: /css
    │   ╷
    │   ├── index.css
    │   └── index.js
    │
    ├── /fonts
    ├── /images
    ├── /property-list
    ├── /property-search
    ├── /single-property
    ├── archive-property.php
    ├── index.php
    ├── property-search.php
    └── single-property.php

Skin-Ordner mit angepassten Dateien (Theme/Child-Theme)

.../wp-content/themes/(CHILD-)THEME-NAME/immonex-kickstart
╷
└── default
    ╷
    ├── /assets ← Plugin-Version < 1.8: /css
    │   ╷
    │   └── index.css
    │
    └── single-property.php

Komplett

Sollen umfangreiche Anpassungen oder einer ganz individuelle Darstellung umgesetzt werden, ist ein vollständig benutzerdefiniertes Skin (Custom Skin) die passende Wahl. Hier kann wiederum das Standard-Skin als Basis verwendet werden, die dann schrittweise angepasst wird.

Als Grundlage für die Entwicklung eignen sich die aktuellen Quelldateien am besten, alternativ können hierfür aber die Inhalte des o. g. Ordners default im Basis-Plugin- bzw. Add-on-Skin-Ordner übernommen werden.

Das Custom Skin wird unter einem eigenen Ordnernamen in den Unterordner immonex-kickstart (bzw. Add-on-Plugin-Ordnername bei Add-on-Skins) des (Child-)Theme-Verzeichnisses hinterlegt:

Basis-Plugin Custom Skin

.../wp-content/themes/(CHILD-)THEME-NAME/immonex-kickstart
╷
└── my-custom-skin
    ╷
    ├── /assets
    │   ╷
    │   ├── index.css
    │   └── index.js
    │
    ├── /fonts
    ├── /images
    ├── /property-list
    ├── /property-search
    ├── /single-property
    ├── archive-property.php
    ├── index.php
    ├── property-search.php
    └── single-property.php

Add-on Custom Skin

.../wp-content/themes/(CHILD-)THEME-NAME/ADD-ON-ORDNERNAME
╷
└── /my-custom-add-on-skin
    ╷
    ├── /assets
    │   ╷
    │   └── index.css
    │
    ├── cpt-list
    ├── cpt-details
    ├── archive-cpt.php
    ├── single-cpt.php
    ├── index.php
    └── ...

!> Dateien und Ordner, die nur für die Entwicklung relevant sind (Dev-Konfiguration, zu kompilierende SCSS- und JavaScript-Quelldaten etc.) sollten in der final veröffentlichten Version des Skins (Produktivserver/Live-Website) nicht enthalten sein.

Skin-Name

Der erste Schritt jeder Custom-Skin-Entwicklung ist die Anpassung des Namens in der Datei index.php:

<?php
/**
 * Skin Name: CompoGlobalHyperMegaSkin
 */

Hier geht's weiter: Standard-Skin im Detail