Bitte wählen Sie ein Thema aus.

Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code

Wordpress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich haarig. Also habe ich kurzerhand selbst ein wenig getüftelt und mit PHP-Code ein eigenes Kategorie-Widget erstellt. Das können Sie auch.

Portfolio-Titel und Meta-Texte im Divi-Portfolio-Modul als Einblendung über dem Beitragsbild anzeigen

Die Module Portfolio und filterbares Portfolio des Divi-Themes haben einige Einschränkungen: Der Titeltext und der Metatext (Kategorie) befinden sich unter dem Bild. Was aber, wenn Sie das ändern und auf dem Bild platzieren möchten? Dafür gibt es in den Modulen keine Einstellungen. Hier erfahren Sie, wie Sie den Titel- und Metatext über dem Bild im Divi Portfolio-Modul platzieren können.

Icons im Divi-Toggle-Modul und in den Accordions links statt rechts platzieren

Die beiden Divi-Theme-Module «Toggle» (bzw. «Umschalter») und «Accordion» (auch «Akkordeon» genannt) ähneln sich stark - und doch sind beide verschieden. In diesem Beitrag zeigen wir Ihnen den Unterschied zwischen den beiden Modulen und demonstrieren Ihnen eine einfache Lösung, um die Modul-Icons weg vom gewohnten Platz rechts nach links zu verschieben.

ALT- und Title-Tags aus der Mediathek in Divi verwenden

Im Bild-Modul des Divi-Themes lassen sich ALT-Texte, welche etwa das abgebildete Bild in Worten beschreiben, problemlos erfassen. Ebenso die Title-Tags. Wer aber - und das tun sicher viele - Bilder direkt aus der Mediathek übernimmt, wird bald feststellen: Weder die ALT-Tags noch die Title-Tags werden in Divi nicht angezeigt. Das lässt sich aber nachbessern und wir zeigen Ihnen, wie das geht.

Update-Option für das Divi-Theme ausschalten

Das Divi-Theme lässt sich in Wordpress automatisch aktualisieren. Das ist eigentlich keine schlechte Idee, denn Themes und Plugins sollten aktuell gehalten werden, um Sicherheitslücken zu vermindern. Jedoch kann das Update auch Fallstricke mit sich bringen - besonders bei umfangreichen Websites. In so einem Fall ist es klüger, Updates jeweils händisch auszuführen und zu kontrollieren, ob alle Funktionen noch wie gewünscht arbeiten.

Bildbeschnitt in den Blog-, Portfolio- und Galerie-Modulen des Divi-Themes stoppen

Das Divi-Theme ist ein ausgeklügeltes Tool mit zahlreichen Vorteilen und vielen Einstellungsmöglichkeiten – aber manchmal stehen wir vor einer Nische oder einer speziellen Herausforderung, die mit Divi nicht standardmässig möglich ist. So gibt es ein häufiges Problem mit dem Beschnitt von Bildern aus der Mediathek – namentlich in den Blogs, Portfolios und in der Galerie. Doch diese Probleme lassen sich lösen.

Zentriertes Logo im Divi-Menü beim Scrollen nach links verschieben

Das Website-Logo lässt sich im Divi-Menü zentriert darstellen. Es erscheint dann oberhalb der Navigationspunkte. Besonders wenn man dann das Menümodul auf «sticky» trimmt, bleibt so beim Scrollen oft ein sehr mächtiger Inhalt stehen, der Platz wegnimmt. Doch es gibt auch hierfür einen Trick, welcher das zentrierte Menü-Logo beim Scrollen ganz einfach nach links verfrachtet.

Bilder-Special – Trick #1: Bilder auf der Website vor «Hotlinking» schützen

Technisch ist es möglich, eine fremde Website mit Bildern zu illustrieren, welche auf Ihrer Website liegen. Statt eines Bildes auf dem eigenen Server, verweist man im Quelltext einfach auf einen entfernten Ort. Das nennt man «Hotlinking» – es ist eine Form von Diebstahl: Erstens wird ein Bild (meist) unrechtmässig verwendet, zweitens geht dem Bestohlenen Bandbreite verloren. Doch Sie haben eine Möglichkeit, Hotlinking auf Ihren Server zu verhindern.

Bilder-Special – Trick #9: WordPress das automatische «Lazy Loading» von Bildern austreiben

Zwei Binsenwahrheiten: 1. Bilder machen eine Website hübsch; 2. Bilder machen eine Website langsam. Um die Ladezeit der Website zu verbessern, hat Wordpress seit der Version 5.5 ein «lazy loading» eingebaut. Dieses bewirkt, dass der Aufbau der Website Step by Step vor sich geht. Aber es kann Situationen geben, wo einem Lazy Loading in die Quere kommt. Immerhin lässt es sich einfach abschalten.

