[WordPress] 4 levels of caching

Good overview on: https://www.smarthomebeginner.com/wordpress-on-docker-traefik/#3_WordPress_Caching

Browser Caching: This is what tells the visitors browser to cache the files locally to speed up future site/page visits. We will set this up using Nginx. On Apache, this is accomplished using .htaccess files.

Server Caching: This caches static versions of pages (Page cache). We are going to accomplish this using Nginx FastCGI cache.

Frontend Caching: This means caching WordPress PHP files so they don’t have to be re-compiled for every visit. We are going to set this up using PHP OpCache.

Database Caching: This optimizes database queries by storing them in the RAM for faster delivery. We are going to use Redis for this.

Blog umgezogen -> Docker

Heute habe ich den Blog von einem DigitalOcean Droplet auf einen V-Root Server bei Strato umgezogen. Da der V-Root etwas mehr Power hat, werde ich einige Dienste, die ich bereits privat auf meinen Proxmox Servern hoste, auch auf den Strato Server umziehen. Bisher habe ich meine Anwendungen überwiegend in LXC’s (Linux Containern) oder auch VM’s installiert. In Kombination mit ZFS als Dateisystem (mit der großartigen Snapshot Fähigkeit) bin ich damit die letzten 4 Jahre ohne Probleme gefahren. Bei einem V-Root ist diese Möglichkeit nun nicht mehr gegeben. Daher habe ich die Chance genutzt, tiefer in das Thema Docker einzusteigen. Bisher habe ich nur vereinzelt Docker Container genutzt und die wenigen jeweils auch nochmal in einem LXC (vereinfachte mir das Snapshot handling). Nun also mal der Versuch, komplett auf Docker umzusteigen.

Der WordPress Blog ist als erstes in einen Docker Container umgezogen. Danach habe ich noch Nextcloud (plus OnlyOffice & Collabora) und Bitwarden aufgesetzt. Hier werde ich jedoch noch ein paar Tage testen, bevor ich mit all meinen Daten rüber migriere. Da man immer wieder von Traefik als Reverse Proxy in Kombination mit Docker liest, habe ich diesen probiert, jedoch nach mehreren Stunden etwas gefrustet wieder sein lassen. Auch wenn die ersten Services ganz gut damit liefen, scheint mir der Aufwand erheblich höher und die benötigten Labels für jeden Container nicht grade intuitiv. Da in den meisten Dokus Beispiele für Nginx zu finden sind, bin ich zurück zu dem Nginx Proxy Manager, welchen ich bereits seit Jahren erfolgreich zuhause im Einsatz habe. Auch wenn das bedeutet, dass ein Docker Container nun nicht “automatisch” via Traefik (durch 10-20 vorher zusammen gesuchte Labels je Service….) nach außen bereitgestellt wird, sondern nur nach “einigen wenigen” Klicks im Nginx Proxy Manager…. Nach meinem Gefühl, gibt sich das irgendwie nicht viel.

Einige weitere Dienste stehen noch auf der Liste und auch ein paar neue Sachen möchte ich mit aufnehmen. Bereits installiert sind:

  • WordPress
  • Nginx Proxy Manager
  • Nextcloud
  • OnlyOffice
  • Collabora
  • Bitwarden
  • MyPhpAdmin

Es folgen noch:

  • Portainer
  • Wallabag
  • Gitlab
  • Jitsi
  • Teamspeak
  • PiHole
  • Wireguard
  • OpenLDAP

Und je länger man nachdenkt, desto mehr fällt einem sicherlich noch ein. 🙂
Die Docker-Compose Dateien werde ich dann final auch hier Veröffentlichen mit allen zugehörigen Links, die mir bei der ein oder anderen Schwierigkeit geholfen haben.

[WordPress] SyntaxHighlighter Ampersand character

Recently I noticed that the character & is displayed in the SyntaxHighlighter like this: &amp

To fix this, simply add this snippet of the user kaggdesign to /var/www/html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php

/**
 * Filter to fix issue with & in SyntaxHighlighter Evolved plugin.
 *
 * @param string $code Code to format.
 * @param array $atts Attributes.
 * @param string $tag Tag.
 *
 * @return string
 */
function kagg_syntaxhighlighter_precode( $code, $atts, $tag ) {
	if ( 'code' === $tag ) {
		$code = wp_specialchars_decode( $code );
	}
	return $code;
}
add_filter( 'syntaxhighlighter_precode', 'kagg_syntaxhighlighter_precode', 10, 3 );

This can be done directly from the webinterface. Just go to Plugins -> Plugin Editor -> select the Plugin SyntaxHighlighter Evolved -> add the snippet to the end

[WordPress] Remove Google Fonts in Theme Fluida

I usually try to avoid Google products, especially when it comes to web tracking, although I’m a big fan of what they do in other technologies.
Today I wanted to try another WordPress Theme called Fluida, a free theme from Cryout Creations. It’s clean and simple, the only thing that bothers me, is the usage of the Google Fonts API. Even if you don’t enter a Google Font in the settings, it’s connecting to the API.

Google Fonts has advantages as well as disadvantages. Read more about it here.

There are a few WordPress plugins to remove Google Fonts (e.g. Autoptimize), but I tried to avoid another plugin and wanted to do it manuelly. After a short search through the theme I found “includes/styles.php”. There you just had to comment out the following lines and it’s done.

	// Google fonts
        $gfonts = array();
	$roots = array();
	foreach ( $cryout_theme_structure['google-font-enabled-fields'] as $item ) {
		$itemg = $item . 'google';
		$itemw = $item . 'weight';
		// custom font names
		if ( ! empty( $options[$itemg] ) && ! preg_match( '/custom\sfont/i', $options[$item] ) ) {
				if ( $item == _CRYOUT_THEME_PREFIX . '_fgeneral' ) { 
					$gfonts[] = cryout_gfontclean( $options[$itemg], ":100,200,300,400,500,600,700,800,900" ); // include all weights for general font 
				} else {
					$gfonts[] = cryout_gfontclean( $options[$itemg], ":".$options[$itemw] );
				};
				$roots[] = cryout_gfontclean( $options[$itemg] );
		}
		// preset google fonts
		if ( preg_match('/^(.*)\/gfont$/i', $options[$item], $bits ) ) {
				if ( $item == _CRYOUT_THEME_PREFIX . '_fgeneral' ) { 
					$gfonts[] = cryout_gfontclean( $bits[1], ":100,200,300,400,500,600,700,800,900" ); // include all weights for general font 
				} else {
					$gfonts[] = cryout_gfontclean( $bits[1], ":".$options[$itemw] );
				};
				$roots[] = cryout_gfontclean( $bits[1] );
		}
	};