Wie ein Wordpress-Theme mit einem Raster Design

November 1

Wie ein Wordpress-Theme mit einem Raster Design

Viele Wordpress Themes verwenden ein Standardformat, mit einem langen horizontalen Header oben und darunter einen Inhaltsbereich mit einer oder mehreren Randleisten. Allerdings muss dies nicht der Fall sein und Wordpress-Templates können jeder Form und Größe zu nehmen. Warum nicht verwenden eine Raster-Thema, um Vielfalt zu Ihrer Website hinzufügen und legen Sie es abgesehen von dem Rest? Jeder Abschnitt des Rasters kann sein Heim zu einem anderen Feature der Website, mit Hilfe von HTML und CSS Code organisiert.

Anweisungen

1 Gehen Sie zu starkerstheme.com und herunterladen Sie die ZIP-Datei. Wenn der Download abgeschlossen ist, extrahieren Sie die Datei auf Ihren Computer. Dies ist ein leeres "Entwickler"-Thema, mit dem Sie eigene Designs zu entwerfen.

2 Öffnen Sie "style.css" und fügen Sie folgenden Code in einer neuen Zeile:

Gridrow {Display: Block; Width: 100 %} Gridcell {Breite: 33 %; Float: Left; Border: Solid 1px;} 3 Kopieren und fügen Sie den folgenden Code in das "404.php", "archive.php," "category.php," "index.php", "search.php," "single.php", "tag.php" und "page.php"-Dateien, nur unterhalb der "get_header();? >" Zeile:

< Div Id = "Gridrow" >

< Div Id = "Gridcell" > Zeile 1 Zelle 1 < / Div >

< Div Id = "Gridcell" > Zeile 1 Zelle 2 < / Div >

< Div Id = "Gridcell" > 1 Zelle 3 Reihe < / Div >

< / Div >

< Div Id = "Gridrow" >

< Div Id = "Gridcell" > 2 Zelle 1 < / Div >

< Div Id = "Gridcell" > 2 Zelle 2 < / Div >

< Div Id = "Gridcell" > 2 Zelle 3 < / Div >

< / Div >

< Div Id = "Gridrow" >

< Div Id = "Gridcell" > 3 Zelle 1 < / Div >

< Div Id = "Gridcell" > 3 Zelle 2 < / Div >

< Div Id = "Gridcell" > 3 Zelle 3 < / Div >

< / Div >

Dadurch entsteht eine drei durch drei Grid-Layout, mit jeder Zelle beschriftet, so dass Sie es einfach im Code finden. Speichern Sie diese Dateien aber halten Sie offen zu.

4 Die Zelle-Etiketten mit Informationen, die Sie wollen in jeder Zelle zu ersetzen. Beispielsweise sollten Sie Ihre Webseite-Logo oben links, einige Navigations-Schaltflächen in der oberen Mitte und Ihre copyright-Informationen in der untersten Zeile.

5 Platzieren Sie den Hauptinhalt des Blogs in der Rasterzelle gewünschte. Um dies zu erreichen, ersetzen Sie die Bezeichnung Zelle durch die "Schleife" innerhalb jedes der geöffneten Dateien. Die Schleife ist alles zwischen und einschließlich der Zeile beginnend mit "<? Php wenn (have_posts()" und endend mit "<? Php Endwhile;". Speichern Sie alle Dateien, wenn fertig.

6 Fügen Sie andere Gestaltung gewünschte indem Sie CSS-Code in die Datei "style.css". Sie können auch die Größe des Rasterzellen ändern, durch Ändern der Attribute "Höhe" und "Breite" der Linie "#gridcell".

Tipps & Warnungen

  • Wenn Sie die Rahmenstärke der Zellen zu erhöhen oder Leerstellen hinzufügen, werden sie nicht mehr auf dem Bildschirm horizontal passen. Um dies zu beheben, verringern Sie die "Breite" der Linie "#gridcell" in "style.css" um 1 Prozent. Wenn das Problem weiterhin, noch 1 Prozent reduzieren Sie, und wiederholen Sie, bis das Raster korrekt anzeigt.