Automatische Plugin-Updates in WordPress deaktivieren

Wordpress sieht vor, installierte Plugins automatisch zu aktualisieren. Doch diese Funktion ist nicht in jedem Fall gleich klug. Besonders wenn Sie eine umfangreiche, möglicherweise komplizierte Website bewirtschaften, kann ein automatisiertes Update der Erweiterungen auch mal zu Inkompatibilitäten führen. Mit einem einfachen Trick lässt sich das Auto-Update jedoch ausschalten.

Aufzählungsliste absteigend nummerieren

Ein kleiner handlicher Hack lässt die klassische Aufzählungsliste <ol> umgekehrt aufzählen: beginnend mit dem höchsten Wert und endend mit dem kleinsten. Dem HTML-Code wird nur ein kleines Attribut hinzugefügt, schon wird die Aufzählung rückwärts nummeriert.

Schlagwörter im Divi-Blog-Modul anzeigen

Das Divi-Theme verfügt über ein Blog-Modul, mit dem Sie eine Liste von Beiträgen anzeigen können. Sie können auch einige Details zusammen mit den Beiträgen anzeigen: z.B. den Autor des Beitrags und die Kategorien, zu denen der Beitrag gehört. Eine Sache, die Sie mit dem Blog-Modul nicht anzeigen können, sind die Schlagwörter (Tags) der Beiträge. Hier erfahren Sie, wie Sie die Schlagwörter im Blogmodul dennoch anzeigen können.

Mit zwei kleinen PHP-Hacks Beitragsübersichten für alle Lebenslagen selber bauen – der 200. Beitrag von Dr. Code

So ein klein wenig stolz sind wir schon: 200 Tipps und Tricks für Wordpress, CSS, HTML und das Divi-Theme haben wir bis zum heutigen Tag veröffentlicht. Heute wagen wir uns an ein klein wenig PHP-Programmierung. Wir bauen uns kinderleicht massgeschneiderte Beitragsübersichten. Vorzüglich geeignet für Widgets in der Seitenleiste - aber natürlich auch für anderswo.

Absendernamen in ausgehenden WordPress-E-Mails ändern

Wenn WordPress eine E-Mail-Benachrichtigung sendet, verwendet das System standardmässig «WordPress» als Absendernamen. Für Mails an Sie als AdministratorIn ist das ja noch OK – aber für Mails nach aussen (an Ihre WebsitebesucherInnen) sieht das etwas unprofessionell aus. Ändern Sie den Namen in eine echte Person oder den Titel Ihrer Website. Geht ganz einfach.

WordPress-Updates ohne Standard-Themes

Kürzlich beglückte uns Wordpress wieder einmal mit einem neuen Standard-Theme. Immer um den Jahreswechsel herum, sind wir verdonnert, ein neues, unerwünschtes Theme aus dem Hause Wordpress von Bord zu werfen. Eine kleine Einstellung erlaubt aber, die Zwangsinstallation gleich ganz zu umgehen.

Blog-Modul-Special #5: Titel-, AutorInnen- und Kategorie-Links im Divi-Blogmodul deaktivieren

Das Blog-Modul des Divi-Themes verlinkt standardmässig den Titel des Beitrags mit der Detailseite dessen, die Kategorie mit der entsprechenden Übersicht und den/die AutorIn mit der persönlichen Übersicht des/der Verfasserin. Das ist oft nützlich - es gibt aber Situationen, in welchen man dies nicht möchte. Mit wenig CSS-Code ist auch dies möglich.

Blog-Modul-Special #6: Seitenverhältnis der Beitragsbilder im Divi-Blogmodul anpassen

Das Seitenverhältnis der Beitragsbilder, welche im Divi-Blog-Modul angezeigt werden lässt sich anpassen. Standardmässig bildet das Blogmodul Bilder mit 400x250px ab - was einem Seitenverhältnis von 8:5 entspricht. Die Darstellung lässt sich aber übersteuern; selbst dann, wenn das Bild auf dem Server gar nicht im gewünschten Format vorliegt. Wir zeigen Ihnen wie das geht.

Blog-Modul-Special #7: Beiträge im Blog-Modul nach Kategorien einfärben

