Ändern der Breite eines WordPress-Themes. So erstellen Sie in WordPress eine volle Seitenbreite. So strecken Sie ein WordPress-Theme so, dass es den gesamten Bildschirm ausfüllt

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. Sie müssen über eine „goldene Mitte“ verfügen, die für die Ausführung der Funktionen auf der Website genau richtig ist. 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 von Seitenspalten korrigieren 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. Normalerweise sind die Seitenleisten bereits standardmäßig installiert. Allerdings ist die Breite der Seitenleiste für ein bestimmtes Projekt nicht immer optimal. Schauen wir uns Methoden zum Ändern der Breite und Höhe des Seitenteils einer WordPress-Site an.

Wie groß sollte die Seitenleiste sein?

Möglicherweise müssen Sie nichts ändern. Die Seitensäule sollte nur dann gewechselt werden, wenn sie „schief“ und unnatürlich aussieht. Stellen Sie zunächst sicher, dass die Seitenleiste eine geringere Breite hat als der Hauptteil der Seite, der den Inhalt enthält. Die Seitenleiste ist kein zentraler Teil der Website und sollte daher nicht viel Aufmerksamkeit erhalten – sie kann maximal 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 effektiver.

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 (zum Beispiel: Jarel Remick) sprechen über diese mysteriöse Figur.

Bei der Höhe ist es wichtig, dass die Seitenleiste nicht über den oberen Rand der Website hinausragt. Die Höhe oben sollte 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 die wichtigsten Dinge. Und wenn es wirklich viele Informationen gibt, erstellen Sie zwei Seitenspalten, aber Sie müssen die Seitenleiste nicht bis zur Fußzeile der Site ausdehnen.

So ändern Sie die Größe einer Seitenleiste manuell

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 einer speziellen Größe als Hintergrund hochgeladen haben. 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 Seitensäulen zu ändern, müssen Sie in den Code einsteigen und abwechselnd die digitalen Parameter für die Breite und Höhe jedes Elements anpassen. Nämlich:

Header – verantwortlich für die Größe des Site-Headers;
bg ist der Hauptinhalt, also der Teil der Seite, auf dem Artikel gepostet werden (in diesem Teil befindet sich die Seitenleiste);
Fußzeile ist die Fußzeile der Site, also der untere Teil.

Um die Abmessungen eines bestimmten Blocks herauszufinden, müssen Sie auf das Wrapper-Element unter „Seitencode anzeigen“ klicken. Auf der Seite des CSS-Bereichs des Browsers sehen Sie die Pixelbreite des Elements. Um die Größe des gesamten Rahmens zu ändern, müssen Sie das Hauptelement bearbeiten und dann Änderungen an anderen Elementen vornehmen. Es wird empfohlen, dies zu tun lokaler Server damit Ihre Website nicht vor den Augen der Benutzer „springt“. Und im Allgemeinen ist es besser, dies zu tun, bevor Sie ein Internetprojekt starten.

Um die Größe der Seitenleiste zu ändern, suchen Sie nach etwas wie diesem:

Diese Zeile ist für die Parameter des mittleren Teils der Seite zuständig, also für den Inhaltsblock und die Seitenspalten. Berühren Sie nicht die „Hauptzeile“ – dies ist der Hauptteil der Website. Sie müssen das Tag „mainnav“ finden – das ist die Seitenspalte. Sie müssen lediglich das Breitenelement in CSS ändern, das für die Breite verantwortlich ist – geben Sie einen anderen Größenwert ein. Sie können Ihre Seitenleiste verkleinern oder vergrößern, aber denken Sie daran, die oben genannten Größentipps zu befolgen, um sicherzustellen, dass Ihre Website korrekt angezeigt wird.

Damit die vorgenommenen Änderungen gespeichert werden, müssen diese 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 Hauptserverdatenbanken hinzu. Erst dann werden die Änderungen wirksam.

Plugin zum Ändern der Seitenleistengröße

Wenn Sie nicht durch die Interna von Cascading Style Sheets wühlen und nach Elementen suchen möchten, die bearbeitet werden müssen, können Sie das Visual Sidebar Editor-Plugin verwenden für WordPress. Hierbei handelt es sich um ein spezielles Modul, das speziell für die Generierung von Seitenspalten 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 von Grund auf neu erstellen fertige Vorlage. Das Modul funktioniert mit Shortcodes und ist sehr einfach zu installieren. Wenn Sie nicht nur die Größe der Seitenleiste ändern müssen, ist es besser, das Visual Composer-Plugin herunterzuladen und den Visual Sidebar Editor als Add-on hinzuzufügen. Wenn das einzige Problem die Größe des Seitenrands ist, reicht das Modul „Visual Sidebar Editor“ aus.

