Connect with us

WordPress

So beheben Sie die Warnung vor Leverage Browser Caching in WordPress

Published

on

So beheben Sie die Warnung vor Leverage Browser Caching in WordPress

Möchten Sie lernen, wie Sie die Browser-Caching-Warnung in WordPress einfach beheben können?

Indem Sie die Browser-Caching-Warnung beheben, beschleunigen Sie Ihre WordPress-Site schnell und bieten Ihren Website-Besuchern ein besseres Erlebnis.

In diesem Artikel zeigen wir Ihnen, wie Sie die Browser-Caching-Warnung in WordPress einfach beheben können.

So beheben Sie die Browser-Caching-Warnung in WordPress

Was ist Browser-Caching in WordPress?
Browser-Caching ist eine Möglichkeit, die Ladegeschwindigkeit Ihrer Website zu verbessern. Beim Laden einer Webseite werden alle Dateien separat geladen.

Dadurch werden mehrere Anfragen zwischen dem Browser und Ihrem WordPress-Hosting- Server erstellt, was die Ladezeit der Webseite erhöht.

Wenn Browser-Caching aktiviert ist, speichert Ihr Webbrowser eine Kopie Ihrer Webseite lokal. Dadurch können Browser gängige Dateien wie Stylesheets, Logos, Bilder usw. schneller laden, wenn der Benutzer eine zweite Seite Ihrer Website besucht.

Ergebnisse des Website-Geschwindigkeitstests

Dadurch wird die Gesamtlast des Servers reduziert, da weniger Anfragen an den eigentlichen Server gestellt werden und sich dadurch die Leistung Ihrer Website verbessert.

Wo sehen Sie die Warnung zum Leverage Browser Caching für WordPress?
Die Warnung zur Nutzung des Browser-Caching bedeutet, dass Sie das Browser-Caching nicht aktiviert haben oder Ihr Caching falsch eingerichtet sein könnte.

Wenn Sie einen Website-Geschwindigkeitstest durchführen , erhalten Sie einen Bericht, der Ihnen zeigt, was Sie beheben können, um WordPress zu beschleunigen.

Wenn Ihre Website derzeit kein Browser-Caching verwendet, erhalten Sie eine Warnung, um das Browser-Caching zu aktivieren.

So kann es aussehen, wenn Sie sich Ihre Ergebnisse aus einem Tool zur Seitengeschwindigkeitsanalyse ansehen.

Warnung vor Browser-Caching nutzen

Manchmal erhalten Sie eine Warnung, die besagt, dass Ihre effiziente Cache-Richtlinie nicht funktioniert.

Beide Warnungen beziehen sich auf einen Fehler bei der Einrichtung Ihres Browser-Cachings.

Effiziente Cache-Richtlinienwarnung

Die Nutzung des Browser-Caching bedeutet, dass Sie die Caching-Regeln aktivieren und anpassen, um Ihre Site zu beschleunigen.

Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie die Browser-Caching-Warnung in WordPress mit zwei verschiedenen Methoden einfach beheben können.

Verwenden Sie einfach die unten stehenden Quicklinks, um auszuwählen, wie Sie die Browser-Caching-Warnung in WordPress beheben möchten.

Beheben Sie die Browser-Caching-Warnung mithilfe eines Plugins

Beheben Sie die Browser-Caching-Warnung mit Code
Methode 1. Beheben Sie die Warnung vor Leverage Browser Caching mit dem WP Rocket WordPress Plugin
WP Rocket ist das beste WordPress-Caching-Plugin auf dem Markt. Es ist sehr anfängerfreundlich und kann Ihnen helfen, Ihre Website auf Geschwindigkeit zu optimieren, auch ohne komplexe Caching- und Geschwindigkeitsbegriffe zu kennen.

WP-Rocket

Direkt nach dem Auspacken werden alle empfohlenen Caching-Einstellungen Ihre WordPress-Website wirklich beschleunigen .

Um die Browser-Caching-Warnung mit WP Rocket zu beheben, müssen Sie nur das Plugin installieren und aktivieren.

Das ist es.

Weitere Informationen finden Sie in unserer Anleitung zur ordnungsgemäßen Installation und Einrichtung von WP Rocket in WordPress .

WP Rocket aktiviert automatisch das Browser-Caching und ändert Ihre .htaccessDatei mit den richtigen Regeln.

Hinweis: Wenn Sie SiteGround -Webhosting verwenden, können Sie stattdessen das kostenlose SiteGround Optimizer-Plugin verwenden.

Es hat fast die gleichen Funktionen wie WP Rocket und aktiviert automatisch das Browser-Caching für Sie.

Methode 2. Beheben Sie die Browser-Caching-Warnung durch Hinzufügen von Code zu WordPress
Die zweite Methode besteht darin, Ihren WordPress-Dateien Code hinzuzufügen. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Leitfaden für Anfänger zum Einfügen von Snippets aus dem Web in WordPress .

Diese Methode ist nicht so anfängerfreundlich, also befolgen Sie diese bitte nur, wenn Sie genau wissen, was Sie tun. Für die meisten Geschäftsinhaber empfehlen wir Methode 1.

Lassen Sie uns nun einen Blick darauf werfen, wie Sie die Browser-Caching-Warnung beheben können, indem Sie Code zu WordPress hinzufügen.

Hinweis: Bevor Sie Ihren WordPress-Code anpassen, empfehlen wir Ihnen, Ihre WordPress-Site zu sichern. Weitere Informationen finden Sie in unserem Leitfaden zum Sichern und Wiederherstellen Ihrer WordPress-Site .

Stellen Sie fest, ob auf Ihrer Website Apache oder Nginx ausgeführt wird?

Zuerst müssen Sie herausfinden, ob Ihre Website Apache- oder Nginx-Server verwendet.

Öffnen Sie dazu Ihre Website in einem neuen Tab oder Fenster. Klicken Sie dann mit der rechten Maustaste und wählen Sie die Option “Inspizieren”.

Rechtsklick und inspizieren

Klicken Sie anschließend oben auf der Seite auf die Registerkarte “Netzwerk”.

Möglicherweise müssen Sie die Seite aktualisieren, damit die Ergebnisse geladen werden.

Klicken Sie auf Netzwerk

Klicken Sie anschließend in der Spalte “Name” auf Ihren Domainnamen.

Es sollte oben auf der Seite stehen.

Klicken Sie auf die Website-URL

Dann sehen Sie im Abschnitt “Antwort-Header” ein Element namens “Server”, in dem der Servertyp angezeigt wird. In diesem Fall läuft die Site auf einem Apache-Server.

Servertyp suchen

Cache-Control und Expire-Header in Apache hinzufügen

Um die Browser-Caching-Warnung bei einem Apache-Server zu beheben, fügen Sie Ihrer .htaccessDatei Code hinzu .

Um diese Datei zu bearbeiten, müssen Sie sich mit einem FTP-Client oder dem Dateimanager-Tool Ihres Hosts mit Ihrem WordPress-Hosting- Konto verbinden .

Nachdem Sie verbunden sind, können Sie Ihre .htaccessDatei im Stammordner Ihrer Website sehen.

