Archiv der Kategorie: Wordpress

Ein Child-Theme anlegen, schnell und einfach

Jeder, der in WordPress mehr möchte, als nur fremd-produzierte Themes zu administrieren, kommt früher oder später dazu, ein Child Theme zu bearbeiten bzw. herzustellen.

Was ist ein Child Theme?

Ein Child Theme ist zunächst einmal ein Abkömmling (eben das „Child“) eines anderen Themes. Ist man mit dem bisher genutztes Theme für WordPress nicht zufrieden, ist ein Child Theme der beste Ansatzpunkt, um individuelle Lösungen einzubinden.

Das Child Theme übernimmt alle Eigenschaften des Eltern Themes – solange sie nicht im Child Theme expliziert überschrieben werden (was ja Sinn der ganzen Sache ist).

Das (Child)-Theme darf man dann ohne Gefahr manipulieren, wobei das Eltern Theme niemals angefasst wird. Dies hat mehrere Vorteile:

  1. Falls eine Änderung (vielleicht unwiederbringlich) misslingen, kann man das Child Theme einfach verwerfen und auf das Eltern Theme zurückgehen – oder einfach ein neues Child Theme anlegen.
  2. Sollte das Eltern Theme durch ein Update aufgefrischt werden, so gehen die eigenen Änderungsmaßnahmen im Child Theme nicht verloren, denn dieses Theme bleibt von Updates unberührt.
  3. Wenn man sich zwischen zwei (oder mehr) Änderungen nicht entscheiden kann, so legt man einfach weitere Child Themes an, um schnell zwischen die Änderungen hin- und herzuspringen.

Wichtige Regel daher: NIEMALS im Eltern Theme Änderungen vornehmen. NIEMALS NIEMALS NIEMALS

Was kann man im Child Theme machen?

Das child Theme bietet zwei große Gebiete, auf denen man sich nach Belieben austoben darf.

Design in Child Theme

HTML, CSS und Mediendateien

Im Child Theme darf (sollte) man den HTML Code anpassen. Aber nicht nur. Auch CSS Styles dürfen geändert werden. Ebenso liegt hier die beste Möglichkeit vor, Bilder, z.B Background-Images, oder andere Mediendateien permanent einzubinden. So erspart man sich den Umweg über den Medien-Upload von WordPress.

PHP Funktionalität

Ebenso lassen sich auch Funktionalitäten nachrüsten, die man sonst in einem extra anzulegenden Plugin speichern müsste. PHP-Code-lastige Teile des Themes kann man wunderbar in einer Datei namens functions.php auslagern, die man im Hauptverzeichnis des Child Themes anlegt.

Child Theme angelegen – Schritt für Schritt

1. Verzeichnis anlegen

  • per FTP mit dem Server verbinden
  •  im Verzeichnis wp-content/themes/ ein Verzeichnis anlegen. Dieses Verzeichnis bekannt den Namen des um die Endung -child erweiterten Namens des Eltern Themes. Heißt das Verzeichnis des Eltern Themes twentytwenty, so landet das Child Theme im Verzeichnis twentytwenty-child.
Wordpress Child Theme

2. Style Datei anlegen

Die wichtigsten Informationen über das Child Theme werden (vielleicht ungewohnterweise) in der anzulegenden Datei style.css eingefügt. Der Kopf der Datei sollte folgendermaßen aussehen:

/*
 Theme Name:   Twenty Twenty Child
 Description:  Ein Child Theme
 Author:       Clark Kent
 Author URI:   https://domain.de
 Template:     twentytwenty
 Version:      1.0
 Text Domain:  twenty-twenty-child
*/

Nicht alle diese Angaben sind verpflichtend. Lediglich zwei davon sind absolut notwendig:

Theme Name – Muss eindeutig sein.

Template – Der Verzeichnisname des Eltern Themes (hier also twentytwenty)

3. functions.php anlegen

In der Datei functions.php wird PHP Code eingebunden, der gezielt nur für dieses Child Theme zur Anwendung kommt. Zunächst einmal begnügen wir uns mit den befehlen zum Einbinden des Style Sheets der Eltern. Das Style Sheet des Child Themes wird automatisch korrekt eingebunden

<?php
/**
* Style sheets des Eltern Themes einbinden
*/
function my_child_theme_styles() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_styles' );
?>

Jetzt sollte unser Verzeichnis so aussehen.

Wordpress Child Theme

4. Screenshot anlegen

