Ein WordPress Theme entsteht

 WordPress Theme Erstellung
WordPress Theme Erstellung

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
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

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 :-)
6

6 Beiträge zu “Ein WordPress Theme entsteht

  1. Kommentar Autor
    matti
    Kommentar

    Priiiiiiima, genau danach habe ich gesucht!!! Wird es eine Vortsetzung geben?

  2. Kommentar Autor
    Monika
    Kommentar

    jo matti gibt es , fehlt ja noch einiges, also RSS abonnieren oder dir den weiteren Artikel per Email senden lassen

    ;)

  3. Kommentar Autor
    yippiehey
    Kommentar

    so, an dieser stelle schonmal einen riesen dank! ich werde mich in den nächsten tagen durcharbeite und versuchen alles so zu übernehmen ich es brauche. melde mich wieder sobald ich fragen hab!

    lieben gruß!

    yippiehey

  4. Kommentar Autor
    Eldarion
    Kommentar

    Hi,

    deine Erklärung ist sehr gut und auch schön ausführlich!!!
    Ich verstehe jedoch leider hier (und bei deinen anderen Artikeln) nicht, wie man ein 3spaltiges Theme erstellt (die Vorlage hab ich von der verlinkten Seite heruntergeladen, weiter weiß ich leider nicht), wo dann die zwei rechten Spalten widgetfähige Sidebars wären.

    Danke!

  5. Kommentar Autor
    Monika
    Kommentar

    Hi Eldarion
    am Ende des obigen Artikels ist der Link zu Teil 2, da werden Deine Fragen – so ich DIch verstand- beantwortet

    lg