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:

Ordner

Es gibt zwei Speicherorte für Skin-Ordner:

Der Ordner des im Plugin enthaltenen Standard-Skins heißt default (unabhängig vom eigentlichen Skin-Namen), dieser muss immer vorhanden sein:

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

Skin-Auswahl
Skin-Auswahl unter immonex > Einstellungen

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

1
2
3
4
5
6
7
8
.../wp-content/plugins/immonex-kickstart/skins
├── default
└── one

.../wp-content/themes/CHILD-THEME-NAME/immonex-kickstart
├── agnus
├── denise
└── paula

Aufbau

Der grundlegende Aufbau eines Kickstart-Skins ist denkbar einfach:

1
2
3
4
5
6
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. (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 Datei index.php enthält aktuell nur den Namen des Skins für die Ausgabe:

1
2
3
4
5
6
<?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 zu 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.../wp-content/plugins/immonex-kickstart/skins
└── default
├── css
│ └── index.css
├── fonts
├── images
├── js
├── property-list
├── property-search
├── scss
├── single-property
├── archive-property.php
├── index.php
├── property-search.php
└── single-property.php

.../wp-content/themes/CHILD-THEME-NAME/immonex-kickstart
└── default
├── css
│ └── index.css
└── single-property.php

Komplett

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

Hierzu wird zunächst der Ordner default aus dem Plugin-Skins-Ordner unter einem eigenen Namen in das Verzeichnis des Child-Themes (Unterordner immonex-kickstart) kopiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.../wp-content/themes/CHILD-THEME-NAME/immonex-kickstart
└── my-custom-skin
├── css
│ └── index.css
├── fonts
├── images
├── js
├── property-list
├── property-search
├── scss
├── single-property
├── archive-property.php
├── index.php
├── property-search.php
└── single-property.php

Im nächsten Schritt wird noch der Skin-Name in der Datei index.php angepasst, bevor dann der eigentliche Spaß losgeht! 😉

1
2
3
4
<?php
/**
* Skin Name: My Awesome Custom Skin
*/

Hier geht’s weiter: Standard-Skin im Detail