htaccess-FTP

Wenn Sie es nicht finden können, machen Sie sich keine Sorgen. Manchmal kann diese Datei ausgeblendet werden. Weitere Informationen finden Sie in unserem Leitfaden, warum Sie die .htaccess-Datei auf Ihrer WordPress-Site nicht finden können .

Als Nächstes müssen Sie Cache-Control- und/oder Expire-Header hinzufügen, um das Browser-Caching zu aktivieren. Dadurch wird dem Webbrowser mitgeteilt, wie lange er Ihre Website-Ressourcen speichern soll, bevor sie gelöscht werden.

Der Cache-Control-Header gibt dem Webbrowser spezifische Informationen darüber, wie das Caching erfolgen soll.

Der Expirs-Header aktiviert das Caching und teilt dem Webbrowser mit, wie lange er bestimmte Dateien speichern soll, bevor er gelöscht wird.

Sie können Ihrer .htaccessDatei den folgenden Code hinzufügen, um Ablaufheader hinzuzufügen:

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/svg “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 3 days”
</IfModule>
## EXPIRES HEADER CACHING ##
Dieser Code legt je nach Dateityp unterschiedliche Ablaufdaten für den Cache fest.

Danach können Sie den folgenden Code hinzufügen, um die Cache-Steuerung zu aktivieren:

Dieser Code legt die Zeit fest, zu der der Cache abläuft. Im obigen Beispiel läuft der Cache in 90.000 Sekunden ab.

Danach fordert der Webbrowser neue Versionen der Dateien an.

Hinzufügen von Cache-Control- und Expire-Headern in Nginx

Wenn Sie einen Nginx-Webserver zum Hosten Ihres WordPress-Blogs verwenden , können Sie die Serverkonfigurationsdatei bearbeiten, um den Browser-Caching-Fehler zu beheben.

Wie Sie diese Datei bearbeiten und darauf zugreifen, hängt von Ihrem Host ab. Sie können sich also an Ihren Hosting-Provider wenden, wenn Sie Hilfe beim Zugriff auf die Datei benötigen.

Dann müssen Sie den folgenden Code hinzufügen, um abgelaufene Header hinzuzufügen:

location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 3d;
}
Dieser Code legt die Ablaufzeiten für die verschiedenen Dateitypen fest. Beachten Sie, dass Bilder länger im Cache gespeichert werden als HTML-, CSS-, JS- und andere Dateitypen, da Bilder normalerweise gleich bleiben.

Danach können Sie den folgenden Code hinzufügen, um Cache-Control-Header hinzuzufügen:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 14d;
add_header Cache-Control “public, no-transform”;
}
Dieser Code legt die Zeit fest, zu der der Cache abläuft. Es teilt Ihrem Server mit, dass sich die oben genannten Dateitypen 14 Tage lang nicht ändern.

Wenn Sie WordPress noch beschleunigen möchten, lesen Sie unbedingt unseren Leitfaden zur Steigerung der Geschwindigkeit und Leistung von WordPress .

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Browser-Caching-Warnung in WordPress einfach beheben können. Vielleicht möchten Sie auch unsere ultimative Liste der häufigsten WordPress-Fehler und deren Behebung sowie unsere Expertenauswahl der besten SEO-Tools und Plugins sehen , um mehr Traffic zu erzielen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress

So verbinden Sie beliebige WordPress-Formulare mit Google Sheets (einfacher Weg)

Published

on

By

So verbinden Sie beliebige WordPress-Formulare mit Google Sheets (einfacher Weg)

Möchten Sie Ihre WordPress-Formulare mit Google Sheets verbinden?

Google Tabellen erleichtert Ihnen die Verwaltung Ihrer Formulardaten in einer Tabelle und verfügt über integrierte Tools für die Zusammenarbeit, um Arbeitsabläufe zu verbessern.

In diesem Artikel zeigen wir Ihnen, wie Sie beliebige WordPress-Formulare einfach mit Google Sheets verbinden, damit Sie automatisch WordPress-Formulardaten an Google Sheets senden können.

So verbinden Sie WordPress-Formulare mit Google Sheets (der einfache Weg)

Warum WordPress-Formulare mit Google Sheets verbinden?
Google Sheets ist eine beliebte kostenlose Tabellenkalkulationssoftware von Google. Wenn Sie Ihre WordPress-Formulare mit Google Sheets verbinden, können Sie Ihre Formulardaten einfacher verwalten und sortieren.

Egal, ob Sie einen Fragebogen erstellen , Erfahrungsberichte sammeln , ein Umfrageformular erstellen oder etwas anderes, Sie können Ihre WordPress-Formulare mit nur wenigen Klicks mit Google Sheets verbinden.

Die Integration Ihrer Formulareinträge in Google Sheets kann Ihrer WordPress-Website in vielerlei Hinsicht helfen .

Macht es einfach, Ihrem Team Zugriff auf Formulardaten zu gewähren, ohne ein neues WordPress-Login erstellen zu müssen
Erleichtert die Interpretation und Analyse Ihrer Formular-/Umfragedaten
Richten Sie die automatische Datenerfassung ein und reduzieren Sie Fehler durch manuelle Dateneingabe
Lassen Sie uns nun einen Blick darauf werfen, wie Sie auf einfache Weise beliebige WordPress-Formulare mit Google Sheets verbinden können.

Schritt 1. Erstellen Sie ein WordPress-Formular mit WPForms
Als erstes benötigen Sie ein aktives Kontaktformular auf Ihrer WordPress-Site, das als Datenerfassungsquelle dient.

Für dieses Tutorial verwenden wir das WPForms- Plugin. Es ist das beste Kontaktformular-Plugin für WordPress, das von über 4 Millionen Websites verwendet wird.

Ihr anfängerfreundlicher Formularersteller kann verwendet werden, um fast jede Art von WordPress-Formular zu erstellen. Sie können mit einer der über 150 Formularvorlagen beginnen oder einfach den Drag-and-Drop-Builder verwenden, um Formularfelder hinzuzufügen und nach Ihren Wünschen anzupassen.

Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Erstellen eines Kontaktformulars in WordPress .

Wenn Sie noch keine Google Tabellen-Tabelle erstellt haben, müssen Sie dies jetzt tun.

Rufen Sie die Google Tabellen- Website auf und klicken Sie auf “Leer”, um eine neue Tabelle hinzuzufügen.

Neue Google-Tabelle

Wenn Sie dann Tabellenspalten hinzufügen, möchten Sie, dass diese mit Ihren WordPress-Formularfeldern übereinstimmen.

In diesem Fall haben wir drei Spalten für „Name“, „E-Mail“ und „Nachricht“.

Google Tabellen-Tabelle

Schritt 2. Installieren und aktivieren Sie das Uncanny Automator WordPress Plugin
Um Ihre WordPress-Formulare mit Google Sheets zu verbinden, verwenden wir ein Automatisierungs-Plugin.

Das beste WordPress-Automatisierungs-Plugin ist Uncanny Automator . Es fungiert als Bindeglied zwischen WordPress-Plugins und anderen Apps von Drittanbietern, sodass sie problemlos miteinander kommunizieren können.

