Archiv des Autors: tillbortels

WordPress Dashboard-Felder ‚Boxen über „Ansicht anpassen“ hinzufügen‘ entfernen

Im Plugin White Label CMS > “Einstellungen Tab” > “Custom CSS for Admin” folgenden CSS-Code hinzufügen:

#dashboard-widgets .postbox-container .empty-container{
    display: none;
}

Oder den CSS-Code in einem eigenen Stylesheet hinterlegen, das im Admin-Bereich geladen wird.

Die Lösung habe ich hier gefunden:

https://wordpress.org/support/topic/remove-add-boxes-from-the-screen-options-menu/

MailPoet Layout linksbündig einrichten (align left)

Newsletter Layout align: left

Newsletter Layout align: left - Illustration: T.Bortels/cpu20.de

Nachdem mir das letzte MailPoet-Update nun mein schön modifiziertes Newsletter-Temnplate zerschossen hat sehe ich mich genötigt, die Anpssung mal zu dokumentieren, sodass ich beim nächsten Update nicht ganz so lange suchen muß.

Aber erstmal von vorne.

Ich benutze das WordPress Plugin MailPoet als zum Versenden von Newsletter. Oder besser gesagt: einige meiner Kunden nutzen MailPoet als Newsletter-Tool – und ich helfe ihnen dabei.

Natürlich möchte man, dass der Newsletter dem Design der Webseite entspricht. Das ist aber manchmal gar nicht so einfach. Während sich beim Webdesign in den letzten jahren viel getan hat bewegen sich die Möglichkeiten der Newsletter-Gestaltung noch auf dem gefühlten Niveau der späten Neunzigerjahre. Bilder, Tabellen und einige CSS-Anweisungen gehen – alles andere funktioniert nicht so richtig zuverlässig. Umso hilfreicher ist es da, wenn man ein komfortables Tool nutzen kann, das einem die Arbeit erleichtert. Schließlich soll sich die Redaktion ja auf das Texten und das Zusammenstellen des Newsletters kümmern – für die Gestaltung gibt es Templates.

Das klappt soweit auch ganz gut. Nun gab es allerdings folgendes Problem: Bei einem meiner Kunden sollte das Layout linksbündig sitzen, da die Webseite ebenfalls linksbündig sitzt. Es scheint aber leider üblich geworden zu sein, dass das Layout von Newslettern mittig sitzt. Was tun? Na klar, das Template entsprechend anpassen. Leider ist das in MailPoet aber gar nicht so einfach. Man kann zwar Templates bearbeiten, exportieren und importieren – der Teil, der für die Orientierung des Layouts zuständig ist sitzt aber außerhalb des Templates. Egal, wie sehr man auch die frisch exportierte JSON-Datei bearbeitet – das Layout bleibt mittig gesetz. und das liegt am Renderer, durch das jedes Template noch einmal durch muß.

Der Renderer besteht aus mehreren HTML-Templates. Uns interessiert an dieser Stelle die Datei Template.html. Zu finden ist diese an folgender Stelle:

wp-content > plugins > mailpoet > lib > Newsletter > Renderer > Template.html

Hier müss man nun einfach align=“center“ in align=“left“ umändern. Ich habe das an allen drei Stellen geändert, an denen dies vorkommt – vermutlich reicht die erste Stelle in zeile 97:

Vorher:

<td align="center" class="mailpoet-wrapper" valign="top">

Nachher:

<td align="left" class="mailpoet-wrapper" valign="top">

Fertig.

Ein beliebiges Element auf der Under Construction Seite zentrieren

Ich benutze sehr häufig das WordPress-Plugin Under Construction Page. Und damit meine ich SEHR häufig! Es ist im Grunde eines der Plugins, die ich als erstes installiere, wenn ich ein neues WordPress-Projekt beginne.

Eine Sache, die viele Leute zu stören scheint, ist, dass „es nicht möglich ist, Bilder zu zentrieren, die nicht 100% breit sind“ – naja –  es ist tatsächlich möglich. Und man braucht nur 2-3-4 Zeilen CSS, je nachdem wie man zählt:

.ucp-module {
    margin: 0 auto !important;
    float:none;
}

