Das Standard-Skin im Detail

Die Dateien des Standard-Skins “Quiwi” sind im Unterordner skins/default des Kickstart-Plugin-Verzeichnisses (.../wp-content/plugins/immonex-kickstart) zu finden und können auch als Vorlage für eigene, so genannte Custom Skins verwendet werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
default
├── index.php
├── css
│ └── index.css
├── scss
│ ├── 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:

1
2
3
/**
* Skin Name: Quiwi
*/

CSS & Sass

Der Ordner css enthält nur die Datei index.css, die automatisch eingebunden wird. Hier sind alle für das Skin relevanten CSS-Stile enthalten. Beim Standard-Skin wird diese auf Basis der Daten im Ordner scss mit dem CSS-Präprozessor Sass kompiliert.

Hier wurde ein komponentenbasierter Ansatz verfolgt, der weitgehend der BEM-Methodik (Block, Element, Modifier) mit der Namenskonvention Two Dashes style entspricht.

In der Einstiegsdatei index.scss werden neben den skinspezifischen Block-Dateien (blocks) und Schriftarten (fonts) auch die (S)CSS-Dateien externer Libraries eingebunden, die im Frontend zum Einsatz kommen:

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 den Ordner css bzw. die Datei index.css enthalten.

JavaScript

1
2
3
4
├── js
│ ├── src
│ │ └── index.js
│ └── index.js

Auch der JavaScript-Code, der für das Skin eingebunden werden soll, ist in einer einzelnen Datei gebündelt: js/index.js

Beim Standard-Skin sowie allen weiteren Skins, die (zukünftig) mit Kickstart 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/src. (Auch die Verarbeitung der o. g. SCSS-Dateien erfolgt hierüber.)

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.)

Archiv & Listenansicht

1
2
3
4
5
6
├── archive-property.php
├── property-list
│ ├── filters-sort.php
│ ├── list-item.php
│ ├── pagination.php
│ └── properties.php

Das Template für die Standard-Archivseite der Immobilien-Beitragsart ist in der Datei archive-property.php enthalten. Die Komponenten - Suchformular, Sortierauswahl, Listenansicht und Seitennavigation - werden über die entsprechenden Rendering Actions eingebunden:

1
2
3
4
5
6
7
8
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), Sortierauswahl (filters-sort.php und Seitennavigation (pagination.php).

Bei allen Templates werden die zu rendernden Daten jeweils im Array $template_data bereitgestellt.

Suchformular

1
2
3
4
5
├── 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

1
2
3
4
5
6
7
8
9
├── 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:

1
2
3
4
while ( have_posts() ) {
the_post();
do_action( 'inx_render_property_contents' );
}