Es ist die leistungsstärkste Möglichkeit, Ihre WordPress-Blog- Prozesse ohne Code zu automatisieren .

Das Beste an Uncanny Automator ist, dass Sie nicht wie andere SaaS-Anbieter wie Zapier für jede Datenübertragung eine Steuer erheben.

Uncanny Automator funktioniert auch mit allen wichtigen Formularlösungen, einschließlich WPForms , Formidable Forms , Gravity Forms, Ninja Forms, WooCommerce und mehr.

Der Fokus dieses Tutorials liegt jedoch auf der Integration mit WPForms.

Hinweis: Es ist eine kostenlose Version des Plugins verfügbar, aber wir verwenden für dieses Tutorial die Pro-Version, da sie über die benötigte Google Sheets-Integration verfügt.

Unheimlicher Automat

Weitere Informationen finden Sie in unserem Leitfaden zum Erstellen automatisierter Workflows in WordPress mit Uncanny Automator .

Schritt 3. Verbinden Sie Ihr Google-Konto mit Uncanny Automator
Nachdem Uncanny Automator aktiviert und eingerichtet wurde, müssen Sie das Plugin mit Ihrem Google-Konto verbinden.

Navigieren Sie dazu zu Automator » Einstellungen und klicken Sie dann auf den Menüpunkt ‘Google’.

Google-Konto verbinden

Klicken Sie anschließend auf die Schaltfläche „Konto verbinden“.

Dadurch gelangen Sie zu einem Bildschirm, auf dem Sie Ihr Google-Konto autorisieren müssen.

Wählen Sie einfach das Google-Konto aus, das Sie verwenden möchten, und klicken Sie dann auf die Schaltfläche “Zulassen”.

Erteilen Sie die Berechtigung für das Google-Konto

Anschließend müssen Sie noch einmal auf “Zulassen” klicken, um Ihre Auswahl zu bestätigen.

Sobald Ihr Konto erfolgreich verbunden wurde, gelangen Sie zurück zum Bildschirm mit den Plugin-Einstellungen in Ihrem WordPress-Dashboard.

Erfolgreiche Integration des Google-Kontos

Schritt 4. Verbinden Sie Ihr WordPress-Formular mit Google Sheets mit Uncanny Automator
Jetzt ist es an der Zeit, Ihr WordPress-Formular mit dem zuvor erstellten Google Sheet zu verbinden.

Uncanny Automator verwendet sogenannte „Rezepte“, um verschiedene Apps und Plugins zu verbinden.

Um einen zu erstellen, gehen Sie zu Automator » Neu hinzufügen , klicken Sie auf die Option ‘Anonym’ und dann auf ‘Bestätigen’.

Sie möchten Anonym wählen, da es meistens neue anonyme Besucher sind, die die Formulare auf Ihrer Website ausfüllen.

Anonymes Rezept auswählen

Als nächstes können Sie Ihrem Rezept einen Namen geben.

Wählen Sie danach im Metafeld „Anonymer Trigger“ „WPForms“ aus.

WPForms-Trigger auswählen

Dann haben Sie zwei verschiedene Optionen zur Auswahl.

Wir wählen die Option “Ein Formular wurde gesendet”, da dadurch alle Formulareinsendungen an Google Tabellen gesendet werden.

Auslöser für gesendetes Formular auswählen

Wählen Sie dann Ihr Formular aus der Dropdown-Liste aus.

Klicken Sie danach auf die Schaltfläche ‘Speichern’.

Wählen Sie das WPForms-Formular

Da Sie oben ein anonymes Rezept ausgewählt haben, müssen Sie in WordPress einen neuen ‘Abonnenten’-Benutzer erstellen. Diese neue Abonnentenrolle wird verwendet, um die Formulardaten zu senden.

Weitere Informationen finden Sie in unserem Leitfaden zum Hinzufügen neuer Benutzer und Autoren zu Ihrem WordPress-Blog .

Wählen Sie dann im Metafeld “Aktionen” die Option “Bestehender Benutzer”.

Vorhandene Benutzeroption auswählen

Dadurch wird ein Popup angezeigt, in dem Sie das neue Benutzerkonto auswählen können.

Wählen Sie das Feld ‘ID’ aus und geben Sie die ID-Nummer des neu erstellten Benutzers ein.

Benutzer-ID eingeben

Um dies zu finden, gehen Sie in Ihrem WordPress-Dashboard zu Benutzer » Alle Benutzer .

Öffnen Sie dann den neuen Benutzer und suchen Sie die ID in der URL für die Seite.

Benutzer-ID finden

Wenn Sie das getan haben, wählen Sie „Nichts tun“.

Klicken Sie auf „Speichern“, um das bisherige Rezept zu speichern.

Wählen Sie Nichts tun und speichern

Klicken Sie anschließend auf die Schaltfläche „Aktion hinzufügen“.

Als nächstes müssen Sie “Google Tabellen” aus der Liste der Integrationen auswählen.

Wählen Sie Google Tabellen

Wählen Sie dann im Abschnitt “Aktion auswählen” die Option “Zeile in einer Google-Tabelle erstellen”.

Erstellen Sie eine Zeile in Google Sheet

Dadurch wird ein Menü geöffnet, in dem Sie die zuvor erstellte Tabelle auswählen können.

Sie können nach dem Namen Ihrer Tabelle suchen, und es wird eine Liste mit Optionen angezeigt.

Wählen Sie die richtige Tabelle aus

Nachdem Sie die Tabelle ausgewählt haben, klicken Sie im Abschnitt “Zeile” auf die Schaltfläche “Spalten abrufen”.

Dadurch wird eine Liste von Spalten aus der Tabelle angezeigt.

Wählen Sie Spalten abrufen

Sie möchten die Formularfelder Ihren Tabellenspalten zuordnen.

Suchen Sie neben jeder Formularspalte das entsprechende Tabellenkalkulationsfeld. Der Name ‘Spalte’ sollte mit dem Namen ‘Wert’ identisch sein.

Spalte und Wert abgleichen

Nachdem Sie alle Felder abgeglichen haben, sieht es ähnlich aus wie die obigen Einstellungen.

Stellen Sie sicher, dass Sie auf “Speichern” klicken, wenn Sie mit der Erstellung des Rezepts fertig sind.

Danach müssen Sie Ihr neues Rezept veröffentlichen. Dadurch wird sichergestellt, dass Formulareinträge automatisch an Ihre Google Tabellen-Tabelle gesendet werden.

Um das Rezept zu veröffentlichen, musst du nur den Rezeptumschalter auf ‘Live’ schalten.

Rezept live machen

Wenn ein Besucher Ihr Formular ausfüllt, werden die Informationen jetzt sofort in Google Tabellen angezeigt.

Es gibt viele andere No-Code-Integrationen und Automatisierungen, die Sie mit diesem Plugin erstellen können, wie die Integration von Slack in WordPress und sogar das Einrichten von SMS-Benachrichtigungen in WooCommerce .

