Bitte wählen Sie ein Thema aus.

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.

Frühjahrsputz für WordPress #1: Backend-Menü aufräumen

Das Menü des Wordpress-Backends hat bisweilen etwas Willkürliches: Arbeitet man etwa mit mehrlei Beitragsarten, erscheinen diese auch als Menüpunkt - was ja noch ganz praktisch, aber der Übersicht auch nicht immer zuträglich ist; insbesondere weil die Menüreihenfolge ab und an einem Tohuwabohu gleicht. Weil Ordnung das halbe Leben ist, empfehlen wir, das Backendmenü ein wenig aufzuräumen. Das ist eine einfache Übung.

Frühjahrsputz für WordPress #2: Funktionen, CSS-Blocks, Scripts und HTML sauber anschreiben

Besonders wenn Sie ab und an selber an ihren Theme-Dateien oder am CSS-Stylesheet Hand anlegen, kann es nach einiger Zeit unübersichtlich werden: Was genau tut der Code in der functions.php? Welches Styling wird von Zeile 987 in meinem CSS-Stylesheet definiert? Es lohnt sich, eigene Programmierungen und Anweisungen laufend mit Kommentaren zu versehen. Für die spätere Übersicht (allenfalls sogar für die Fehlersuche durch Dritte) kann dieser Zusatzaufwand hilfreich sein.

Formular-Plugin «Caldera-Forms» quittiert den Dienst

Wenn Sie Formulare auf Ihrer Website verwenden, werden Sie dies ziemlich sicher mit einem Formular-Plugin bewerkstelligen. Falls dieses Plugin «Caldera Forms» heisst, sollten Sie weiterlesen. In wenigen Tagen wird nämlich «Caldera Forms» eingestellt. Zwar wurde vor wenigen Tagen noch die Version 1.9.7 ausgerollt - es dürfte aber das letzte Update gewesen sein.

Standard-Beitragstitel, Meta-Infos und Beitragsbild im Divi-Theme ausblenden

Im Divi-Theme lassen sich die dargestellten Posts schön und einfach designen. Auch deren Titel, Meta-Tags und das Beitragsbild lassen sich vorzüglich gestalten und platzieren. Ungeachtet dessen will Wordpress jedoch diese Infos standardmässig in jedem Beitrag noch einmal ganz oben hinstellen. Mit äusserst mageren Möglichkeiten, darauf Einfluss zu nehmen. Sie können das in jedem Einzelfall unterbinden - oder (mit ein wenig CSS-Code) ein für alle Mal auf der gesamten Website festlegen.

Block-Editor für WordPress-Widgets abschalten

Wordpress hat mit der Version 5.8 den Block-Editor auch für die Widgets eingeführt. Diese Neuerung bei der Gestaltung der Seitenleiste gefällt nicht allen - besonders, wer den «Gutenberg»-Editor nicht verwendet, wird kaum warm werden mit dem Block-Editing der Widgets. Doch kein Problem: Ein kleiner Hack und Sie sind das Ding wieder los - und haben wie einst die klassische Widgets-Bearbeitung zur Hand.

Divi-Post oder -Seite mit dynamischem Beitragsbild illustrieren

Dieser Trick ist insbesondere spannend, wenn Sie Ihre Beiträge mit einem Layout aus Ihrer Divi-Bibliothek oder mit dem Theme-Builder des Divi-Themes arbeiten. Der Hack ist aber auch für andere Anwendungen geeignet: Sie können damit ein Bild irgendwo in Ihrem Content anlegen und dort immer das gerade aktuelle Beitragsbild anzeigen lassen. Einmal festlegen - und gut ist.

Divi-Beiträge standardmässig auf ganzer Seitenbreite darstellen

Beiträge werden im Divi-Theme standardmässig mit einer Seitenleiste dargestellt. Ausserdem werden die Ränder eingerückt, was Platz verschwendet und überdies einer einheitlichen Darstellung nicht eben zuträglich ist. Zwar lässt sich dies in jedem Einzelfall händisch beheben - viel einfacher geht es aber mit einer Standardeinstellung, welche auf ein paar Zeilen CSS-Code basiert.

Generator-Meta-Tag: WordPress-Version verstecken

In den Meta-Tags Ihrer Wordpress-Website wird standardmässig stets hinterlegt, mit welcher Wordpress-Version ein Inhalt erstellt wurde. Doch dies ist einigen DesignerInnen mitunter zuviel Transparenz: wenn Sie die Angabe der Wordpress-Version in Ihrem Quelltext unterdrücken möchten, können Sie dies mit diesem Tipp tun.

i-Frames im Divi-Theme auf voller Seitenbreite darstellen

Ob jetzt die berühmt-berüchtigten Inline-Frames (iframes) sinnvoll oder eine Plage sind, darüber lässt sich freilich streiten. Zu Zeiten des Responsive Webdesigns stehen sie etwas quer in der Landschaft. Ab und an mögen Sie aber praktisch sein. Im Divi-Theme müssen Sie jedoch mit einem kleinen Code nachhelfen, damit das Inline-Frame auch Tablet- und Phone-tauglich wird.