Ich leger gerne eine Screenshot Datei an, um bei mehreren Themes nicht die Übersicht zu verlieren. Am schnellsten geht es, wenn man die Datei screenshot.png aus dem Verzeichnis des Eltern Themes anpasst.

Wordpress Child Theme

Das Verzeichnis sieht jetzt so aus:

Wordpress Child Theme

Jetzt können wir unsere noch „nacktes“ Child Theme erstmalig in WordPress auswählen.

Wordpress Child Theme

Wenn wir jetzt den Source Code unserer Seite im Browser anzeigen lassen (in der Regel mit dem Tastaturbefehl STRG+U) sollte es genau so aussehen:

Der Source Code unserer Website unter Verwendung eines Child Theme

Wie man sehen kann, werden hier die Style Sheet des Parent Themes und des Child Themes eingebunden.

Das war es für jetzt. Wir werden im Weiteren noch lernen, wie man im Child Theme eigene CSS Styles einbindet bzw. die des Eltern Themes anpasst und/oder überschreibt.

WordPress-Tuning, Teil 2: Cache-Plugins

Nach Teil 1, in dem ich meine Testergebnisse mit verschiedenen Themes gezeigt habe, nun eine Übersicht der besten Cache-Plugins, die gratis zur Verfügung stehen.

Testumgebung:

  • WordPress 5.4.2
  • Plugins: nur Gutenberg und das jeweilige Cache Plugin
  • Theme: Twenty Twenty
  • Startseite: Demoseite des Gutenberg-Plugins
  • Gemessen mit gtmetrix.com

Die Ergebnisse sprechen für sich: W3 Total Cache ist der mehr als eindeutige Sieger.

Wordpress Cache-Plugins im Leistungsvergleich

LinkPagespeedYslowLoad TimePage SizeRequest
W3 Total CacheA (99%)A (93%)3,70,855 MB16
WP-OptimizeF (33%)B (88%)73,27 MB20
WP Fastest CacheF (33%)A (91%)3,33,28 MB22
ohneF (33%)B (82%)5,13,29 MB25
LiteSpeed CacheF (33%)B (82%)5,33,29 MB25
HummingbirdF (33%)A (91%)7,53,29 MB25
WP Super CacheF (33%)A (91%)3,83,29 MB25
Comet CacheF (33%)A (91%)4,53,29 MB25
Cache EnablerF (33%)A (91%)3,93,29 MB25
BreezeF (33%)B (89%)3,63,29 MB30
Eine Übersicht verschiedener Cache-Plugins für Wordpress und deren Leitung. Getestet wurde die Gutenberg-Demo-Seite.

WordPress-Tuning, Teil 1: Schlanke Themes – Gewicht und Leistung

Und los geht’s. Die unten stehende Tabelle zeigt eine Auswahl mehrerer Gratis-Themes von wordpress.org/themes und ihre Leistungsdaten.

Überraschender Sieger ist das Theme: scaffold.

Gewicht und Leistung verschiedener schlanker Wordpress themes

ThemeGröße (KB)PingdomPagespeed Insights
Scaffold31,6A 92100
Kaka34,2B 8799
Maker40B 8799
Astra47,5B 9099
Zakra50,6B 8598
Twenty Twenty60,8B 9099
Generic72B 8798
Responsive117B 8495
Tortuga134,3B 8495
A Starting Point147,2B 8494
Base WP149,6B 8391
Responsivo152,5B 8497
ioBoot168,9B 8388
Poseidon194,7B 8597
WP Bootstrap Starter209,5B 8391
Event Listing220,4B 8287
Vast221,5B 8184
Color Blog236,6B 8275
Pencil248,4B 8282
Getwid Base263,7B8385
Suffice275C 8079
CyberChimps276,1C 8074
E-Commerce292,2B 8385
Refresh Blog315,1B 8279
Resoto325,7B 8281
Orchid Store342,6B 8584
Compact One348,2C 7862
Catch Responsive467,6B 8272
Catch Base657,5B 8288
Clean Journal834,9B 8276
Profisme1300B 8264
Eine Übersicher mehrere schlanker Wordpress Themes mit Angaben zu Gewicht (=Downloadgröße der Website) und Leistung (gemessen mit pingdom und pagespeed insights)

Zwei-Faktor-Authentifizierung für WordPress mit Two-Factor

