WordPress Tipps #1 – Diverses

Bei der Entwicklung von WordPress-Seiten stösst man immer wieder auf Probleme, welche zuerst gründlich analysiert und recherchiert werden müssen. Die meisten Probleme lassen sich durch kleine Code-Snippets und Hooks lösen, die man entweder (wenn man Glück hat) bei der Recherche im Internet findet oder selber schreiben muss. Nach ein paar umgesetzten WordPress-Seiten hat man eine kleine Sammlung von nützlichen Code-Snippets, welche man immer wieder verwenden kann.

Gerne teilen wir diese Snippets in diesem Blog mit dir und hoffen, dass du dadurch ein wenig Zeit bei der Recherche sparen kannst.

Alle der folgenden Code-Snippets können im functions.php des gewünschten Themes hinterlegt werden.

Meta-Titel in Grossbuchstaben/ Kleinbuchstaben

Mit einem einfachen Hook kann der Meta-Titel einer Webseite in Grossbuchstaben angezeigt werden:

function wp_title_uppercase($title) {
    return strtoupper($title);
}
add_filter('wp_title', 'wp_title_uppercase', 20);

Das selbe geht natürlich auch mit Kleinbuchstaben:

function wp_title_lowercase($title) {
    return strtolower($title);
}
add_filter('wp_title', 'wp_title_lowercase', 20);

Die Priorität sollte hoch genug sein (z.B. 20), damit die Umwandlung am Ende durchgeführt wird und somit Mutationen durch andere Plugins miteinbezieht. Über diesen Hook können natürlich auch beliebige andere Modifikationen als Gross- und Kleinschreibung vorgenommen werden.

Emoji Styles und Scripts entfernen

Seit der WordPress-Version 4.2.0 werden in der Front ungewollt Stylesheets und Scripts für sogennante Emojis generiert. Emojis sind Smileys und Ideogramme, welche oft beim Chatten verwendet werden, in vielen WordPress-Installationen jedoch nicht benötigt werden. Mit den folgenden Codezeilen kannst du diese ungewollten Styles und Scripts in der Front deaktivieren:

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

Feed-URLs entfernen

Oft wird WordPress nur als CMS für kleine Webseiten eingesetzt und somit werden keine Feeds benötigt. Mit den folgenden Zeilen kann die Ausgabe eines Feed-Tags im Header deaktiviert werden:

remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'feed_links', 2);

Eigene Klassen auf body-Tag hinzufügen

Nicht selten benötigt man eigene CSS-Klassen auf dem body-Tag. WordPress bietet dafür die Funktion body_class an, welche im Theme auf den body-Tag gesetzt werden muss:

<body <?php body_class(); ?>>
...

Mit dem gleichnamigen Hook können dann eigene Klassen hinzugefügt werden. Die Klassen werden als Array übergeben und können somit einfach um weitere Elemente erweitert werden. Das folgende Beispiel fügt die Klassen foo und bar hinzu:

function add_body_classes($classes) {
    $classes[] = 'foo';
    $classes[] = 'bar';

    return $classes;
}
add_filter('body_class', 'add_body_classes');

JPEG-Qualität für Bilder anpassen

Standardmässig ist die JPEG-Qualität der generierten Thumbnails und Bilder in WordPress 90%. Diese Zahl kann man jedoch mit einem einfachen Hook überschreiben. Das folgende Beispiel setzt die maximale Qualität auf 100%. Die Zahl wird ohne Prozent-Zeichen angegeben:

function set_jpeg_quality() {
    return 100;
}
add_filter('jpeg_quality', 'set_jpeg_quality');

Upscaling für Bilder aktivieren

WordPress erlaubt normalerweise kein Upscaling (Vergrösserung des Originalbildes) für generierte Thumbnails. Manchmal ist es jedoch sinnvoll, dass die Bilder trotzdem vergrössert werden, auch wenn das Originalbild kleiner ist (z.B. wenn das Layout stark von den Bildgrössen abhängig ist). Mit folgendem Code-Snippet kann das Upscaling in WordPress aktiviert werden:

