Colorscheme

Eigenes Wordpress Template in wenigen Schritten - Schritt 6

Diese Wordpress Anleitung hat nun schon einige Jahre auf dem Buckel und die Code-Formatierung ist, nett ausgedrückt, nicht akzeptabel. Daher habe ich auf folgender Seite ein komplett neues verfasst: Wordpress Theme Tutorial auf deutsch.

Template Info im Stylesheet hinzufügen
Nun wirds mal Zeit sich als Autor im eigenen Template zu verewigen, dazu öffne die style.css und füge ganz oben folgendes ein:

/*
Theme Name: Test Theme
Theme URI: http://www.url.de/
Description: Theme erstellt von AUTORENNAME für <a href=”http://www.url.de”>WEBSITENAME</a>
Version: 1.0
Author: AUTORENNAME
Farben: #ff00ff | #cccccc
*/

Es ist sicherlich Geschmackssache ob man oben, am anfang des Stylesheets, noch die verwendeten Farben auflistet, ich finde es aber recht nützlich.

Wie gehts weiter
Nachdem wir noch eine kleine Formatierung für den footer-Bereich im Stylesheet und in der index.php vorgenommen haben, sieht unser Template bisher so aus:

index.php
<body>
<div id="wrapper">
<div id="box_header">
<?php get_header(); ?>
</div>
<div id="box_content">
Template aktiviert
</div>
<div id="box_sidebar">
</div>
<div id="footer">
<?php get_footer(); ?>
</div>
</div>
</body>

footer.php
<p>
&lt;?php bloginfo('name'); ?> pr&auml;sentiert stolz
&lt;a href="http://wordpress.org">WordPress&lt;/a>
&lt;br />&lt;a href="feed:&lt;?php bloginfo('rss2_url'); ?>">Eintr&auml;ge (RSS)&lt;/a>
und &lt;a href="feed:&lt;?php bloginfo('comments_rss2_url'); ?>">Kommentare (RSS)&lt;/a>.
</p>
</body>
</html>

style.css
/*
Theme Name: Test Theme
Theme URI: http://www.url.de/
Description: Theme erstellt von AUTORENNAME für &lt;a href="http://www.url.de"&gt;WEBSITENAME&lt;/a&gt;
Version: 1.0
Author: AUTORENNAME
Farben: #ff00ff | #cccccc
*/
#wrapper {
width: 800px;
margin: auto;
border: 1px solid black;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#box_header {
width: 100%;
height: 150px;
border-bottom: 1px solid black;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#box_content {
width: 550px;
float: left;
border-right: 1px solid black;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#box_sidebar {
width: 100%;
float: left;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#footer {
clear: both;
border-top: 1px solid black;
width: 100%;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

Nun geben wir unseren Content aus
Naja, bevor wir das machen, brauchen wir erstmal ein paar Pseudobeiträge, also losgehts und mit Copy & Paste ordentlich viele Artikel schreiben, natürlich pseudo Content.

Nachdem das getan ist gehen wir ans Herzen von Wordpress, der Loop. Mit dieser können wir alle unsere Artikel ausgeben, und auch spezielle Abhängigkeiten definieren, in der Grundfassung sieht sie wie folgt aus:

the Loop

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>




<?php if ( in_category('3') ) { ?>
<div class="post-cat-three">
<?php } else { ?>
<div class="post">
<?php } ?>


<h2><?php the_title(); ?></h2>


<small><?php the_time('F jS, Y'); ?></small>


<div class="entry">
<?php the_content(); ?>
</div>


<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div>


<?php endwhile; else: ?>



<p>Tut mir leid, keine Beiträge vorhanden.</p>


<?php endif; ?>

Eigentlich selbst erklärend, wenn man sich etwas mit PHP auskennt. Verwirrend mag der letzte Teil sein, in dem nochmal geprüft wird ob Beiträge vorhanden sind. Man geht ja eigentlich immer davon aus, das Beiträge vorhanden sind, ansonsten würde man “the Loop” nicht gebrauchen. Da man die Schleife aber auch auf Suchergebnissseiten verwendet, macht sie schon Sinn. Wenn jemand einen Suchbegriff eingibt, zudem es keine Artikel gibt, wird der Text “Tut mir leid, keine Beiträge vorhanden” ausgegeben.

Wir packen unsere Schleife in den Bereich der Contentausgabe in der index.php und hoffen das alles funktioniert. Dazu löschen wir die Zeile in der steht “Template aktiviert” und fügen den kompletten Code dort ein. Die Beiträge werden jetzt untereinander ausgegeben, nicht schön aber es funktioniert. Nun kann man mittels CSS die Klassen noch anpassen und seinem Design einen schöneren Schliff verpassen, vielleicht sollte man aber bis zum nächsten Schritt warten, dann wird nämlich die Sidebar eingebaut

wordpress template erstellen

Verwandte Artikel
  1. Eigenes Wordpress Template in wenigen Schritten - Schritt 4
  2. Eigenes Wordpress Template in wenigen Schritten - Schritt 5
  3. Eigenes Wordpress Template in wenigen Schritten - Schritt 2
  4. Eigenes Wordpress Template in wenigen Schritten - Schritt 1
  5. Eigenes Wordpress Template in wenigen Schritten - Schritt 3

am Dezember 15, 2005 um 21:50 Uhr | in Webdesign | Kein Kommentar

Bislang keine Kommentare

Sei der erste, der einen Kommentar abgibt

Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.