WordPress-Themen, Stile und grundlegende Begriffe | Togeppi
Übersicht
Dieser Beitrag wurde veröffentlicht, um in zukünftigen Beiträgen nachzuschlägten, wenn es Unklarheiten gibt. Sie können einfach im Inhaltsverzeichnis (rechts) nachsehen, um Informationen leicht zu finden.
Es ist nicht notwendig, alles von Anfang bis Ende zu lesen. Überprüfen Sie einfach die Themen und Stile und lesen Sie die anderen Inhalte, wenn Sie auf unbekannte Themen in zukünftigen Beiträgen stoßen. (Links werden hinzugefügt.)
Die Inhalte hier werden regelmäßig aktualisiert, wenn nötig.
Thema (Theme)
Im Hauptbereich der WordPress-Administrationsseite finden Sie in der linken Seitenleiste den Punkt „Erscheinungsbild – Themes“.
In der koreanischen Version wird „Erscheinungsbild“ wahrscheinlich als „외모“ angezeigt, aber ich benutze es auf Koreanisch, was die Übersetzung verwirrend macht, sodass ich es im Original eher so benutze.
Was ist ein Thema? WordPress ist kein einfaches Blogging-Tool wie Naver Blog. Es ist ein Werkzeug, das entwickelt wurde, um die Erstellung von Websites einfacher zu gestalten.
Durch die Installation von WordPress wird kein vorgefertigtes Layout wie bei Naver Blog erstellt, sondern der Benutzer muss die Website von Grund auf selbst erstellen.
Es könnte eine Herausforderung sein, alles von Anfang an zu erstellen, oder? Das Thema ist das, was Ihnen dabei hilft.
Ein Thema bietet eine grundlegende Struktur. Sie können ein beliebiges Thema herunterladen und einsetzen und es dann nach Ihren Wünschen anpassen.
Selbst Anfänger können mit der Anwendung eines Themas eine funktionierende Website aufbauen und Beiträge veröffentlichen. Auch die Methoden, die im YouTube-Kanal „로알남“ erklärt werden, nutzen Themen.
Wenn Sie im Bereich „Themes“ auf „Neu hinzufügen“ klicken, können Sie viele Themen herunterladen und anwenden. Oben rechts gibt es eine Suchfunktion, und wenn Sie ein Thema besitzen, können Sie es auch hochladen und verwenden.
Ich selbst verwende kein bestimmtes Thema und genieße es, alles von Grund auf zu erstellen, deshalb benutze ich das Kava Child Theme, das standardmäßig in Crocoblock enthalten ist.
Machen Sie sich keine Sorgen, dass ich ein anderes Thema verwende. Die grundlegenden Bedienungshinweise sind gleich und es geht darum, das gesamte Design nach Ihren Vorlieben anzupassen, also gibt es letztlich keinen großen Unterschied.
Sehen Sie die Schaltfläche „Anpassen“? Damit können die grundlegenden Farben des Themas, die Schriftformate, das Logo der Website usw. eingestellt werden. Lass uns einen Blick darauf werfen.
Thema anpassen (Customize)
Hier sehen Sie den Customize-Einstiegsbildschirm meines TogePi Blogs. Ich werde ein paar kurze Erklärungen geben.
(1) Site Identity
Hier können Sie den Titel und den Slogan Ihrer Website einstellen.
(2) Allgemeine Seiteneinstellungen
Hier können Sie Favicon, Seitenlayout, Breadcrumbs, Oben-Button (To top button) usw. einstellen.
Für das Seitenlayout habe ich Full Width eingestellt, aber das können Sie je nach Geschmack selbst wählen, und diese Einstellung kann bei zukünftigen Änderungen der Seite individuell angepasst werden, sodass es nicht unbedingt notwendig ist, es jetzt schon zu ändern.
Die Breadcrumb-Funktion habe ich hier nicht verwendet.
Der Oben-Button erscheint, wenn Sie die Seite nach unten scrollen, und ermöglicht es, nach Oben zu gehen, also können Sie ihn je nach Vorliebe hinzufügen. Wenn Sie das Aussehen dieser Schaltfläche ändern möchten, konsultieren Sie bitte die stilistischen Informationen, die ich später ansprechen werde.
(3) Farben / Farbschema
Hier können Sie die Hintergrundfarbe der Seite, die Farbe des Haupttexts und die Farbe für Links einstellen, die aktiv sind.
Diese Einstellungen können jedoch auch während des Erstellungsprozesses für jede Seite individuell vorgenommen werden, sodass es nicht unbedingt notwendig ist, an dieser Stelle Änderungen vorzunehmen, es sei denn, es gibt bestimmte Farben, die Sie für Widgets benötigen.
(4) Typografie
Hier können Sie die Größe, Dicke, Breite und Höhe der Schrift für H1 bis H6 festlegen.
Sie können auch Schaltflächen- oder Fließtext formatieren, ich habe aber nur H1 bis H6 definiert. In diesem Beitrag verwende ich H1, H2 für Titel und H5 für Inhalte.
Anstatt alles von Anfang an festzulegen, ist es einfacher, während der Erstellung Ihrer Beiträge zu sehen, wie die Formatierung aussieht, und dann Änderungen vorzunehmen.
(5) Homepage-Einstellungen
Hier können Sie die Seite auswählen, die als Homepage Ihrer Website angezeigt werden soll. Die Homepage ist auch die Hauptseite, auf die Sie gelangen, wenn Sie auf das Logo klicken.
Die oben nicht erwähnten Header-/Hintergrundbilder-/Menüs-/Widgets-Einstellungen müssen nicht unbedingt jetzt schon vorgenommen werden, da diese sowieso separat eingestellt werden und bei Bedarf überprüft werden können.
Bitte beachten Sie, dass diese Inhalte auf dem Kava Child Theme basieren und die Einstellungsinhalte je nach Theme variieren können.
Widget-Detaileinstellungen
Es gibt eine Vielzahl von Widgets, nicht wahr? Der obige Screenshot zeigt das Button-Widget, und es gibt viele andere Widgets wie Text, Bilder, Icons usw. Die Stilkonfiguration dieser verschiedenen Widgets hat eine ähnliche Struktur, und das werde ich Ihnen erklären.
Zur grundlegenden Erklärung scheint das Button-Widget am einfachsten zu sein, da es auch häufig verwendet wird.
Inhalt
Wenn Sie im linken Seitenmenü nach „Button“ suchen, erscheinen verschiedene Optionen. Normalerweise verwende ich den Crocoblock-Button, aber um Ihnen den grundsätzlichen Ablauf zu erklären, verwende ich das Standard-Button-Widget von WordPress.
Wenn Sie auf das Button-Widget klicken, erscheint das Fenster „Inhalt“.
Der Typ kann im Standardwert belassen werden.
(1) Text
Hier können Sie den Namen des Buttons ändern.
(2) Link
Wenn Sie auf diesen Button klicken, wird der definierte Link geöffnet. Der Standardwert ist #, was bedeutet, dass nichts passiert. # wird später auch in den Menüeinstellungen verwendet.
Sie können einen Link zu Ihrer eigenen Website oder zu einer externen Seite einfügen. Um einen externen Link hinzuzufügen, kopieren Sie einfach die URL. Wenn Sie einen Link zu Ihrer eigenen Website einfügen möchten, kann das eingeben von /slug/ ebenfalls ausreichen, wenn Sie den Slug kennen.
Auf der rechten Seite gibt es ein Einstellungsbutton und ein Symbol, das wie ein Pfannkuchen aussieht. Lassen Sie uns zuerst auf den Einstellungsbutton klicken.
Wenn Sie auf den Zahnrad-Einstellungsbutton (Link-Optionen) klicken, öffnet sich ein Dropdown-Menü. Der Link funktioniert wie bereits erwähnt, und ich werde die beiden anderen Optionen erläutern.
In neuem Fenster öffnen
Wenn Sie die Schaltfläche „In neuem Fenster öffnen“ aktivieren, wird der verlinkte Inhalt in einem neuen Fenster angezeigt, sodass die aktuelle Seite geöffnet bleibt.
Dies kann möglicherweise auch für SEO wichtig sein, denn im SEO werden Anhaltspunkte dafür, wie lange ein Benutzer auf einer Seite bleibt, in die Bewertung einbezogen. Wenn ein Link in einem neuen Fenster geöffnet wird, bleibt die ursprüngliche Seite offen, was sich positiv auf das SEO-Ranking auswirken kann. Es gibt allerdings auch Nachteile, wie beispielsweise bei Google Adsense, wo Besuchern möglicherweise Werbung angezeigt werden sollte, bevor sie den Inhalt sehen können.
Add nofollow
Diese Funktion muss im Moment nicht als wichtig erachtet werden. Kurz gesagt, Aktivieren dieser Option verhindert, dass externe Links zu Ihrer Seite in die SEO-Bewertung einfließen, da die Besuche nicht gezählt werden.
Wenn Sie auf den Pfannkuchen-Button (Dynamische Tags) klicken, bekommen Sie eine Übersicht wie diese.
Anfangs fand ich diese Funktion kompliziert und verwirrend, aber je vertrauter ich damit wurde, desto hilfreicher war sie. In dem aktuellen Stadium müssen Sie sich nicht unbedingt darum kümmern, da an den Buttons nicht viel eingerichtet werden muss.
Die dynamische Funktion wird häufig in Crocoblock JetEngine oder Elementor verwendet. Sie ermöglicht es, Daten zu ziehen, wenn Sie wollen, dass bestimmte Informationen angezeigt werden. Zum Beispiel, wenn Sie den Titel eines Beitrags einfügen möchten, müssen Sie normalerweise beim Schreiben einen Text eingeben, aber das kann umständlich werden. Stattdessen können Sie mit der dynamischen Funktion den Post-Titel direkt einfügen lassen.
Wenn Sie die dynamische Funktion aktivieren, werden die relevanten Informationen automatisch auf die Site geladen, sodass Sie nicht manuell jeden Titel oder Inhalt eingeben müssen. Das macht das Arbeiten viel effizienter!
Wenn Sie in der Liste auf Post-URL klicken, wird der Link der aktuellen URL der Post-Seite automatisch eingefügt.
(3) Ausrichtung
Das erklärt sich von selbst, oder? Hier wählen Sie die Ausrichtung des Buttons aus. Ich übergehe die Größenoptionen.
(4) Icon
Hier können Sie ein Symbol vor den Button-Text hinzufügen. Wenn Sie nur das Symbol lassen, wird der Button nur das Symbol anzeigen.
Die Einstellung „Icon Spacing“ ist der Abstand zwischen dem Icon und dem Text auf dem Button.
Jetzt werde ich Ihnen zeigen, wie die vorherigen Einstellungen schematisch dargestellt werden, um Ihnen ein besseres Verständnis zu ermöglichen.
Wie Sie oben erwähnt gesehen haben, hat mein Button die Standardfarbe, die durch die Einstellungen im Theme Customize festgelegt wird. Wenn Sie auf den Button klicken, gelangen Sie direkt weiter!
Stil (Style)
Das rote Kästchen ist der Ort, an dem die Stileinstellungen vorgenommen werden.
Der Stil bezieht sich auf alles, was das Erscheinungsbild des gewählten Widgets betrifft, wie Schriftarten, Farben, Größe, Hintergrund, Abstände und Ränder.
Ich werde erneut das Button-Widget zur Erklärung verwenden.
(1) Typografie
Family: Hier wählen Sie die Schriftart aus.
Size: Hier legen Sie die Schriftgröße fest.
Weight: Hier legen Sie die Fettheit der Schrift fest.
Transform: Hier definieren Sie, ob die Schrift groß oder klein ist.
Style: Hier wählen Sie die Schriftsneigung.
Decoration: Hier fügen Sie Linien oder Durchstreichungen zur Schrift hinzu.
Line-Height: Hier stellen Sie den vertikalen Abstand zwischen den Zeilen ein.
Letter Spacing: Hierregeln Sie den horizontalen Abstand zwischen den Buchstaben.
Word Spacing: Hier regulieren Sie den Abstand zwischen den Wörtern.
Der Unterschied zwischen Letter Spacing und Word Spacing kann manchmal verwirrend sein, aber ich werde Ihnen in einer grafischen Darstellung zeigen, wie es aussieht, damit Sie es besser verstehen können.
(2) Textschatten
Ich nutze diese Funktion normalerweise nicht, aber sie fügt dem Text einen Schatteffekt hinzu. Ich werde Ihnen unten einige Beispiele zeigen.
Die Unterschiede sind aufgrund der unterschiedlichen Einstellungen deutlich, ich habe es übertrieben, um die Unterschiede klar zu zeigen.
(3) Normal / Hover
Haben Sie nicht auch schon einmal Buttons gesehen, deren Farbe sich ändert, wenn man mit der Maus darüber fährt? Diese Funktion ermögliche dies.
Hover bezieht sich auf den Zustand, wenn die Maus über dem Button ist, während Normal für die Standardansicht gilt.
Textfarbe: Hier legen Sie die Farbe des Textes fest.
Hintergrundtyp: Hier definieren Sie, ob der Hintergrund einfarbig oder mit einem Farbverlauf versehen sein soll.
Farbe: Hier legen Sie die Hintergrundfarbe fest, wenn die Hintergrundtyp-Einstellung getroffen wurde.
Randfarbe: Diese Option legt die Farbe des Rahmens (Border) fest, wenn einer verwendet wird.
Hover-Animation: Hier können Sie die Effekte bei Hover einstellen.
Hier sehen Sie die Buttons mit den entsprechenden Einstellungen:
(4) Rand
Der Rand, wie oben erwähnt, bezieht sich auf die Umrandung des Widgets.
Randtyp: Hier wählen Sie den Stil des Randes (z. B. durchgehend oder gestrichelt) aus.
Breite: Hier definieren Sie die Dicke des Randes.
Rundung: Hier können Sie die Ecken des Randes abrunden.
Boxschatten: Hier können Sie einen Schatteneffekt um das Widget erstellen.
Hier sind zwei verschiedene Beispiele für den Rand:
(5) Padding
Ein neues Konzept wird eingeführt. Padding bezieht sich auf den Abstand der Füllung innerhalb des Widgets.
Während Margin den Abstand außerhalb des Widgets bestimmt, kann Padding dazu verwendet werden, das Widget größer zu machen, während Margin dazu verwendet werden kann, das Widget zu verkleinern.
Hier sind Button-Beispiele, die die Unterschiede im Padding zeigen:
Haben Sie den Unterschied bemerkt?
Die Angabe neben den Zahlen zeigt an, ob die Einheit in Pixel (px) oder Prozent (%) angegeben ist.
Die Kettensymbol-Funktion ermöglicht es Ihnen, alle Werte (Oben, Unten, Links, Rechts) gleichzeitig zu synchronisieren, was sehr praktisch ist.
So endet die Erklärung zu den Stileinstellungen des Button-Widgets.
Erweiterte Einstellungen (Advanced)
-Inhalt wird später hinzugefügt-
Dieser Beitrag ist die Übersetzung des Originals.
Im Originaltext können Sie ein klares Bild sehen.
Manager