Wir hoffen, dieser Artikel hat Ihnen geholfen, WordPress-Formulare auf einfache Weise mit Google Sheets zu verbinden. Vielleicht möchten Sie auch unsere Expertenauswahl der besten No-Code-Drag-and-Drop-WordPress-Seitenersteller und unsere Liste der Must-Have-WordPress-Plugins für Unternehmen sehen.

Continue Reading

WordPress

So zeigen Sie Breadcrumb-Navigationslinks in WordPress an

Published

on

By

So zeigen Sie Breadcrumb-Navigationslinks in WordPress an

Möchten Sie Breadcrumb-Navigationslinks auf Ihrer WordPress-Site anzeigen?

Die Breadcrumb-Navigation teilt den Benutzern mit, wo sie sich auf einer Website relativ zur Startseite befinden. Dieser Breadcrumb-Trail wird dann auch in den Suchergebnissen angezeigt und hebt Ihre Website hervor.

In diesem Artikel zeigen wir Ihnen, wie Sie Breadcrumb-Navigationslinks in WordPress anzeigen.

Einfache Anzeige von Breadcrumb-Navigationslinks in WordPress

Was ist Breadcrumb-Navigation und warum brauchen Sie sie?
Breadcrumb-Navigation ist ein Begriff, der verwendet wird, um ein hierarchisches Navigationsmenü zu beschreiben, das als eine Spur von Links dargestellt wird. Es wird oft als sekundäre Navigation verwendet, mit der Benutzer in der Seitenhierarchie der Website nach oben gelangen können.

Auf der WPBeginner-Website angezeigte Brotkrumen

Breadcrumb-Navigationslinks unterscheiden sich vom Standard- Navigationsmenüsystem in WordPress.

Der Zweck der Breadcrumb-Navigation besteht darin, Benutzern beim Navigieren auf Ihrer Website zu helfen. Es hilft auch Suchmaschinen, die Struktur und Hierarchie von Links auf einer Webseite zu verstehen.

Wenn Ihre Breadcrumbs richtig eingerichtet sind, werden sie von Suchmaschinen wie Google zusammen mit dem Seitentitel in den Suchergebnissen angezeigt. Dadurch erhält Ihre Website mehr Sichtbarkeit in den Suchergebnissen und erhöht Ihre Klickrate .

Breadcrumb-Navigation in den Suchergebnissen

Die Methoden in diesem Handbuch helfen Ihnen, Breadcrumbs mithilfe von Schema-Markup richtig einzurichten. Schema ist ein intelligenter Markup-Code, der Google hilft, Ihre Breadcrumbs zu identifizieren, damit sie in den Suchergebnissen angezeigt werden.

Lassen Sie uns jedoch einen Blick darauf werfen, wie Sie Breadcrumb-Navigationslinks in WordPress hinzufügen. Wir zeigen Ihnen zwei Methoden, und Sie können die für Sie am besten geeignete auswählen.

Methode 1. Hinzufügen von Breadcrumb-Navigation in WordPress mit All in One SEO (empfohlen)
Diese Methode ist einfacher und wird allen WordPress-Benutzern empfohlen.

Für diese Methode verwenden wir All in One SEO für WordPress , das beste WordPress SEO-Plugin auf dem Markt. Es hilft Ihnen, Ihr WordPress-SEO ganz einfach ohne technische Kenntnisse zu verbessern. Es kommt auch mit einer einfach zu bedienenden Breadcrumbs-Funktion.

Hinweis : Es gibt auch eine kostenlose Version von All in One SEO mit eingeschränkten Funktionen, einschließlich Breadcrumbs.

Nach der Aktivierung gelangen Sie zum Einrichtungsassistenten des Plugins. Sie können den Anweisungen auf dem Bildschirm folgen, um das Plugin einzurichten.

All in One SEO-Assistent

Brauchen Sie Hilfe bei der Einrichtung? Sehen Sie sich unsere Schritt-für-Schritt-Anleitung zur Installation und Einrichtung von All in One SEO an .

Als nächstes müssen Sie die Seite All in One SEO » Allgemeine Einstellungen aufrufen und zur Registerkarte Breadcrumbs wechseln.

Breadcrumbs-Anzeige in All in One SEO aktivieren

Jetzt wird das Breadcrumbs-Schema-Markup automatisch von All in One SEO zum Code Ihrer Website hinzugefügt, damit Suchmaschinen es finden können.

Wenn Sie jedoch auch Breadcrumb-Navigationslinks auf Ihrer Website anzeigen möchten, müssen Sie die Option “Breadcrumbs aktivieren” aktivieren. Wenn Sie den Schalter umschalten, können Sie die verschiedenen Breadcrumb-Anzeigeeinstellungen anzeigen, die Sie auf Ihrer Website verwenden können.

Anzeigeoptionen für Brotkrümel

Es gibt vier Möglichkeiten, den Breadcrumb-Navigationspfad auf Ihrer WordPress-Website anzuzeigen .

1. Hinzufügen von Breadcrumb-Navigation mit dem Shortcode

Die Shortcode-Methode ist einfach und ermöglicht es Ihnen, Breadcrumb-Navigationslinks in Ihren WordPress-Posts und -Seiten oder auf Produktseiten in Ihrem Online-Shop anzuzeigen .

Bearbeiten Sie einfach den Beitrag, die Seite oder das Produkt und fügen Sie den folgenden Shortcode hinzu, wo Sie den Breadcrumb-Navigationspfad anzeigen möchten.

[aioseo_breadcrumbs]

Wenn Sie den Standardblock-Editor verwenden, wird der Shortcode automatisch in den Shortcode-Block konvertiert.

AIOSEO Breadcrumb-Navigationskurzcode

Sie können Ihren Beitrag oder Ihre Seite jetzt speichern und in der Vorschau anzeigen, um das Breadcrumb-Navigationsmenü in Aktion zu sehen. So sah es auf unserer Testseite aus.

AIOSEO Breadcrumb-Navigationsmenü

2. Hinzufügen von Breadcrumb-Navigation mit dem Gutenberg-Block

Wenn Sie nun die Shortcode-Option nicht verwenden möchten oder sich nicht an den Shortcode erinnern, können Sie die Breadcrumb-Navigation anzeigen, indem Sie den Block ‘AIOSEO – Breadcrumbs’ verwenden.

Bearbeiten Sie einfach den Beitrag oder die Seite, auf der Sie die Breadcrumb-Navigation anzeigen möchten, und fügen Sie den AIOSEO – Breadcrumbs-Block hinzu.

Hinzufügen eines AIOSEO-Breadcrumbs-Blocks

Das Plugin lädt dann eine Live-Vorschau Ihrer Breadcrumb-Navigationslinks und zeigt sie im Inhaltsbereich an.

Vorschau des Breadcrumb-Blocks

Vergessen Sie nicht, Ihre Änderungen zu aktualisieren oder zu veröffentlichen.

3. Hinzufügen von Breadcrumb-Navigation mit Widget

Die beiden oben genannten Methoden erfordern, dass Sie in jedem Beitrag oder jeder Seite, auf der Sie Breadcrumb-Navigationslinks anzeigen möchten, einen Shortcode oder Block hinzufügen.