Sie fügen diese CSS-Zeilen einfach in das Feld „Custom CSS“ unter „Page Properties“ ein und fertig! Zauberei! Oder eigentlich „nur“ die Magie von CSS. Hoffentlich hilft das dem einen oder anderen? Mahlzeit!

ACF Position „Nach dem Titel vor dem Inhalt“ funktioniert nicht (Lösung)

ACF Position high funktioniert nicht

Mit dem WordPress-Plugin ACF (Advanced Custom Fields) lassen sich zum Teil sehr komplexe Eingabemasken bauen. Umso wichtiger ist es, daß man auch bestimmen kann, an welcher Stelle welche Feldgruppe angezeogt wird. In ACF stehen dazu grundsätzlich erstmal drei Positionen zur Verfügung: „Nach dem Titel vor dem Inhalt“ (bzw. „High (after title)“ in der englischen Variante) läßt die Feldgruppe zwischen Titel und Texteditor erscheinen – „Nach dem Inhalt“ (bzw. „Normal (after content)“ in englisch) führt dazu, daß die Feldgrupper unterhalb des Texteditor angezeigt wird und bei Auswahl von „Seitlich neben dem Inhalt“ („Side“) wird die Feldgruppe in der Seitenleiste (rechts) angezeigt.  Meine favorisierte Position ist häufig die, bei der die zusätzlichen Eingabefelder zwischen Titel und Texteditor positioniert sind.

Beim Editieren einer Seite kann es dann aber passieren, daß man die Position der Feldgruppe versehentlich ändert. Dann sitzt diese plötzlich unterhalb des Texteditors. Leider kann man die Feldgruppe dann nicht einfach per Hand zurück schieben. Fast alle Elemente der Eingabemaske lassen sich auf fast alle Positionen verschieben – der Bereich zwischen Titel und Texteditor ist aber unerreichbar.

Mithilfe eines Code-Schnippsels, der in der functions.php platziert wird, kann man die manuelle Verschiebung aber rückgängig machen, bzw. aufheben.

function prefix_reset_metabox_positions(){
  delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_post' );
  delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_page' );
  delete_user_meta( wp_get_current_user()->ID, 'meta-box-order_YOUR_CPT_SLUG' );
}
add_action( 'admin_init', 'prefix_reset_metabox_positions' );

Den Code habe ich hier im ACF-Support-Forum gefunden:

Position : High (after title) not working

Aber vorsicht: die Funktion prefix_reset_metabox_positions sorgt dafür, daß die Meta-Boxen immer zurück auf ihre z-B. von ACF vorgegebene Position versetzt werden. Ein manuelles Umorganisieren der Eingabefelder und Feldgruppen ist dann nicht mehr möglich. Mir ist das gang recht – ich möchte nicht, daß Feldgruppen manuell auf eine andere Position geschoben werden. Wer der Redaktion aber diese Möglichkeit zur Umgestaltung der EIngabemaske lassen möchte, sollte den Code-Schnippsel nach erfolgreim Zurücksetzen wieder aus der functions.php entfernen.

Verhindern, dass WordPress große Bilder klein rendert („scaled“)

Wordpress scaled grosse Bilder

Wordpress scaled grosse Bilder – Screenshot/Montage T.Bortels/cpu20.de

Seit Version 5.3 werden „große Bilder“ von WordPress automatisch neu gerendert – also klein gerendert – und mit dem Hinweis „scaled“ im Dateinamen versehen. Das kann nützlich sein, um zu vermeiden, daß allzu große Bilder an die Nutzer ausgeliefert werden. Die Absicht ist also erstmal gut. Doch was gut gemeint ist muß nicht immer gut sein. Was ist ein „großes Bild“ aus Sicht von WordPress? Ab 2560px gilt ein Bild für WordPress als ein „großes Bild“.

Wer sein WordPress-Theme selbst baut möchte volle Kontrolle haben – auch und vor allem über die Größe der angezeigten Bilder. Das Feature, das die Bilder automatisch verkleinert und mit dem Hinweis „scaled“ im Dateinamen versieht, erscheint einem dann eher als Bug.

