Tag Archive for 'Template'

#5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo

WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

single.php - Die Beitragsansicht
Die Datei single.php ist fast identisch zur index.php. Es kommt nur ein kleiner, aber wichtiger Teil, hinzu: die Kommentare!
Diese bindet man am einfachsten wie folgt ein:
<?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) { ?><a href="<?php trackback_url(true); ?>" rel="trackback">Trackback</a><?php } ?> <a href="<?php the_permalink() ?>" rel="bookmark">Permanent Link</a>
<?php if(!('open' == $post-> comment_status) && ('open' == $post->ping_status)) { ?>
Zur Zeit können keine Kommentare abgegeben werden. Setze doch einen <a href="< ?php trackback_url(true); ?> " rel="trackback">Trackback auf deine Seite.
<?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) { ?>
Pings setzen ist zur Zeit nicht erlaubt.
<?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) { ?>
Weder Pings noch Kommentare sind erlaubt.<?php } ?>
<?php comments_template(); ?>

Dieser Code kommt am besten nach der Beitragsausgabe und vor endwhile und else.

comments.php - Die Kommentare
Diese Datei gibt die Kommentare aus und erlaubt dem User einen neuen Kommentar zu schreiben.
Auf die Formatierung der Kommentare werde ich wohl später eingehen, da diese Datei relativ umständlich ist. Ich empfehle für den Anfang die comments.php aus dem Standard WordPress Theme, da sie dort bereits sehr gut formatiert ist. Den Feinschliff kann man mit CSS ja sowieso machen. Der Aufbau dürfte für den Anfang zu fast jedem Theme passen.

404.php - Auch ein Blog braucht eine Fehlerseite
Die Fehlerseite ist relativ einfach aufgebaut, sie besteht aus dem Layout der Seite (Header, Footer, Sidebar) und der Fehlermeldung.
<?php get_header(); ?>
<div class="post">
<h1>Fehler!</h1>
Die gewünschte Seite ist nicht verfügbar.<br />
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<div id="sitemap">
<?php get_sidebar(); ?></div>
<?php get_footer(); ?>

Der Aufbau mittels Header, Hooter und Sidebar dürfte aus den Dateien index.php und single.php bekannt sein.
Weiterhin befindet sich auf der Seite nur die Fehlermeldung. Hier ist sie genauso wie ein Post gestaltet (DIV post). Weiterhin wird das Suchfeld eingefügt, damit sich der Leser gleich auf die Suche begeben kann.

screenshot.png - Um das neue Theme besser darzustellen fehlt nur noch das Screenshot
Jetzt kommen wir schon zum letzten Teil dieses Tutorials. Nach dem das Theme nun fertig gestellt ist, sollten wir noch ein Screenshot erstellen. Es sollte eine Größe von 300×225px haben und als screenshot.png gespeichert werden. Es wird dann automatisch im Admin ‘Panel beim jeweiligen Theme angezeigt.

Fertig!
Fertig! Das erste WordPress Theme ist erstellt. :D
Ich würde mich über Kommentare zu diesem Tutorial freuen. Natürlich können auch Fragen zum Thema oder allgemeines Feedback abgegeben werden.
Wenn euch das Tutorial gefallen hat, würde ich mich über einen Backlink auf den webworkblog.net freuen.

WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