Was wäre, wenn Sie Breadcrumbs automatisch für jeden Beitrag oder jede Seite anzeigen möchten?

Das AIOSEO Breadcrumbs- Widget ermöglicht Ihnen dies ganz einfach. Gehen Sie einfach auf die Seite Aussehen » Widgets und fügen Sie das Widget „AIOSEO – Breadcrumbs“ zur Seitenleiste hinzu.

AIOSEO Breadcrumbs-Widget

Sie können einen Titel für das Widget angeben oder ihn leer lassen, wenn Sie dies bevorzugen. Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Einstellungen zu speichern.

Sie können jetzt Ihre Website besuchen und sehen das Breadcrumb-Navigationsmenü auf allen Beiträgen und Seiten.

Breadcrumbs-Navigation im Seitenleisten-Widget

4. Hinzufügen von Breadcrumb-Navigation mit Code

Mit dieser Methode können Sie Breadcrumbs-Navigationslinks genau dort anzeigen, wo Sie sie haben möchten. Es erfordert jedoch, dass Sie Ihren WordPress-Themedateien Code hinzufügen.

Wenn Sie dies noch nicht getan haben, vergessen Sie nicht, unseren Artikel zum Hinzufügen von Code-Snippets in WordPress zu lesen .

Zuerst müssen Sie entscheiden, wo Sie die Breadcrumb-Links anzeigen möchten. Am häufigsten werden Breadcrumb-Links unterhalb des einzelnen Beitrags, der Seite oder des Produkttitels angezeigt.

WordPress-Themes verwenden Vorlagendateien, um verschiedene Abschnitte Ihrer Website anzuzeigen. Zum Beispiel würden viele Themes eine Datei namens content-single.php verwenden, die sich im Ordner template-parts deines Themes befindet.

Sehen Sie sich unseren Spickzettel an, um herauszufinden, welche Dateien Sie in einem WordPress-Theme bearbeiten müssen .

Danach müssen Sie Ihre Designdatei mit einem FTP-Client bearbeiten. Anweisungen zum Hochladen von Dateien in WordPress finden Sie in unserem Leitfaden zur Verwendung von FTP . Platzieren Sie dann den folgenden Code an der Stelle, an der Sie die Breadcrumb-Navigationslinks anzeigen möchten.

1
<?php if( function_exists( ‘aioseo_breadcrumbs’ ) ) aioseo_breadcrumbs(); ?>
Vergessen Sie nicht, Ihre Änderungen zu speichern und die Datei wieder auf Ihre Website hochzuladen.

Sie können jetzt Ihre Website besuchen, um die Breadcrumb-Links in Aktion zu sehen.

Vorschau der Breadcrumbs-Navigationslinks

Ändern Sie die Anzeige von Breadcrumb-Links in AIOSEO
All in One SEO verwendet jetzt standardmäßig eine Vorlage, um Ihre Breadcrumb-Navigationslinks anzuzeigen. Es enthält einen Link zu Ihrer Startseite, Kategorie oder übergeordneten Seite sowie einen Beitrags- oder Seitentitel, getrennt durch das ».

Sie können dies ändern, indem Sie die Seite All in One SEO » Allgemeine Einstellungen aufrufen und zum Abschnitt Breadcrumb-Einstellungen scrollen.

Breadcrumb-Einstellungen

Von hier aus können Sie das Trennzeichen ändern, den Home-Link ein- oder ausblenden, ein Präfix hinzufügen und vieles mehr.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern.

Methode 2. Hinzufügen von Breadcrumb-Navigation mit Breadcrumb NavXT
Diese Methode kann mit jedem anderen WordPress SEO-Plugin verwendet werden. Es ist einfach zu verwenden, wenn Sie ein kompatibles Design haben, aber wenn nicht, müssen Sie Ihre Designdateien bearbeiten, um Ihre Breadcrumb-Navigationslinks anzuzeigen.

Als erstes müssen Sie das Breadcrumb NavXT- Plugin installieren und aktivieren . Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins .

Nach der Aktivierung müssen Sie die Seite Einstellungen » Breadcrumb NavXT aufrufen, um die Plugin-Einstellungen zu konfigurieren.

Einstellungsseite für das Breadcrumb NavXT-Plugin

Die Standardeinstellungen sollten für die meisten Websites funktionieren. Sie können die Einstellungen jedoch nach Bedarf anpassen.

Die Einstellungsseite ist in verschiedene Abschnitte unterteilt. Auf der Registerkarte Allgemeine Einstellungen können Sie den Stil und die Einstellungen Ihrer Breadcrumbs ändern.

Sie werden auch feststellen, dass diese Linkvorlagen Schema.org- Markup im Link-Tag verwenden.

Auf der Registerkarte Post-Typen unter den Plugin-Einstellungen können Sie Breadcrumb-Links für Posts, Seiten und alle benutzerdefinierten Post-Typen einrichten .

Sie können wählen, wie Sie Ihre Beitragshierarchie anzeigen möchten. Standardmäßig verwendet das Plugin Site Title > Category > Post Title . Sie können Kategorien durch Tags , Datumsangaben oder übergeordnete Beiträge ersetzen und das Trennzeichen ändern.

Die Registerkarten Taxonomien und Autoren enthalten ähnliche Vorlagen für Ihre Breadcrumb-Navigationslinks.

Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Änderungen zu speichern.

Anzeigen von Breadcrumb NavXT auf Ihrer Website

Breadcrumb NavXT bietet mehrere Möglichkeiten, um Breadcrumb-Navigationslinks auf Ihrer Website anzuzeigen.

1. Breadcrumb-Navigation mit Theme-Unterstützung anzeigen

Einige der beliebtesten WordPress-Themes verfügen über eine integrierte Option zur Anzeige der Breadcrumb-Navigation, indem Sie Breadcrumb NavXT oder Ihr WordPress-SEO-Plugin als Quelle auswählen.

Wenn Sie beispielsweise Astra verwenden , können Sie zur Seite Aussehen » Anpassen gehen und auf das Menü Breadcrumbs klicken.

Von dort aus wählen Sie, wo Ihre Breadcrumbs im Dropdown-Menü Position angezeigt werden sollen.

In der Breadcrumb-Quelle müssen Sie „Breadcrumb NavXT“ auswählen.

Hinzufügen von Breadcrumbs mit dem Theme-Anpasser

Wenn Sie einen einzelnen Beitrag oder eine Seite anzeigen, sehen Sie eine Live-Vorschau Ihrer Breadcrumb-Navigationslinks.

Vergessen Sie nicht, auf die Schaltfläche Veröffentlichen zu klicken, um Ihre Änderungen zu speichern.

2. Hinzufügen von Breadcrumbs-Navigation mit einem Widget

Das Plugin bietet auch ein Widget, mit dem Sie die Breadcrumb-Navigation in der Seitenleiste oder in jedem Widget-bereiten Bereich anzeigen können.

Gehen Sie zunächst zur Seite Aussehen » Widgets und fügen Sie das Breadcrumb NavXT-Widget zu Ihrer Seitenleiste hinzu.

Breadcrumb NavXT-Widget-Einstellungen