Dieses Sujet ist für mich ein Highlight. Und ums highlighten geht es auch gleich in diesem Hack: Die Beiträge, welche im Blog-Modul des Divi-Themes gelistet werden, können nämlich farblich unterschiedlich hinterlegt werden. So finden sich User noch besser zurecht und finden Inhalte zu Themen, die sie interessieren, besonders schnell. Das aufzusetzen, ist wirklich unglaublich einfach. Auch darum: Ein Highlight.

Blog-Modul-Special #12: Ändern der Texte von Paginierungs-Links im Blog-Modul des Divi-Themes

Das Blog-Modul des Divi-Themes bietet Usern Paginierungslinks an, die «ältere Einträge» und «neuere Einträge» anzeigen, damit sie in einer langen Liste von Beiträgen navigieren können. Bloss vermögen die Textlinks oft nicht so recht zu überzeugen - das Divi-Modul bietet aber keine Funktion an, um dies zu ändern. Wir zeigen Ihnen, wie Sie die Texte dennoch einfach anpassen können.

Divi-Module auf Mobilgeräten in umgekehrter Reihenfolge stapeln

Das Divi-Theme macht das Responsive Layout - also die Darstellung für alle Anzeigengrössen - einfacher. Sehr viel einfacher. So werden etwa nebeneinander platzierte Inhalte auf kleinen Anzeigegrössen gestapelt. Dabei wird aus dem «links nach rechts »auf dem Desktop neu «oben nach unten» auf dem Mobiltelefon. Das passt meistens - aber nicht immer. Den Sonderfall kriegen wir aber mit ein paar Zeilen CSS-Code hin.

Beliebige Divi-Modul-Optionen als Standard festlegen

Hin und wieder spendiert Elegant Themes einem Modul für das Divi-Theme eine neue Funktion. Wenn Sie ein solches Modul bereits häufig verwenden, kann es mühsam werden, diese Option bei allen Elementen nachträglich zu aktivieren. Da hilft ein einfacher Trick, der alle bestehenden und auch künftigen Einsatzplätze ebendieses Moduls nachrüstet.

Formular-Standard-Button aus beliebigen Plugins mit dem Divi-Button ersetzen

Vermutlich verwenden Sie auf Ihrer Wordpress-Website ein Formular-Plugin. Das System selber liefert ja nichts Schlaues mit, weswegen hier ein Plugin die richtige Wahl ist. Bloss sehen die Felder oft einigermassen ärmlich aus. Immerhin: Den «Senden»-Button können Sie auf einfache Weise und ganz automatisiert mit dem adretten Divi-Button ersetzen.

Browser-Bildlaufleisten stylen

Die Bildlaufleiste eines Webbrowsers - auch Scrollbar genannt - erscheint meistens in langweiligem grau-in-grau. Die Darstellung lässt sich aber mit ein wenig CSS-Code beeinflussen - so passt sie im Handumdrehen zum Design Ihrer Website.

Dynamischen Banner aus dem Beitragsbild im Divi-Template anlegen

Wenn Sie Beitragsbilder als Header in einem besonderen Zuschnitt (etwa im Letterbox-Style mit 1500x500px) anzeigen wollen, stossen Sie mit Wordpress an Grenzen. Zwar lassen sich dynamische Beitragsbilder durchaus als Hintergrund verwenden - jedoch stets nur in der Originalabmessung, was selten Freude macht. Mit unserem Trick gelingt das Vorhaben aber trotzdem.

Grösse der Beitragsbilder im Divi-Blogmodul und im Portfoliomodul anpassen

Auf Artikelübersichten werden Beitragsbilder im Divi-Theme grundsätzlich im Format 400x284px angezeigt. Dies ist an sich OK, jedoch wünscht man sich das ab und an anders. Vielleicht möchte man die Bilder schmaler oder quadratisch darstellen. Beides geht! Wie Sie dem Blogmodul oder auch dem Portfolio-Modul des Divi-Themes neue Formate beibringen, erfahren Sie in diesem Tipp.

Vertikale Navigation mit dem Divi-Menu-Modul erstellen

Das Divi-Menümodul verwendet standardmässig das horizontale Layout, das für den Header als horizontale Navigation konzipiert wurde. Aber es gibt bestimmte Situationen (zum Beispiel bei der Erstellung eines Footer- oder Sidebar-Layouts), in denen wir alle Menüpunkte untereinander anzeigen möchten, als einfache Liste von Links, ohne die mobile Hamburger-Menü-Version

Reihenfolge der Beiträge in Blogs selbstbestimmt festlegen

Im Seiten-Editor von Wordpress gibt es ein kleines, aber feines Feld, mit welchem Seitensortierungen individuell festgelegt werden können. Diese Möglichkeit fehlt in Beiträgen normalerweise. Die Sortierung kann allenfalls mit einem geänderten Beitragsdatum bestimmt werden, was aber eher mühsam ist. Das «Reihenfolge»-Feld kann aber auch für Posts ganz einfach nachinstalliert werden.

