Kategorie: WordPress

Wann ist ein Element im Viewport

Es gibt eine relativ neue Möglichkeit auf einfache Art und Weise zu sehen, ob sich ein Element im Viewport (im sichtbaren Bereich) befindet oder nicht. Es ist sogenannte Vanilla Script also pures JavaScript und benötigt keine externe Bibliothek. Jetzt kann man einfach im CSS eine dementsprechende Animation erzeugen in etwa so: Nun faden die Elemente […]

WordPress Seiten Backend anpassen

Oft brauchen wir bestimmte Module in der Anzeige des Backends nicht und müssen die erst wieder wegklicken etc. Es gibt hier ein kleines Snippet um die bestimmten Module auszublenden, welches man in die functions.php einfügen kann: Dort können beim Backend die Panels wie hier ausgeblendet werden:

Starter WordPress Theme von jado

Es ist soweit, endlich haben wir mal wieder ein wenig Zeit gefunden, um an unserem Basis-WordPress-Theme weiterzuarbeiten. Die Version 2.1 ist vollendet. So haben wir im Code ordentlich ausgemistet (keine IE11-Hacks mehr) und einige tolle Features hinzugefügt (Gutenberg über SCSS mit laden), Performance und onsite-SEO verbessert und vieles mehr. Weiter Informationen findet ihr auf der […]

WordPress unterstützt WebP seit Version 5.8

Seit der WordPress-Version 5.8 die vor wenigen Tagen veröffentlich wurde, gibt es die Möglichkeit WebP-Bilder ins Backend zu laden. Man spart sich gegenüber dem bisher gängigen JPG-Format ca. 30% an Datenvolumen. Wie auch bei JPGs kann man über die functions.php ein Code-Snippet integrieren welches die Kompression der webP-Bilder beim Upload beeinflusst:

Gutenberg aktivieren in Custom Post Types

Wenn man in Custom Post Types (CTP) auch Gutenberg aktivieren mag, macht man das über folgende Zeile: Hier nur ein Auszug für die Zeile die in den $args array ergänzt werden sollte.

Vimeo fullscreen embed CSS

Wenn ihr Vimeo in fluide responsive Designs einbaut, packt WordPress das in einen iFrame der irgendwelche absoluten Standardmaße eingibt. Dieses Code-Snippet im CSS ermöglicht das auf die komplette Breit auszuweiten, wenn Gutenberg aktiviert ist und ihr das Video über den Gutenberg-Block Vimeo eingebunden habt. Hier kommt es aber auf das Seitenverhältnis an! Bitte ansonsten das […]

Gutenberg im Frontend deaktivieren

Es gibt Szenarien in denen es Sinn macht, die Styles von Gutenberg zu deaktivieren. Wie das geht möchte ich hier kurz erläutern. Bitte kopiert hierzu diesen Code in eure functions.php: Warum das alles: Wenn es nicht benötigt wird spart es wieder ein File was geladen werden muss. Oder besser: Man kann in das style.css das […]

Gutenberg volle Breite der Inhalte

Es gibt einen einfachen Weg in einem selber gebautem Theme bei WordPress einen Inhaltsblock von Gutenberg über die gesamte Breite laufen zulassen. Alles was ihr dafür tun müsst ist diesen Code in die functions.php zu integrieren: Jetzt könnt ihr die Inhaltsblöcke auch auf die komplette Breite „ausweiten“:

Sitemap.xml für Google SEO

Seit der WordPress Version 5.5. gibt es eine Ausgabe von einer Sitemap die man in der Google Search Console direkt eingeben kann nach erfolgreichem Start der Webseite. Die Adresse der Sitemap ist üblicherweise: https://meineSeite.de/wp-sitemap.xml

Eigenes Widget für WordPress Dashboard

Manchmal möchte man den Kunden zusätzliche Infos im Backend bieten. Diese könnt ihr über ein Widget lösen, in dem ihr HTML einfügen könnt – der Code kommt wie fast immer am besten in die functions.php eures aktuellen Themes:

Eigene Bildgrößen definieren

Für diverse Szenarien gibt es die Möglichkeit eigene Bildgrößen zu definieren. So kann man Preview-Bildchen beispielsweise für die Mobile-Ansicht und die Desktop-Ansicht unterscheiden. Dazu müsst ihr nur ein Snippet in dieser Art in eure functions.php eures WordPress-Themes kopieren und anpassen: So wird das Bild beschnitten und auf diese Größen skaliert. Wenn man die Bilder auf […]

SVG Upload erlauben in WordPress

Es gibt Fälle, dass man SVGs in WordPress in die Mediathek hochladen muss. Es ist möglich mit einem kleinem Snippet, welches in die functions.php kommt:

WordPress Backend Menü-Punkte ausblenden

Um das Backend für die Kunden möglichst übersichtlich zu gestalten, bietet es sich an, Menüpunkte die keine Verwendung finden per Code auszublenden. Diese Snippet geht wie fast immer in die functions.php des aktuellen WordPress-Themes: Beispielsweise könnte dann ein Backend von WordPress so aussehen:

Telefonnummern nur auf mobilen Geräten verlinken

Jeder kennt wahrscheinlich das Problem, das Telefonnummern nur auf mobilen Geräten verlinkt werden soll. jQuery kann hier ein wenig nachhelfen (vorasusgesetzt jQuery ist eingebunden!): So sollte in etwa der HTML Code aussehen: Und dieses Script hier setzt ihr unten bevor der body-Tag geschlossen wird:

Dashicons – die Icon-Wunderwaffe von WordPress