Ähnliche Beiträe

  • #1 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #3 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo

    WordPress Theme Tutorial
    Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

    sidebar.php - Die Sidebar, wichtiger Bestandteil eines jeden Blogs
    Die Sidebar kann man mit folgenden Befehlen formatieren:

    • wp_get_archives(’type=monthly’) gibt das Archiv, nach Monaten getrennt, aus.
    • wp_list_cats(’sort_column=name’) gibt die Kategorien nach Namen sortiert aus.
    • get_links(’-1′, ‘<li>’, ‘</li>’, ”, 0, ‘name’, 0, 0, -1, 0); gibt die Links (in einer Aufzählung) nach Namen sortiert aus.
    • wp_register() gibt den Link zur User-Registrierung aus.
    • wp_loginout() der Login/Logout-Link
    • bloginfo(’rss2_url’) und bloginfo(’comments_rss2_url’) sind die Link zum Beitrags- und Kommentar-Feed aus.
    • include (TEMPLATEPATH . ‘/searchform.php’) damit wird das Suchformular eingebunden.

    Ein Beispiel für eine Sidebar könnte etwas so aussehen:
    <h2>Seiten</h2>
    <ul>
    <?php wp_list_pages('title_li='); ?>
    </ul>
    <h2>Archiv</h2>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul>
    <h2>Kategorien</h2>
    <ul>
    <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=0'); ?>
    </ul>
    <?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
    <h2>Links</h2>
    <ul>
    <?php get_links('-1', '<li>', '</li>', '', 0, 'name', 0, 0, -1, 0); ?>
    </ul>
    <h2>Meta</h2>
    <ul>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <li><a href="<?php bloginfo('rss2_url'); ?>" title="RSS 2.0 Feed">RSS 2.0 Feed</a></li>
    <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="RSS 2.0 Feed">RSS 2.0 Kommentare</a></li>
    <?php wp_meta(); ?>
    </ul>
    <?php } ?>
    <h2>Suchen</h2>
    <ul>
    <li>
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </li>
    </ul>

    searchform.php - Die Suche wird erstellt
    Hier wird das Suchfeld formatiert.
    <form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <p>
    <input value="" name="s" id="s" type="text" />
    <input value="Suchen" type="submit" />
    </p>
    </form>

    WordPress Theme Tutorial
    Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

    Ähnliche Beiträe

  • #1 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #3 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #3 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo

    WordPress Theme Tutorial
    Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

    index.php - Der Content / Inhalt wird erstellt
    Jetzt kommt wohl der wichtigste Teil des Templates, die Ausgabe der Beiträge.
    Dazu brauchen wir etwas PHP und natürlich, wie immer, (x)HTML.
    <?php get_header(); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post">
    <h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Link zu <?php the_title(); ?>"><?php the_title(); ?></a></h1>
    <?php the_content('Kompletten Beitrag lesen'); ?>
    </div>
    <div class="infos">Geschrieben am <?php the_time('d.m.Y') ?> von <?php the_author() ?> in <?php the_category(', ') ?>. <?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare'); ?>. <?php edit_post_link('editieren','','·'); ?></div>
    <?php endwhile; ?>
    <?php next_posts_link('« vorherige Seite') ?> - <?php previous_posts_link('nächste Seite »') ?>
    <?php else : ?>
    <div class="post">
    <h1>Fehler!</h1>
    Die gewünschte Seite ist nicht verfügbar.
    </div>
    <?php endif; ?>
    <div id="sitemap">
    <?php get_sidebar(); ?></div>
    <?php get_footer(); ?>

    Mit get_header(); wird der Header (den wir in der header.php erstellt haben) eingebunden.
    Falls es Beiträge gibt (if (have_posts()) :), werden diese jetzt ausgegeben (while (have_posts()) : the_post();).
    Dazu wird die Beitragsausgabe formatiert:

    • the_permalink(): Hiermit wird der direkte Link zum Beitrag ausgegeben.
    • the_title() gibt den Titel des Beitrags aus.
    • the_content(’Kompletten Beitrag lesen’) gibt den Inhalt des Beitrags aus (Falls dieser nur gekürzt angezeigt wird, erscheint ein Link “Kompletten Beitrag lesen” mit dem man den Rest des Beitrags lesen kann).
    • the_time(’d.m.Y’) gibt das Datum an dem der Beitrag geschrieben wurde aus; Die Ausgabe kann wie die PHP-Funktion date() formatiert werden.
    • the_author() ist der Autor des Beitrags
    • the_category(’, ‘) gibt die Kategorien, getrennt durch ein Komma aus.
    • comments_popup_link(’0 Kommentare’, ‘1 Kommentar’, ‘% Kommentare’) Zeigt an, wie viele Kommentare schon geschrieben wurden. Außerdem wird diese Ausgabe zu den Kommentaren des Beitrags verlinkt.
    • edit_post_link(’editieren’,”,’·’) fügt einen Link für den Admin ein, damit dieser direkt zum Bearbeiten des Beitrags ins Admin Panel kommt.
    • mit next_posts_link(’« vorherige Seite’) bzw. previous_posts_link(’nächste Seite »’) wird ein Link zur vorherigen, bzw nächsten Seite ausgegeben.

    Nach der Beitragsformatierung wird mit endwhile die Formatierung der Beiträge beendet.
    Mit else : wird nun ein Fehler ausgegeben, wenn kein Beitrag vorhanden ist. Diese Fehlermeldung wird dann von endif; beendet.
    Am Ende der index.php wird nun mit get_sidebar(); die Sidebar ausgegeben.
    Mit get_footer(); wird der Footer, aus der Datei footer.php ausgegeben.

    WordPress Theme Tutorial
    Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5

    Ähnliche Beiträe

  • #1 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #4 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo
  • #5 Eigenes WordPress Theme / Template erstellen - Tutorial - HowTo