Wer seinen Blog zusätzlich absichern möchte, sollte eine Zwei-Faktor-Authentifizierung mit seinem Smartphone in Betracht ziehen. Dabei wird nicht nur das Passwort abgefragt, sondern zusätzlich auch ein temporär und individuell generiert Code (eben der zweite Faktor) abgefragt. Dieser Code wird über die App „Google Authenticator“ erzeugt.

Anleitung

  1. Google Authenticator auf dem Smartphone installieren (Android oder Apple)
  2. Für WordPress das Plugin Two-Factor (https://de.wordpress.org/plugins/two-factor/) installieren.
  3. In WordPress aufrufen: „Benutzer -> Dein Profil“. Dort gibt es jetzt den Abschnitt „Two-Factor-Einstellungen“.
  4. Die Haken bei Aktiviert und Primär nach Wunsch setzen. Dann wie gewohnt den QR-Code scannen oder alternativ die App „Google Authenticator“ öffnen und den abgebildeten Key unter dem QR-Code händisch eingeben.
  5. Um die initiale Authentifizierung abzuschließen muss noch der in der App generierte sechstellige Zahlencode in das Feld „Authentifizierungscode“ eingegeben werden.

Fertig

Beim nächsten Login muss man in einem zweiten Schritt zusätzlich zum Passwort auch den temporären Authentifizierungs-Code eingeben.

Danke an Themecoder für den Hinweis auf das Plugin Two-Factor.

Postbank mit PHP über HBCI-Schnittstelle (wieder) abfragen

Seit dem 14.09.2019 ist es komplizierter geworden per HBCI auf das eigene Konto zuzugreifen. Geschuldet ist das der EU-Richtlinie PSD2.

Wer bis dahin das beliebte Paket fints-hbci-php genutzt hatte, hat jetzt Probleme, denn dieses Paket wird nicht mehr gepflegt; es kommt mit den Anforderungen von PSD2 nicht klar.

Da ich selbst für meinen Shop auf Null Papier einmal am Tag per HBCI automatisch die Zahlungseingänge abfrage und verarbeite, musste schnell eine neue Lösung, ein neues Paket gefunden werden.

Schnell fiel die Wahl auf nemiah/phpFinTS. Nach kurzem Austausch mit der Entwicklerin, lief es dann auch (wieder) für meine Postbank-Konten.

Anleitung

composer require nemiah/php-fints
nano vendor/nemiah/php-fints/Samples/statement_of_account.php # Anpassen

Neu ist hier die sogenannte FinTS-Registrierungsnummer. Jeder, der jetzt mit HBCI/FinTS arbeiten will, muss seine Software, egal ob App, Server-Script oder Desktop-Anwendung, registrieren lassen. Das klingt komplizierter, als es ist. Ich selbst erhielt meine Registrierungsnummer nach wenigen Minuten, daher denke ich, dass es sich hier um einen automatisierten Vergabeprozess handelt.

Die Registrierungsnummer erhält man unter: https://www.hbci-zka.de/register/prod_register.htm.

Die einzelnen Settings

FHP_BANK_URL: https://hbci.postbank.de/banking/hbci.do

FHP_BANK_PORT: 443

FHP_BANK_CODE: die Bankleitzahl

FHP_ONLINE_BANKING_USERNAME: die eigene Postbank-ID

FHP_ONLINE_BANKING_PIN: das Online-Passwort

FHP_REGISTRATION_NO: die oben erhaltene Registrierungsnummer

FHP_SOFTWARE_VERSION: die Versionsnummer der eigenen Software, bspw. 0.1b

Jetzt muss man nur noch folgende Zeile anpassen:

45: $fints->setTANMechanism(901);

mit

$fints->getVariables();

liefert die Postbank folgende, verfügbaren TAN-Mechnismen:

stdClass Object
(
    [tanModes] => Array
        (
            [912] => chipTAN optisch HHD1.4
            [913] => chipTAN manuell HHD1.4
            [920] => BestSign
            [930] => mobileTAN
        )

)

 

Ich selbst nutze die BestSign-App. WICHTIG: Die selbst erstellte Bezeichnung für das gewählte BestSign-Verfahren muss auch noch angegeben werden.

Also erhalten wir folgende Zeile

45: $fints->setTANMechanism(920, 'EigeneBezeichnung');

Jetzt sollte es eigentlich schon funktionieren. Bei mir hat es das jedenfalls.

Fragen stellt man am besten bei https://github.com/nemiah/phpFinTS/issues, damit alle etwas davon haben.