Texto.de – Mein WordPress Magazin

WordPress Theme Idee 

Dieses Layout möchte yippiehey so gern haben. Geringe HTML und CSS Kenntnisse sind da. Aber es hapert an der Umsetzung dennoch. So dachte ich , dass dies ein guter Aufhänger wäre für eine Anleitung wie man sich an die Umsetzung eines WordPress Themes machen kann.

Wie findet man ähnliche Themes zur Hilfe

Dieses Layout hat einen eindeutig erkennbaren Header, dann zwei getrennte Bereiche, es ist zentriert, also in der Mitte des Bildschirmes zu finden.

Es ist also vordergründig nichts anders als ein zweispaltiges Layout mit Header. Klar haben 99% aller zweispalten Layouts eine Spalte breiter als die andere. D.h. man muß von einer Vorlage die Breitenangaben ändern.

zweispaltiges Layout mit Header

In einem Artikel auf meiner WebDesign-in.de stelle ich so ein Layout zur Verfügung. Außerdem ist die style.css auch gleich dabei. Diese Mustervorlage nehme ich für dieses Beispiel um das XHTML Grundgerüst zu bauen.

Meine Arbeitsschritte:

1. Muster heruntergeladen und entpackt.
2. Mit einem Texteditor geöffnet.
3. Hintergundbild erstellt: 2000px X 2px weiß-schwarz.
4. .content und .sidebar gleich breit gemacht.
5. .content nach rechts fließen lassen, damit es schöne Abschlüsse gibt.
6. .post01 und .post02 als neue class eingeführt, in denen dann die einzelnen Artikel drin sind.
7. .cat in der .navigationaussen erstellt, dies beinhaltet dann die Kategorien und die Tags. Dies ist dann in der header.php
8. span.fresh erstellt damit man die Headerüberschrift zweifarbig haben kann.

WordPress Theme Idee Demo

Hier kannst Du Dir das Muster herunterladen. Es beinhaltet die style.css, die index.html und das Hintergrundbild und die index.php,header.php, footer.php und die functions.php (Bitte auch den 2.Artikel lesen ) .Theme-Erstellung-Muster.

Wie teilt man nun die Kategorien auf

Ich empfehle dazu den Loop den ich in diesem Artikel vorschlug Weiterblättern und Loop.

Du brauchst dazu die IDs der Kategorien, die Du auf der jeweiligen Seite anzeigen magst.

Beispiel: die IDs 4,6,9 auf der rechten Seite und die IDs 2,9,23 auf der linken Seite.

Magst Du mehr als 3 Artikel insgesamt anzeigen, dann ändere bei showpost die Zahl. Sollte auf jeder Seite gleich sein.

Die index.php sollte dann so aussehen:

<?php get_header(); ?>
<div class="content">
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('cat=4,6,9&showposts=3'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
 
<div class="post01">
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
 
<?php the_content("&raquo;&raquo; " . the_title('', '', false)); ?>
 
<?php wp_link_pages(array('before' => '<p class="navigate">' . __('Pages') . ' ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
<p class="postmeta"><?php edit_post_link('Edit', '', ' | '); ?> Verfasst von:<?php the_author();?> Eingeordnet in <?php the_category();?>
</p>
</div><!--post01 end-->
 
<?php endwhile; ?>
<div class="navigation">
 <div class="alignleft"><?php next_posts_link('&laquo; &auml;ltere Artikel') ?></div>
  <div class="alignright"><?php previous_posts_link('neuere Artikel &raquo;') ?></div>
 </div>
<?php $wp_query = null; $wp_query = $temp;?>
</div><!--content end-->
 
<div class="sidebar">
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('cat=2,9,23&showposts=3'.'&paged='.$paged);
?>
<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
 
<div class="post02">
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
 
<?php the_content("&raquo;&raquo; " . the_title('', '', false)); ?>
 
<?php wp_link_pages(array('before' => '<p class="navigate">' . __('Pages') . ' ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
<p class="postmeta"><?php edit_post_link('Edit', '', ' | '); ?> Verfasst von:<?php the_author();?> Eingeordnet in <?php the_category();?>
</p>
</div><!--post02 end-->
 
<?php endwhile; ?>
<div class="navigation">
 <div class="alignleft"><?php next_posts_link('&laquo; &auml;ltere Artikel') ?></div>
  <div class="alignright"><?php previous_posts_link('neuere Artikel &raquo;') ?></div>
 </div>
<?php $wp_query = null; $wp_query = $temp;?>
 
 
</div><!--sidebar end-->
<?php get_footer(); ?>

Header und Footer fehlen noch

Da auch Rom ein paar Tage brauchte, kommt dies im nächsten Artikel. Vorher brauch ich auch noch ein wenig Rückmeldung von yippiehey, ob er damit klar kommt.

Und außerdem jede Menge Rückmeldung von Dir. Ob alles verständlich, nachmachbar ist.

War dies hilfreich freu ich mich über jede Art des Dankes