Nachdem im ersten Teil der Serie die Grundüberlegungen und Layoutentwürfe besprochen wurden soll jetzt das Grundlayout mit CSS erstellt werden.
Files anlegen
Ein Theme findet sich üblicherweise in wp-content/themes. In diesem Verzeichnis befinden sich alle Themes die du auf deinem Blog installiert hast. Überleg dir also einen Namen für dein Theme und erstelle hier ein Verzeichnis mit dem Namen. (Eigentlich ist der Name des Verzeichnisses egal, aber es macht schon Sinn das Verzeichnis wenigstens ähnlich das Theme zu benennen.)
In diesem Verzeichnis legst du ein CSS File namens style.css an. In diesem File wirst du später die styles deklarieren. Oben gibt man aber auch die Daten des Themes an, die von Wordpress ausgelesen werden. Kopiere daher folgenden Text in dein style.css:
/*
Theme Name: deinName
Theme URI: http://deineThemeUrl.com
Description: Mein tolles SEO optimales Theme
Version: 0.1
Author: DU
Author URI: http://www.deineHP.net
*/Wenn du noch ein leeres File namens index.php anlegst, dann erkennt Wordpress bereits dein Theme und bietet es im Design Menü als mögliches Theme an. Auch wenn noch recht wenig zu sehen ist !
Layout mit CSS gestalten
Ein Layout mit CSS so zu gestalten, dass es auf allen Browsern auch halbwegs funktioniert ist eine Wissenschaft für sich. Es empfiehlt sich daher ein erprobtes Layout zu übernehmen und anzupassen. Ich verwende gerne diese Vorlage. Sie ist einfach und funktioniert wirklich ordentlich. Das Basislayout erzeugen wir mit einem css File und etwas html. Das CSS lasse ich in einem eigenen File, weil CSS Files ohenhin immer viel zu lange werden. Ich nenne das File threeColLayout.css und es enthält folgenden Code:
#wrapper{ width:960px; margin:auto; } #outer{ min-height:100%; margin:0 140px; background:#fff; border-left:1px solid #000; border-right:1px solid #000; color: #000; } * html #outer{height:100%;} /*IE treats height as min-height anyway*/ #left { position:relative;/*ie needs this to show float */ width:140px; float:left; margin-left:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */ left:-1px; padding-bottom:52px;/* clear footer*/ } #right { position:relative;/*ie needs this to show float */ width:140px; float:right; margin-right:-139px;/*must be 1px less than width otherwise won't push footer down in some browsers */ padding-top:71px;/* to clear header*/ left:1px; padding-bottom:52px;/* clear footer*/ } #footer { width:100%; clear:both; height:50px; text-align:center; position:relative; margin-top:-50px;/*drag footer from below the fold*/ } #centrecontent { float:right; width:100%; position:relative; padding-bottom:52px;/* clear footer*/ margin-left:-1px; } .outerwrap { float: left; width: 100%; padding-top:71px;/* to clear header*/ margin-right:-3px;/* to stop columns dropping*/ } .clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both; }
Das verlinkte Layout wurde etwas adaptiert und auf eine fixe Breite von 960px reduziert.
Das CSS File muss im style.css includiert werden. Also fügen wir hier ganz oben diese Zeile ein:
@import url(threeColLayout.css);In die index.php fügen wir jetzt den groben Aufbau ein:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <body> <div id="wrapper"> <div id="header"> HEADER </div> <!-- end header --> <div id="outer"> <div class="outerwrap"> <div id="centrecontent"> <p>Center</p> </div> <div id="left"> <p>LEFT</p> </div> <div class="clearer"></div> </div><!--end outerwrap --> <div id="right"> <p>RIGHT</p> </div> <div class="clearer"></div> </div> <!-- end outer --> <div id="footer"> <p>Footer - | Footer | - Footer</p> </div> <!-- end footer --> </div> <!-- end wrapper --> </body>
So das ganze kann man jetzt schon mal betrachten. Theme aktivieren und Seite ansehen, hat zwar nicht viel mit einem Blog zu tun, aber das Layout ist in Ansätzen schon vorhanden. Weiter gehts im nächsten Teil.
Artikel
[...] Teil 2 : Design des Grundlayouts als SEO-Optimiertes CSS Stylesheet [...]