Der Vorteil der Verwendung eines Plugins zum Ändern Ihrer 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 passt den Elementcode selbstständig an Ihre Wünsche an. Wenn Sie versuchen möchten, HTML-Tags zu bearbeiten, bietet Ihnen das Plugin diese Möglichkeit. Darüber hinaus gibt es spezielle Shortcodes für die Einzahlung zusätzliche Funktionen Es gibt mehr als 40 Erweiterungen auf der Website.

Ein weiterer Vorteil der Verwendung eines solchen Plugins zum Bearbeiten von Seiten besteht darin, dass Änderungen unabhängig von der Engine-Version gespeichert werden. Auch wenn Sie WordPress aktualisieren, ändert sich die Vorlage nicht – sie wird vom Modul gesteuert. Daher können Sie auf ältere Versionen umsteigen oder WordPress aktualisieren – die Größe der Seitenleiste 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 einigen Seiten kopieren und auf andere übertragen. Und das Wichtigste: Das Modul funktioniert nach einem äußerst klaren Prinzip – auch ein Anfänger wird es schnell beherrschen.

Wenn Ihnen der Visual Sidebar Editor gefällt, sollten Sie die vollständige Ergänzung des Add-ons, das Visual Composer-Modul, installieren. Dann können Sie jedes Element auf den Portalseiten problemlos bearbeiten.

Einige WordPress-Vorlagen sind im Seitenmenü, der sogenannten Sidebar, recht eng oder im Artikelbereich im Gegenteil eng, und natürlich müssen einige Webmaster bestimmte Grenzen erweitern, um beispielsweise Banner unterzubringen. In diesem Artikel erzähle ich Ihnen wie Ändern Sie die Größe der Kopfzeile, der Vorlage, des Artikelabschnitts oder des Seitenmenüs.

Warum Sie möglicherweise die Vorlagengröße ändern müssen.

Möglicherweise möchten Sie die Größe der Vorlage entweder gleich zu Beginn ändern, gleich nach der Installation, oder nachdem Sie eine Reihe von Artikeln geschrieben haben und die ersten Dutzende Besucher erscheinen. Beispielsweise musste ich die Vorlage erweitern, nachdem ich versuchen wollte, mit meiner Arbeit – einem Blog – die ersten paar Cent Werbung zu verdienen. Zu diesem Zweck wurde das Banner-Werbesystem von Google-AdSense ausgewählt. Aber um mindestens zwei unglückliche Cent zu verdienen, müssen Sie zwei Parameter berücksichtigen:

Damit jemand auf eine Anzeige klickt, müssen sich die Banner, die das System ausgibt, an bestimmten Stellen befinden. Im Internet schreiben sie, dass dies der linke Schieberegler ist, 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, zum Beispiel auf den Bildern, die wir im Rahmen dieses Artikels aber nicht berücksichtigen.
Google stellt Banner in bestimmten Größen zur Verfügung.

diese. Wir müssen den ersten und zweiten Punkt kombinieren, nämlich sicherstellen, dass Banner von Google oder Yandex an den dafür vorgesehenen Stellen, in der linken Seitenleiste und in Artikeln platziert werden. Da meine Vorlage für diese Zwecke zu schmal war und es keinen Sinn macht, kleine Banner aufzuhängen, da niemand darauf klickt, bleibt nur noch eines: das Seitenmenü und den Artikelbereich erweitern.

So vergrößern Sie eine Vorlage horizontal Teil 1, verstehen Sie die Zahlen

Um zu verstehen, um wie viel wir die Breite dieses oder jenes Elements vergrößern müssen, müssen wir nicht auf einen Blick abschätzen: „Hier 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 Safari als Beispiel und Sie werden jeden für Sie geeigneten Browser verwenden. Die Unterschiede sollten nur in einer Schaltfläche liegen.

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 alles nach und nach 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 den Schritten 3–5 getan haben, als auch den Prozentsatz auf der Seite. Ändern Sie dazu einfach den Parameter anstelle von Pixel

1	Breite: 31,8 %;

Diese Werte geben an, wie viel Prozent der Breite von dem einen oder anderen Element eingenommen werden können. Hauptsache, die Sidebar und der Artikel nehmen insgesamt 100 % ein und nicht mehr, sonst schwebt alles über die Seite.

Das ist alles. Jetzt wissen wir, welche Werte wir ändern müssen, damit alles passt. Es müssen nur noch die notwendigen Daten in die Style-Datei eingegeben 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
Tun Sicherheitskopie diese 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. Jetzt stehen wir ganz vor uns einfache Aufgabe alte Werte in neue ändern. Es gibt zwei Möglichkeiten: Die erste ist einfach und die zweite ist schwierig. Die erste besteht darin, den alten Wert durch Suchen zu finden und stattdessen einen neuen zu schreiben. Die zweite Möglichkeit besteht darin, nach den Namen der Stile zu suchen, nach der Breite innerhalb der Stile zu suchen und den Wert zu ändern.