Abschnitte im Divi-Theme abwechselnd einfärben

Diesen Hack finden wir ziemlich cool: Damit Abschnitte besser erfasst und unterschieden werden können, kann es hilfreich sein, sie verschiedenfarbig auszuzeichnen. Ändern sich die Inhalte jedoch häufiger, ist es sehr aufwändig alle Abschnitte einzeln umzufärben. Mit ein wenig CSS kann diese Arbeit vermieden werden.

Pannenhilfe-Tipp #1: «White Screen of Death» – Wenn WordPress nur noch eine leere weisse Seite anzeigt

Die meisten Website-Verantwortlichen sind zunächst mal sehr beunruhigt, wenn sie das erste Mal statt der adrett zurecht gemachten Website nichts sehen. Bzw. eine leere, weisse Seite, die auch als «White Screen of Death» bezeichnet wird. Es scheint so, als ob sich sich die gesamte Seite in nichts aufgelöst hat. Gar so schlimm ist die Sache aber nicht. Meist lässt sich der Fehler schnell finden und beheben.

Pannenhilfe-Tipp #2: «Briefly Unavailable for Scheduled Maintenance» – Wie Sie WordPress wieder Lebensgeister einhauchen

Wenn Sie regelmässig Wordpress-Seiten administrieren, könnte es Ihnen auch schon passiert sein: Sie sehen die Meldung «Briefly Unavailable for Scheduled Maintenance. Check back in a minute». Meist ist der Zustand nur von kurzer Dauer; dann und wann bleibt aber die Meldung hartnäckig bestehen. Durchaus beunruhigend - aber rasch behoben.

WordPress-Credits «Proudly Powered by WordPress» entfernen

Kennen Sie die Fusszeile «Proudly Powered by Wordpress» oder «Stolz präsentiert von Wordpress»? Bestimmt! Denn die Google-Suche, die ich eben rasch angestrengt habe, spuckt satte 1.3 Milliarden Treffer auf englisch und immerhin 16 Millionen Websites auf deutsch aus. Die Zeile wird also in zalreichen - wirklich sehr, sehr vielen - Footern angezeigt. Doch die meisten möchten diese Wordpress-Credits loswerden. Wir sagen, wie das geht.

Divi-Projects im WordPress-Backend ausblenden

Divi kommt mit einem eigenen Posttype - den «Projects» - daher. Aber nicht alle nutzen Projects. Jedoch ist im Wordpress-Backend der Navigationspunkt «Projekte» auch dann zu sehen, wenn gar keine solchen existieren. Das kann die Übersichtlichkeit des Menüs stören, lässt sich aber freilich ändern.

Divi-Menü auf gesamter Seitenbreite darstellen

Das Divi-Menu wächst seitwärts, je mehr Inhalte angezeigt werden. Bisweilen kann das Menu dabei «überlaufen» – bzw. zweistöckig dargestellt werden. Dies lässt sich ändern, wenn auf einer Website das Menu von allem Anfang an auf der ganzen Seitenbreite dargestellt wird - und dies auch bei weniger Menupunkten.

Gutenberg den Garaus machen – ganz ohne Plugin

Der Block-Editor «Gutenberg», welcher mit Wordpress-Version 5 eingeführt wurde, ist auch nach mehreren Jahren noch nicht wirklich populär. Ein grosser Teil der Wordpress-Gemeinde setzt auf den Classic-Editor, welcher wenigstens im Plugin-Directory von Wordpress nach wie vor gratis heruntergeladen werden kann. Aber das Plugin braucht's gar nicht: Eine Zeile Code und schon vertreiben Sie Gutenbergs Geist aus Ihrer Wordpress-Installation.

Die Krux mit den verunstalteten Telefon-Links

Kennen Sie das? Da nennen Sie auf Ihrer Website eine harmlose Telefonnummer - und schwups, wird diese in zahlreichen Browsern übel verunstaltet. Einige Browser - ganz besonders solche von Mobilgeräten - erkennen nämlich Telefonnummern auf Websiten und markieren sie als anklickbaren Link, um einen Anruf zu erleichtern. Damit der eigentlich praktische Link aber nicht völlig am sonstigen Webdesign vorbeischiesst, empfiehlt es sich, den Telefonlink auf dem Radar zu haben. Ein Mini-Workshop von Dr. Code.

Werbung

 

Pin It on Pinterest

Share This