WordPress ist sowohl als Blogging-Plattform als auch als Content-Management-System (CMS) ein Liebling vieler. Dies liegt daran, dass die Plattform einfach zu erlernen, zu verwenden und anzupassen ist. Ich meine, Sie können Ihre Website beliebig gestalten, ohne sich zu sehr anzustrengen. Sie können Ihren WordPress-Beiträgen und -Seiten sogar verschiedene Hintergründe hinzufügen, was zufällig das Thema dieses Handbuchs ist.
Wenn Sie Ihren WordPress-Posts und -Seiten etwas Farbe und Stil verleihen möchten, befasst sich dieser Leitfaden mit dem Thema mit einem zweigleisigen Ansatz. Zuerst werden wir WordPress-Posts oder -Seiten mit CSS und einer einfachen PHP-Funktion verschiedene Hintergründe hinzufügen, aber wenn dies nicht Ihr Ding ist (sagen wir, Sie sind der perfekte Anfänger und Code macht Ihnen Angst), werden wir es tun bieten ein paar WordPress-Hintergrund-Plugins an, um den Prozess zu unterstützen.
In jedem Fall sollten Sie eine tolle Zeit haben, da dies ein relativ einfaches Projekt ist. Außerdem macht es immer Spaß, etwas Neues zu lernen. Genießen Sie bis zum Schluss und teilen Sie Ihre Anregungen, Kommentare oder Fragen im Kommentarbereich. Bereit? Lassen Sie uns den Sprung in 3, 2, 1 wagen…
So fügen Sie mit Code Hintergründe zu WordPress hinzu
Dieser Abschnitt ist von großem Nutzen, wenn Sie sich mit PHP, HTML und CSS auskennen. Aber keine Sorge, Sie können die hier bereitgestellten Code-Snippets jederzeit kopieren und einfügen. Sie müssen nur wissen, wo sich die verschiedenen Dateien in Ihrer WordPress-Installation befinden. Mit dieser Präambel beginnen wir mit der Bearbeitung.
Fügen Sie mit CSS verschiedene Hintergründe zu WordPress-Beiträgen und -Seiten hinzu
Ein Großteil des Stylings, das in WordPress-Posts und -Seiten (und Ihrer gesamten Website) eingeht, wird von einer Datei gesteuert, die als Stylesheet bekannt ist. Die Stylesheet-Datei in WordPress heißt normalerweise style.css. Sie können auf style.css zugreifen, indem Sie in Ihrem WordPress-Admin zu Darstellung > Editor navigieren:
Wir fügen Hintergründe (und andere Stile) zu Ihren WordPress-Beiträgen/-Seiten in style.css hinzu, daher ist es wichtig, diese in einem separaten Tab zu laden.
Wenn Sie zu Erscheinungsbild -> Editor navigieren, sehen Sie auch eine Liste aller Theme-Vorlagen auf der rechten Seite des Bildschirms. Wenn Sie ein Child-Theme verwenden – Sie sollten übrigens eines verwenden – müssen Sie die Vorlagendateien Ihres Parent-Themes laden.
Sie müssen sich auf die Datei header.php konzentrieren. Warum header.php? Weil diese Datei zu jeder anderen Vorlage hinzugefügt wird, dh zu Seiten und Beiträgen, wenn WordPress die Dateien zusammenstellt, aus denen Ihre Website besteht. Mit anderen Worten, der Code in header.php wird auf jeder Seite oder jedem Beitrag angezeigt, den Sie erstellen.
Suchen Sie nach diesem Code-Snippet:
<body <?php body_class(); ?>>Diese Funktion hat einen Zweck. Es teilt CSS-Klassen auf, mit denen Sie den Stil Ihrer Beiträge und Seiten ändern können. Alles, was Sie tun müssen, ist eine CSS-Klasse speziell für die Seite oder den Beitrag, den Sie anpassen möchten, anzuvisieren, Ihren Hintergrund und Ihre Stile hinzuzufügen, Ihre Änderungen zu speichern und sich zu freuen.
Wenn Sie sich beispielsweise den Quellcode für Ihre Homepage angesehen haben, gibt die obige Funktion Folgendes aus:
<body class="home blog logged-in admin-bar no-customize-support hfeed">Und das liegt daran, dass die Ein Teil des Code-Schnipsels bietet alle Klassen, zB .home, .blog, .logged-in usw., die Sie in Ihrem CSS verwenden können, um verschiedene Elemente Ihrer Homepage zu gestalten.
Beiseite: Das Anzeigen des Quellcodes für jeden Beitrag oder jede Seite ist einfach. Wenn Sie Chrome verwenden, klicken Sie einfach mit der rechten Maustaste auf eine Seite/einen Beitrag und wählen Sie „Seitenquelle anzeigen“. Klicken Sie in Mozilla mit der rechten Maustaste auf den Beitrag/die Seite und wählen Sie „Seitenquelle anzeigen“. Wenn Sie Microsoft Edge (Internet Explorer) verwenden, klicken Sie mit der rechten Maustaste auf Ihre Seite/Ihren Beitrag und wählen Sie „Quelle anzeigen“.
Wenn Sie den Quellcode für eine WordPress-Seite anzeigen, wird dieselbe Funktion ausgegeben:
<body class="page page-id-2 page-template-default logged-in admin-bar no-customize-support">Wenn Sie den Quellcode für einen einzelnen Beitrag angezeigt haben, gibt unsere body_class-Funktion etwas in der Nähe von:
<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support">Wie Sie sehen, erhalten Sie einige CSS-Klassen, auf die Sie leicht abzielen können:
- .page für alle Seiten
- .page-id-2, mit dem Sie eine bestimmte Seite ansprechen können, z. B. eine Seite mit der ID-Nr. 2
- .single für alle einzelnen Beiträge, d. h. alle CSS-Stile, die Sie in dieser Klasse anwenden, gelten für alle Beiträge
- .postid-1 für den Beitrag mit id=1, was bedeutet, dass alle von Ihnen angewendeten CSS-Stile nur diesen Beitrag betreffen
- .single-format-standard – Damit können Sie CSS-Stile auf alle Beiträge mit dem Standard-Beitragsformat anwenden
- .logged-in – Die Stile, die Sie mit dieser CSS-Klasse anwenden, gelten nur für angemeldete Benutzer
Alle Elemente, die in class=““ enthalten sind, bieten Ihnen CSS-Hooks, mit denen Sie jeden Beitrag oder jede Seite gezielt ansprechen können. Aber warum fügen wir den Punkt (.) vor jeder Klasse hinzu? Es ist die konventionelle CSS-Syntax, die zeigt an schreibt vor, dass Sie alle Klassen mit einem Punkt (.) und alle divs mit einem Hash (#) aufrufen müssen. Geschichte für einen anderen Tag.
Um beispielsweise allen Beiträgen einen schwarzen Hintergrund zuzuweisen, fügen Sie der style.css das folgende Snippet hinzu:
.single { background-color: #000; }Hinzufügen von Hintergrund zu WordPress-Posts und -Seiten mit PHP (über ein benutzerdefiniertes Feld)
Wenn Sie eine integrierte manuelle Methode zum Ändern der Hintergründe auf Ihrer Site über ein benutzerdefiniertes Feld hinzufügen möchten, ist dies ebenfalls sehr einfach. Fügen Sie einfach den folgenden Code in die Datei functions.php Ihres Themes ein (wenn Sie ein Theme von Drittanbietern verwenden, geschieht dies am besten über ein Child-Theme). Stellen Sie sicher, dass Sie die Stelle, an der „myprefix“ steht, in Ihre eindeutige Kennung ändern (dies soll Konflikte mit Themes und Plugins vermeiden) und wenn alles bereit ist, können Sie jetzt das benutzerdefinierte Feld „myprefix_background_image“ verwenden, um eine URL zu einem Bild für . einzugeben jede Seite oder jeden Beitrag, bei dem Sie den Hintergrund ändern möchten.
<?php
// Add inline style to set body background via "myprefix_background_image" custom field
function myprefix_custom_field_background() {
if ( $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ) ) { ?>
<style type="text/css">
body { background-image: url( "<?php echo esc_url( $background ); ?>" ); }
</style>
<?php }
add_action( 'wp_head', 'myprefix_custom_field_background' );Beachten Sie, wie sich die Funktion in die Aktion „wp_head“ einklinkt? Das bedeutet, dass jedes Mal, wenn Sie das benutzerdefinierte Feld verwenden, Inline-CSS mit dem Code zum Header-Tag Ihrer Website hinzugefügt wird, um den Hintergrund entsprechend Ihrem benutzerdefinierten Feldwert zu ändern.
Hinzufügen von Hintergründen zu WordPress mit Plugins
Sie können WordPress-Posts und -Seiten gezielt ansprechen und nach Herzenslust mit PHP und CSS gestalten, wie wir gezeigt haben. Wenn Sie jedoch keine Zeit für Code haben oder die obigen Anweisungen aus dem einen oder anderen Grund nicht funktionieren, finden Sie hier ein paar WordPress-Hintergrund-Plugins zum Booten.
WP-Backgrounds Lite Kostenloses WordPress-Plugin
Was kann ich sagen? Dies ist eines dieser WordPress-Plugins, die den Bedarf erfüllen. Du hast Lust auf lebendige Hintergründe für deine WordPress-Posts und -Seiten? Sicher warum nicht. Ist dieses Plugin einfach zu installieren und zu verwenden? Ich würde gerne Ihre Meinung hören.
WP-Hintergründe Lite, people, ist das Plugin, das Ihnen hilft, ein für alle Mal WordPress-Hintergründe zu besitzen. Sie können sogar den Hintergrund für Ihre WordPress-Posts und -Seiten anklickbar machen! Und es werden nicht alle Seiten ausgeführt, es sei denn, Sie möchten, und es funktioniert gut mit allen gängigen Browsern.
Benutzerdefinierte Hintergründe Premium WordPress Plugin
Das Custom Backgrounds-Plugin, das Ihnen von RightHere, einem Elite-Autor bei CodeCanyon, zur Verfügung gestellt wurde, bietet Ihnen die vollständige Kontrolle über Ihre WordPress-Hintergründe. In wenigen Minuten können Sie unter anderem hervorragende Hintergründe für WordPress-Posts, -Seiten, benutzerdefinierte Post-Typen, Taxonomien und Archive erstellen und alles mit Parallax-Effekten, Timern und dem Besten, was jQuery zu bieten hat, aufpeppen.
Sie können sogar anklickbare und mehrere Hintergründe für Ihre WordPress-Posts und -Seiten festlegen, ohne ins Schwitzen zu geraten. Der Autor lässt Sie das Plugin vor dem Kauf testen, damit Sie genau wissen, was Sie erwartet.
Video- und Parallax-Hintergründe für WPBakery Page Builder
Parallax Scrolling scheint heutzutage überall zu sein, und das aus gutem Grund: Es ist einer der coolsten visuellen Effekte, und wenn er gut ausgeführt wird, ist er visuell atemberaubend. Dies hat dazu geführt, dass eine Vielzahl von Parallax-WordPress-Themes auf den Markt gekommen ist – für diejenigen unter Ihnen, die mit dem Begriff Parallaxe nicht vertraut sind, wenn die Hintergrundbilder mit einer anderen Geschwindigkeit in den Vordergrund scrollen, was einen faszinierenden visuellen Effekt erzeugt.
Im Allgemeinen verlassen sich die meisten WordPress-Benutzer beim Parallax-Scrolling auf ihr Theme. Wenn Sie jedoch einem nicht-parallaxen Thema einen Parallax-Effekt hinzufügen möchten, sollten Sie sich die Video- und Parallax-Hintergründe für WPBakery ansehen.
Das Plugin unterstützt Hintergründe in voller und normaler Breite, wobei der Parallax-Effekt in alle vier Richtungen wirkt. Sie können Ihre eigenen Bilder hochladen, um sie als festen Bildhintergrund zu verwenden, oder Sie können einfach einen einfarbigen Blockhintergrund verwenden. Sie können das reibungslose Scrollen aktivieren, um eine optimale Leistung zu gewährleisten, und Sie können die Parallaxe für mobile Geräte deaktivieren. Die intuitive Benutzeroberfläche macht es einfach, alles einzurichten, und Sie können die Richtung und Geschwindigkeit des Parallax-Scrolling-Effekts mit nur einem Knopfdruck festlegen.
Neben einem Parallax-Effekt kann mit dem Plugin auch ein Videohintergrund hinzugefügt werden, in den Videos von YouTube oder Vimeo einfach eingebettet werden – einfach die URL zum Einbetten hinzufügen. Dies ist eine weitere großartige Möglichkeit, eine auffällige Website zu erstellen, die den Besuchern in Erinnerung bleibt.
Letzte Worte
Egal, ob Sie sich mit Code beschäftigen oder Plugins verwenden, das Hinzufügen verschiedener Hintergründe zu Ihren WordPress-Posts oder -Seiten kann immens zur Markenbekanntheit und zum visuellen Design Ihrer Website beitragen. Wie änderst du den Hintergrund deiner WordPress-Posts oder -Seiten? Teilen Sie uns Ihre Fragen, Anregungen und Gedanken über den Kommentarbereich unten mit.