Die Standard-Widget-Einstellungen funktionieren für die meisten Websites, Sie können sie jedoch bei Bedarf ändern. Sie möchten beispielsweise die Spur auf der Titelseite ausblenden.

Vergessen Sie nicht, auf die Schaltfläche Speichern zu klicken, um Ihre Widget-Einstellungen zu speichern.

Sie können jetzt Ihre Website besuchen, um das Widget in Aktion zu sehen.

Breadcrumb-Links in der Seitenleiste

3. Hinzufügen von Breadcrumb-Navigation mit Code

Das Plugin bietet auch eine Codemethode zum Anzeigen von Breadcrumb-Navigationslinks für fortgeschrittene Benutzer.

Zuerst müssen Sie sich über einen FTP-Client mit Ihrer WordPress-Site verbinden . Navigieren Sie danach zu Ihrem aktuellen WordPress-Theme-Ordner, der sich im Verzeichnis /wp-content/themes/ befindet.

WordPress-Themes verwenden Vorlagendateien, um verschiedene Abschnitte Ihrer Website anzuzeigen. Zum Beispiel würden viele Themes eine Datei namens content-single.php verwenden, die sich im Ordner template-parts deines Themes befindet.

Sehen Sie sich unseren Spickzettel an, um herauszufinden, welche Dateien Sie in einem WordPress-Theme bearbeiten müssen .

Öffnen Sie die Vorlagendatei, um sie zu bearbeiten, und platzieren Sie dann den folgenden Code an der Stelle, an der Sie den Breadcrumbs-Pfad anzeigen möchten:

1
<?php if( function_exists( ‘bcn_display’ ) ) bcn_display(); ?>
Vergessen Sie nicht, Ihre Änderungen zu speichern und die Datei wieder auf Ihre Website hochzuladen.

Sie können jetzt Ihre Website besuchen, um den Pfad zu den Breadcrumb-Links in Aktion zu sehen.

Vorschau der Brotkrümelnavigation

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Breadcrumb-Navigationslinks in WordPress anzeigen. Vielleicht möchten Sie auch unseren Leitfaden dazu lesen , wie Sie mehr Traffic auf Ihre WordPress-Site bringen können , oder unsere Präsentation der besten Domainnamen-Registrare .

Continue Reading

WordPress

So ändern Sie die Hintergrundfarbe in WordPress (Anleitung für Anfänger)

Published

on

By

So ändern Sie die Hintergrundfarbe in WordPress (Anleitung für Anfänger)

Suchen Sie nach einer einfachen Möglichkeit, die Hintergrundfarbe Ihrer WordPress-Website zu ändern?

Die Hintergrundfarbe Ihrer Website spielt eine wichtige Rolle in Ihrem Design und Branding und macht Ihre Inhalte lesbarer.

In diesem Artikel zeigen wir dir, wie du ganz einfach die Hintergrundfarbe deiner WordPress-Seite ändern kannst.

Warum die Hintergrundfarbe in WordPress ändern?

Ein WordPress-Theme wird mit einer Standardhintergrundfarbe geliefert. Das Ändern der Hintergrundfarbe kann dazu beitragen, das Design Ihrer Website zu personalisieren und die Lesbarkeit zu verbessern.

Sie können beispielsweise einen bestimmten Abschnitt einer Seite mit einer anderen Hintergrundfarbe hervorheben. Dies hilft dabei, Ihren Call-to-Action (CTA) hervorzuheben und die Conversions zu steigern.

Sie können unterschiedliche Hintergrundfarben für verschiedene Beiträge in Ihrem WordPress-Blog basierend auf Autoren, Kommentaren oder Kategorien verwenden. Dies hilft bei der Unterscheidung von Artikeln von anderen Inhalten auf Ihrer Website.

Es gibt auch eine Möglichkeit, Videohintergründe hinzuzufügen, um die Aufmerksamkeit Ihrer Besucher sofort zu erregen und das Engagement zu steigern.

Sehen wir uns jedoch an, wie Sie die Hintergrundfarbe in WordPress ändern. Wir zeigen Ihnen verschiedene Möglichkeiten, die Hintergrundfarbe anzupassen, damit Sie zu jedem gewünschten Abschnitt springen können:

  • Ändern Sie die Hintergrundfarbe mit dem WordPress Customizer
  • Hintergrundfarbe mit benutzerdefiniertem CSS ändern
  • Hintergrundfarben zufällig ändern
  • Hintergrundfarbe für einzelne Beiträge ändern
  • Verwenden Sie ein Video im Hintergrund
  • Erstellen Sie eine benutzerdefinierte Landingpage

Ändern Sie die Hintergrundfarbe mit dem WordPress Theme Customizer

Abhängig von Ihrem Theme können Sie die Hintergrundfarbe möglicherweise mit dem WordPress Theme Customizer ändern . Sie können das Erscheinungsbild Ihrer Website in Echtzeit bearbeiten, ohne dass Code bearbeitet werden muss.

Um auf den WordPress Theme Customizer zuzugreifen, können Sie sich auf Ihrer Website anmelden und dann auf Erscheinungsbild » Anpassen gehen .

Dadurch wird der Theme Customizer geöffnet, in dem Sie mehrere Optionen zum Ändern Ihres Themes finden. Dazu gehören Menüs, Farben, Homepage, Widgets, Hintergrundbild und mehr.

Die verfügbaren spezifischen Optionen hängen davon ab, welches WordPress-Theme Ihre Website verwendet. Für dieses Tutorial verwenden wir das Standardthema Twenty Twenty-One.

Um die Hintergrundfarbe Ihrer Website zu ändern, klicken Sie im Menü auf der linken Seite auf die Registerkarte “Farben & Dunkelmodus”.

Als nächstes müssen Sie auf die Option “Hintergrundfarbe” klicken und eine Farbe für Ihre Website auswählen. Sie können das Farbauswahlwerkzeug verwenden oder einen Hex-Farbcode für Ihren Hintergrund eingeben.

Wenn Sie mit den Änderungen fertig sind, vergessen Sie nicht, auf die Schaltfläche “Veröffentlichen” zu klicken. Sie können jetzt Ihre Website besuchen, um die neue Hintergrundfarbe in Aktion zu sehen.

Für Ihr Theme ist diese Option möglicherweise nicht im Theme Customizer verfügbar. In diesem Fall können Sie eine der folgenden Methoden ausprobieren.

Ändern Sie die Hintergrundfarbe, indem Sie benutzerdefiniertes CSS hinzufügen

Eine andere Möglichkeit, die Hintergrundfarbe Ihrer WordPress-Website zu ändern, besteht darin, benutzerdefiniertes CSS im WordPress Theme Customizer hinzuzufügen.

Um zu beginnen, gehen Sie zu Erscheinungsbild » Anpassen und gehen Sie dann zur Registerkarte ‘Zusätzliches CSS’.

Als nächstes können Sie den folgenden Code eingeben:

Sie müssen lediglich den Hintergrundfarbcode durch den Farbcode ersetzen, den Sie auf Ihrer Website verwenden möchten. Geben Sie als Nächstes den Code auf der Registerkarte Zusätzliches CSS ein.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche “Veröffentlichen” zu klicken. Sie können jetzt Ihre Website besuchen, um die neue Hintergrundfarbe anzuzeigen.

