Die Webseite läuft mit dem Content-Management-System WordPress.
Das System ist kostenlos erhältlich unter folgender Adresse:
https://de.wordpress.org/
Es kann im Prinzip bei jedem modernen Webhoster der PHP (eine Programmiersprache) und MySQL (eine Datenbank) anbietet installiert werden.
Domainregistrierung
Die Domains habe ich bei Domainfactory* registriert. Grund: Sehr schnelle und automatisierte Registrierung, etliche Einstellmöglichkeiten.
Server und Speicherplatz
Ich teile mir einen Server mit einem Kollegen. Wir beide entwickeln Webseiten und Anwendungen und benötigen ab und an mehr als das übliche.
Als Hoster kann auch hier Domainfactory* empfehlen.
DasTheme Blocksy
WordPress arbeitet mit Themes, das sind Schablonen für die optische Darstellung der Inhalte.
Ich habe mich für das Theme Blocksy entschieden:
https://creativethemes.com/blocksy/
Gründe für dieses Theme:
- modern
- lädt Schriften von der eigenen Domain und nicht von GoogleFonts (Datenschutz)
- nutzt HTML5
- nutzt Schema.org
- ist sauber programmiert
- lädt schnell
- kostenlos
- im WP Theme Verzeichnis gelistet (Qualitätsfaktor)
- unterstützt Gutenberg (der Editor in WordPress)
- nicht überladen
Blocksy mit Child Theme
Blocksy bietet zum Theme ein fertig konfiguriertes Child Theme an:
https://creativethemes.com/downloads/blocksy-child.zip
Hier dazu mehr:
https://creativethemes.com/blocksy/docs/getting-started/child-theme/
Mit einem Child Theme ist es möglich Anpassungen in der Webseite vorzunehmen, ohne das Parameter bei einem Update des Parent Themes überschrieben werden.
Ist dies notwendig? Ja, denn in der funtions.php Datei des Child-Themes habe ich einige Ergänzungen vorgenommen. Dazu komme ich später bei den Optimierungen.
Welche Plugins ich nutze
Anti-Malware Security and Brute-Force Firewall
Eine Firewall für WordPress. Sichert das System an ganz vielen Stellen ab.
Autooptimize
Optimiert Javascript und HTML Dateien und fasst sie zu einem Paket zusammen. Bilder werden erst geladen, wenn sie im Browser sichtbar werden.
Dadurch lädt die Webseite schneller.
Blocksy Companion
Erweitert Blocksy um Funktionen im Customizer von WordPress mit sinnvollen Funktionen.
Download Monitor
Auf der Webseite biete ich PDF-Dateien zum Download an. Mit diesem Plugin verschleiere ich den Pfad zur Datei und habe eine interne Statistik, wie oft die Dateien heruntergeladen worden sind.
Force HTTPS
Stellt alle Links auf HTTPS um, sodass die ganze Webseite nur über HTTPS aufgerufen werden kann:
https://github.com/littlebizzy/force-https
Guten Post Layout – An Advanced Post Grid Collection for WordPress Gutenberg
Zeigt die letzten Artikel in einer schönen Übersicht auf allen Geräten (Desktop, Tablet, Smartphone). Gefällt mir besser als die interne Funktion von Gutenberg.
Hustle – Email Marketing, Lead Generation, Optins, Popups
Mein Marketing Werkzeug um Stopper in Form von Popups und Slidern einzubauen. So mache ich auf mein kostenloses Workbook aufmerksam und animiere Menschen dazu, meiner E-Mail Liste beizutreten.
Obfuscate Email
Verändert die E-Mail Adresse so, dass sie für Spam-Bots schlechter lesbar ist.
Page Links To
Alte Seiteninhalte auf die aktuellen Seiten umleiten. Damit die Wertigkeit von Links erhalten bleibt. Freut Google und die Nutzer, die den Link vielleicht als Lesezeichen gespeichert haben.
Rank Math – SEO Plugin für WordPress
SEO Plugin zum Umschreiben von Meta-Description und Title Tag, prüft auf Keywords. Soll schneller und schlanker sein als Yoast.
Ultimate Blocks – Gutenberg Blocks Plugin
Erweiterung zum Gestalten von Akkordions und Landingpages. Gut erkennbar auf dieser Seite zum Thema Podcast.
Appointment Scheduling & Booking Calendar – Wappointment
Ein Terminkalender mit Buchungsfunktion. Kann komplett gestaltet werden, sehr gute Terminvergabe, versendet E-Mails zur Bestätigung des Termins.
WebP Express
Wandelt Bilder (jpg und png) in das moderne WebP-Format um und liefert es an alle Browser aus, die das Format verstehen. Bilder werden dadurch noch einmal kleiner. Mehr dazu hier:
https://developers.google.com/speed/webp
WP DoNotTrack
Verhindert das Tracking durch Third-Party Cookies auf der Webseite bei der Voreinstellung im Browser. Damit alles schön Datenschutzkonform bleibt.
WP DSGVO Tools (GDPR)
Mit dem Plugin habe ich aktuelle Rechtstexte, Impressum und Datenschutzerklärung abgedeckt. Ein Pop-Up bietet den Besuchern jederzeit die Möglichkeit alles einzustellen.
WP Mautic
Dieses Plugin stellt die Verbindung zum E-Mail Marketing Werkzeug Mautic zur Verfügung. So kann ich Formulare leicht einbinden.
Optimierungen der Seite
Alle Bilder sind auf geringe Dateigröße optimiert, damit sie schnell geladen werden. Für diesen Zweck nutze ich die zwei folgenden Plugins:
Veränderungen in der funtions.php
In der functions.php des Child-Themes habe ich auch einige Ergänzungen vorgenommen:
Los geht es mit den Laden des Style-Sheets:
<?php
if (! defined('WP_DEBUG')) {
die( 'Direct access forbidden.' );
}
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});
Funktionen entfernen für mehr Datenschutz und schnellere Auslieferung der Seite
Einige Funktionen, die es Hackern leichter machen würden, habe ich entfernt:
remove_action('wp_head', 'wp_generator');
remove_action( 'wp_head','rest_output_link_wp_head');
add_filter('json_enabled', '__return_false');
add_filter('json_jsonp_enabled', '__return_false');
remove_action('wp_head', 'wp_resource_hints', 2);
remove_action('wp_head', 'rsd_link');
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
// remove comments
add_action('admin_init', function () {
// Redirect any user trying to access comments page
global $pagenow;
if ($pagenow === 'edit-comments.php') {
wp_redirect(admin_url());
exit;
}
// Remove comments metabox from dashboard
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
// Disable support for comments and trackbacks in post types
foreach (get_post_types() as $post_type) {
if (post_type_supports($post_type, 'comments')) {
remove_post_type_support($post_type, 'comments');
remove_post_type_support($post_type, 'trackbacks');
}
}
});
// Close comments on the front-end
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
// Hide existing comments
add_filter('comments_array', '__return_empty_array', 10, 2);
// Remove comments page in menu
add_action('admin_menu', function () {
remove_menu_page('edit-comments.php');
});
// Remove comments links from admin bar
add_action('init', function () {
if (is_admin_bar_showing()) {
remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
}
});
In Kürze:
- Niemand muss wissen, dass es sich um WordPress handelt
- JSON Daten brauchen wir nicht für die weitere Verwendung
- Weitere Datenfunktionen sind ebenfalls ausgeschaltet
- Emojis senden Daten nach Amerika, also weg damit
- die Kommentarfunktion ist komplett ausgeschaltet
Link zum Impressum auch auf der Login-Seite (zusätzlich zur Datenschutzerklärung)
Nach meiner Interpretation der Datenschutzgrundverordnung muss von jeder Seite der Website auf das Impressum und die Datenschutzerklärung verlinkt werden.
WordPress sieht dies für die Datenschutzerklärung vor (im WordPress Dashboard unter Einstellungen -> Datenschutz), für das Impressum aber nicht.
Hier hilft folgende Ergänzung in der functions.php:
//Impressum auf Login-Seite verlinken
add_action('login_footer', 'fley_login_impressum');
function fley_login_impressum() {
echo '<div style="text-align: center;"><a href="#impressum-link-hier-einsetzen">Impressum<a></div>';
}
Das Impressum wird nun auch auf der Login-Seite von WordPress verlinkt. Im Code muss noch der Link #impressum-link-hier-einsetzen in den richtigen Link geändert werden.
Laden der Webseite beschleunigen durch Einbau des Critical CSS
Critical CSS ist das notwendige CSS, was umbedingt geladen werden muss, um die Seite schnell anzuzeigen:
function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
return $html;
$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );
function hook_css() {
?><style>
/* hier Critical CSS einsetzen */
</style>
<?php
}
add_action('wp_head', 'hook_css');</code></pre>
<!-- /wp:code -->Ich hab das CSS-Extrakt habe ich mit einem Critical Path Generator erstellt
Und dann entsprechend an der Stelle /* hier Critical CSS einsetzen */ eingesetzt.
Das war es mit Plugins und Erweiterungen. Das Resultat ist eine relative kurze Ladezeit und eine moderne Webseite, die die Möglichkeiten des Gutenberg-Editors nutzt.
* = Der Link zu Domainfactory ist ein Provisions-Link, das heisst ich bekomme eine kleine Gutschrift für die Vermittlung. Dir entstehen dabei keine zusätzlichen Kosten.