Erste Schritte mit WordPress-Theme-Einstellungen: Ändern von Logos, Farben, Schriftarten und Layouts

Nach der Installation des Themes ist der nächste Schritt die Anpassung der Theme-Einstellungen an Ihr Branding und Ihre Vorlieben.WordPress bietet intuitive visuelle Anpassungswerkzeuge, mit denen Sie das Aussehen und Layout Ihrer Website ohne Code-Kenntnisse ändern können. In diesem Abschnitt erfahren Sie, wie Sie das Logo ändern, das Farbschema anpassen, die Schriftarten und die Typografie einstellen und das Layout Ihrer Website ändern können, um eine einzigartige Webpräsenz zu schaffen.

I. Öffnen Sie die Schnittstelle zur Anpassung des Themas

Die Anpassung von WordPress-Themes erfolgt zentral über den Customizer, ein intuitives visuelles Tool, mit dem Sie Änderungen in Echtzeit anzeigen können.

Schritt 1: Zugriff auf den Customiser

1. Loggen Sie sich in das WordPress-Backend ein(Adresse:域名/wp-admin）。
2. Es gibt zwei Möglichkeiten, auf den Customizer zuzugreifen:
   • Methode 1: Klicken Sie auf das linke Menü "¡§Dieäußerer Zustand"-"Personalisierung」。Methode II: Klicken Sie auf einer beliebigen Seite des Frontends der Website auf die Schaltfläche "¡§Kontaktieren Sie uns¡¨ in der oberen Verwaltungsleiste.PersonalisierungSchaltfläche ".
3. Sobald Sie den Customizer aufrufen, sehen Sie eine in zwei Spalten unterteilte Oberfläche:
   • linke SeiteAnpassungsoptionen: Ein Panel mit verschiedenen anpassbaren Einstellungen.rechte SeiteEin Live-Vorschaufenster zeigt die Auswirkungen der Änderungen.

Schritt 2: Grundlegende Bedienung des Customizers

Im Customizer können Sie:

• Klicken Sie auf die Optionen im linken Feld, um sie einzustellen.
• Im Vorschaufenster auf der rechten Seite sehen Sie die Auswirkungen der Änderungen in Echtzeit.
• Verwenden Sie die Schaltflächen zum Wechseln des Geräts oben (Computer, Tablet, Handy), um eine Vorschau der Anzeige auf verschiedenen Geräten anzuzeigen.
• Klicken Sie auf die Schaltfläche "¡§Speichern und veröffentlichenMit der Schaltfläche "Änderungen speichern" werden die Änderungen gespeichert.
• Klicken Sie auf die Schaltfläche "¡§Stornierungen", um die Änderungen zu verwerfen und den Vorgang zu beenden.
• Klicken Sie auf die Schaltfläche "¡§Speichern von EntwürfenDie "Schaltfläche" speichert die aktuellen Einstellungen, wendet sie aber nicht sofort an.

II. die Änderung der Website-Identität: Logo und Website-Symbol

Die Website-Identität umfasst das Logo und das Website-Symbol (Favicon), die wichtige Elemente der Markenidentität sind.

1. das Hochladen und Einrichten des Logos

Das Logo ist die visuelle Identität einer Website und wird normalerweise oben auf der Website angezeigt.

Setup-Schritte：

1. Klicken Sie im linken Bereich des Customizers auf "Standortbestimmung" oder "Logo" (die Namen können je nach Thema variieren).
2. Klicken Sie auf die Schaltfläche "¡§Datei auswählen" oder "Logo hochladenSchaltfläche ".
3. Im Pop-up-Fenster der Medienbibliothek können Sie:
   • Laden Sie ein neues Logobild hoch (empfohlenes PNG-Format mit transparentem Hintergrund).
   • Wählen Sie ein vorhandenes Bild für das Logo aus.
4. Nach dem Hochladen können Sie die Größe und Position des Logos anpassen (wird von einigen Themen unterstützt).
5. Klicken Sie auf die Schaltfläche "¡§Speichern und veröffentlichen", um die Einstellungen zu speichern.

Logo-Design-Empfehlungen：

• Durch die Verwendung des PNG-Formats mit transparentem Hintergrund wird sichergestellt, dass es auf verschiedenen Hintergrundfarben gut angezeigt wird.
• Empfohlene Logogröße: Breite zwischen 200-400 Pixel, Höhe nicht mehr als 100 Pixel.
• Eine einfache Gestaltung sorgt dafür, dass sie auch auf kleinen Geräten gut zu erkennen ist.

2. die Einstellung des Website-Symbols (Favicon)

Website-Symbole sind kleine Symbole, die auf Browser-Tabs, Lesezeichenleisten und Startbildschirmen von Mobilgeräten angezeigt werden und zur Wiedererkennung der Marke beitragen.

Setup-Schritte：

1. In der "StandortbestimmungSuchen Sie auf der Seite "Einstellungen" den Punkt "Website-Symbol" oder "Favicon"Optionen.
2. Klicken Sie auf die Schaltfläche "¡§Datei auswählen" oder "Website-Symbol hochladenSchaltfläche ".
3. Laden Sie ein quadratisches Bild von mindestens 512x512 Pixeln hoch (PNG-Format empfohlen).
4. WordPress erzeugt automatisch Icons in verschiedenen Größen für unterschiedliche Szenarien.
5. Klicken Sie auf die Schaltfläche "¡§Speichern und veröffentlichen", um die Einstellungen zu speichern.

Empfehlungen für das Design von Website-Symbolen：

• Verwenden Sie einfache, wiedererkennbare Grafiken oder Texte.
• Klare Erkennung auch bei kleinen Größen (z. B. 16x16 Pixel).
• Behalten Sie die Markenkonsistenz bei, indem Sie das Logo als Stilmittel verwenden.

III. benutzerdefinierte Farbschemata

Farbe ist ein wichtiger Bestandteil des Website-Designs, und das richtige Farbschema kann das Nutzererlebnis verbessern und das Markenimage stärken.

1. die Auswahl der voreingestellten Farbschemata

Viele Themes bieten voreingestellte Farbschemata, so dass Sie schnell ein professionelles Farbschema anwenden können:

1. Klicken Sie im linken Bereich des Customizers auf "Farbe" oder "Farbgestaltung"Optionen.
2. Durchsuchen Sie die verfügbaren voreingestellten Farbschemata und wählen Sie per Mausklick dasjenige aus, das Ihnen gefällt.
3. Das Vorschaufenster auf der rechten Seite zeigt den Effekt in Echtzeit.
4. Klicken Sie auf die Schaltfläche "Klicken", wenn Sie zufrieden sind.Speichern und veröffentlichenSchaltfläche ".

2. benutzerdefinierte Farben

Sie können die Farben der verschiedenen Elemente anpassen, wenn das voreingestellte Schema nicht den Anforderungen entspricht:

1. In der "FarbeSuchen Sie auf der Seite "Einstellungen" den Punkt "Benutzerdefinierte Farben" oder eine ähnliche Option.
2. Klicken Sie auf den Farbwähler neben dem Element, das Sie ändern möchten (z. B. Hintergrund, Text, Link, Schaltfläche usw.).
3. In der Farbauswahl, die sich öffnet, können Sie:
   • Wählen Sie eine Farbe aus, indem Sie direkt auf das Farbfeld klicken.
   • Geben Sie den Hexadezimalcode für die Farbe ein (z. B. #FF5733).
   • Passt die Helligkeit, Sättigung und Transparenz der Farbe an.
4. Wiederholen Sie die Schritte 2-3, um die Farben der anderen Elemente festzulegen.
5. Klicken Sie auf die Schaltfläche "¡§Speichern und veröffentlichen", um die Einstellungen zu speichern.

Vorschläge zur Farbabstimmung：

• VorherrschendDie Hauptfarbe, die die Marke repräsentiert und für wichtige Elemente wie Logos und Schaltflächen verwendet wird.
• Sekundärfarbe: Wird zur Betonung und Hervorhebung verwendet und steht im Kontrast zur dominierenden Farbe.
• neutrale FarbeHintergrund-, Text- und Rahmenfarben für eine gute Lesbarkeit.
• FarbpsychologieUnterschiedliche Farben vermitteln unterschiedliche Gefühle (z. B. Blau für Vertrauen, Rot für Leidenschaft).
• Kontrast (Gleichgewicht von Schwarz und Weiß bei der Einstellung des Fernsehbildschirms)Achten Sie auf einen ausreichenden Kontrast zwischen Text und Hintergrund, um die Lesbarkeit zu verbessern.

IV. Einstellung von Schriftarten und Typografie

Schriftarten und Typografie haben einen direkten Einfluss auf die Lesbarkeit und das professionelle Erscheinungsbild einer Website, und vernünftige Schrifteinstellungen können das Nutzererlebnis verbessern.

1. die Auswahl der voreingestellten Schriftarten

Viele Themes bieten voreingestellte Schriftschemata, so dass Sie schnell professionelle Typografie anwenden können:

1. Klicken Sie im linken Bereich des Customizers auf "typographisch" oder "kalligrafischer Stil"Optionen.
2. Durchsuchen Sie die verfügbaren voreingestellten Schriftschemata und wählen Sie das gewünschte aus.
3. Das Vorschaufenster auf der rechten Seite zeigt den Effekt in Echtzeit.
4. Klicken Sie auf die Schaltfläche "Klicken", wenn Sie zufrieden sind.Speichern und veröffentlichenSchaltfläche ".

2. benutzerdefinierte Schriftarten

Sie können die Schriftarten der verschiedenen Textelemente anpassen, wenn das voreingestellte Schema nicht Ihren Bedürfnissen entspricht:

1. In der "typographischSuchen Sie auf der Seite "Einstellungen" den Punkt "Benutzerdefinierte Schriftarten" oder eine ähnliche Option.
2. Wählen Sie das Textelement aus, das Sie ändern möchten (z. B. Titel, Textkörper, Schaltflächentext usw.).
3. Für jedes Element kann dies eingestellt werden:
   • SchriftfamilieSchriftart: Wählen Sie die Schriftart (z. B. Arial, Helvetica, Times New Roman usw.).
   • SchriftgrößeGröße des Textes ändern (normalerweise in Pixel px).
   • Dicke der SchriftLegen Sie die Textstärke fest (z. B. normal, fett, fein, usw.).
   • Ihre Größe (Ehrentitel): Die Einstellung des Zeilenabstands beeinflusst die Lesbarkeit.
   • Wortzwischenraum: Passt den Abstand zwischen den Zeichen an.
4. Wiederholen Sie die Schritte 2-3, um die Schriftarten für die anderen Textelemente festzulegen.
5. Klicken Sie auf die Schaltfläche "¡§Speichern und veröffentlichen", um die Einstellungen zu speichern.

Vorschläge für die Schriftauswahl：

• Schriftart-PaarungTypischerweise werden 2-3 Schriftarten gewählt (z. B. eine für Überschriften und eine für den Fließtext), um den Text nicht mit zu vielen Schriftarten zu überfrachten.
• LesbarkeitSchriftarten, die leicht zu lesen sind, werden bevorzugt, insbesondere für Fließtext.
• Reaktionsfähige SchriftartenSchriftarten: Stellen Sie sicher, dass die Schriften auf verschiedenen Geräten gut dargestellt werden.
• LadegeschwindigkeitZu viele benutzerdefinierte Schriftarten können die Ladezeiten der Website verlängern und die Leistung beeinträchtigen.
• MarkenkonsistenzSchriftart: Wählen Sie eine Schriftart, die zu Ihrem Markenimage passt.

V. Anpassen des Layouts der Website

Das Layout einer Website bestimmt, wie der Inhalt angeordnet ist, und ein geeignetes Layout kann die Benutzerfreundlichkeit und Lesbarkeit des Inhalts verbessern.

1. die Auswahl der voreingestellten Layouts

Viele Themes bieten voreingestellte Layout-Optionen, mit denen Sie schnell verschiedene Seitenstrukturen anwenden können:

1. Klicken Sie im linken Bereich des Customizers auf "Eröffnung (Schachjargon)" oder "Seitenlayout"Optionen.
2. Durchsuchen Sie die verfügbaren voreingestellten Layouts (z. B. linke Seitenleiste, rechte Seitenleiste, keine Seitenleiste, usw.).
3. Klicken Sie auf Ihr Lieblingslayout, und das Vorschaufenster auf der rechten Seite zeigt den Effekt in Echtzeit an.
4. Klicken Sie auf die Schaltfläche "Klicken", wenn Sie zufrieden sind.Speichern und veröffentlichenSchaltfläche ".

2. benutzerdefiniertes Layout

Sie können das Layout Ihrer Website anpassen, wenn die voreingestellten Layouts nicht Ihren Bedürfnissen entsprechen:

1. In der "Eröffnung (Schachjargon)Suchen Sie auf der Seite "Einstellungen" den Punkt "Benutzerdefiniertes Layout" oder eine ähnliche Option.
2. Für verschiedene Seitentypen (z. B. Startseite, Artikelseite, Seite usw.) kann das Layout separat eingerichtet werden.
3. Zu den üblichen Layout-Einstellungen gehören:
   • Breite des ContainersAnpassen der Breite des Inhaltsbereichs der Website.
   • Position der SeitenleisteWählen Sie, ob die Seitenleiste links, rechts oder ausgeblendet sein soll.
   • Breite der SeitenleisteSkalieren Sie die Breite der Seitenleiste.
   • Innere und äußere Ränder: Stellen Sie den Abstand zwischen den Elementen ein.
   • Artikel-LayoutLegen Sie die Anordnung der Artikel fest (z.B. Liste, Raster, etc.).
4. Beim Anpassen der Einstellungen zeigt das Vorschaufenster auf der rechten Seite die Auswirkungen in Echtzeit an.
5. Klicken Sie auf die Schaltfläche "Klicken", wenn Sie zufrieden sind.Speichern und veröffentlichenSchaltfläche ".

Empfehlungen für das Layout-Design：

• Mobile firstSicherstellen, dass das Layout auf mobilen Geräten gut angezeigt wird.
• Weißer Raum ist sinnvollAngemessener Weißraum verbessert die Lesbarkeit des Inhalts.
• Fokus aufPlatzieren Sie wichtige Inhalte an prominenter Stelle, um die Aufmerksamkeit des Nutzers zu lenken.
• KonsistenzKonsistenz des Layouts der verschiedenen Seiten der Website, um die Benutzerfreundlichkeit zu erhöhen.
• Testen verschiedener GeräteTesten Sie das Layout auf Geräten unterschiedlicher Größe.

VI. andere gemeinsame Themeneinstellungen

Zusätzlich zu den oben genannten Grundeinstellungen bieten die meisten Themes weitere Anpassungsmöglichkeiten:

1. die Hintergrundeinstellungen

• HintergrundfarbeHintergrundfarbe: Legen Sie die Hintergrundfarbe der Website fest.
• Hintergrundbild: Laden Sie eine Website hoch, um ein Hintergrundbild hinzuzufügen.
• Wiederholung des HintergrundsLegt fest, wie das Hintergrundbild wiederholt wird.
• HintergrundpositionLegt die Position des Hintergrundbildes fest.

2. die Einstellungen des Navigationsmenüs

• MenüpunktLegen Sie fest, wo das Navigationsmenü angezeigt werden soll (z. B. oben, in der Seitenleiste, unten, usw.).
• Menü-StilEinstellen des Aussehens und Verhaltens des Menüs (z. B. Dropdown-Menüs, Animationseffekte usw.).
• Menü-FarbeLegt die Farbe des Menütextes und des Hintergrunds fest.

3. die Einstellungen der Fußzeile

• Inhalt der FußzeileLegen Sie den Inhalt fest, der in der Fußzeile angezeigt werden soll (z. B. Copyright-Informationen, Kontaktinformationen usw.).
• Layout der FußzeileAnzahl der Spalten und Struktur der Fußzeile festlegen.
• FußzeilenfarbeLegt die Hintergrundfarbe und die Textfarbe der Fußzeile fest.

4. die Blog-Einstellungen

• Artikel-LayoutLegen Sie fest, wie Blogeinträge angezeigt werden sollen (z. B. als Liste, Gitter usw.).
• Metadaten des ArtikelsLegen Sie fest, ob das Datum, der Autor, die Kategorie und andere Informationen des Artikels angezeigt werden sollen oder nicht.
• Auszugslänge: Legen Sie die Länge der Artikelzusammenfassung fest.

VII. Lösungen für gemeinsame Probleme

1. keine unmittelbare Wirkung nach Änderung der Einstellungen?

• den Cache löschenBrowser-Cache: Es kann sein, dass Sie eine ältere Version der Website sehen. Versuchen Sie, Ihren Browser-Cache zu leeren (drücken Sie Strg+F5, um eine Aktualisierung zu erzwingen).
• Überprüfung der Konservierung: Stellen Sie sicher, dass Sie auf die SchaltflächeSpeichern und veröffentlichen", um Ihre Änderungen zu speichern.
• Plug-in-KonfliktEinige Cache-Plug-ins können die Live-Vorschau beeinträchtigen. Versuchen Sie, das Cache-Plugin vorübergehend zu deaktivieren.

2. einige Einstellungsoptionen nicht finden können?

• Thematische UnterschiedeDie Einstellungsmöglichkeiten der verschiedenen Themes können variieren. Wenn Sie eine bestimmte Einstellung nicht finden können, ist es möglich, dass Ihr Theme diese Funktion nicht unterstützt.
• Dokument anzeigen: Schauen Sie in der offiziellen Dokumentation des Themas nach, welche spezifischen Einrichtungsoptionen das Thema bietet.
• Plug-Ins verwendenWenn das Theme die von Ihnen benötigten Funktionen nicht unterstützt, sollten Sie die Verwendung eines entsprechenden Plugins in Betracht ziehen.

3 Wie kann ich die Standardeinstellungen wiederherstellen?

• Theme-Anpasser: Im Customizer bieten einige Themes ein "Standardeinstellungen wiederherstellen" oder "reprovisionSchaltfläche ".
• Installieren Sie das Thema neuWenn es nicht über den Customizer wiederhergestellt werden kann, versuchen Sie, das Thema zu deinstallieren und neu zu installieren.
• Sicherung und WiederherstellungWenn Sie eine Sicherungskopie erstellen, bevor Sie Änderungen vornehmen, können Sie die vorherigen Einstellungen über die Sicherungskopie wiederherstellen.

4. läuft der Customizer langsam oder stottert er?

• Browser-ProblemeVersuchen Sie, einen anderen Browser zu verwenden, oder aktualisieren Sie Ihren aktuellen Browser auf die neueste Version.
• Plug-in-KonfliktEinige Plugins können die Leistung des Customizers beeinträchtigen. Versuchen Sie, alle Plugins vorübergehend zu deaktivieren und sie dann nacheinander zu aktivieren, um die problematischen Plugins herauszufinden.
• Server-RessourcenUnzureichende Server-Ressourcen können auch dazu führen, dass der Customiser langsam läuft. Wenden Sie sich an Ihren Hosting-Anbieter, um herauszufinden, ob Sie das Ressourcenlimit erhöhen können.

5 Wie kann ich meine Theme-Einstellungen sichern?

• Nutzen Sie die Funktionen, die mit dem Thema geliefert werdenEinige Themes bieten die Möglichkeit, Einstellungen zu exportieren/importieren, die Optionen dafür finden Sie im Customizer.
• Plug-Ins verwendenInstallieren Sie spezielle Plugins zur Sicherung von Themeneinstellungen, wie z. B. "Customizer Export/Import".
• Manuelle SicherungFür Benutzer, die mit dem Code vertraut sind, können Sie die Optionen für die Themeneinstellungen manuell in der Datenbank sichern.

VIII. bewährte Praktiken bei der Themenfindung

1. Wahrung der KohärenzFarben, Schriftarten und Layout der Website müssen auf allen Seiten einheitlich sein, um ein einheitliches Markenimage zu schaffen.
2. Fokus auf LesbarkeitDie Lesbarkeit des Inhalts hat Vorrang: Wählen Sie die richtige Schriftgröße, Zeilenhöhe und den richtigen Kontrast.
3. Testen verschiedener GeräteTesten Sie Ihre Einstellungen auf verschiedenen Geräten wie Computern, Tablets und Mobiltelefonen, um responsive Ergebnisse zu gewährleisten.
4. Regelmäßige BackupsSichern Sie Ihre Theme-Einstellungen, bevor Sie größere Änderungen vornehmen, falls etwas schief geht.
5. Nicht zu viel anpassenVermeiden Sie es, zu viele Anpassungen vorzunehmen, da dies die Komplexität Ihrer Website erhöhen und die Leistung beeinträchtigen kann.
6. Hinweis auf gutes DesignDesign: Schauen Sie sich die Designs der besten Websites der Branche an, um sich zu inspirieren, aber kopieren Sie sie nicht direkt.
7. Halten Sie es einfach.Einfache Designs sind in der Regel professioneller und leichter zu pflegen.

kurz

Die Einrichtung des Themas ist ein wichtiger Schritt bei der Erstellung eines einzigartigen Erscheinungsbildes einer Website. Mit dem WordPress-Anpassungsprogramm können Sie ganz einfach das Logo ändern, das Farbschema anpassen, Schriftarten und Typografie einstellen und das Layout Ihrer Website ändern, ohne dass Sie über Codekenntnisse verfügen.

Denken Sie daran, dass es bei einem guten Design nicht nur um Ästhetik geht, sondern dass es die Benutzerfreundlichkeit und die Lesbarkeit Ihrer Inhalte verbessern sollte. Berücksichtigen Sie bei allen Änderungen stets Ihre Zielgruppe und Ihr Markenimage, um Websites zu erstellen, die sowohl ästhetisch ansprechend als auch funktional sind.