WordPress anpassen, Teil 2
Nachdem die linke und rechte Spalte über position:absolute am linken bzw. rechten Rand positioniert wurden. Im CSS sieht das so aus:
#linkeSpalte {
left: 3px;
padding: 0;
position: absolute;
top: 110px;
width: 150px;
background-color: transparent;
}
#rechteSpalte {
position: absolute;
right: 0px;
margin: 0;
padding: 0;
width: 150px;
top: 110px;
background-color: transparent;
}
Der Abstand nach oben (top: 110px;) ist absichtlich etwas grösser als die Höhe des Kopfbereiches gewählt, um etwas “Luft” zwischen die obere Grafik und den Inhalt der Spalten zu bringen.
In die Spalten werden die Inhalte, d.h. das Menü, die Links, die Kategorien, der Kalender, usw. im normalen Textfluss eingesetzt.
Die Links auf die “Nicht-Blog-Seiten” sollten vor den Blog-Kategorien angeordnet werden, die Links auf externe Seiten danach. Für die internen Links wie das Impressum habe ich eine eigene Link-Kategorie angelegt, ebenso für die externen Links zu Fotoblogs, “normalen” Blogs und anderen Seiten.
Somit sieht der Menü-Bereich in der index.php so aus:
<h3>Menü</h3>
<ul id="men">
<?php wp_get_links('2'); ?>
</ul>
<h3><?php _e('Categories:'); ?></h3>
<ul id="categories">
<?php wp_list_cats(); ?>
</ul>
<h3>Links</h3>
<ul class="link">
<?php wp_get_links('4'); ?>
</ul>
<h3>FotoBlogs</h3>
<ul class="link">
<?php wp_get_links('3'); ?>
</ul>
<h3>blogs</h3>
<ul class="link">
<?php wp_get_links('1'); ?>
</ul>
Mit <?php wp_get_links('1'); ?> werden nur die Links aus der Link-Kategorie 1 als Liste ausgegeben. Das Template <?php get_links_list(); ?> aus der mitgelieferten index.php hätte alle Links untereinander aufgelistet.
In die rechte Spalte kommen die Aufrufe für den Kalender und das Monatsarchiv. Jeweils in ein eigenes <div>, um besser auf das Erscheinungsbild dieser Elemente zugreifen zu können.
<div id="calendar">
<?php get_calendar(); ?>
</div>
<div id="archives">< ?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
Es schliesst sich noch der Aufruf des Newsreader-Plugins an, das die aktuellen News der Websozis einblendet. Die Anpassung dieses und der anderen Plugins erkläre ich dann in einem weiteren Beitrag.
Fehlt noch die Suchfunktion. Dieses Seitenelement ist in einem eigenen <div> wieder über position: absolute; oben rechts auf der Seite positioniert.
Das Zufallsbild oberhalb des Menüs wird über das Plugin Random File von Scott Reilly eingefügt.