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:

<span class="token keyword">function</span> <span class="token function">wp_title_uppercase</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">strtoupper</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'wp_title'</span><span class="token punctuation">,</span> <span class="token string">'wp_title_uppercase'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Das selbe geht natürlich auch mit Kleinbuchstaben:

<span class="token keyword">function</span> <span class="token function">wp_title_lowercase</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">strtolower</span><span class="token punctuation">(</span><span class="token variable">$title</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'wp_title'</span><span class="token punctuation">,</span> <span class="token string">'wp_title_lowercase'</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token function">remove_action</span><span class="token punctuation">(</span><span class="token string">'wp_head'</span><span class="token punctuation">,</span> <span class="token string">'print_emoji_detection_script'</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">remove_action</span><span class="token punctuation">(</span><span class="token string">'wp_print_styles'</span><span class="token punctuation">,</span> <span class="token string">'print_emoji_styles'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token function">remove_action</span><span class="token punctuation">(</span><span class="token string">'wp_head'</span><span class="token punctuation">,</span> <span class="token string">'feed_links_extra'</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">remove_action</span><span class="token punctuation">(</span><span class="token string">'wp_head'</span><span class="token punctuation">,</span> <span class="token string">'feed_links'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token operator"><</span>body <span class="token delimiter"><?php</span> <span class="token function">body_class</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token delimiter">?></span><span class="token operator">></span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>

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:

<span class="token keyword">function</span> <span class="token function">add_body_classes</span><span class="token punctuation">(</span><span class="token variable">$classes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token variable">$classes</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'foo'</span><span class="token punctuation">;</span>
    <span class="token variable">$classes</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'bar'</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token variable">$classes</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'body_class'</span><span class="token punctuation">,</span> <span class="token string">'add_body_classes'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token keyword">function</span> <span class="token function">set_jpeg_quality</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'jpeg_quality'</span><span class="token punctuation">,</span> <span class="token string">'set_jpeg_quality'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token keyword">function</span> <span class="token function">enable_image_upscaling</span><span class="token punctuation">(</span><span class="token variable">$default</span><span class="token punctuation">,</span> <span class="token variable">$orig_w</span><span class="token punctuation">,</span> <span class="token variable">$orig_h</span><span class="token punctuation">,</span> <span class="token variable">$new_w</span><span class="token punctuation">,</span> <span class="token variable">$new_h</span><span class="token punctuation">,</span> <span class="token variable">$crop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token variable">$crop</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

    <span class="token variable">$size_ratio</span> <span class="token operator">=</span> <span class="token function">max</span><span class="token punctuation">(</span><span class="token variable">$new_w</span> <span class="token operator">/</span> <span class="token variable">$orig_w</span><span class="token punctuation">,</span> <span class="token variable">$new_h</span> <span class="token operator">/</span> <span class="token variable">$orig_h</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token variable">$crop_w</span> <span class="token operator">=</span> <span class="token function">round</span><span class="token punctuation">(</span><span class="token variable">$new_w</span> <span class="token operator">/</span> <span class="token variable">$size_ratio</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token variable">$crop_h</span> <span class="token operator">=</span> <span class="token function">round</span><span class="token punctuation">(</span><span class="token variable">$new_h</span> <span class="token operator">/</span> <span class="token variable">$size_ratio</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token variable">$s_x</span> <span class="token operator">=</span> <span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token variable">$orig_w</span> <span class="token operator">-</span> <span class="token variable">$crop_w</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token variable">$s_y</span> <span class="token operator">=</span> <span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token variable">$orig_h</span> <span class="token operator">-</span> <span class="token variable">$crop_h</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">return</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token variable">$s_x</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token variable">$s_y</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token variable">$new_w</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token variable">$new_h</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token variable">$crop_w</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>int<span class="token punctuation">)</span><span class="token variable">$crop_h</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_filter</span><span class="token punctuation">(</span><span class="token string">'image_resize_dimensions'</span><span class="token punctuation">,</span> <span class="token string">'enable_image_upscaling'</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token keyword">function</span> <span class="token function">add_ajax_url_variable</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">echo</span> "<span class="token operator"><</span>script<span class="token operator">></span>
        <span class="token keyword">var</span> ajaxurl <span class="token operator">=</span> <span class="token string">'" . admin_url('</span>admin<span class="token operator">-</span>ajax<span class="token punctuation">.</span>php<span class="token string">') . "'</span><span class="token punctuation">;</span>
    <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>"<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_action</span><span class="token punctuation">(</span><span class="token string">'wp_head'</span><span class="token punctuation">,</span> <span class="token string">'add_ajax_url_variable'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

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

    <span class="token comment">// Link zur Startseite</span>
    <span class="token operator"><</span>script<span class="token operator">></span>
        window<span class="token punctuation">.</span>onload <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"login"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">"'. home_url() . '"</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>'<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">add_action</span><span class="token punctuation">(</span><span class="token string">'login_head'</span><span class="token punctuation">,</span> <span class="token string">'custom_admin_login_logo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token variable">$foo</span> <span class="token operator">=</span> <span class="token string">'bar'</span><span class="token punctuation">;</span>
<span class="token function">get_template_part</span><span class="token punctuation">(</span><span class="token string">'partials/footer'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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:

<span class="token variable">$foo</span> <span class="token operator">=</span> <span class="token string">'bar'</span><span class="token punctuation">;</span>
<span class="token keyword">include</span> <span class="token function">locate_template</span><span class="token punctuation">(</span><span class="token string">'partials/footer.php'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

Schlagwörter:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.