Um das Problem zu umgehen kann man diese neue Funktion manuell abschalten. Allerdings sollte man die entsprechende Anpassung nach Möglichkeit gleich zu Beginn einbauen, noch bevor zu viele Inhalte bzw. Bilder auf den Server geladen wurden. Sonst verbringt man wohlmöglich viel Zeit damit, die Bilder erneut hochzuladen.

Scaled-Funktion big_image_size_threshold deaktivieren

Um die Funktion nun zu deaktivieren muß man lediglich folgenden Code–Schnippsel einfach in die functions.php einfügen und der Spuk hat ein Ende:

// Prevent WordPress from Scaling Large Images
add_filter( 'big_image_size_threshold', '__return_false' );

Damit ist dieses Feature nun abgeschaltet.

Wie gesagt: am besten, man implementiert diesen Filter bevor man anfängt, viele große Bilder hochzuladen. Sonst muß man nämlich nachträglich nochmal alle großen Bilder hochladen.

Alternativ könnte man auch die Grenze anders definieren, von der an Bilder als große Bilder betrachtet bzw. behandelt werden. Möchte man beispielsweise, daß Bilder ab einer Seitenlänge von 4800px als „groß“ betrachtet werden, kann man folgenden Code-Schippsel in die functions.php einsetzen:

/**
 * Increases the threshold for scaling big images to 4800.
 * In this case all the images that are larger than 4800px (width or height) 
 * will be scaled to 4800px.
 *
 * @param $threshold
 * @return int
 */
function hff_big_image_size_threshold( $threshold ) {
	return 4800; // new threshold
}
add_filter('big_image_size_threshold', 'hff_big_image_size_threshold', 100, 1);

Hier die Seite zur Funktion bei make.wordpress.org/core/ …

Lazyload manuell in WordPress integrieren

Was ist Lazyload? Und warum brauche ich Lazyload?

Lazyload ist ein Skript, das dafür sorgt, dass Bilder, die nicht sichtbar sind, nicht geladen werden. Oder umgekehrt ausgedrückt: es werden nur die Bilder geladen, die im Sichtfeld des Nutzers sind. Und das kann viele Vorteile haben. Vor allem natürlich Performance-Vorteile.

Lazyload ist ein eigenständiges Skript. Somit kann es theoretisch in jede Webseite integriert werden, egal ob diese auf WordPress basiert, oder nicht. Es gibt natürlich inzwischen auch verschiedene WordPress-Plugins, die Lazyload in WordPress integrieren – aber ich bin in solchen Fällen immer gerne für eine Lösung ohne weitere Plugins zu haben.zum Glück funktionert die Implementierung von Lazyload in WordPress auch ausgesprochen problemlos.

Lazyload manuell in WordPress integrieren

Zunächst muss man Lazyload als Skript interieren. Dazu habe ich die Javascript-Datei einfach in ein entsprechendes verzeichnis „js“ in meinem theme hinterlegt. Die js-Datei (sowie viele hilfreiche Tipps) ist hier beim Autor von Lazyload zu finden: https://www.andreaverlicchi.eu/vanilla-lazyload/

 <script src="/wp-content/themes/mytheme/js/lazyload.min.js"></script>

Ich habe das hier mal händisch gemacht – natürlich sollte man das Skript eigentlich über die function.php laden. Aber so geht’s auch.

Dann muß man Lazyload natürlich noch aufrufen. Das habe ich per Skript-Aufruf im Footer (footer.php) eingerichtet:

<script>


var lazyLoadInstance = new LazyLoad({
// Your custom settings go here
});

</script>

Es gibt verschiedene Optionen und Möglichkeiten, wie man Lazyload nutzen kann. Ich habe mich dafür entschieden, daß ich zunächst ein Bild mit geringer Auflösung – und anschließend per Lazyload ein Bild mit hoher Auflösung nachladen möchte. Dazu muß man lediglich jedem Bild bzw. IMG-tag die entsprechenden Quellen zuweisen:

 <img class="lazy" src="<?PHP echo($low_res_url); ?>" data-src="<?php echo esc_url( $high_res_url); ?>" />

Und fertig. Oder?