Die Dateien des Standard-Skins "Quiwi" des Kickstart-Basis-Plugins sind im Unterordner skins/default des Kickstart-Plugin-Verzeichnisses zu finden:
.../wp-content/plugins/immonex-kickstart/skins/default
Ebenso verhält es sich bei Add-on-Standard-Skins, wobei hier der jeweilige Add-on-Plugin-Ordner (.../wp-content/plugins/ADD-ON-ORDNERNAME) der Ausgangspunkt ist. Beispiel Team Add-on:
.../wp-content/plugins/immonex-kickstart-team/skins/default
Die Verwendung dieser Ordner als Vorlage für die Entwicklung eigener, sogenannter Custom Skins ist grundsätzlich möglich, besser hierfür eignen sich allerdings die aktuellen Quelldateien im jeweiligen Dev-Repository (Kickstart-Basis-Plugin bei GitHub). Diese enthalten zusätzlich u. a. die für das Skin relevanten JavaScript- und SCSS-Quellcodes.
default … ╷ ├── index.php │ ├── /assets ← ab Plugin-Version 1.8: kompilierte CSS- und JS-Dateien (nach Build-Kommando) │ ╷ │ ├── index.css │ └── index.js │ ├── /js ← ab Plugin-Version 1.8: nur JS-Quelldatei │ ╷ │ └── index.js │ ├── /scss ← (S)CSS-Quelldateien │ ╷ │ ├── /blocks │ │ ╷ │ │ ├── _immonex-widget.scss │ │ ├── … │ │ └── _inx-video-iframe.scss │ │ │ ├── _base.scss │ ├── _config.scss │ ├── _mixins.scss │ ├── _uikit-custom.scss │ └── index.scss │ ├── /fonts │ ╷ │ ├── _flaticon.scss │ ├── … │ └── Flaticon.woff …
Skin-Name
Die Datei index.php enthält lediglich den Namen des Skins, der im WP-Backend angezeigt wird, in der folgenden Form:
/**
* Skin Name: Quiwi
*/CSS & Sass
Die Datei assets/index.css (bis Plugin-Version 1.8: css/index.css) enthält alle für das Skin relevanten CSS-Stile und wird im Website-Frontend automatisch eingebunden. Beim Standard-Skin wird diese auf Basis der Daten im Ordner scss mit dem CSS-Präprozessor Sass kompiliert.
!> Wird das Git-Repository des Plugins als Grundlage für die Entwicklung eines eigenen Skins verwendet, wird der Ordner assets beim erstmaligen Aufruf eines Build-Befehls angelegt (z. B. npm run build oder npm run watch).
Hier wurde ein komponentenbasierter Ansatz verfolgt, der weitgehend der BEM-Methodik (Block, Element, Modifier) mit der Namenskonvention Two Dashes style entspricht.
Alle skinspezifischen Module (blocks) sowie Konfigurationsvariablen, Mixins und Grundelemente werden über die Einstiegsdatei index.scss eingebunden.
Ab der Plugin-Version 1.8 gehören hierzu nicht mehr die (S)CSS-Dateien folgender externer Libraries, die im Frontend zum Einsatz kommen:
Diese werden stattdessen über das Kern-Plugin eingebunden, um Inkompatibilitäten nach Updates zu vermeiden.
Auch die im Unterordner fonts enthaltenen Schriftarten werden seit Kickstart 1.8 nicht mehr via index.scss eingebunden, sondern über die JavaScript-Einstiegsdatei index.js (siehe unten).
Die für die Blöcke und Elemente verwendeten CSS-Klassennamen sind übrigens nicht nur in den PHP-Dateien des Skins enthalten, sondern (teilweise) auch in den skinübergreifenden Vue.js-Komponenten, die vom Kickstart-Plugin bereitgestellt werden (Standortkarten/-Autovervollständigung, spezielle Elemente des Suchformulars…). Die Benennung sollte also in eigenen Skins beibehalten werden, sofern diese Komponenten auch hier zum Einsatz kommen.
?> Bei der Entwicklung eines Custom Skins ist der Einsatz eines CSS-Präprozessors optional. Die Produktivversion des Skins, die im Child-Theme-Ordner hinterlegt ist, muss nur die Datei assets/index.css bzw. css/index.css enthalten.
JavaScript
… ╷ ├── /assets │ ╷ │ ├── … │ └── index.js ← ab Plugin-Version 1.8: kompilierte JS-Datei im Ordner assets │ ├── /js │ ╷ │ └── index.js ← ab Plugin-Version 1.8: Quelldatei im Ordner js …
Auch der JavaScript-Code, der für das Skin eingebunden werden soll, ist in einer einzelnen Datei gebündelt: assets/index.js (ab Plugin-Version 1.8, vorher js/index.js).
Beim Standard-Skin sowie allen weiteren Skins, die (zukünftig) mit Kickstart oder hierauf basierenden Add-ons ausgeliefert werden, wird diese Bündelung im Rahmen der Entwicklung automatisiert mit dem "JavaScript-Modul-Packer" webpack umgesetzt.
Die Quelldateien befinden sich im Unterordner js (ab Plugin-Version 1.8, vorher js/src).
Beim Standard-Skin enthält die Einstiegs-Quelldatei index.js auch Anweisungen für die Einbindung eines Skin-Symbolfonts sowie der o. g. SCSS-Hauptdatei:
// Vendor specific styles & fonts
import '../fonts/_flaticon.css';
// (S)CSS
import '../scss/index.scss';
````
?> Auch hier gilt: Ein *Custom Skin* kann auch **ohne** den Einsatz eines solchen Bundlers entwickelt werden. Sofern überhaupt spezieller JavaScript-Code hierfür benötigt wird, ist eine Datei `index.js` ausreichend. (Im Regelfall wird sich der Umfang des Skin-JS-Codes ohnehin in einem überschaubaren Rahmen bewegen.)
## Frontend-Komponenten
?> Alle folgenden Abschnitte beziehen sich nur auf das Standard-Skin des **Basis-Plugins**, Add-ons bringen im Regelfall ihre eigenen Komponenten und benutzerdefinierten Beitragsarten (*Custom Post Types*) mit.
### Archiv & Listenansicht
<pre class="tree">
…
╷
├── archive-property.php
├── /property-list
│ ╷
│ ├── filters-sort.php
│ ├── list-item.php
│ ├── map.php
│ ├── pagination.php
│ └── properties.php
…
</pre>
Das Template für die Standard-Archivseite der [Immobilien-Beitragsart](/beitragsarten-taxonomien) ist in der Datei `archive-property.php` enthalten. Die Komponenten - [Karte](/komponenten/karte), [Suchformular](/komponenten/suchformular), [Sortierauswahl](/komponenten/sortierung), [Listenansicht](/komponenten/liste) und [Seitennavigation](/komponenten/seitennavigation) - werden über die entsprechenden [Rendering Actions](filters-actions.html#rendering) eingebunden:
```php
if ( $immonex_kickstart->property_list_map_display_by_default ) {
do_action( 'inx_render_property_map' );
}
do_action( 'inx_render_property_search_form' );
do_action( 'inx_render_property_filters_sort' );
do_action( 'inx_render_property_list', array(
'is_regular_archive_page' => true
) );
do_action( 'inx_render_pagination', array(
'is_regular_archive_page' => true
) );Der Ordner property-list enthält die Vorlagen (Templates) für Immobilienlisten (properties.php und list-item.php), Standortkarte (map.php), Sortierauswahl (filters-sort.php und Seitennavigation (pagination.php).
?> Bei allen Templates werden die zu rendernden Daten jeweils im Array $template_data bereitgestellt.
Suchformular
… ╷ ├── property-search.php ├── /property-search │ ╷ │ ├── element-checkbox.php │ ├── … │ └── element-text.php …
Das Template property-search.php dient der Einbindung der vorgegebenen Elemente des Suchformulars, deren Vorlagen – separat pro Elementart – im Ordner property-search hinterlegt sind.
Detailansicht
…
╷
├── single-property.php
├── /single-property
│ ╷
│ ├── contact-person.php
│ ├── …
│ ├── element-hub.php
│ ├── …
│ └── virtual-tour.php
│
└── /images
╷
└── location-pin.png
Die Datei single-property.php enthält das Standard-Template für die Einzelansicht eines Immobilien-Beitrags.
Wie bei der Suche wurden die Templates der einzelnen Elementarten in einem Unterordner zusammengefasst: single-property (Jede dieser Vorlagen kann übrigens auch für mehrere, gleichartige Elemente der Detailansicht eingesetzt werden.)
Eine zentrale Bedeutung kommt hier der Vorlage single-property/element-hub.php zu: Hierüber wird die Einbindung und – beim Standard-Skin teilweise tabbasierte – Gruppierung und Darstellung der Elemente gesteuert. Hierbei handelt es sich auch um das vorausgewählte Template, wenn die Detail-Render-Action ohne explizite Angabe einer Vorlage ausgeführt wird:
while ( have_posts() ) {
the_post();
do_action( 'inx_render_property_contents' );
}