WordPress bringt einen Haufen schöner Icons mit, ein wenig versteckt aber sehr gut zu nutzen kann man die, wenn man sie einmal in der functions.php für das Frontend aktiviert: Jetzt muss man im DOM nur noch ein div oder span anlegen und dort zwei Klassen vergeben: Sehr schön gelöst ist hier, dass die Icons als Font […]

Google Analytics ohne Plugin in WordPress integrieren

Hier der Code-Snippet, den man am besten oberhalb des </body>-Tags (schliessend!) einfügen kann, um Google Analytics „rechtskomform*“ in seine Webseite ohne zusätzliches Plugin einzubinden. HINWEIS: Natürlich muss ‚UA-XXXXX-XXX‚ noch mit der richtigen ID versehen werden – und ganz wichtig: Bitte auch einen Rechtstext in das Impressum, wenn Sie Google Analytics auf Ihrem Internetauftritt verwenden! * […]

Revisionen aus der Datenbank löschen und beschränken

Wieder einmal hat sich ein Projekt über Jahre gezogen, dies bringt oft viele inhaltliche Änderungen mit und bläst somit die Datenbank auf. Also rein in PHPmyAdmin und unten stehenden Befehl ins SQL eingeben: WICHTIG: Backup von der Datenbank vorher machen! HINWEIS: wp_posts kann auch anders heissen! Bitte schauen wie sich das zusammensetzt – beispielsweise bei einer WordPress Multisite! […]

Debug Mode im WordPress

Der Debug-Mode ist ein sehr nützliches Tool in WordPress. Mit dem folgenden Code kann man prima einfach den Debug-Mode im Development Modus einschalten (local) und wenn der Code live geht – ausschalten. Funktioniert natürlich nur, wenn die lokale Entwicklungsumgebung ein Namen wie: MeineSeite.local hat! Dafür diesen Code in die functions.php einsetzen (statt define(‚ja_DEBUG‘, true);):

WordPress absichern xmlrpc

Die XMLrpc-Schnittstelle bei WordPress ist ein nützliches Ding, wenn man es braucht, so kann man mit ihr direkt aus einer App (iOS und Android) beispielsweise Artikel veröffentlichen/editieren, wenn dies aber nicht benötigt wird, rate ich dringend, diese zu deaktivieren, da es auch als „Einfallstor“ gern gesehen wird. Dazu bitte folgenden Code in die functions.php des WordPress Themes einfügen:

Google Maps ohne Plugin in Webseite einbinden

Es gibt unzählige Plugins, um Google Maps in eine Webseite einzubinden, da es aber nicht das gab, was wir wollten (Styling selbst bestimmen, eigener Marker mit Verlinkung, etc.) haben wir ein Script zusammengebaut, um all diese Funktionen abzubilden. HINWEIS: Seit 2016 muss man die Maps registrieren und sich bei Google einen API-Schlüssel besorgen. Auch der schmerzhafte […]

Template Name im Frontend von WordPress ausgeben

Manchmal ist es ein rechtes Durcheinander, wenn man ein fremdes WordPress-Theme übernimmt und damit arbeiten muss, oder wenn man auf vorgefertigte Templates zurückgreifen muss. Für ein wenig Transparenz sorgt folgender Code-Schnipsel, den Sie beispielsweise in die footer.php einfügen können: Das ganze dann am besten mit diesem oder ähnlichem CSS versehen:

Arbeitsumgebungen in der wp-config.php diversifizieren

Wenn wir eine Webseite entwicklen, tun wir das immer direkt an unserem Computer (Lokal). Der Kunde bekommt das ganze auf einem unserer Testserver zu sehen, wenn der Entwicklungsstand präsentierbar ist (Staging). Wenn dafür eine Abnahme kommt, kann man das auf den Live-Server umziehen (Live). Durch diese Schritte kann man immer nachvollziehen, was wann wo geändert […]

Serverseitige Komprimierung über die .htaccess-Datei

Das ist ein Code-Snippet, welches ihr in die .htaccess-Datei einfügen könnt. Bitte schaut euch aber dringend auch die Apache-Settings eures Servers an und gleicht das mit euren Komprimierungsverfahren ab! Das ganze gibt wieder je nach Servereinstellungen ordentlich Performance beim Laden und damit auch ein besseres SEO-Ranking!

WordPress Custom Post Types

Wichtig zu wissen: Wenn man die PostTypes registriert in der jeweiligen Datei und dann den „slug“ unbenennt, muss man die Permalinks kurz nochmal speichern, damit das WordPress die ganzen URLs umschreiben kann! Beispiel: Permalinks können hier nochmal gespeichert werden: Einstellungen -> Permalinks – Einstellung ändern, speichern und wieder auf die alte Einstellung und nochmal speichern, damit […]

WordPress SEO – schöne title-Elemente!

So könnt ihr über die Custom Fields in WordPress auf der jeweiligen Seite einen Titel-Attribut vergeben – das ganze mit hauseigenen Mitteln von WordPress. Im Feld beim Custom Fields muss dann nur einmal „title“ eingetragen werden. Wenn das einmal passiert ist, kann das über das Pulldown ausgewählt werden. Das ganze bitte in der header.php in […]

Sitemap.xml für Google ohne Plugin

Hier können Sie sehen, wie man eine Sitemap im XML Format ohne Plugin in WordPress einfügt. Den unten stehenden Code bitte in die functions.php in Ihrem Theme-Verzeichnis von WordPress kopieren. ACHTUNG: Seit WordPress Version 5.5 kann nativ eine Sitemap.xml ausgeben werden!