function enable_image_upscaling($default, $orig_w, $orig_h, $new_w, $new_h, $crop) {
    if(!$crop) return null;

    $size_ratio = max($new_w / $orig_w, $new_h / $orig_h);
    $crop_w = round($new_w / $size_ratio);
    $crop_h = round($new_h / $size_ratio);
    $s_x = floor(($orig_w - $crop_w) / 2);
    $s_y = floor(($orig_h - $crop_h) / 2);

    return array(0, 0, (int)$s_x, (int)$s_y, (int)$new_w, (int)$new_h, (int)$crop_w, (int)$crop_h);
}
add_filter('image_resize_dimensions', 'enable_image_upscaling', 10, 6);

AJAX-Url in Front

Sobald in der Front AJAX-Funktionalitäten eingesetzt werden, macht es Sinn, dass diese über WordPress-Hooks definiert werden. Die AJAX-Url ist jedoch nicht automatisch in der Front verfügbar, sondern muss erst generiert und ausgegeben werden. Mit den folgenden Zeilen kann die AJAX-Url von WordPress als JavaScript-Variable in der Front generiert werden:

function add_ajax_url_variable() {
    echo "<script>
        var ajaxurl = '" . admin_url('admin-ajax.php') . "';
    </script>";
}
add_action('wp_head', 'add_ajax_url_variable', 1);

Backend Login-Logo auswechseln

Du willst nicht das normale WordPress-Logo über dem Backend-Login sondern ein eigenes? Als nettes Detail kann dieses relativ einfach überschrieben werden. Da das Logo nicht ersetzt werden kann, muss man mit ein wenig CSS und JavaScript nachhelfen. Das neue Bild wird als background-image hinterlegt und sollte eine Breite von 320 Pixeln haben. Die Höhe des Bildes muss zusätzlich noch als height angegeben werden, da es sich um ein Hintergrundbild handelt. Zusätzlich kann auf dem Logo ein Link definiert werden, welcher zur Startseite der Webseite führt:

function custom_admin_login_logo() {
    echo '
    // Styles für das neue Logo
    <style type="text/css">
        .login h1 a {
            background-image: url(/img/admin-login-logo.png); // Bild-Datei
            height: 70px; // Bild-Höhe
            width: 100%;
            margin-bottom: 24px;
            background-size: auto;
            -webkit-background-size: auto;
        }
    </style>

    // Link zur Startseite
    <script>
        window.onload = function() {
            document.getElementById("login").getElementsByTagName("a")[0].href = "'. home_url() . '";
        }
    </script>';
}
add_action('login_head', 'custom_admin_login_logo');

Template-Dateien einbinden mit Variablen

Wenn man eigene Themes entwickelt, wird man früher oder später die WordPress-Funktion get_template_part einsetzen. Diese Funktion lädt eine andere Template-Datei und fügt deren Inhalt an die Stelle ein, an der die Funktion aufgerufen wurde. Der Nachteil dieser Funktion ist, dass Variablen die vor dem Aufruf definiert wurden, innerhalb der eingebundene Template-Datei nicht zur Verfügung stehen. In dem folgenden Beispiel steht $foo innerhalb des Footer-Partials nicht zur Verfügung:

$foo = 'bar';
get_template_part('partials/footer');

Mit einer kleiner Code-Änderung kann das Partial-File jedoch trotzdem eingebunden und darin auf die Variable $foo zugegriffen werden. Anders als bei get_template_part muss bei diesem Aufruf jedoch die Dateiendung angegeben werden:

$foo = 'bar';
include locate_template('partials/footer.php');

Mehr Tipps …

… folgen nächste Woche. Es gibt noch viel mehr interessante und hilfreiche Tipps rund um WordPress, schau doch einfach in einer Woche nochmal vorbei.

Andere WordPress Tipps

  • #CMS
  • #Entwicklung
  • #Tipps
  • #WordPress

Kommentare

Leider hats noch niemanden interessiert. Dich vielleicht?

Kommentar schreiben

Ähnliche Beiträge

Zur Übersicht

Mit der Nutzung unserer Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Weitere Informationen