Weitere Informationen finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Site .

Hintergrundfarben in WordPress zufällig ändern

Suchen Sie nun nach einer Möglichkeit, die Hintergrundfarbe in WordPress zufällig zu ändern?

Sie können einen sanften Effekt zum Ändern der Hintergrundfarbe hinzufügen, um automatisch zwischen verschiedenen Hintergrundfarben zu wechseln. Der Effekt durchläuft mehrere Farben, bis er die endgültige Farbe erreicht.

Um den Effekt hinzuzufügen, müssen Sie Ihrer WordPress-Website Code hinzufügen. Wir werden Sie unten durch den Prozess führen.

Das erste, was Sie tun müssen, ist die CSS-Klasse des Bereichs herauszufinden, in dem Sie den sanften Hintergrundfarbänderungseffekt hinzufügen möchten.

Sie können dies tun, indem Sie das Inspect-Tool in Ihrem Browser verwenden. Alles, was Sie tun müssen, ist, Ihre Maus zu dem Bereich zu bewegen, in dem Sie die Farbe ändern möchten, und mit der rechten Maustaste zu klicken, um das Prüfwerkzeug auszuwählen.

Danach müssen Sie die CSS-Klasse aufschreiben, auf die Sie abzielen möchten. Im obigen Screenshot möchten wir beispielsweise den Bereich mit einer CSS-Klasse ‘page-header’ ansprechen.

Als nächstes müssen Sie einen Nur-Text-Editor auf Ihrem Computer wie einen Notizblock öffnen und eine neue Datei erstellen. Sie müssen die Datei als ‘wpb-background-tutorial.js’ auf Ihrem Desktop speichern.

Anschließend können Sie der gerade erstellten JS-Datei den folgenden Code hinzufügen:

Wenn Sie den Code studieren, werden Sie feststellen, dass wir die CSS-Klasse ‘page-header’ verwendet haben, da dies der Bereich ist, den wir auf unserer Website ansprechen möchten.

Sie werden auch sehen, dass wir vier Farben mit dem Hex-Farbcode verwendet haben. Sie können Ihrem Hintergrund so viele Farben hinzufügen, wie Sie möchten. Sie müssen lediglich die Farbcodes im Snippet eingeben und diese wie die anderen Farben durch Komma und einfache Anführungszeichen trennen.

Nun, da deine JS-Datei fertig ist, musst du sie mit einem File Transfer Protocol (FTP)-Dienst in den JS-Ordner deines WordPress-Themes hochladen .

Für dieses Tutorial verwenden wir FileZilla. Es ist ein kostenloser FTP-Client für Windows, Mac und Linux und sehr einfach zu bedienen.

Um zu beginnen, müssen Sie sich beim FTP-Server Ihrer Website anmelden. Die Anmeldedaten finden Sie in der E-Mail Ihres Hostanbieters oder im cPanel-Dashboard Ihres Hosting-Kontos.

Nachdem Sie sich angemeldet haben, sehen Sie in der Spalte “Remote-Site” eine Liste mit Ordnern und Dateien Ihrer Website. Gehen Sie weiter und navigieren Sie zum JS-Ordner im Design Ihrer Site.

Wenn Ihr Theme keinen js-Ordner hat, können Sie einen erstellen. Klicken Sie einfach mit der rechten Maustaste auf den Ordner Ihres Themes im FTP-Client und klicken Sie auf die Option ‘Verzeichnis erstellen’.

Als Nächstes müssen Sie den Speicherort Ihrer JS-Datei in der Spalte “Lokale Site” öffnen. Klicken Sie dann mit der rechten Maustaste auf die Datei und klicken Sie auf die Option “Hochladen”, um die Datei zu Ihrem Thema hinzuzufügen.

Weitere Informationen finden Sie in unserem Tutorial zur Verwendung von FTP zum Hochladen von Dateien in WordPress .

Als Nächstes müssen Sie den folgenden Code in die Datei funtions.php Ihres Themes eingeben. Dieser Code lädt die JavaScript-Datei und das abhängige jQuery-Skript , das Sie für die Funktion dieses Codes benötigen, ordnungsgemäß .

Wir empfehlen die Verwendung des Code-Snippets- Plugins, um den Code sicher zu Ihrer Website hinzuzufügen. Weitere Informationen finden Sie in unserer Anleitung zum Einfügen von Snippets aus dem Web in WordPress .

Sie können jetzt Ihre Website besuchen, um die zufällig wechselnden Farben in dem von Ihnen ausgewählten Bereich in Aktion zu sehen.

Hintergrundfarbe für einzelne Beiträge ändern

Sie können auch die Hintergrundfarbe jedes einzelnen Blog-Posts in WordPress ändern, anstatt mit benutzerdefiniertem CSS eine einzige Farbe auf Ihrer gesamten Website zu verwenden .

Es ermöglicht Ihnen, das Erscheinungsbild bestimmter Beiträge zu ändern und deren Hintergründe zu personalisieren. Sie können beispielsweise den Stil jedes Beitrags basierend auf den Autoren anpassen oder eine andere Hintergrundfarbe für Ihren am häufigsten kommentierten Beitrag anzeigen .

Sie können sogar die Hintergrundfarbe für Beiträge in einer bestimmten Kategorie ändern. Beispielsweise können Nachrichtenbeiträge im Vergleich zu Tutorials andere Hintergrundfarben haben.

Das erste, was Sie tun müssen, ist die Post-ID-Klasse im CSS Ihres Themes zu finden. Sie können dies tun, indem Sie einen beliebigen Blogbeitrag anzeigen und dann mit der rechten Maustaste klicken, um das Inspect-Tool in Ihrem Browser zu verwenden.

Hier ist ein Beispiel, wie es aussehen würde:

1
Sobald Sie Ihre Beitrags-ID haben, können Sie die Hintergrundfarbe eines einzelnen Beitrags ändern, indem Sie das folgende benutzerdefinierte CSS verwenden. Ersetzen Sie einfach die Post-ID, damit sie mit Ihrer eigenen und dem gewünschten Hintergrundfarbcode übereinstimmt.

.post-104 {
background-color: #D7DEB5;
color:#FFFFFF;
}
Um das benutzerdefinierte CSS hinzuzufügen, können Sie den WordPress Theme Customizer verwenden. Stellen Sie zunächst sicher, dass Sie bei Ihrer WordPress-Website angemeldet sind. Besuchen Sie dann Ihren Blog-Beitrag und klicken Sie oben auf die Option “Anpassen”.

Danach wird dann zum über zusätzliche CSS aus dem Menü auf der linken Registerkarte.

Gehen Sie zu Zusätzliche CSS-Option

Geben Sie als Nächstes das benutzerdefinierte CSS ein und klicken Sie dann auf die Schaltfläche „Veröffentlichen“.

Geben Sie benutzerdefiniertes CSS für die individuelle Beitragsfarbe ein

