Hier meine allgemeine Sammlung an WordPress-Tweaks, die ich gerne einsetze. Die Basis von WordPress selbst ist sehr sehr gut, nur wird nicht immer alles gefordert, was WordPress im System mitbringt. Kein Problem, vieles lässt sich mit ein paar Zeilen Code schnell optimieren:
Child Theme erstellen
Mit einem Child-Theme kann man bequem ein bestehendes Theme optimieren und gleichzeitig die Update-Kompatibilität erhalten. Beispiel auf dieser Seite ist das Theme Freak die Basis, ich verwende ein eigenes Theme mit dem Namen freak-child, um hier all meine Änderungen am Code vorzunehmen. Zur Einrichtung erstellt man zuerst den Ordner /wp-content/themes/freak-child/ – hier kommt dann der gesamte Inhalt des Child-Themes hinein. Am Ordner des sog. Parent-Themes (hier /wp-content/themes/freak/) werden keinerlei Änderungen vorgenommen, da bei jedem Update des Themes die Dateien hier neu geladen und somit meine potentiellen Änderungen darin überschrieben werden.
Darin die Datei styles.css mit folgendem Inhalt erstellen:
/* Theme Name: Freak Child Theme URI: https://code.plastikschnitzer.de/ Description: Freak Child Theme Author: Plastikschnitzer Author URI: https://code.plastikschnitzer.de/ Template: freak Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: freak-child */ /*your individual styles start here*/
Zusätzlich muss im selben Ordner /wp-content/themes/freak-child/ noch die Datei functions.php mit folgendem Inhalt erstellt werden:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
//start customizations
// end cusomizations
?>Das ist das minimale Setup für ein Child Theme. Nun kann ich das Theme im WordPress-Backend aktivieren und für meine Webseite aktivieren. Wenn ich z.B. in der Datei header.php etwas ändern möchte, kopiere ich die Datei /wp-content/themes/freak/header.php nach /wp-content/themes/freak-child/header.php und nehme hier alle Änderungen an der header.php vor. Bei Updates am Theme „Freak“ wird in diesem Fall nur die Datei im Parent-Ordner /wp-content/themes/freak/ neu geladen, nicht im Child-Theme-Ordner. Probleme gibt es nur, wenn grundlegende Funktionen von WordPress nicht mehr unterstützt werden, Sicherheitslücken durch mein Child-Theme weiterhin offen bleiben oder das Theme sich so stark in der Struktur ändert, dass mein Child-Theme einfach nicht mehr „passt“. Da ich aber davon ausgehe, dass jeder vor einem Update die gesamte Seite sowie die Datenbank extern sichert, ist ein Crash doch hoffentlich kein Problem oder?! 😉
Mehr Informationen zu Child Themes aus dem WordPress-Codex: https://codex.wordpress.org/Child_Themes
Widget einfügen
Um ein weiteres Widget zu initialisieren, kopiert man folgenden Code in die functions.php:
function freak_child_widgets_init() {
register_sidebar( array(
'name' => __( 'Piwik', 'freak-child' ),
'id' => 'piwik',
'description' => '',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
) );
}
add_action( 'widgets_init', 'freak_child_widgets_init' );Danach wird im WordPress-Backend ein Widget mit dem Namen „Piwik“ erscheinen. [Ja, ich füge den Piwik Code gerne per Widget ein, damit ich bei Multisites die Seiten unterscheiden kann – das WordPress-Piwik Plugin hat mich nicht überzeugt — KISS – Keep it smart and simple, nicht alles braucht gleich ein Plugin mit x-Fehlermöglichkeiten, ein paar Zeilen Code tuts doch auch].Damit das Widget auch auf der Webseite angezeigt wird, muss ich an der Stelle, wo es erscheinen soll (hier im Footer vor dem schließenden body-tag), folgenden code einfügen (/wp-content/themes/freak-child/footer.php):
<?php dynamic_sidebar( 'piwik'); ?>
Fertig ist das Widget, mehr Informationen im WordPress-Codex: https://codex.wordpress.org/WordPress_Widgets
Kommentarfunktion global deaktivieren
Auf dieser Seite nicht eingesetzt, aber manch einer will auf seiner Seite gar keine Kommentare ermöglichen. Dazu kann man im Backend die Kommentarfunktion zu Beginn der Erstellung der Webseite direkt abstellen. Wenn die Seite schon länger existiert, müsste man die Funktion bei jedem einzelnen Artilel deaktivieren (aufwändig), Plugins installieren (klar, bei WordPress gibt’s für fast alles ein Plugin) oder in den Theme-Dateien den Code, der sich auf Kommentare bezieht, einfach zu löschen. Auch über die functions.php gibt es die Möglichkeit die Kommentarfunktion global zu deaktivieren.
Versionen von CSS- und JS-Dateien entfernen
Damit CSS- und JS-Dateien vom Browser-Cache gespeichert werden können, dürfen Sie nicht das Anhängsel mit ?ver=x.y besitzen. Der Browser-Cache ist wichtig für die Performance der Seite, denn so müssen die Dateien nicht bei jeder Seitenanfrage erneut heruntergeladen werden – spart Bandbreite, Serverlast und gibt eine schnellere Seite. Dazu folgenden Code in die functions.php einfügen:
//Remove Query String from Static Resources
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );Unnötige Links entfernen
Links aus dem <head> entfernenDer WordPress <head> enhält standardmäßig einige Links, die man nicht in jedem Fall benötigt. Beispiel: Feed-Links, rsd_links, wlwmanifest_link – mit folgendem Code in der functions.php kann man sie entfernen:
// Remove feeds from head
remove_action( 'wp_head', 'feed_links' );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action('wp_head','feed_links_extra', 3);
// Remove rsd_link and wlwmanifest_link
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');add_filter( 'index_rel_link', 'remove_code' );Emoji Skript entfernenWordPress bringt extra ein Javascript und CSS mit, das Emojis unterstützt. Nicht jede Webseite benötigt Emojis und hier kann man dem Server und dem Nutzer das zugehörige Skript mit folgendem Code in der functionts.php ersparen (weniger Serverabfragen = weniger Ladezeit, weniger Serverlast):
// Remove Emoji Scripts remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' );
Erstes und letztes Menüelement ansprechen
Manchmal ist es nötig, das erste und/oder das letzte Element eines Menüs gezielt zu gestalten. Mit folgendem Code in der functions.php werden hier entsprechende Klassen hinzu gefügt:
function add_first_and_last($items) {
$items[1]->classes[] = 'first-menu-item';
$items[count($items)]->classes[] = 'last-menu-item';
return $items;
}
add_filter('wp_nav_menu_objects', 'add_first_and_last');Achtung! Wenn ein Menü in WordPress weniger als 2 Einträge hat, funktioniert die komplette Seite nicht mehr!
WordPress Login-Seite anpassen
Mit folgendem Code in der functions.php kann man dann ein styles-login.css anlegen, in dem man die Anmeldeseite individuell gestaltet:
function my_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );