Wenn Sie eine gute Website erstellen möchten, müssen Sie die Größe der Vorlage ändern können. Standardmäßig bieten viele Themes ungünstige Vorlagenrahmengrößen. Enge Themen sind genauso schlecht wie zu breite Themen. Sie benötigen eine „goldene Mitte“, die genau zu den Funktionen auf der Website passt. Nur so wird der Inhalt Ihrer Ressource korrekt angezeigt und alle Widgets passen in die Seitenleiste. In diesem Artikel erfahren Sie, wie Sie die Größe der Seitenspalten anpassen können.
Ohne eine Seitenleiste sieht die Seite nutzlos aus. Wenn Sie den Inhalt der Seite irgendwie optisch verwässern möchten, sollten Sie das WordPress-Template ändern, indem Sie eine Seitenleiste in einer bestimmten Größe hinzufügen. Meist sind darin die Seitensäulen bereits standardmäßig verbaut. Allerdings ist die Breite der Seitenleiste nicht immer optimal für ein bestimmtes Projekt. Schauen wir uns die Methoden zum Ändern der Breite und Höhe der Seite der WordPress-Site an.
Möglicherweise müssen Sie nichts ändern. Ändern Sie die Seitenleiste nur, wenn sie „schief“ und unnatürlich aussieht. Stellen Sie zunächst sicher, dass die Seitenleiste eine geringere Breite hat als der Hauptteil der Seite, die den Inhalt enthält. Die Seitenleiste ist kein zentraler Teil der Website, daher sollte ihr nicht viel Aufmerksamkeit geschenkt werden – sie kann höchstens 40 % des sichtbaren Teils der Seite einnehmen. Bitte beachten Sie, dass bei zwei (oder mehreren) Seitenleisten deren Breite 50 % der Breite der gesamten Seite nicht überschreiten sollte. Es ist besser, nur eine Seitensäule zu verwenden – so ist es effizienter.
Es gibt eine „goldene Regel“ von Designern für Websites, die nur eine Seitenleiste verwenden. Diese Regel besagt, dass, wenn es nur eine Seitenleiste auf einer Seite gibt, diese nicht mehr als 38 % der Breite der Website einnehmen sollte. Viele bedeutende Webdesigner sprechen über eine so mysteriöse Figur (zum Beispiel: Jarel Remik).
Bei der Höhe ist es wichtig, dass die Seitenleiste nicht über die Seite hinausragt. Seine Höhengröße sollte in der Obergrenze dem Hauptteil der Seite ähneln. Die untere Grenze kann jedoch geändert werden, sodass der Basisteil der Site länger ist. Sie müssen nicht versuchen, alles, was sich auf der Website befindet, in der Seitenleiste unterzubringen – nur das Wichtigste. Und wenn es wirklich viele Informationen gibt, dann erstellen Sie zwei Seitenleisten, aber Sie müssen die Seitenleiste nicht bis zur Fußzeile der Site ausdehnen.
Lassen Sie uns nun darüber sprechen, wie Sie die Größe der Seitensäulen und des Vorlagenrahmens selbst unabhängig voneinander ändern können, ohne irgendwelche Add-Ons zu verwenden. Bei dieser Methode wird der Quellcode der Seite geändert. In den HTML-Tags ist der Parameter für die Vorlagengröße enthalten. Bitte beachten Sie, dass eine Größenänderung negative Folgen haben kann, wenn Sie ein Bild in benutzerdefinierter Größe als Hintergrund hochladen. Daher ist es besser, die Rahmenparameter bereits beim Site-Layout zu ändern.
Die Seitenleistenparameter im Code liegen in Form eines Blocks vor. Um die Größe des gesamten Rahmens einschließlich der Seitenspalten zu ändern, müssen Sie in den Code gehen und abwechselnd die numerischen Parameter für Breite und Höhe jedes Elements anpassen. Nämlich:
Um die Abmessungen eines bestimmten Blocks herauszufinden, müssen Sie in der „Seitencodeansicht“ auf das Wrapper-Element klicken. Auf der Seite des CSS-Bereichs des Browsers sehen Sie die numerischen Werte für die Breite des Elements in Pixel. Um die Größe des gesamten Drahtmodells zu ändern, müssen Sie das Hauptelement bearbeiten und dann auch Änderungen an anderen Elementen vornehmen. Es wird empfohlen, dies auf einem lokalen Server zu tun, damit Ihre Site nicht vor den Benutzern „springt“. Und im Allgemeinen ist es besser, dies bereits vor dem Start eines Internetprojekts zu tun.
Diese Zeile ist für die Parameter des mittleren Teils der Seite zuständig, also für den Inhaltsblock und für die Seitenspalten. Berühren Sie nicht die „Hauptzeile“ – dies ist der Hauptteil der Website. Sie müssen das Tag „mainnav“ finden – das ist die Seitenleiste. Sie müssen lediglich das Breitenelement in CSS ändern, das für die Breite verantwortlich ist, um einen anderen Größenwert einzugeben. Sie können die Seitenleiste verkleinern oder vergrößern. Beachten Sie jedoch die oben genannten Größentipps, um sicherzustellen, dass Ihre Website korrekt angezeigt wird.
Damit die Änderungen gespeichert werden, müssen sie auf dem Server vorgenommen werden. Das heißt, Sie können die Anpassungen zunächst auf dem lokalen Hosting testen, kopieren dann aber unbedingt die bearbeitete style.css-Datei und fügen sie den Datenbanken des Hauptservers hinzu. Erst dann werden die Änderungen wirksam.
Plugin zur Größenänderung der Seitenleiste
Wenn Sie nicht durch die kaskadierenden Stylesheets wühlen und nach Elementen suchen möchten, die bearbeitet werden müssen, können Sie das Visual Sidebar Editor für WordPress-Plugin verwenden. Hierbei handelt es sich um ein spezielles Modul, das speziell für die Generierung von Seitenleisten entwickelt wurde. Es ist Teil des größeren Visual Composer-Tools.
Das Visual Composer-Plugin ist ein natürlicher Seitenersteller für WordPress. Damit können Sie eine fertige Vorlage von Grund auf erstellen. Das Modul funktioniert mit Shortcodes und ist sehr einfach zu installieren. Wenn Sie nicht nur die Größe der Seitenleiste ändern müssen, laden Sie das Visual Composer-Plugin herunter und fügen Sie den Visual Sidebar Editor als Add-on hinzu. Wenn das Problem nur in der Größe der Seitenleiste der Seite liegt, reicht das Modul „Visual Sidebar Editor“ aus.
Der Vorteil der Verwendung eines Plugins zum Ändern der Seitenleiste besteht darin, dass alles automatisch erledigt wird. Das heißt, Sie zeigen per Drag & Drop an, was Sie ändern möchten, und das Modul korrigiert den Elementcode selbstständig anhand Ihrer Wünsche. Wenn Sie versuchen möchten, HTML-Tags zu bearbeiten, bietet Ihnen das Plugin eine solche Möglichkeit. Darüber hinaus verfügt es über spezielle Shortcodes zum Hinzufügen zusätzlicher Funktionen zur Site – mehr als 40 Erweiterungen.
Ein weiterer Vorteil der Verwendung eines solchen Plugins zum Bearbeiten von Seiten besteht darin, dass Änderungen unabhängig von der Version der Engine gespeichert werden. Auch wenn Sie WordPress aktualisieren, ändert sich das Template nicht – es wird von einem Modul gesteuert. Daher können Sie auf ältere Versionen umsteigen oder WordPress aktualisieren – die Dimension der Sidebar wird dadurch nicht mehr beeinträchtigt. Darüber hinaus funktioniert das Plugin mit komfortablem Import und Export – das heißt, Sie können Seitenleisten von einer Site kopieren und auf eine andere übertragen. Und das Wichtigste: Das Modul funktioniert nach einem äußerst klaren Prinzip – auch ein Anfänger wird es schnell beherrschen.
Wenn Ihnen die Arbeit des Visual Sidebar Editors gefällt, sollten Sie die Installation des kompletten Satzes an Add-ons – des Visual Composer-Moduls – in Betracht ziehen. Dann können Sie jedes Element auf den Portalseiten problemlos bearbeiten.
Möchten Sie eine WordPress-Seite in voller Größe erstellen?
Dann zurück zu dem Grund, warum wir hier sind.
Methode 1: Verwenden der integrierten Breitenvorlage in einem WordPress-Theme
Diese Methode wird empfohlen, wenn Ihr WordPress-Theme bereits über eine Ganzseitenvorlage verfügt. Wenn Sie es nicht haben, sehen Sie sich die nächste Option an und holen Sie es sich.
Zuerst müssen Sie die Seite bearbeiten oder eine neue erstellen, indem Sie „ Seiten > Hinzufügen Neue Seite
Wählen Sie im Seitenbearbeitungsfenster aus Gesamtbreite als Vorlage unter dem Kontrollkästchen Seitenattribute.
Nach der Auswahl eines Modells Gesamtbreite Sie müssen Ihre Seite registrieren. Sie können die Seite weiter anpassen, um weitere Inhalte hinzuzufügen, oder auf die Schaltfläche „Vorschau“ klicken, um sie in Aktion zu sehen.
Wenn Sie auf dem Bearbeitungsbildschirm Ihrer Seite nicht die Option „Volle Breite“ – „Vorlage in voller Breite“ haben, bedeutet das, dass Ihr WordPress-Theme diese Seite nicht hat.
Aber keine Sorge, wir zeigen Ihnen, wie einfach es ist, eine vollständige Seite zu erstellen, ohne Ihr WordPress-Theme zu ändern.
Methode 2: So erstellen Sie eine Seitenvorlage mit voller Breite
Für diese Methode müssen Sie die von Ihnen verwendeten WordPress-Themedateien bearbeiten und über grundlegende Kenntnisse von PHP, CSS und HTML verfügen.
Übrigens laden wir Sie auch zu einer Beratung ein
Zuerst müssen Sie einen Texteditor wie Notepad öffnen und den folgenden Code in eine leere Datei einfügen:
Dieser Code ermittelt einfach den Namen der Dateivorlage und fordert WordPress auf, die Header-Vorlage zu extrahieren.
Dann benötigen Sie den Inhaltsteil des Codes. Stellen Sie über einen FTP-Client eine Verbindung zu Ihrer Website her ( oder Dateimanager in cPanel) dann geh zu /wp-content/themes/your-theme-directory/ .
Dann sollten Sie eine Datei mit dem Namen „ page.php". Dies ist die Standardseitenvorlagendatei für Ihr Theme.
Kopieren Sie alles nach dem „ get_header() Und fügen Sie es in eine Datei ein Volle Breite.php Dies ist, was Sie auf Ihrem Computer erstellt haben.
Jetzt müssen Sie sich den Inhalt der Datei „full-width.php“ ansehen und diese Codezeile entfernen:
Diese Zeile stellt einfach die Seitenleiste wieder her und zeigt sie in Ihrem WordPress-Theme an. Wenn Sie dies entfernen, wird die Seitenleiste Ihres Themes nicht angezeigt, wenn Sie die Vorlage verwenden Gesamtbreite.
Sie können sehen, dass diese Zeile in Ihrem WordPress-Theme mehrmals vorkommt. Wenn Ihr WordPress-Theme über mehrere verfügt, wird im Code auf jede Seitenleiste einmal verwiesen. Sie müssen entscheiden, welche Seitenleisten Sie behalten möchten.
Finden Sie heraus, dass Ihre Website langsam lädt
Wenn Ihr Theme keine Seitenleisten auf Ihrer Seite anzeigt, finden Sie diesen Code möglicherweise nicht in Ihrer Datei.
Auf diese Weise kümmert sich unser full-width.php-Code um die Durchführung von Änderungen. Ihr Code kann je nach Thema leicht abweichen.
Dann müssen Sie die Datei herunterladen Volle Breite.php In Ihrem WordPress-Theme-Ordner mit .
Sie haben erfolgreich eine benutzerdefinierte Seitenvorlage in voller Breite für Ihr Thema erstellt und hochgeladen. Der nächste Schritt besteht darin, diese Vorlage zu verwenden, um eine Seite in voller Größe zu erstellen.
Gehen Sie zum Dashboard und bearbeiten oder erstellen Sie eine neue Seite.
Suchen Sie auf dem Seitenbearbeitungsbildschirm das Kontrollkästchen „Seitenattribute“ und klicken Sie auf das Dropdown-Menü unter der Option „Modell“.
Sie können Ihr Modell sehen. Fahren Sie fort, wählen Sie es aus und speichern oder aktualisieren Sie die Seite.
Sie können jetzt Ihre Website besuchen und werden feststellen, dass die Seitenleisten verschwunden sind und Ihre Seite als einspaltige Seite angezeigt wird. Es ist vielleicht noch nicht ausgefüllt, aber jetzt können Sie es auf andere Weise verteilen.
Machen Sie Ihre Website beliebt, indem Sie sie entdecken
Sie müssen das Inspect-Tool verwenden, um die CSS-Klassen zu ermitteln, die Ihr Theme zum Definieren des Inhaltsbereichs verwendet.
Anschließend können Sie die Breite mithilfe von CSS auf 100 % anpassen. Wir haben den folgenden CSS-Code verwendet:
.page-template full-width zone.content(width: 100%; Margin: 0px; border: 0px; padding: 0px; ) .page-template fullwidth.Output(margin: 0px; )
So wird Twenty Seventeen aussehen.
Das ist alles für dieses Tutorial. Ich hoffe, dass es Ihnen ermöglicht, Seiten in voller Größe zu erstellen.
Die oben genannten Methoden sind für diejenigen kostenlos, die es sich leisten können und schnell Layouts in voller oder voller Breite erstellen möchten.
Entdecken Sie auch einige Premium-WordPress-Plugins
Sie können andere WordPress-Plugins verwenden, um Ihrem Blog oder Ihrer Website ein modernes Aussehen zu verleihen und die Verwaltung zu optimieren.
Wir bieten Ihnen mehrere Premium-WordPress-Plugins, die Ihnen dabei helfen.
1. Divi Builder
Divi Builder ist ein hochwertiger Seitenersteller, der hohes Ansehen genießt Elegante Themen Obwohl es häufig als Teil des Divi WordPress-Themes verwendet wird, ist Divi Builder auch ein eigenständiges Plugin, das in anderen WordPress-Themes verwendet werden kann.
Mit Divi Builder können Sie Ihre Inhalte über eine visuelle Schnittstelle auf der Schnittstellenseite sowie über eine serverseitige Schnittstelle bearbeiten, obwohl die meisten Benutzer die erstere Schnittstelle bevorzugen.
Anstelle von Seitenleisten befindet sich im Grunde alles in Popups und schwebenden Schaltflächen. Es bietet Ihnen Zugriff auf 316 vordefinierte Vorlagen, verteilt auf 40 verschiedene Präsentationspakete, und ermöglicht Ihnen außerdem, Ihre eigenen Designs als Vorlagen zu speichern.
Wir laden Sie zur Öffnung ein
Eines der Markenzeichen von Divi war schon immer die Kontrolle über die Stile, die es Ihnen bietet. Auf drei verschiedenen Registerkarten können Sie verschiedene Optionen anpassen, darunter reaktionsfähige Steuerelemente, benutzerdefinierte Abstände und mehr.
Sie können sogar benutzerdefiniertes CSS hinzufügen, da der CSS-Editor grundlegende Validierung und automatische Vervollständigung kombiniert.Einer der Kritikpunkte an Divi Builder war schon immer, dass es auf basiert. Das bedeutet, dass, wenn Sie es einmal deaktivieren, Ihr Inhalt mit einer Reihe von Shortcodes zurückbleibt. Obwohl es etwas deprimierend ist, gibt es jetzt weniger Probleme mit Plugins wie Shortcode Cleaner.
2. Baumeister
Kein Wunder, dass Themify Builder das Angebot des Themify-Teams ist. Es integriert es in viele seiner WordPress-Themes, um Kunden einfache Anpassungsmöglichkeiten zu bieten. Sie können es aber auch als eigenständiges Plugin kaufen und mit jedem WordPress-Theme verwenden.
Wie Divi Builder und WPBakery Page Builder ermöglicht Ihnen Themify Builder die Erstellung von Layouts im Frontend oder Backend.Eine weitere gute Sache ist, dass Sie mit diesem Plugin Ihre reaktionsfähigen Haltepunkte anpassen können (jedoch nur auf Site-weiter Ebene).
Entdecken Sie, erstellen Sie einen Online-Shop und verkaufen Sie Ihre Produkte ganz einfach online
Eine interessante Funktion von Themify Builder besteht darin, dass Sie weiterhin den Standard-WordPress-Editor verwenden können, während andere Seitenersteller Sie dazu zwingen, für alles die Page Builder-Oberfläche zu verwenden.
3. Fakir
Das WordPress Elementor-Plugin wurde erstmals 2016 eingeführt und ist einer der jüngsten Entwickler auf dieser Liste. Trotz seiner späten Einführung hat Elementor schnell mehr als 1.000.000 aktive Installationen auf WordPress.org angehäuft und ist damit einer der beliebtesten WordPress-Builder.
Wenn Sie Vorschläge oder Kommentare haben, hinterlassen Sie diese bitte in unserem Bereich
Einige WordPress-Vorlagen sind im Seitenmenü, der sogenannten Sidebar, eher schmal, oder umgekehrt im Artikelbereich schmal, und natürlich müssen einige Webmaster bestimmte Grenzen erweitern, um beispielsweise Banner hineinzupassen. In diesem Artikel zeige ich Ihnen wie Ändern Sie die Größe der Kopfzeile, der Vorlage, des Artikelbereichs oder des Seitenmenüs.
Aus diesem Grund kann es erforderlich sein, die Größe der Vorlage zu ändern.
Möglicherweise möchten Sie die Größe der Vorlage ändern, sowohl gleich zu Beginn, direkt nach der Installation, als auch nachdem Sie eine Reihe von Artikeln geschrieben haben und die ersten Dutzende Besucher erschienen. Beispielsweise musste ich die Vorlage erweitern, nachdem ich versuchen wollte, die ersten paar Cent mit Werbung auf meinem Blog zu verdienen. Zu diesem Zweck wurde ein Banner-Werbesystem von Google-AdSense ausgewählt. Doch um wenigstens die unglücklichen zwei Cent zu verdienen, müssen zwei Parameter berücksichtigt werden:
- Damit jemand auf eine Anzeige klickt, müssen sich die Banner, die das System ausgibt, an bestimmten Stellen befinden. Im Internet schreiben sie, dass es sich um einen linken Slider handelt, wir platzieren dort ein quadratisches Banner und dreimal innerhalb des Artikels. Ganz oben, in der Mitte, nach einer Überschrift und ganz am Ende. Diese Anordnung ist ideal, damit die Leute auf das Banner klicken. Natürlich gibt es auch andere Möglichkeiten, beispielsweise auf den Bildern, die wir im Rahmen dieses Artikels jedoch nicht berücksichtigen.
- Google stellt Banner in bestimmten Größen aus.
diese. Wir müssen den ersten und zweiten Punkt kombinieren, nämlich sicherzustellen, dass die Banner von Google oder Yandex an den dafür vorgesehenen Stellen, in der linken Seitenleiste und in den Artikeln platziert werden. Da meine Vorlage für diese Zwecke zu schmal war und es keinen Sinn macht, kleine Banner aufzuhängen, weil niemand darauf klickt, bleibt nur noch, das Seitenmenü und den Artikelbereich zu strecken.
So vergrößern Sie die Vorlage horizontal Teil 1, verstehen Sie die Zahlen
Um zu verstehen, um wie viel wir die Breite dieses oder jenes Elements erhöhen müssen, müssen wir nicht auf einen Blick abschätzen: „Da reicht ein Zentimeter und dort ein halber Zentimeter“, sondern wir müssen diese Zahlen genau in Pixeln ermitteln. Dabei hilft uns fast jeder Browser, zum Beispiel:
- Safari
- Feuerfuchs
- Google Chrome
Persönlich zeige ich es am Beispiel von Safari und Ihnen in jedem für Sie geeigneten Browser. Unterschiede sollten nur in einer Schaltfläche bestehen.
Die Basis – die Größe unserer Website – besteht also aus 4 Elementen: der Größe der Vorlage selbst, der Seitengröße, der Größe des Artikelblocks und dem linken Menüblock. Wir werden der Reihe nach alles erhöhen, keine Sorge, es ist nicht beängstigend.
Um die Breite des linken Menüs zu ändern.
In diesem Fall können Sie sowohl die Pixel ändern, wie wir es in Schritt 3-5 getan haben, als auch den Prozentsatz auf der Seite. Dazu reicht es aus, den Parameter anstelle von Pixeln zu ändern
Diese Werte geben an, wie viel Prozent der Breite von diesem oder jenem Element eingenommen werden kann. Die Hauptsache ist, dass die Summe aus Seitenleiste und Artikel 100 % ausmachen sollte und nicht mehr, sonst schwebt alles auf der Seite.
Das ist alles. Jetzt wissen wir, welche Werte wir ändern müssen, damit alles passt. Jetzt müssen nur noch die notwendigen Daten in die Style-Datei eingetragen werden.
So vergrößern Sie die Vorlage horizontal Teil 2: Ändern Sie die Breite
Nachdem wir die Zahlen verstanden und irgendwo auf ein Blatt Papier geschrieben haben, ändern wir sie nun für alle und nicht nur für uns selbst. Dafür:
- Melden Sie sich per FTP auf der Website an
- Suchen Sie die Datei /wp-content/themes/Your theme/style.css und kopieren Sie sie auf Ihren Computer
- Erstellen Sie eine Sicherungskopie dieser Datei, d. h. Kopieren Sie es in Ihren Dokumentenordner. Damit es zwei Kopien der Datei auf dem Computer gibt, eine, an der wir arbeiten, und die zweite, die wir nicht berühren. Der zweite dient für den Fall, dass wir etwas falsch ändern und vergessen, was.
- Öffnen Sie die Datei in einem praktischen Editor. Nun stehen wir vor einer recht einfachen Aufgabe, die alten Werte durch neue zu ersetzen. Es gibt zwei Möglichkeiten: Die erste ist einfach und die zweite ist schwer. Zuerst finden wir durch Suchen den alten Wert und schreiben stattdessen einen neuen. Die zweite Möglichkeit besteht darin, nach den Namen der Stile zu suchen. Innerhalb der Stile suchen wir nach der Breite und ändern den Wert.
Ich persönlich habe mich für den ersten, einfachen Weg entschieden, da man damit Änderungen in nur wenigen Sekunden vornehmen kann. Wir suchen also nach dem Wert 980. Die Dateisuche ergab nur zwei Parameter, die ich ändern muss.
Der erste ist für die Breite der gesamten Site verantwortlich:
| 1
2
3
4
5
6
7
8
| #Seite ( min. Höhe: 100 Pixel; klar: beide; Breite: 96 %; Polsterung: 0; Polsterung oben: 24 Pixel; maximale Breite: 980 Pixel; Überlauf: versteckt; |
#Seite ( min-height: 100px; klar: beide; Breite: 96%; padding: 0; padding-top: 24px; max-width: 980px; Überlauf: versteckt;
Die zweite betrifft die Breite der beiden Elemente, der Artikelliste und des linken Menüs:
| 1
2
3
4
5
6
7
8
9
10
11
| . Hauptcontainer (Breite: 980px; Rand: 0 automatisch; Überlauf: versteckt; Polsterung: 0; Hintergrund: #fff; Position: relativ; - Webkit-Box-Schatten: 0px 0px 10px rgba(50, 50, 50, 0,17) ;-moz- box-shadow: 0px 0px 10px rgba(50, 50, 50, 0,17) ; box-shadow: 0px 0px 10px rgba(50, 50, 50, 0,17) ; ) |
Hauptcontainer (Breite: 980px; Rand: 0 automatisch; Überlauf: versteckt; Polsterung: 0; Hintergrund: #fff; Position: relativ; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0,17) ; -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0,17); box-shadow: 0px 0px 10px rgba(50, 50, 50, 0,17); )
Wir müssen lediglich die Werte von 980 auf 1080 ändern und zurückladen.
Das ist alles, aber wenn Sie Fragen haben, schreiben Sie in die Kommentare, sonst helfe ich Ihnen gerne weiter.
Vom Autor: Hallo Freunde. In einem weiteren Artikel zum Thema WordPress beschäftigen wir uns mit der Frage, wie man das WordPress-Template ändert. Wenn Sie noch nie zuvor auf die Notwendigkeit gestoßen sind, eine WordPress-Vorlage zu ändern, lesen Sie unbedingt diesen Artikel, denn früher oder später werden Sie sich höchstwahrscheinlich mit den Problemen der Anpassung und Bearbeitung einer WordPress-Vorlage auseinandersetzen müssen.
Lassen Sie uns zunächst die häufigsten Fragen definieren, mit denen Benutzer konfrontiert werden, wenn sie eine WordPress-Vorlage für sich selbst anpassen. Hier ist eine Beispielliste davon:
So bearbeiten Sie eine WordPress-Vorlage
Vorlagenbreite in WordPress ändern
So ändern Sie die Größe einer WordPress-Vorlage
So ändern Sie die Farbe einer WordPress-Vorlage
So ändern Sie die Schriftart in einer WordPress-Vorlage
Und dies ist nur eine kleine Liste von Problemen, auf die Sie möglicherweise stoßen oder bei deren Lösung Sie anderen helfen können, auch gegen eine Gebühr, wenn Sie Websites im Auftrag entwickeln.
Alle Fragen in der obigen Liste können auf zwei Arten gelöst werden, je nachdem, welches Thema für die Website verwendet wird. Beginnen wir mit der einfachsten Option, für die keine Layoutkenntnisse erforderlich sind. Diese Option ist geeignet, wenn die Vorlage die Bearbeitung über die Einstellungen unterstützt.
Gehen wir zum Abschnitt „Darstellung – Anpassen“ und sehen uns die Hauptseite der Site und die verfügbaren Site-Einstellungen auf der linken Seite der Seite an. Darunter können Designeinstellungen sein.
Versuchen wir beispielsweise, das Farbschema der Site zu ändern. Gehen wir zum Menü „Farben“ und ändern Sie den Hintergrund der seitlichen und zentralen Teile der Site.
Wie Sie sehen, ist das sehr praktisch und das Ändern der Farbe eines WordPress-Templates ganz einfach – wir sehen das Ergebnis sofort und können es auswerten.
Allerdings bietet nicht jedes Theme alle WordPress-Vorlagenanpassungen, die wir benötigen. Es ist beispielsweise unwahrscheinlich, dass es Einstellungen gibt, mit denen Sie die Breite der Vorlage in WordPress ändern können. Selbst im aktuellen Theme gibt es beispielsweise keine Einstellungen, mit denen Sie die Schriftart in der Vorlage ändern können, und so weiter. Wie soll es in diesem Fall sein? Hier müssen wir auf die zweite Möglichkeit zurückgreifen, und hier sind bereits einige Layout-Kenntnisse erforderlich.
Daher müssen wir meistens nur eine Datei bearbeiten – dies ist die Stildatei style.css. Es befindet sich in Ihrem Theme-Ordner. Lassen Sie uns als Beispiel die Schriftfarbe ändern. Dies können Sie übrigens direkt über das WordPress-Admin-Panel tun. Seien Sie nur vorsichtig und achten Sie darauf, die Site nicht versehentlich zu „kaputt machen“. Am besten sichern Sie Ihr Theme, bevor Sie Änderungen daran vornehmen. Gehen Sie also zum Menü „Darstellung – Editor“ und standardmäßig sollte die Designstildatei zur Bearbeitung geöffnet sein.
Ist dies nicht der Fall, wählen Sie diese Datei aus der Liste rechts aus. Sie heißt Stylesheet (style.css). Am häufigsten wird die Schriftfarbe im Textkörper festgelegt. Suchen wir also nach den Stilen dieses Elements und legen Sie die rote Farbe als Schriftfarbe fest.
Nach dem Speichern der Datei können wir die Site aktualisieren und die rote Farbe für die Hauptschriftart auf der Site sehen.
Wie Sie sehen, ist das Anpassen einer WordPress-Vorlage für sich selbst eine ziemlich einfache Aufgabe. Mit ein wenig CSS-Kenntnissen können Sie die WordPress-Vorlage ändern und die Vorlage nach Bedarf anpassen. Mit dem gleichen Schema können wir andere ähnliche Probleme lösen. Hiermit verabschiede ich mich von Ihnen. Viel Glück und bis bald!
Bei der Auswahl einer WordPress-Vorlage tritt häufig ein Problem auf – die unzureichende Breite der Blöcke. Viele haben sofort den Wunsch, die Breite der Vorlage zu ändern. Für diejenigen, die sich gut mit HTML oder PHP auskennen, wird dies keine besonderen Probleme bereiten. Um jedoch ausführlich darüber zu schreiben, wie Sie für eine unvorbereitete Person Änderungen an der Größe einer WordPress-Vorlage vornehmen können, benötigen Sie eine ganze Broschüre.
Am einfachsten ist es, zu bestellen, aber wer es selbst versucht, erlangt Erkenntnisse. In Zukunft muss er sich nicht mehr für jede Kleinigkeit an Spezialisten wenden. Es ist durchaus möglich, die „Grundlage“ dafür zu kennen. Bevor Sie mit Änderungen beginnen, erstellen Sie unbedingt eine Sicherungskopie aller Seiten Ihrer Ressource. Bei ungenauen Arbeiten können Sie das ursprüngliche Erscheinungsbild der Website problemlos wiederherstellen.
Es gibt unglaublich viele WordPress-Vorlagen, sie sind alle unterschiedlich und jede verändert sich auf ihre eigene Art und Weise. Aber so grundlegende Blöcke wie: die Breite der Hauptseite, die Kopfzeile, die linke und rechte Spalte, die Fußzeile haben alles. Für die Arbeit benötigen wir:
-
Webbrowser Mozilla Firefox.
-
Firebug-Plugin auf Firefox installiert.
Wenn alles, was Sie brauchen, heruntergeladen, installiert und einsatzbereit ist, öffnen Sie die ausgewählte Vorlage in Mozilla Firefox und starten Sie Firebug, indem Sie auf das Bug-Symbol klicken.
Plugin-Panel
Unten öffnet sich das Plugin-Panel, in dem wir arbeiten werden. Alle von Ihnen vorgenommenen Änderungen werden sofort oben auf dem Monitor angezeigt. Auf der Registerkarte rechts sehen wir den CSS-Stil des ausgewählten Elements, links den HTML-Code der Seite. Um die Breite der Vorlage zu vergrößern oder zu verkleinern, müssen wir zunächst die aktuelle Größe der Basis kennen. Klicken Sie auf das Cursor-Symbol unseres Plugins.
Elemente auf der Seite werden in verschiedenen Farben hervorgehoben und Sie können jedes Element der Seite hervorheben, um sich mit der Struktur Ihrer Website im Detail vertraut zu machen. Nachdem Sie den Namen erhalten haben, erfahren Sie die genauen Abmessungen. Nachdem die aktuelle Breite eingestellt ist, klicken Sie mit der linken Maustaste auf diesen Wert. Im Probeverfahren ermitteln wir die am besten geeignete Breite und testen deren Darstellung.
Experimentieren Sie ruhig mit beliebigen Elementen und Werten. Aktuelle Änderungen können Ihre Seite auf dem Server in keiner Weise beeinflussen, sie sind nur im Plugin-Fenster (dem aktuellen Cache von Mozilla) aktiv. Beim Update werden alle Einstellungen zurückgesetzt.
Bearbeiten Sie style.css
Jetzt müssen diese Änderungen noch für die WordPress-Vorlage gespeichert werden. Normalerweise wird die Vorlagenbreite in style.css geschrieben. Wir betreten den Verwaltungsbereich der Website → Erscheinungsbild → Editor → style.css → Zeile 79 und ändern den Breitenwert. Wir sparen.
Aktualisiert: 21.08.2023
103583
Wenn Sie einen Fehler bemerken, wählen Sie einen Textabschnitt aus und drücken Sie Strg + Eingabetaste
