Kann ich zwei Spalten in einem WordPress-Widget erstellen?

August 17

Verwenden Sie bessere Nutzung des Weltraums in den Seitenleisten, Fuß- oder jedem anderen Bereich auf Ihrer WordPress-powered Website, wo Sie Widgets verwenden, um Spalten in Ihre Widgets. Dies ermöglicht große Blöcke des Textes und lange Listen mehr horizontalen Abstand und linken vertikalen Raum einnimmt. Ihre Besucher müssen dann weniger Scrollen um die Gesamtheit Ihres Blogs zu sehen.

Widgets

WordPress können Sie Widgets verwenden, um Abschnitte von eurer Seite, einschließlich der Seitenleisten und Fußzeilen dynamischen Inhalt hinzufügen. WordPress enthält einige Widgets standardmäßig und Plugins hinzufügen zusätzliche Widgets um bestimmte Funktionen, wie das Ergebnis Ihrer letzten Twitter-Nachrichten dienen. WordPress Widgets können Sie auch Ausschnitte oder HTML oder Text zu Ihrer Website hinzuzufügen, ohne die Theme-Dateien zu bearbeiten. Auf diese Weise bieten Widgets einen sicheren Weg auf Ihrer Website anpassen, auch wenn Sie nicht mit HTML beherrschen.

Widget-Darstellung

Standardmäßig werden die meisten Widgets als eine einzelne Spalte angezeigt. Zum Beispiel archivieren und Twitter Widgets als vertikale Listen erscheinen überall dort, wo Sie sie in Ihrem Layout installieren. Text und andere Inhalte erweitert und den vorgesehenen Container, z. B. der Sidebar passt. Ein enger Container zeigt weniger Inhalt pro Zeile und das Widget wird somit länger, wenn es eine Menge Inhalt enthält.

Erstellen von Spalten

Erstellen von Spalten in einem Text-Widget, verwenden Divs und um gemeinsam zu schweben. Im Allgemeinen können beide Links zu schweben und geben Sie eine Breite von etwas weniger als 50 Prozent um zwei Spalten zu erstellen. Verwenden Sie eine Breite von rund 33 Prozent um drei Spalten zu erstellen. Fügen Sie den folgenden Code in ein Text-Widget, zwei Spalten mit div-Tags zu erstellen. Sie können alle Inhalte innerhalb der div-Tags platzieren:

< Div Style = "Float: Links; Breite: 45 % "> Content hier < / Div >< Div Style =" Float: Links; Breite: 45 % "> Content hier < / Div >

Sie können auch die Eigenschaft "Float" und "Breite", Listenelemente in einer Spalte mithilfe einer ähnlichen Syntax verschieben:

< Ol >< li Stil = "Float: left; Breite: 45 % "> Listenelement </li >< li Stil = "Float: left; Breite: 45 % "> Listenelement </li >< /ol >

Überlegungen zur

Wenn Sie keine Theme-Dateien bearbeiten möchten, ist es am einfachsten columned Widgets erstellen, indem Sie die HTML-Tags selbst, wie im vorherigen Beispiel CSS hinzufügen. Jedoch nicht den HTML-Code für generierte Widgets direkt bearbeitet werden. Wenn Sie Ihre Website-Quellcode anzeigen, können Sie darüber hinaus finden Sie die Klasse oder ID angewendet auf das Widget und ein externes Stylesheet Erstellen von Spalten CSS hinzufügen. Beispielsweise wenn eine Liste Widget die ID "Liste-Widget" verwendet, fügen Sie Folgendes zu Ihrer Datei "style.css" Spalten Listen erstellen:

...zur-Widget-li{Float: left; Breite: 45 %;}

Eine ähnliche Taktik können Sie die CSS von Text-Widgets auf Ihr externes Stylesheet verschieben. Platzieren Sie beispielsweise Folgendes in Ihrem Stylesheet zu Ihrem Div Links schweben:

.div-name{Float: left; Breite: 45 %;}

Bearbeiten Sie den Widget-Code ähnlich dem folgenden angezeigt:

< Div Class = "Div-Name" > Content hier < / Div >