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 sollten einen Mittelweg haben, der 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.
Um die Größe der Seitenleiste zu ändern, suchen Sie nach etwas wie dieser Zeile
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.
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.
WordPress ist ein fantastisches Blogging-Tool, aber leider nicht perfekt. Auch nach vielen Updates und Hunderten neuer Funktionen sind für ein komfortables Erlebnis noch einige grundlegende Verbesserungen der Benutzeroberfläche erforderlich.
Ich habe in letzter Zeit viele Artikel mit langen Listen geschrieben und dabei ein Problem mit dem integrierten visuellen Post-Editor von WordPress entdeckt, von dem ich vorher nichts wusste oder das mich vorher nicht besonders störte.
In diesem kurzen Tutorial zeige ich Ihnen, wie Sie die Breite der Haupttextspalte im visuellen Post-Editor von WordPress ändern.
Beim Erstellen großer Beiträge (hauptsächlich mit Bildern) musste ich den Beitrag oft speichern und in der Vorschau anzeigen, um sicherzustellen, dass die Liste richtig formatiert war. Außerdem musste ich oft Text direkt auf mein Bild schreiben, da die Größe des Editorfensters fast eineinhalb Mal größer ist als die aller meiner Bilder (sowie des Hauptinhaltsblocks auf meiner Website):
Die Lösung ist relativ einfach, aber man muss wissen, wie man sie umsetzt. Zuerst müssen Sie die aktuelle Breite des Inhaltsblocks auf Ihrer Website kennen. In meinem Fall beträgt die Breite meines Blogblocks 650 Pixel.
Dann müssen Sie Ihre Datei öffnen Funktionen.php und fügen Sie am Ende der Datei den folgenden Code hinzu:
Funktion fb_change_mce_buttons($initArray) ( $initArray["width"] = "650px"; return $initArray; ) add_filter("tiny_mce_before_init", "fb_change_mce_buttons");
Als Ergebnis sehen Sie einen Post-Editor, der die Breite Ihres Inhaltsblocks auf der Website selbst wiederholt. Auf diese Weise stellen Sie sicher, dass ein Eintrag, den Sie über die Admin-Konsole erstellen, dem Endergebnis so nahe wie möglich kommt.
Beachten Sie, dass sich bei einigen Bildschirmauflösungen Ihre Einstellungen ändern und beispielsweise nur eine Spalte angezeigt wird – dies hängt von der Breite Ihres Inhalts ab.
Vom Autor: Hallo Freunde. Im nächsten Artikel zum WordPress-Theme 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:
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.
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.
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.
Es kommt oft vor, dass das Theme, das Ihnen gefällt, einen schmalen Bereich für Beiträge hat und seine Einstellungen keine Änderung der Breite vorsehen. In diesem Fall kann es mit minimalem Wissen erhöht werden HTML Und CSS. Nehmen wir als Beispiel das beliebte, kostenlose Patagonia-Theme. Sie können das Theme mit Hilfe eines wunderbaren Plugins erweitern Feuerfuchs— Feuerkäfer. Zuerst müssen Sie es installieren, indem Sie es hier herunterladen. Dann einschalten Plugin, wie es auf dem Bild zu sehen ist - Registerkarte „Extras“. — Web Entwicklung — Feuerkäfer — Feuerkäfer öffnen:
Anschließend müssen am unteren Bildschirmrand durch Zeigen mit dem Cursor und Klicken mit der Maus verschiedene Elemente ausgewählt werden. In diesem Fall wird auf der rechten Seite angezeigt CSS-Stile, und im Seitenbereich wird dieser oder jener Bereich hervorgehoben - der Haupt-, Seitenleiste, Header. Uns interessiert nun der Hauptbereich, zu dem wir gelangen, wenn wir zum Tag „herausgehen“. Z.B, die Breite vergrößern Hauptbereich von 550 Pixel bis 620. Dazu müssen Sie die Zeile ändern Breite: 550px Datei style.css. Wenn das Theme bereits installiert ist, können Sie diese Datei direkt über das Admin-Panel bearbeiten. Wenn nicht, müssen Sie das Archiv mit dem Theme entpacken und mit dem Editor Änderungen an der Datei vornehmen. In unserem Fall ist das Theme installiert, also gehen Sie zu Administrationsmenü— Aussehen — Editor- Öffnen Sie die Datei style.css, suchen Sie nach der Linienbreite: 550px und ändern Sie den Breitenwert von 550px in 620px. Klicken Update-Datei. Wir gehen auf die Seite und sehen, dass sich der Bereich der Beiträge erweitert hat, aber an einigen Stellen „auf die rechte Spalte gestoßen“ ist. In diesem Fall müssen wir diesen Bereich proportional einschränken. Dafür werden wir auch verwenden Firebug-Plugin, wie im vorherigen Fall. Suche nach einem Tag Bei der Bearbeitung von style.css gehen wir genauso vor wie im vorherigen Fall mit dem Hauptbereich, nur bearbeiten wir jetzt die Zeile Rand: 0 0 0 580px;Ändern Sie den Einzugswert darin von 580px auf 630px. Jetzt ist alles in Ordnung. Der Aufnahmebereich ist breiter geworden und läuft nicht in den Bereich hinein Seitenleiste. Es kommt auch vor, dass Stile nicht nur in die Datei style.css, sondern auch in die Datei geschrieben werden screen.css
. Auf der rechten Seite wird ein Fragment der Datei angezeigt style.css. Und hier sieht man, dass die Breite des Hauptbereichs 580 Pixel beträgt. Und das reicht für unsere Bedürfnisse nicht aus.
>. Im Ordner style.css sehen wir, dass die Breite der Seitenleiste implizit über die Eigenschaft festgelegt wird Breite, und mit der Hilfe Rand: 0 0 0 580px;
Thematische Materialien:
Aktualisiert: 21.08.2023
103583
Wenn Sie einen Fehler bemerken, wählen Sie einen Textabschnitt aus und drücken Sie Strg + Eingabetaste
Site-Kategorien