Sicherheits-Trick 2: Hinweise nach Fehleingaben beim WordPress-Login verschleiern

Wenn Sie sich ins Wordpress-Backend einloggen und beim Passwort oder Usernamen einen Fehler machen, ist Wordpress recht freizügig mit Hinweisen: Die Login-Seite teilt mit, ob alle Eingaben falsch sind oder welcher Part nicht korrekt eingegeben wurde - das lässt Rückschlüsse zu, welcher Part passt. Sie können diese Hinweise jedoch verschleiern und schützen damit auch das Backend eine Spur besser vor unerlaubtem Zugriff.

Divi-Theme: Classic-Editor auch ohne Plugin verwenden

Viele WebmasterInnen ziehen den Wordpress-Classic-Editor dem unterdessen standardisierten Gutenberg-Editor - auch Blockeditor genannt - vor. Dafür braucht es nicht mehr als ein von Wordpress kostenlos zur Verfügung gestelltes Plugin. Verwenden Sie jedoch das Divi-Theme, benötigen Sie dieses Plugin nicht. Sie können den Classic-Editor auch so zum Standard machen.

Permalink von WordPress-Beiträgen individuell anpassen

Die Permalink-Struktur Ihrer Wordpress-Beiträge lässt sich individuell anpassen. Sie können in den Post-URLs eigene Werte eingeben oder aber aus einer Auswahl an Variablen auswählen. Das kann die SEO-Performance Ihrer Website verbessern - bei falscher Anwendung aber auch schädigen. Wir erklären Ihnen kurz, was möglich ist und wo Vorsicht angebracht ist.

Ein Plädoyer für das NAS

Heute widmen wir uns ausnahmsweise einem Hardware-Thema: Dem NAS. Für viele – auch private – NutzerInnen wäre nämlich ein NAS (Network Attached Storage) eine interessante Lösung. Zu Zeiten von Highspeed-Internet hat eh fast jedeR ein Netzwerk am Laufen, – selbst wenn davon gar nichts bemerkbar ist. Da böte es sich doch an, das Netz auch gleich richtig zu nutzen und die Installation mit einem NAS auszubauen. Doch viele trauen sich nicht daran. Schade.

Divi-Theme & WooCommerce: Einkaufswagen erst anzeigen, wenn was drin ist

Die weitest verbreitete Shoplösung auf Wordpress-Websites ist WooCommerce. Dieser Webshop schmiegt sich hervorragend ins Divi-Theme ein - Divi seinerseits bietet seit einer Weile eigene Module, um WooCommerce besser darzustellen. Eine Knacknuss bleibt der Einkaufswagen. Dieser lässt sich hartnäckig nicht ausblenden - auch wenn noch nix drin ist. Oder doch??? Wir zeigen Ihnen wie.

Website-Analyse mit Matomo statt Google Analytics

Es muss nicht immer «Google Analytics» sein: Ihre Websitel ässt sich auch mit anderen Tools analysieren - ganz ohne Zugriff der Datenkrake aus Mountain View. «Matomo» ist ein Open-Source-Projekt, welches genau dasselbe tut: Bewegungen und BesucherInnen beobachten und deren Aufenthaltsdauer registrieren. Grosses Plus: Der viel bessere Datenschutz.

Transparenzverlauf statt harte Linie im Divi-Header

Besonders wenn der Header des Divi-Themes farblich Ton in Ton ist mit der restlichen Website, entsteht beim Scrollen eine harte Linie, wenn der Inhalt unter dem Header verschwindet. Auf vielen Websites wird dies mit einer Trennlinie in anderer Farbe gelöst. Wer dies nicht möchte, weicht vielleicht lieber auf eine leicht transparente «Übergangszone» aus. Wie das geht, zeigen wir hier.

Umleitungen automatisch oder manuell verwalten – Plugin-Empfehlung «Redirection»

Es kommt öfter mal vor, dass Sie eine URL auf Ihrer Website anpassen müssen. Sei es, weil Sie die Permalink-Strukur verändern, weil Sie eine Seite umbenennen oder weil in einer URL schlicht ein Schreibfehler enthalten ist, den Sie beheben wollen. Links von externen Websites auf diese Inhalte, laufen dann ins Leere. Ein klarer Fall für «Redirection» - unsere heutige Plugin-Empfehlung.

WordPress-Website auf der Synology-DiskStation einrichten

Falls Sie über eine DiskStation der Marke Synology verfügen, haben Sie bereits alle Voraussetzungen, dort auch eine Wordpress-Installation aufzusetzen. Das ist eine hervorragende Möglichkeit, Programmierungen und Codes in einem geschützten Umfeld und doch realitätsnah auszuprobieren. Und bei einem Fehlschlag bleibt Ihre Live-Website heil.

Werbung

 

Pin It on Pinterest

Share This