Sie können jetzt Ihren Blog-Beitrag besuchen, um die neue Hintergrundfarbe zu sehen.

Wenn Sie die Hintergrundfarbe basierend auf Autor, Kommentaren oder Kategorie ändern möchten, lesen Sie unser detailliertes Tutorial, wie Sie jeden WordPress-Post anders gestalten können .

Verwenden Sie ein Video im Hintergrund
Die Verwendung von Videos als Hintergrund für Ihre Website ist eine großartige Möglichkeit, die Aufmerksamkeit Ihrer Besucher auf sich zu ziehen und das Engagement der Benutzer zu erhöhen.

Der einfachste Weg, ein Video im Hintergrund hinzuzufügen, ist die Verwendung eines WordPress-Plugins. Für dieses Tutorial verwenden wir mb.YTPlayer für Hintergrundvideos .

Es ist ein kostenloses Plugin, mit dem Sie YouTube-Videos im Hintergrund Ihrer WordPress-Website abspielen können. Es ist auch eine Premium-Version verfügbar, mit der Sie das mb.YTPlayer-Wasserzeichen entfernen können und mehr Anpassungsfunktionen bietet.

Zuerst müssen Sie das Plugin auf Ihrer Website installieren und aktivieren. Weitere Informationen finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins .

Nach der Aktivierung können Sie in Ihrem WordPress-Admin-Bereich zu mb.ideas » YTPlayer wechseln .

Auf dem nächsten Bildschirm müssen Sie die URL Ihres YouTube-Videos eingeben und das Hintergrundvideo aktivieren.

Geben Sie Ihre YouTube-Video-URL ein

Außerdem können Sie mit dem Plugin den Ort auswählen, an dem Ihr Hintergrundvideo angezeigt werden soll. Sie können eine statische Startseite, eine Blog-Index-Startseite oder beides auswählen. Es besteht auch die Möglichkeit, das Video auf Ihrer gesamten Website anzuzeigen, wenn Sie “Alle” auswählen.

Nachdem Sie die Video-URL eingegeben und den Hintergrund aktiviert haben, besuchen Sie Ihre Website, um den Videohintergrund in Aktion zu sehen.

Videohintergrundvorschau

Erstellen Sie eine benutzerdefinierte Landingpage
Das Erstellen von benutzerdefinierten Landing Pages in WordPress ermöglicht es Ihnen, Leads zu generieren und den Umsatz für Ihr Unternehmen zu steigern. Sie haben die vollständige Kontrolle über die Hintergrundfarbe und das Design der Seite.

Der einfachste Weg, eine hochinteressante benutzerdefinierte Landingpage zu erstellen, ist die Verwendung von SeedProd . Es ist das beste Zielseiten-Plugin für WordPress und bietet einen benutzerfreundlichen Drag-and-Drop-Seitenersteller zum Erstellen von Seiten, ohne Code zu bearbeiten.

Als erstes müssen Sie SeedProd auf Ihrer Website installieren und aktivieren. Weitere Informationen zur Installation eines WordPress-Plugins finden Sie in unserer Anleitung .

Hinweis: Wir werden die SeedProd Pro- Version verwenden, da sie leistungsfähigere Funktionen, Vorlagen und Anpassungsoptionen bietet. Es gibt jedoch auch eine kostenlose Version auf WordPress.org.

Sobald das Plugin aktiv ist, werden Sie aufgefordert, Ihren Lizenzschlüssel einzugeben. Sie finden den Schlüssel in Ihrem SeedProd-Kontobereich. Nachdem Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche “Schlüssel überprüfen”.

SeedProd-Lizenzschlüssel

Als nächstes können Sie zu SeedProd » Pages gehen und auf die Schaltfläche ‘Neue Landing Page hinzufügen ‘ klicken.

Neue SeedProd-Landingpage hinzufügen

Danach müssen Sie ein Thema für Ihre Zielseite auswählen. SeedProd bietet viele schöne Landingpage-Vorlagen für den Einstieg.

Sie können auch eine leere Vorlage verwenden, um von vorne zu beginnen. Wir empfehlen jedoch die Verwendung einer Vorlage, da dies eine einfachere und schnellere Möglichkeit ist, eine Zielseite zu erstellen.

Wählen Sie eine Vorlage für Ihre Seite

Wenn Sie eine Vorlage auswählen, werden Sie aufgefordert, einen Seitennamen einzugeben und eine URL auszuwählen.

Geben Sie einen Seitennamen und eine Seiten-URL ein

Auf dem nächsten Bildschirm sehen Sie den SeedProd-Seitenersteller. Hier können Sie den Drag-and-Drop-Builder verwenden, um Blöcke aus dem Menü auf der linken Seite hinzuzufügen. Sie können eine Überschrift, ein Video, ein Bild, eine Schaltfläche usw. hinzufügen.

Wenn Sie nach unten scrollen, befinden sich im Abschnitt Erweitert weitere Blöcke. Sie können beispielsweise einen Countdown-Timer hinzufügen , um Dringlichkeit zu schaffen, soziale Profile anzeigen, um die Follower zu erhöhen, ein Optionsformular zum Sammeln von Leads hinzufügen und vieles mehr.

SeedProd-Landingpage-Builder

Mit dem Drag-and-Drop-Builder können Sie die Position jedes Blocks auf Ihrer Zielseite mühelos ändern. Sie können sogar Layout, Größe, Farbe und Schriftart des Textes ändern.

Um die Hintergrundfarbe Ihrer Zielseite zu ändern, wählen Sie einfach einen beliebigen Abschnitt der Seite aus. Sie sehen nun im Menü auf der linken Seite Optionen, um den Hintergrundstil und die Farbe zu bearbeiten und ein Bild hinzuzufügen.

Hintergrundfarbe der Landingpage ändern

Nachdem Sie Ihre Zielseite bearbeitet haben, vergessen Sie nicht, oben auf die Schaltfläche “Speichern” zu klicken.

Als Nächstes können Sie zur Registerkarte „Verbinden“ wechseln und die Seite mit verschiedenen E-Mail-Marketingdiensten integrieren . Sie können beispielsweise eine Verbindung zu Constant Contact , SendinBlue und anderen herstellen.

E-Mail-Marketingdienste verbinden

Danach fahren Sie fort und klicken auf die Registerkarte “Seiteneinstellungen”. Hier können Sie den Seitenstatus von Entwurf auf Veröffentlichen ändern, um Ihre Seite live zu schalten.

SeedProd-Seiteneinstellungen

Abgesehen davon können Sie auch die SEO-Einstellungen der Seite ändern, die Analysen anzeigen, benutzerdefinierten Code unter Skripts hinzufügen und eine benutzerdefinierte Domain eingeben .

Sobald Sie fertig sind, können Sie den SeedProd-Seitenersteller beenden und Ihre benutzerdefinierte Zielseite aufrufen.

Vorschau der benutzerdefinierten Zielseite

Wir hoffen, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie die Hintergrundfarbe in WordPress ändern. Sie können auch unseren Leitfaden zur Auswahl des besten Website-Builders oder unseren Vergleich der besten Webdesign-Software lesen .

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook .

Continue Reading

Trending