Bitte wählen Sie ein Thema aus.
Möchten Sie auf Ihrer Website verschiedene Bilder zeigen, welche bei jedem Aufruf zufällig dargestellt werden? Das geht natürlich. Mit ein wenig JavaScript und unserem Hack für alle Websites.
Websites ständig von Hand neu zu laden kann mühsam sein. Lassen Sie die Maschine übernehmen. Als kleines Supplement zeigen wir Ihnen gleich noch, wie Sie auf der Website einen Livecountdown bis zum Refresh anzeigen.
Viele Wordpress-Seiten listen auf der Startseite gleich mal die neusten Beiträge auf. Das will man aber häufig gar nicht. Das selektiv zu verhindern ist aber keine schwierige Angelegenheit. In diesem Beitrag erfahren Sie wie es geht.
Standardmässig legt das Divi-Theme beim Menu für die Mobilansicht links und rechts noch einen Rand fest. Besonders bei längeren Wörtern in der Navigation kann das in der schmalen Mobilansicht suboptimal sein. Mit wenig CSS-Code lässt sich die gesamte Breite nutzen.
Eine gute Möglichkeit, zusätzliche Marketinginformationen auf einer Landing-Page bereitzustellen, ist eine zweite Textzeile auf einer Call-to-Action-Schaltfläche. Da es standardmässig keine Möglichkeit gibt, dem Divi-Button eine zweite Textzeile hinzuzufügen, werden wir dies mit einigen Codeschnipseln tun.
Das Menümodul des Divi-Themes bietet schon einige Styling-Möglichkeiten. Um so richtig Chef über die Darstellung zu werden, bedarf es aber ein wenig CSS-Code. Diesen stellen wir Ihnen hier vor.
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.
Wenn Sie Buttons im Divi-Theme nebeneinander statt untereinander anordnen wollen, müssen Sie dies im Normalfall mit einer mehrspaltigen Zeile lösen. Es gibt aber einen Trick, mit welchem auch mehrere Buttons in derselben Spalte nebeneinander platziert werden.
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.
Wer längere Texte im Divi-Theme bearbeitet, kennt das Problem: Die Toolbar verschwindet nach oben und man muss ständig wieder hochscrollen um eine bestimmte Funktion zu aktivieren - etwa Zwischentitel setzen, BulletPoint-Listen erstellen, Texte zentrieren. Mit einem wirklich einfachen Trick ist aber die Editor-Toolbar immer sichtbar.
Im Divi-Theme können Sie mehrere Elemente nebeneinander darstellen. Für die Responsive-Ansichten auf Tablets und Mobiltelefonen reiht Divi diese Elemente dann untereinander auf. Das ist meist gut so - hin und wieder passt das aber eben nicht. Die Reihenfolge lässt sich jedoch auf Mobilanzeigen mit einem kleinen Trick korrigieren.
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.
Die Metatexte (Datum, Kategorie, AutorIn) erscheinen im Divi-Blog-Modul standardmässig unter dem Titel als Links. Es gibt aber die Möglichkeit, daraus Schaltflächen zu bauen und diese über das Bild zu legen. Hier zeigen wir Ihnen, wie Sie dies hinkriegen.
Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem Beitrag verlinkt ist.
Das Divi-Modul «Blog» stellt allerlei Inhalte dar. Jedoch immer in derselben Reihenfolge: Titel, Meta-Angaben und am Schluss den Inhaltsauszug. Doch so fix ist diese Reihenfolge nicht: Um die Abfolge der Angaben zu ändern, greifen Sie via CSS-Code ein.
Das Blogmodul des Divi-Themes bietet eine Handvoll gute Einstellmöglichkeiten; die Paginierung allerdings - also z.B. der «ältere Beiträge»-Link - sieht etwas erbärmlich aus. Er lässt sich aber mit wenig CSS in eine ansprechende Schaltfläche umwandeln. Hier erfahren Sie, wie das geht.
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.
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.
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.
Im Blog-Modul des Divi-Themes lassen sich Meta-Angaben anzeigen: Kategorien, Datum, AutorIn etc. Diesen Meta-Angaben können passende Icons vorangestellt werden. Wir zeigen Ihnen, wie dies geht.
Elegant-Themes hat zwar dem Divi-Blog-Modul eine Paginierung spendiert, mit welcher die gelisteten Beiträge durchforstet werden können. Es geht aber noch hübscher: Mit einem «Load more»-Button.
Wir werden ein Divi-Blogmodul verwenden um es in der Seitenleiste zu platzieren und die letzten Beiträge anzuzeigen. Ohne diese Methode müssten Sie ein Widget verwenden - verlören aber damit einige Gestaltungsfreiheit, weil Widgets meist etwas starr sind, was die Einstellungsmöglichkeiten betrifft.
Das Divi-Blog-Modul kennt offiziell nur das «Gitterlayout» und die «volle Breite». Es fehlt ein Listenlayout. Doch dieses können Sie mit ein wenig Handarbeit selber gestalten.
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.
Das Blog-Modul von Divi kann schon vieles - die Beitragsbilder lassen sich aber nur bedingt steuern. Versehen Sie die Beitragsbilder mit einem Rotations- und Zoom-Effekt, der aktiv wird, sobald Sie die Maus über das Bild bewegen.
Das Blogmodul des Divi-Themes ist «out of the box» nur so halbwegs hübsch anzusehen. Nachstylen ist auf jeden Fall gefragt. Besonders das Bild, welches in der Grid-Darstellung breiter ist als der darauf folgende Text, ärgert. Doch ein einziger CSS-Befehl schafft Abhilfe.
Das Blog-Modul des Divi-Themes bietet an, Metadaten eines Beitrags (Datum, Kategorien, Schlagwörter, AutorIn) anzuzeigen. Doch werden diese Angaben stets mit einem Trennzeichen «|» getrennt. Und vor dem Autor schreibt Divi ein «von» (oder «by») hin. Das lässt sich ändern.
Das Wordpress-Menü im Backend (oder Dashboard) kennt ein paar Standardeinträge: Medien, Seiten oder Beiträge. Der Begriff «Beiträge» trifft den Inhalt häufig nicht. Wäre doch schön, das anzupassen. Geht ganz einfach.
Haben Sie die Adventsdekoration schon aus dem Schrank geholt? Und die alte Bing-Crosby-Platte aufgelegt? Wenn Ihnen zum heutigen ersten Advent schon vorweihnächtlich zumute ist, möchten Sie es vielleicht auf Ihrer Website schneien lassen. Nichts leichter als das.
Normalerweise lassen sich die praktischen Accordion- oder Tab-Module des Divi-Themes bloss mit Text füllen. Jedoch sind - mit ein wenig Programmierung - auch andere Inhalte möglich: Formulare zum Beispiel, Personenmodule, Call-To-Action-Module - sogar ganze Divi-Sections oder Zeilen und vieles mehr. Wenn Sie wollen, sogar weitere Accordions oder Tabs.
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.
Im Divi-Theme ist ein schönes Tab-Modul (auf deutsch «Registerkarte») enthalten, mit welchem Sie Informationen übersichtlich aufbereiten können. Wenn die Tabs (die Reiter) jedoch sehr unterschiedliche Textumfänge haben, kann das auch mal weniger hübsch aussehen. Ein wenig CSS und das Problem ist gelöst.
Ehrlich gesagt, Leute: An diesem Trick hab' ich meine helle Freude. Der Slider des Divi-Themes lässt sich nämlich ganz hervorragend mit Testimonials bestücken, welche dann eins ums andere eingeblendet werden. Klingt kompliziert - isses aber nicht.
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.
Einen Websiteinhalt - sei es nun ein Bild, Text oder ein anderes Element - können Sie ganz einfach vertikal und horizontal zentriert im Browserfenster anzeigen. Bei Bedarf werden Sie sogar den Scrollbalken los, falls Sie dieser stört.
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.
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.
Menüs, Footer - aber auch andere Divi-Elemente - sollen beim Scrollen womöglich immer sichtbar bleiben. Einst war dies nur über CSS-Codes zu erreichen. Mittlerweilen liefert Divi die Option mit - versteckt sie aber gut. Wir haben die Sticky-Option aufgespürt.
Nun: Dr. Code liebt das Divi-Theme. Aber Divi hat auch Macken. Gehörige sogar. Eine der gröbsten sind die verkorksten Listen, welche Divi produziert. Ob Aufzählungen oder Bullet-Points: das sieht meist nicht gut aus. Es lässt sich aber beheben. Mit einigen Zeilen CSS-Code.
Besonders wenn die Wordpress-Installation auch von Dritten benutzt werden soll, ist das Menu im Backend (oder Dashboard) oft zu umfangreich und kann unübersichtlich werden. Ungenutzte Menüeinträge lassen sich aber einfach ausblenden. Wir zeigen Ihnen wie.
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.
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.
Vor gut anderthalb Jahren haben wir Ihnen hier bei Dr. Code gezeigt, wie Sie die aktuelle Jahreszahl auf Ihrer Website mittels Shortcode anzeigen können. Wer das Divi-Theme nutzt, hat noch eine weitere Möglichkeit zur Hand, welche wir Ihnen heute vorstellen möchten.
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
Wenn Ihre Beiträge und Seiten Inhalte enthalten, die Sie ersetzen möchten oder Ihr Theme oder eines Ihrer Plugins Text ausgibt, an dessen Stelle Sie gerne etwas anderes sähen, dann haben Sie zwei Möglichkeiten: Ein Plugin installieren - oder aber diesen einfachen Trick hier lesen.
Im Divi-Theme lässt sich von Haus aus die Farbe der dargestellten Links definieren - jedoch ist damit mit Customizing auch schon Schluss. Beim Webdesign werden damit Links ab und an zu diskret dargestellt. Das lässt sich mit minimalem Aufwand ändern.
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.
Nun ja: So richtig sicher vor Spambots auf Harvest-Tour sind Ihre Mailadressen nicht, sobald Sie diese auf einer Website anzeigen. Aber immerhin: Es gibt ein paar Tricks, wie Sie wenigstens etwas mehr Sicherheit erreichen können. Und wir räumen mit Scheinsicherheiten auf: Wir sagen, warum das [at] mittlerweile wirklich bloss noch ein Scherz ist.
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.
Möchten Sie auf Ihrer Wordpress-Website einen Beitragszähler einrichten? Einer, der das Total der veröffentlichten Beiträge aktualisiert und die Nummer des gerade betrachteten Posts ausgibt. Ganz einfach. Wir erklären, wie das geht.
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.
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.
Elegant Themes - der Hersteller des Divi-Themes - empfiehlt für eine Paginierung von Blog-Beiträgen das Plugin WP-PageNavi. Nur leider sieht das Resultat standardmässig nicht so hübsch aus. Mit ein wenig CSS wird das Ganze besser lesbar und passt sich besser in das Divi-Design ein.
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 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.
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.
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.
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.
Vor einer Weile hat sich Dr. Code nach einem neuen Formularplugin umgesehen. «Back to the roots» war am Schluss die Devise. Denn zurückgekehrt sind wir zum Formular-Plugin, das wir ganz am Anfang unserer Wordpress-Zeit genutzt haben: Zu Contact Form 7. Damit das auch anständig ausschaut, haben wir einen CSS-Bausatz angefertigt, der vielleicht auch Ihnen hilft.
Der «Weiterlesen-Link» eines Artikels führt bei WordPress standardmässig auf den Anker, der dort gesetzt wird, wo der Artikel geteilt wird. Dadurch soll verhindert werden, dass ich den Anfang nochmal lese. Das ist aber nicht immer sinnvoll und lässt sich mit ein wenig Code verhindern. Wir stellen Ihnen zwei einfache Möglichkeiten vor.
Wer Wordpress aufsetzt, muss einen Website-Titel eingeben. Das ist hilfreich - so ist man sicher, dies nicht zu vergessen. Klammheimlich (und ungefragt) setzt aber Wordpress noch eine weitere Konstante: den Untertitel. Diesen sollten Sie ebenfalls anpassen. Wir sagen Ihnen wo und wie.
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.
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.
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.
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.
Die Divi-Projects sind eine feine Sache - ihr Name ist jedoch etwas sehr missraten. Den Post-Type können Sie aber nach eigenem Gusto umbenennen und sogar gleich noch viel mehr Details verändern. Damit offenbaren sich mit dem Divi-Theme zahlreiche neue Möglichkeiten, welche Sie einfach nutzen können.
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.
Okay: Der heutige Tipp hat nicht viel mit Webprogrammierung, CSS, Wordpress oder Divi zu tun. Und trotzdem: Wer häufig surft, nervt sich fraglos irgendwann ob irgendwelchen «Challenges», mit welchen etwa Google Recaptcha (oder andere) den Besuch von Bots ausschliessen wollen. Es gibt aber einen kleinen Trick, der die Zahl der Challenges merklich reduziert.
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.
Das Internet ist bunt. Farben in allen Schattierungen - mal grell, mal pastell. Schwarz-weiss ist out. Falls die Website aber (aus welchem Grund auch immer) dauerhaft oder temporär in dezenten Grautönen dargestellt werden soll, hilft ein einfacher Code-Schnipsel.
Seit der jüngst veröffentlichten Wordpress-Version 5.9 erhält man auf der Loginseite neuerdings eine Sprachauwahl. Bloss stiftet diese zunächst eher Verwirrung. Wer den Sprachdropdown wieder loswerden möchte - etwa weil die Website eh nur einsprachig ist - kann dies mit einer einzigen Zeile Code erledigen.
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.
Manchmal möchte man auf einer Website einen bestimmten Text bei jeder Nennung mit einem Link ergänzen oder ihn einfach korrekt darstellen. Nun könnte man die Textpassage mühselig suchen und überall händisch ersetzen. Besser, schneller und einfacher geht es mit einem kleinen Snippet.
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.
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.
Das Divi-Theme bietet ein Suchmodul, welches jedoch nicht alle Post-Types in die Suche miteinbezieht. Die Divi-eigenen Projects etwa werden bei der Suche nicht berücksichtigt. Dies zu ändern, ist jedoch ein Kinderspiel.
Der Inhalt von Websites, welche mit dem Divi-Theme erstellt werden wird auf mobilen Geräten mit einer maximalen Breite von 80 Prozent der Anzeigenbreite dargestellt. Mit CSS-Code können Sie diesen Wert jedoch verändern.
Wordpress lässt auf der Loginseite zum Backend eine unbeschränkte Anzahl Versuche zu. Das gibt Robots die Möglichkeit beliebige Kombinationen durchzuprobieren. Auch wenn der Zugriff nicht funktioniert: Die Serverlast steigt ob Brute-Force-Attacken. Doch Sie können die Zahl der vergeblichen Loginversuche beschränken.
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.
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.
Wenn Sie Bilder in einen Beitrag oder eine Seite einfügen, schlägt Ihnen Wordpress stets einen Link vor. Meist auf die Bilddatei oder auf eine nichtssagende Anhangsseite. Dieses Verhalten lässt sich mit ein paar Zeilen Code ein für allemal ausschalten.
Das kommt in den besten Familien vor: Sie wechseln die Domain Ihrer Wordpress-Website und prompt können Sie nicht mehr ins Backend einsteigen. Die Website werkelt zwar unter neuer Adresse; aber sie ist nunmehr ein Geisterschiff. Don't panic: Das Problem haben sie ganz schnell gelöst.
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.
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.
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.
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.
Im Divi-Theme werden Module ohne Zutun vertikal am oberen Rand der Spalte dargestellt. Das passt meistens - doch bei mehrspaltigen Zeilen kann man sich dies auch mal anders wünschen. Mittiges Ausrichten oder Module, welche vertikal unten platziert werden, sind mit ein paar Zeilen CSS-Code ganz einfach möglich.
Out of the Box stellt Wordpress für Ihre Beiträge Kategorien und Schlagworte zur Verfügung - nicht aber für Seiten. Wenn Sie dies vermissen, können Sie mit ein wenig Code nachbessern.
Im Divi-Theme wechselt die Navigation standardmässig bei 980px Bildschirmbreite auf das Hamburger-Menu. Das ist meist sinnvoll - aber nicht in jedem Fall. Sie können den so genannten «Breakpoint» darum ganz einfach selbst festlegen. Sie übersteuern damit den Divi-Standardwert und bestimmen, wann der Wechsel in der Navigation geschehen soll.
Wenn Ihre Wordpress-Website Fehler hat, kann Ihnen der Debug-Modus weiterhelfen. Dieser lässt sich ganz einfach aktivieren und macht Fehlermeldungen auf den betroffenen Seiten sichtbar.
Besonders wenn Sie sehr häufig Ihre Beiträge und Seiten überarbeiten, kann die Angabe eines Updatedatums für Besucherinnen und Besucher hilfreich sein. Dies lässt sich auf zweierlei Arten bewerkstelligen; wir erklären Ihnen beide.
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.
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.
Viele Schriftarten bieten auch einen Outline-Style an; werden damit gewissermassen «hohl» und haben einen feinen Rand um die Buchstaben und Zeichen. Wenn solche Fontstyles bei Ihren Schriftarten fehlen, kann der Effekt auch mit CSS fabriziert werden. Wir zeigen Ihnen, wie das geht.
Im Netz gibt es zahlreiche Bibliotheken mit tausenden von Schriftarten, welche Sie gratis verwenden dürfen. Es gibt zu praktisch jeder Anwendungsidee den passend gestylten Font. Mit ein paar Tricks finden Sie auch eine für Ihre Website taugliche Schriftart.
Google führt ein umfassendes Fontverzeichnis mit derzeit rund 1050 Schriftarten jeglicher Form. Die Fonts sind allesamt kostenlos erhältlich und lassen sich ganz einfach in die eigene Website einbinden.
Das Einbinden von eigenen Schriftarten ist nicht ganz ohne - unter dem Strich aber doch zu einfach, um auf hübsche und besonders passende Schriftarten zu verzichten. Dr. Code zeigt Ihnen wie es auf jeden Fall klappt
Schriftarten können Sie im Divi-Theme sehr unkompliziert lokal einbinden. Mit dieser Methode können Sie Fonts im OTF- oder TTF-Format hochladen. Hier erfahren Sie wie der Trick vonstatten geht.
Die netten Icon-Fonts - wie sie etwa bei Font Awesome zu haben sind - vermögen ja durchaus zu gefallen. Aber es geht noch einfacher: Einen kleinen aber feinen Strauss an Icons können Sie direkt mit der Tastatur eingeben.
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.