Persönlich habe ich mich für das erste entschieden, einfacher Weg, weil Sie damit Änderungen in nur wenigen Sekunden vornehmen können. Wir suchen also nach dem Wert 980. Eine Suche in der Datei 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 (Mindesthö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;

Der zweite ist für die Breite von zwei Elementen, der Artikelliste und dem linken Menü:

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 wieder laden.

Das ist alles, aber wenn Sie noch Fragen haben, schreiben Sie mir in die Kommentare oder schreiben Sie mir eine E-Mail, ich helfe Ihnen gerne weiter.

Vom Autor: Grüße Freunde. Im nächsten Artikel zum Thema WordPress beschäftigen wir uns mit der Frage, wie man ein WordPress-Template ändert. Wenn Sie noch nie 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.

Definieren wir zunächst die am häufigsten gestellten Fragen, auf die Benutzer stoßen, wenn sie eine WordPress-Vorlage für sich selbst anpassen. Hier ist eine ungefähre Liste davon:

So bearbeiten Sie eine WordPress-Vorlage

Ändern Sie die Vorlagenbreite in WordPress

So ändern Sie die Größe einer WordPress-Vorlage

So ändern Sie die Farbe der WordPress-Vorlage

So ändern Sie die Schriftart in einer WordPress-Vorlage

Und dies ist nur eine kleine Liste von Problemen, auf die Sie stoßen können oder bei deren Lösung Sie anderen helfen können, auch gegen eine Gebühr, wenn Sie benutzerdefinierte Websites entwickeln.

Alle Fragen in der obigen Liste können je nach dem für die Website verwendeten Thema auf zwei Arten gelöst werden. 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 „Erscheinungsbild – Anpassen“ und sehen es uns an Startseite Site und auf der linken Seite der Seite die verfügbaren Site-Einstellungen. Dazu können Designeinstellungen gehören.

Versuchen wir zum Beispiel, etwas zu ändern Farbschema Website. 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-Vorlageneinstellungen, 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. Was ist in diesem Fall zu tun? 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 – die Datei style.css. Es befindet sich in Ihrem Theme-Ordner. Lassen Sie uns als Beispiel die Schriftfarbe ändern. Dies können Sie übrigens direkt aus dem WordPress-Administrationsbereich heraus tun. Seien Sie einfach vorsichtig und aufmerksam, um die Website nicht versehentlich zu „kaputt machen“. Am besten sichern Sie Ihr Theme, bevor Sie etwas daran ändern. Gehen Sie also zum Menü „Darstellung – Editor“ und standardmäßig sollte die Datei mit den Designstilen zur Bearbeitung geöffnet sein.

Ist dies nicht der Fall, dann wählen Sie diese Datei aus der Liste rechts aus, sie heißt Style Sheet (style.css). Meistens wird die Schriftfarbe im Textkörper festgelegt. Suchen wir also die Stile für dieses Element und legen Sie Rot 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 Ihre WordPress-Vorlage ändern und alle erforderlichen Vorlagenanpassungen vornehmen. Mit dem gleichen Schema können wir andere ähnliche Probleme lösen. Damit verabschiede ich mich von Ihnen. Viel Glück und bis bald!

Oft bei der Auswahl WordPress-Vorlage Es entsteht ein Problem: Die Blöcke sind nicht breit genug. Viele Leute möchten sofort die Breite der Vorlage ä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 den Abmessungen 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. Er muss sich künftig nicht mehr für jedes noch so kleine Detail an Spezialisten wenden. Wenn man die „Basis“ kennt, ist dies durchaus möglich. Bevor Sie Änderungen vornehmen, 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 eine unglaubliche Vielfalt an WordPress-Vorlagen, sie sind alle unterschiedlich und jede verändert sich auf ihre eigene Weise. Aber grundlegende Blöcke wie die Breite der Hauptseite, die Kopfzeile, die linke und rechte Spalte und die Fußzeile sind alle vorhanden. 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 Käfersymbol klicken.

Plugin-Panel

Unten öffnet sich das Plugin-Panel, in dem wir arbeiten werden. Alle 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 die Struktur Ihrer Website im Detail hervorheben, indem Sie jedes Element der Seite hervorheben. Sobald Sie den Namen erhalten haben, erfahren Sie die genauen Maße. Nachdem die aktuelle Breite eingestellt wurde, 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 haben keinerlei Auswirkungen auf Ihre Seite auf dem Server; sie sind nur im Plugin-Fenster (dem aktuellen Mozilla-Cache) aktiv. Beim Update werden alle Einstellungen zurückgesetzt.

Bearbeiten von style.css

Jetzt müssen Sie nur noch diese Änderungen für das WordPress-Template speichern. Normalerweise wird die Breite der Vorlage in style.css angegeben. Melden Sie sich im Verwaltungsbereich der Website an → Aussehen→ Editor → style.css → Zeile 79, ändern Sie den Breitenwert. Speichern.