Wie geht man vor, um für eine bestimmte Kategorie eine anders gestaltete/aufgebaute (auch mit Widgets bestückte) Sidebar aufzurufen? – Dies wurde ich per E-mail gefragt. Ich zeige hier in diesem Artikel einen Weg auf. Doch wie immer gilt, es gibt ganz viele Wege nach Rom . Kommt drauf an was man schlussendlich wirklich alles braucht.

Wenn solche Arbeitsschritte erklärt werden liest sich dies meist langsamer als es dann gemacht wird. Und ich versuche immer sehr genau zu erklären, so dass Du dies wirklich 1:1 nachmachen kannst.

Was man dazu braucht:

• Einen Texteditor (WordPad ist keiner)
• die category.php oder archive.php des verwendeten Themes.
• den “Category Slug” der gewählten Kategorie.
• die sidebar.php.
• die functions.php um dort neue Widgets einzutragen und für ein paar neue Funktionen.

das neue Template category-slug.php erstellen

Um die Übersicht in dem ThemeOrdner zu bewahren ist es günstig für solche Aktionen wirklich ein eigenes category-slug.php Template zu erstellen.

Einfach die category.php, wenn die nicht da ist im ThemeOrdner, dann die archive.php öffnen und als category-slug.php abspeichern.

Den “Slug” einer Kategorie findest Du entweder in der URL, oder Dashboard ==> Artikeln==>Kategorie==> Titelform.

WordPress erkennt solche Templates von sich aus, dies habe ich mal hier beschrieben.

das neue Template sidebar-categoryslug.php

Ebenfalls der Übersicht wegen ist es günstig, die neue Sidebar unter dem “Slug” /Titelform dieser Kategorie abzuspeichern.

Also sidebar.php öffnen und als sidebar-categoryslug.php abspeichern.
WordPress erkennt dieses Template (noch) nicht von selbst, aber es erleichtert ungemein den Durchblick

category-slug.php und sidebar-categoryslug.php bekanntmachen

Naja mir fiel da jetzt wirklich keine andere Überschrift ein, aber die category-slug.php weiß noch nicht, dass sie die neue Sidebar sidebar-categoryslug.php herzeigen sollte, also muss man es ihr sagen.

Ganz am Ende der category-slug.php steht sicher:

 
get_sidebar();

Steht dies nicht dort, dann ist dieses Theme sicher ein eigenes Framework und ich tät dann davon abraten dies zu tun, außer man kennt sich in PHP gut aus => oder man fragt die ThemeErsteller.

Aber findest Du dort get_sidebar dann kann man WP sagen, dass es da eine spezielle Sidebar gibt:

 
get_sidebar('categorslug');

Nun sucht WP nach einem Template das sidebar-categoryslug heißt und nimmt es.

Ab jetzt kann man in dieser Sidebar anzeigen was auch immer man mag, es wird nur für diese Kategorie genommen.

functions.php neue Widgets erstellen

Meist stehen in der functions.php bereits Widgets, dort findet man dann auch wie das HTML für dieses Theme dort angeben ist. Ich nehm hier Beispiele aus TwentyTen Eleven.

register_sidebar( array(
'name' => __( 'CategorySlugKATS', 'twentyeleven' ),
'id' => 'sidebar-8',
'description' => __( 'The sidebar for the special Category CategorySlug', 'twentyeleven' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

Dies in die functions.php kopieren und dort sooft kopieren wie Du Widgets brauchst. name, id und description ändern, so dass es für Dich gut verständlich ist wofür dieses Widget da ist.
Sollte in der functions.php bereits ein Widget mit der ID 8 sein, dann logischerweise bitte eine andere nehmen. IDs kann es immer nur eine geben

Widget1 oder Widget3 ist ganz nett, aber sagt Null, Nade Nix aus und spätestens nach 3 Monaten fragt man sich was das da soll.

Widgets erstellt und nun in der sidebar-categoryslug.php abrufen.

In der sidebar-categoryslug.php stehen vielleicht schon Widgets. Keine Ahnung, wenn dann löschen und durch das ersetzen.

 
<?php if ( ! dynamic_sidebar( 'sidebar-8' ) ) : ?>
 
 
<?php endif; // end sidebar widget area  ID 8 ?>

sidebar-8 => die ID (!)

Hast du für diese Sidebar mehrere solche Widgets “Flächen” erstellt, dann eben sooft wiederholen wie nötig und die IDs anpassen.

Alle Templates hochladen. Unter Dashboard=> Design=>Widgets diese befüllen und fertig biste.

Haben nun auch alle Artikel dieser Kategorie diese Sidebar

Nein.

Diese Sidebar wird aber nur in der Kategorie genommen. Sie erscheint noch nicht bei den Artikeln in dieser Kategorie.

Das aber wird ein nächster Artikel unter dem Stichwort: aus der Praxis….., weil sonst wirds wirklich zulang.

Hast Du Fragen dazu einfach fragen bitte.

Taxonomien kann es das neue WordPress 3.0 und zwar einfacher als WP 2.8 wo es diese das erste Mal gab. Eingeweihte nutzen dies schon seit geraumer Zeit, andere diskutieren gerne darüber und viele freuten sich. Doch selten fand ich noch Erklärungen was denn dies so sei und wozu es nützlich und gut ist.

Und weil der Taxonomie Guide doch lang ist biet ich hier Sprunglinks zu den einzelnen Bereichen an:

• Inhalt
• Definition
• Taxonomien von WP
• wo ordnen sich Taxonomien in WP ein
• Tipps zur Praxis
• Einsatzmöglichkeiten von Taxonomien
• Taxonomie Templates nutzen
• Taxonomie Clouds erstellen
• Ausblick auf weitere Taxonomie Guides

Um Taxonomien nicht nur technisch, sondern auch halbwegs logisch zu verwenden dachte ich sei es auch nötig, sich mal anzuschauen was denn eine Taxonomie ist:

Eine Taxonomie (altgr. táxis ,Ordnung’ und nómos ,Gesetz’) oder Klassifikationsschema ist ein einheitliches Verfahren oder Modell, um Objekte eines gewissen Bereichs (ggf. unter Zuhilfenahme eines Klassifikationsinstruments) nach bestimmten Kriterien zu klassifizieren, das heißt sie in bestimmte Kategorien oder Klassen (auch Taxa genannt) einzuordnen.[1] Taxonomie

Also auf gut deutsch: eine Möglichkeit Inhalte in einer neuen Schublade zu sortieren, in der man Unterteilungen machen kann.

Die Schubladen (Taxonomien) die WordPress bereits hat

heißen “Kategorien” und ” Tags”. Kategorien kann man noch dazu hierarchisch ordnen, Tags nicht.

Man kann einer Taxonomie jeden Namen geben den man mag. Sinnvoller weise jedoch einen, der genau beschreibt worum es bei dieser *Ordnung* geht, sonst kennst Du dich irgendwann nicht mehr aus

Am Beispielbild siehst Du die erstellten Taxonomien “video” und “Schauspieler”.

Wo gehören Taxonomien dazu

Taxonomien zuweisen

Taxonomien gehören zu den Artikeln 

Normal findet man eine erstellte Taxonomie im Admincenter als Ordnungshilfe für Artikel. Ist eine Taxonomie richtig erstellt, erscheint sie unterhalb des Menüpunktes “Artikel” im Adminbereich von WP.

Mag man einem Artikel eine Taxonomie zuweisen, so findet man dies auf der rechten Seite unter:
Admincenter==>Artikel erstellen==>rechte Seite . Und dort unter dem Namen, den man der Taxonomie gegeben hat.

Schubladen zum Sortieren sind gut

Möglichkeiten mit Taxonomien

Du schreibst in Deinem Blog über dies und das und hast eine irre Tagcloud. Gern tätst Du diese ein wenig übersichtlicher schlichten. Also eine Tag(Schlagwort)Cloud über Bereich X eine über den Bereich Y und eine über die Tags, die man auch unter Z gut darstellen könnte.

Du hast wenige Kategorien und möchtest keine Unterkategorien, aber so eine Übersicht welche Artikel wo noch dazu passen wäre fein. zb Videosammlung/Handies/Filme/Gartenblogs.

Du hast einen großen Newsbereich, da landen viele unterschiedliche Artikel drin und diese fürs Archiv aufzusplitten wäre wunderbar. Machst Du dies aber in unterschiedlichen Kategorien wäre die Programmierung für die *Featured* Artikel sehr kompliziert.

usw…

Praxisbeispiele gerne erwünscht

Taxonomien sichtbar machen mit den templates

Taxonomie templates

WordPress 3.0 erkennt automatisch templates, die taxonomie.php heißen. Man kann somit Taxonomie Archive unterschiedlich darstellen. Dies wirkt sich aber nur für die Archivansicht aus – der einzelne Artikel, der einer oder mehreren Taxonomien zugeordnet ist wird vom taxonomie.php template nicht berührt!

Beispiel:

Du hast die Taxonomie “Schauspieler” erstellt und darin gibts die “Angelina” – Du hast jede Menge Artikel über Angelina geschrieben und magst, dass die Archivansicht der Taxonomie Schauspieler-Angelina ganz speziell aussieht.

Du erstellst somit das template taxonomie-schauspieler-angelina.php und schon kannst Du da drin mit eigenen CSSKlassen besonders gestalten.

Taxonomie templates

Hast Du unter “Schauspieler ” auch den Brad und gönnst du dem keine besondere Gestaltung dann nimmt WP das taxonomie-schauspieler.php template, gibt es das nicht, dann das taxonomie.php template, hast du dies auch nicht, dann nimmt WP die archive.php.

Taxonomien als Cloud darstellen

Taxonomie Clouds

Du kennst vermutlich Tagclouds. Du kannst auch die erstellten Taxonomien als Cloud darstellen.

Hier der einfache Code, den Du in die sidebar.php oder wo auch immer Du diese Clouds darstellen magst einfügst. Nutzt Du Widgets brauchst Du ein Plugin, um diesen Code in ein Textwidget einfügen zu können:

<li>Taxonomie Cloud Schauspieler</li>
<?php 
wp_tag_cloud( array( 'taxonomy' => 'schauspieler' ) ); 
?>
<li>Taxonomie Cloud Video</li>
<?php 
wp_tag_cloud( array( 'taxonomy' => 'video' ) ); 
?>

Das gezeigte HTML muss nicht zu dem HTML in der Sidebar Deines Themes passen. Einfach abschauen wie die anderen Angaben drin stehen.

Taxonomie Guide 2ter Teil

die nächsten Artikel zum Thema Taxonomien in WP 3.0 werden sich den unterschiedlichen WP Plugins zum Thema widmen und auch wie man Taxonomien in der functions.php sich selbst schreiben kann.

Weitersagen erwünscht und Kommentare sind das täglich Brot eines Bloggers

WordPress 2.8 erleichtert die Theme Verwaltung ein wenig. Man kann sich jetzt aussuchen ob man das Theme gleich aktiviert, sich die Vorschau ansieht oder das Theme direkt aus dem Admincenter löschen.

Neue WP Themes direkt laden

Außerdem kann man unter Admincenter==>Designs==>neues Design hinzufügen sich all die Themes von wordpress.org ansehen und laden.

WordPress 2.8 bringt im default Theme einiges Neues, das ich hier kurz vorstellen mag:

body_class die neue CSS Klassen für WP Themes ab WP 2.8

 
 
<body <?php body_class(); ?>>

Erstmals gibt es in WordPress für body eine class, die sich je nach Ansicht ändert. Wer also entweder die Kaskade oder die Vererbung in CSS nutzen mag und kann ist dies sicherlich eine Erleichterung. Für alle, die nicht so gut CSS können kann dies ein Ansporn sein sich mit den Themen *Vererbung und/oder Kaskade in CSS * näher zu beschäftigen

Besonders auffällig ist, dass man die class logged-in hat, man kann also registrierten Nutzern etwas anders zeigen als nicht registrierten Nutzern.

Grenzen dieser body class

Wer jedoch für eine bestimmte Kategorie und deren Unterkategorien und deren Artikel ein eigenes Aussehen haben mag kann diese body class nicht dafür nutzen. Entweder schreibt man sich eine Funktion, die die Ausgabe der body class für bestimmte Kategorien und deren Unterkategorien etc ändert oder man macht es wie bisher mit eigenen Templates dafür. Was ich persönlich als den einfacheren Weg halte -zumindest derzeit .

body_class bietet insgesamt:

• rtl
• home
• blog
• archive
• date
• search
• paged
• attachment
• error404
• single postid-(id)
• attachmentid-(id)
• attachment-(mime-type)
• author
• author-(user_nicename)
• category
• category-(slug)
• tag
• tag-(slug)
• page-parent
• page-child parent-pageid-(id)
• page-template page-template-(template file name)
• search-results
• search-no-results
• logged-in
• paged-(page number)
• single-paged-(page number)
• page-paged-(page number)
• category-paged-(page number)
• tag-paged-(page number)
• date-paged-(page number)
• author-paged-(page number)
  vsearch-paged-(page number)

Hier nun 3 Beispiele wie sich diese body class im Quelltext zeigt:

<body class="home blog logged-in">
Startseite 
 
<body class="single postid-550 logged-in">
Einzelansicht eines Artikels
 
<body class="page page-id-538 parent-pageid-0 page-template- logged-in">
Seite ohne Unterseite mit normaler page.php

WordPress 2.8 wird barrierefreier und der W3C Validator kommt endgültig an seine Grenzen

Ganz verkürzt erklärt:

Bereits in WP 2.7 gibt es das für Menschen mit Seheinschränkungen so nötige aria-required und wurde damit ein gutes Stück *mehr* barrierefrei. Der HTML Validator des W3C ist in die Jahre gekommen, das W3C selbst fördert *aria* ist aber nicht (noch nicht) bereit dies dem Validator beizubringen. WAI Roadmap.

Nun in WP 2.8 findet man bereits die ebenfalls wichtigen *role* Angaben, die der HTML Validator natürlich auch noch bemängelt. WAI Role.

Im default Theme von WP 2.8 ist folgendes zu finden:

index.php, single.php, archive.php, category.php, page.php,search.php, tag.php image.php usw…

 
<div id="content" class="narrowcolumn" role="main">

footer.php

 
<div id="footer" role="contentinfo">

sidebar.php

 
<div id="sidebar" role="complementary">

und

 
<ul role="navigation">
  wp_list_pages......
 
  <li><h2>Archives</h2>
	<ul>
	.wp_get_archives.....
	</ul>
  </li>
       .wp_list_categories..........
</ul>

comments.php

Hier finde ich zwar im Template die Angaben für aria-required, aber sie werden nicht im Quelltext ausgegeben, – entweder habe ich technisch was übersehen oder es ist ein Bug – kann ich derzeit einfach nicht sagen:

<?php if ($req) echo "aria-required='true'"; ?>

Weitere Neuigkeiten von WP 2.8 das jetzt in der Beta1 da ist bringe ich die Tage. Ende Mai sollt es ja zum Download bereitstehen.

WordPress 2.8 Beta 1

Wer die Beta Version testen mag kann sich diese hier herunterladen. Achtung: Dies geschieht auf eigenes Risiko und ich empfehle dies nur Menschen, die wirklich wissen was sie tun .

In meinem 1. Artikel zu dieser WP Theme Serie wurde die index.php so gestaltet, dass sie die passenden Kategorien entweder Links oder Rechts anzeigt. Für das XHTML ist jetzt noch die header.php und die footer.php nötig. Im Footer sollen außerdem Widgets angezeigt werden können. Also siehst Du hier wie man etwas widgetfähig macht.

header.php anpassen

Als Grundgerüst für eine passablen header.php kann man den des default Themes nehmen.

Folgendes muß aber aus dieser header.php vorerst gelöscht werden.

Dies findest Du VOR /head:

<style type="text/css" media="screen">
 
<?php
// Checks to see whether it needs a sidebar or not
if (!empty($withcomments) && !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>
 
</style>

Nach body mußt Du dies alles löschen:

<div id="page">
<div id="header">
	<div id="headerimg">
		<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
		<div class="description"><?php bloginfo('description'); ?></div>
	</div></div><hr />

Nach body fügst Du jetzt untenstehendes ein.

Wie die CSS class gestaltet wurden, findest Du im Download der Musterdatei am Ende des Artikels hier.

 </head>
 <body><!--steht schon da nicht nochmals einfuegen-nur damit du weisst wo
 <div class="navaussen">
 <div class="navinnen clearfix">
 
 <h1>Fresh v<span class="fresh">s. Trash</span></h1>
 
 <div class="cat clearfix">
 <p>Kategorien siehe Tutorial</p>
  <p>Tags siehe Tutorial</p>
 </div><!--cat end-->
 </div>
 </div><!--navaussen end-->
 
 <div class="postaussen">
 <div class="postinnen clearfix">

Kategorien und Tags anzeigen

Der Blogtitel steht unter navaussen, navinnen und innerhalb dessen werden die Kategorien und die Tags angezeigt.

Das Blog ist jung, doch irgendwann werden es viele Tags und noch mehr Kategorien sein, daher empfiehlt es sich entweder nur einige Kategorien *händisch* zu verlinken oder dieses Tutorial zu lesen und anwenden

wp_list_categories.

Außerdem kann man die angezeigten Tags limitieren, das kann zb das WP Plugin Simple Tags ganz gut.

Brauchst Du Hilfe, weil Du eine horizontale Liste nicht gut anzeigen kannst, dann hilft dies sicher weiter:Horizontale Liste gestalten.

Footer.php das XHTML

Die index.php endet so:

</div><!--sidebar end-->
<?php get_footer(); ?>

d.h. all das was in der header.php anfing muß in der footer.php geschlossen werden.

postinnen und postaussen sind als divs noch nicht geschlossen.

</div></div><!--postinnen end postaussen end-->
 <div class="footeraussen">
 <div class="footerinnen clearfix">
 
</div></div><!--footerinnen end footeraussen end-->
</body></html>

» » Spätestens jetzt empfiehlt es sich, das XHTML zu testen: Validator. Vor Fehler ist niemand gefeit und besser ist besser

Im 1. Artikel war mir noch nicht klar, was da alles in den Footer reinsollte. Via PN im forum.wordpress-deutschland.org erfuhr ich, dass Widgets ganz gut wären. Obwohl noch unbekannt.

Spalten im Footer

Man kann da 3 Spalten machen oder nur 2 oder auch 4 – Wobei dies dann schon sehr eng wird

Die Methode ist immer dieselbe, bei den Breitenangaben muß man sich spielen. Da geringe CSS und XHTML Kenntnisse da sind und ich flexible Designs bevorzuge, stelle ich hier eine Methode mit 3 Spalten vor:

<div class="box03">
</div>
<div class="box02">
</div>
<div class="box01">
</div>

Ich lasse die box03 und box02 nach Rechts fließen (float right), daher müssen die beiden vor box01 stehen, diese fließt nach Links (float left). Zur Demonstration bekamen die 3 einen sehr bunten Rahmen .

CSS der 3 Spalten in der footer.php

.box03{width:32.1%;float:right;border:1px solid green;}
.box02{width:32.1%;float:right;margin-right:1.4%; border:1px solid blue;}
.box01{width:32.1%;float:left;border:1px solid red;}

Achtung:niemals die Spalten ganz eng aneinander kleben, das bricht relativ rasch das Design und padding – also der Innenabstand ist verboten. Das ist einfach die Kurzfassung des Box-Models.

Jede Spalte für sich widgetfähig machen

Dazu brauchst Du zuerst die functions.php. Als Beispiel wieder die des default Themes.

In dieser kannst Du alles löschen. Danach fügst Du ganz oben

<?php ein und ganz unten  ?>

Achtung: keine Leerzeichen vor der 1. Spitzenklammer und nach der letzten! Das ergibt Fehler.

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

Das da macht ein WP Theme prinzipiell widgetfähig. Damit kann man angeben wie man das html rund um die Widgetausgabe haben mag.

Wir brauchen da jetzt 3 davon, das sieht dann so aus:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
'name' => 'Footerbox03',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
 
 
if ( function_exists('register_sidebar') )
    register_sidebar(array(
'name' => 'Footerbox02',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
 
 
if ( function_exists('register_sidebar') )
    register_sidebar(array(
'name' => 'Footerbox01',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

Diese Datei speichern und in den Theme Ordner geben.

Nun die footer.php öffnen:

Dort sollte das ganze dann so aussehen:

</div></div><!--postinnen end postaussen end-->
 <div class="footeraussen">
 <div class="footerinnen clearfix">
 
<div class="box03">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footerbox03') ) : ?>
 
<?php endif; ?>
</div>
<div class="box02">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footerbox02') ) : ?>
 
<?php endif; ?>
</div>
<div class="box01">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footerbox01') ) : ?>
 
<?php endif; ?>
</div>
 
</div></div><!--footerinnen end footeraussen end-->
</body></html>

Wieso dem so ist habe ich in dem Artikel zur Theme Vorlage erklärt: WP Theme blank.

Geht das auch ohne Widgets?

Im Admincenter==>Theme/Design==>Widgets kannst Du jetzt pro Spalte andere Widgets einfügen udn nutzen. Du kannst auch eine Spalte ohne Widgets nutzen dann mußt Du hier dazwischen das einfügen was Du anzeigen magst:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footerbox01') ) : ?>
<p>Das was du haben magst ohne Widget</p>
<?php endif; ?>

Download der Musterdateien

==> Diese Musterdateien sind akut nicht aktuell, wie ich es zeitlich schaffe kommen sie wieder!

Rückmeldung

Ich freu mich über jede Art der Rückmeldung. War es hilfreich, über einen Social Bookmark oder einen Link, viel Freud .

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

Joram schrieb mir eine Email. Er kann ein wenig CSS und ein bisschen HTML. Aber wenn er dann PHP irgendwo sieht traut er sich kaum dieses Wissen zu nutzen. Er würde aber gerne sein eigenes WordPress Theme gestalten und holte sich daher mein WordPress Theme blank.

Joram kommt aus Holland und kann englisch und daher ist dieses Tutorial soweit als nötig in Englisch aber mit ganz vielen Code Beispielen.

The story behind this tutorial: I’ve got an email from Joram:

I know a bit about html and css, but to use this in combination with php is a bit of a blur with me. Could you please tell me how to implement the css I’m about to write? Because writing the css is one thing, but putting the class/id tags in the html is another. I’m not sure how to write the css if I don’t know where to enter their div-tags

How To – Design Your Own WordPress Theme – Let’s start

Preambel: This post is full with code examples and so it is very long.
And I know: “All roads leed to Rome”. Here is only one of them.

And you know:==>I would like to read your comment or the sky will fall on your head…. .

• You need WordPress.
• My blank WordPress Theme.
• Time and coffee (or tea if you are ill ).
• A bit knowledge about css and html.
• An editor. Wordpad is good enough.
• Information about ‘editing files’ and ‘change chmod permission’, you’ll find the links in this comment.Thanks to Lorelle

I need the structure of a design: Layout Gala==>Layout Gala Design n.30.

Two percentage columns and one larger, with header and footer.

Remember “Murpheys Law” and save your theme files.

Layout Gala Design n.30.==>Sourcecode ==> CSS

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:70%}
div#navigation{float:right;width:29.9%}
div#extra{clear:both;width:100%}
</style>

Copy all between “style” and the end of this tag and paste it in the [Admincenter==>Presentation==>Theme Editor==>] style.css =>after this click:update files.

Layout Gala Design n.30.==>Sourcecode ==> HTML

We need the HTML to the CSS above. To get the overview I’m using “html comments”.

<body>
       <div id="container">
          <div id="header"><h1>Header</h1><a href="http://www.texto.de/">download this layout</a>
            </div><!--end of id header-->
 
      <div id="wrapper">
          <div id="content">
               <p><strong>1) Content here.</strong> column long long column very long ...l very.
                   </p>
              <p>very make make fill silly long long ..
                  </p>
                 and so on....
             </div><!-- end of id content-->
        </div><!--end of id wrapper-->
 
       <div id="navigation">
            <p><strong>2) Navigation here.</strong> l
            </p>
       </div><!--end of id navigation-->
 
    <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--end of id extra-->
 
     <div id="footer">
            <p>The footer. You can go to the ...
              </p>
       </div><!--end of id footer-->
</div><!--end of id container-->
 
</body>

Now you and I know that “div id container” is the box around. This “id container” starts after body tag and ends before it.

How To – Join CSS and HTML in PHP Files

If you know a bit about html you know that “body tag” starts after the end of the html tag. 99,9999% this you will find in header.php and in footer.php. Div id header and div id footer the same.

[Administration Panels==>Presentation==>Theme Editor==>] header.php

<body>
<div id="container">
  <div id="header">
                     <!--the blog title-->
               <h1>
		<a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>
 
                  <!--blog description-->
                  <?php bloginfo('description'); ?>
               </h1>
       </div><!--end of id header-->
<!--header.php end-->

[Administration Panels==>Presentation==>Theme Editor==>] footer.php

<!--footer.php-->
<div id="footer">
	<p>
		<?php bloginfo('name'); ?> is proudly powered by 
		<a href="http://wordpress.org/">WordPress</a>
		<br /><a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
		and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	        <!--necessary-->
		<?php wp_footer(); ?>
          </p>
      </div><!--end of id footer-->
</div><!--end of id container--></body>
</html>

My wordpress theme blank is full of html comments to explain all the wordpress template tags and to explain header.php ends, start of single.php and so on. You’ll see in the code above that the html tags are between this comments. And this is necessary!

View your site and you see the first result. Ok it doesn’t look very well, but you get the overview.

The next div id wrapper and div id content.

[Administration Panels==>Presentation==>Theme Editor==>] index.php

<?php get_header(); ?>
 
	<!--index.php-->
<div id="wrapper">
          <div id="content">
        <!--the loop-->
	<?php if (have_posts()) : ?>
and so on ........
 
 
                    Not Found
		Sorry, but you are looking for something that isn't here.
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
        <!--do not delete-->
	<?php endif; ?>
 
               </div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
<!--include footer-->
<?php get_footer(); ?>

View your site. Trial and error are good taskmaster.

The next “div id navigation”. The box at the right side.

[Administration Panels==>Presentation==>Theme Editor==>] sidebar.php

<!--sidebar.php-->
<div id="navigation">
		<!--searchfield-->
....
.....
<?php } ?>
</div><!--end of id navigation-->		
 
<!--sidebar.php end-->

Don’t view your site now.It looks very strange. Header, the footer is at the left, content is grey and you got a headache.

Why? Have a look at the CSS. Div id extra clear both (wrapper, content and navigation) and we have no div id extra, because there is no “extra.php” or another template in this theme to create an “extra stuff”.

You have to create a new template and tell wordpress to use this.

And that’s why I’m using Layout Gala Design n.30 as an example.

1. Open your editor. Save the empty file as extra.php. Upload it in your theme folder.
wp-content/themes/yourtheme/.
2. [Administration Panels==>Presentation==>Theme Editor==>] extra.php

<!--extra.php-->
 <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column 
               </p>
         </div><!--end of id extra-->
<!--end of extra.php-->

The html above tell us, we need this extra.php between sidebar.php and footer.php.

[Administration Panels==>Presentation==>Theme Editor==>] index.php

 
</div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
 
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
 
<!--include footer-->
<?php get_footer(); ?>

With this

<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

you can tell wordpress every new template you need. /extra.php or /whateveryouneed.php or /sample.php and so on.

View your site and I’m sure it looks much better.

The template hierachie of wordpress

WordPress theme blank have page.php, single.php, search.php two archives.php. You can delete all this files and you are ready with your new design. To understand, please read Codex and have a look at my new sheet about the template hierarchie. I can’t explain it better. (Not in english )

If you click on an article, static page or an archive/category you will see a very creative website. Because div id wrapper and div id content and the new template extra.php are missing.

[Administration Panels==>Presentation==>Theme Editor==>]archive.php

<?php get_header(); ?>
<div id="wrapper">
          <div id="content">
	<!--the loop-->
 
		<?php if (have_posts()) : ?>
 
......
....
<!--do not delete-->
	<?php endif; ?>
 
	       </div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--archive.php end-->
 
<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

[Administration Panels==>Presentation==>Theme Editor==>]single.php

<!--single.php-->
	<div id="wrapper">
            <div id="content">
<!--loop-->			
  <?php if (have_posts()) :
......
......
Sorry, no posts matched your criteria.
 
<!--do not delete-->
<?php endif; ?>
 
	</div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--single.php end-->
 
 
<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

I’m shure you understand==> search.php, the second archives.php, page.php.

Ok and the stuff in single.php and the other files?

This is “one post”.

 <!--the loop-->
	<?php if (have_posts()) : ?>
		<!--the loop-->
		<?php while (have_posts()) : the_post(); ?>
 
			<!--post title as a link-->
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		     <!--post time-->	
                     <?php the_time('F jS, Y') ?>
 
                      <!--post author-->
                      <?php the_author() ?>
 
				<!--post text with the read more link-->
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				<!--show categories, edit link ,comments-->
 
				Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
 
 
	        <!--end of one post-->
		<?php endwhile; ?>

Safe your files and figure it out. Remember:Trial and error are good taskmaster.

… Have fun, and don’t be afraid to contact me if you have questions.

and .. if you would like to relaxe after all this “css, html, php ” – solve Sudoku online

und noch was …

Vom 14.03.07 bis zum 25.August 2011 wurde dieser Artikel 161 879 mal gelesen, dann habe ich den sichtbaren PostReadCounter aus Performancegründen abgeschaltet.

Meine Lösung hat 3 Schritte:

1. 1. Die vorhanden archive.php sichern.
2. 2. Die archive.php öffnen und dann untenstehenden Code einfügen.
   Wie immer:ich weiß nicht, ob copy and paste funktioniert!
3. 3. Admincenter==>Beitrag schreiben==>richtige Kategorie anhaken==>Zeitstempel ändern!
   Von mir aus auf den 1.August 1877 – speichern. Fertig!.

Zeitstempel auf ein sehr frühes Datum ändern ist absolut wichtig, sonst kann dies nicht funktionieren!

Die archive.php ist gesichert, mit einem Editor geöffnet und nun gehts los:

Beispiel anhand der archive.php aus dem default Theme.

 
<?php get_header(); ?>
 
	<div id="content" class="narrowcolumn">
 
	<!--stickypost beginn-->
 
<?php $my_query = new WP_Query($query_string."&showposts=1&order=ASC");
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
 
 
    <div class="stickypost">
           <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
     <?php the_content(); ?>
     </div><!--stickypost end-->
<?php endwhile; ?>
 
 
 
	<!--stickypost end-->
 
		<?php if (have_posts()) : ?>
 
		 <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

Was bedeutet dies alles:

Vor dem Loop nutze ich die Möglichkeit des query_strings. Ich befehle WordPress mit

$query_string."&showposts=1&order=ASC"

Hole aus der Kategorie ein einziges Post und zwar in aufsteigender Reihenfolge.

Darum ist auch das Zeitstempel ändern beim Beitrag schreiben so wichtig. WP holt das älteste Post aus dieser Kategorie hervor.

Dann bestimme ich noch, dass dieses Post ein sogenanntes Duplicate Post ist, weil niemand mag, dass dieser Beitrag in der normalen Kategorie noch einmal angezeigt wird.

Weil dies niemand mag, gehts noch ein bisschen weiter in der archive.php. Irgendwann taucht dort auf:

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

Dort brauchen wir jetzt unser Duplicate Post, damit es ja nicht angezeigt wird, das geht so:

 
<?php while (have_posts()) : the_post(); if( $post->ID == $do_not_duplicate ) continue;
 
  update_post_caches($posts); ?>

Aber die Katgorienüberschrift..

Beim default Theme wäre jetzt die Kategorienüberschrift unterhalb dieses sticky Posts.

Dies erachte ich als weniger sinnvoll, daher habe ich sie einfach nach oben geholt und dort wo sie sonst steht gelöscht.

Hier die gesamte archiv.php des default Themes nach diesen Änderungen, die ich gekennzeichnet habe, damit sie leichter gefunden werden:

<!--stickypost beginn-->
und dann wenn die &#196;nderung aus ist

<!--stickypost end-->

<?php get_header(); ?>
 
	<div id="content" class="narrowcolumn">
 
	<!--stickypost beginn-->
 
<?php $my_query = new WP_Query($query_string."&showposts=1&order=ASC");
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
 
<h2><?php _e('Category'); ?>: <?php single_cat_title(); ?></h2>
 
    <div class="stickypost">
           <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
     <?php the_content(); ?>
     </div><!--stickypost end-->
<?php endwhile; ?>
 
 
 
	<!--stickypost end-->
 
		<?php if (have_posts()) : ?>
 
		 <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<!--stickypost beginn da war mal die Katueberschrift-->
 
<!--stickypost end-->
 
 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
		<h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2>
 
	 <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
		<h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2>
 
		<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
		<h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2>
 
	  <?php /* If this is a search */ } elseif (is_search()) { ?>
		<h2 class="pagetitle">Search Results</h2>
 
	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>
		<h2 class="pagetitle">Author Archive</h2>
 
		<?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
		<h2 class="pagetitle">Blog Archives</h2>
 
		<?php } ?>
 
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
		</div>
 
         <!--stickypost beginn-->
		<?php while (have_posts()) : the_post(); 
                 if( $post->ID == $do_not_duplicate ) continue;
                 update_post_caches($posts); ?>
         <!--stickypost end-->
 
		<div class="post">
				<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
				<small><?php the_time('l, F jS, Y') ?></small>
 
				<div class="entry">
					<?php the_content() ?>
				</div>
 
				<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p> 
 
			</div>
 
		<?php endwhile; ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
		</div>
 
	<?php else : ?>
 
		<h2 class="center">Not Found</h2>
		<?php include (TEMPLATEPATH . '/searchform.php'); ?>
 
	<?php endif; ?>
 
	</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

Ich habe es getestet und es funktionierte.

Den Zeitstempeln jeweils zu ändern, dacht ich mir ist die geringste Arbeit, wenn man sich dafür ‘ewigste’ Eingriffe in die Templates erspart, weil man weiß ja nie wieviele Kategorien man erstellt.

… sowas zu machen, dann auf den Refresh Button des Browsers zu klicken – funktionierts oder nicht?!? – das hat was

Wie schaffst Du es , dass die aktiven Kategorien einer bestimmten Klasse zugeordnet werden.

Nun ich bin manchmal faul und nutze daher ein Plugin catHighlight von Venushka Pereraund.
In der style.css definierte ich die CSS class cathighlight.

Fertig!

Endlich das optimale Design für die eigene Homepage, ( das Blog) , aber wenn der Text nicht so lang ist, dann wandert die Sidebar über den Content und sieht nicht so gut aus.

Das Bild zeigt die derzeitige Website von stranger und da ich Stranger versprach zu erklären wie dies änderbar ist, nehme ich diese Website als Beispiel.

In der style.css des Blogs fand ich die Struktur der Website.

body{
   background-image: url(/blackbird/blackbird2.gif);
   font-family: garamond, serif;
   font-size: 11.5pt;
}
 
#head{
   background-image: url(/blackbird/blackbird1.gif);
   position: absolute;
   left: 0px;
   top: 0px;
   width: 800px;
   height: 350px;
   background-position: top left;
   border-right: 2px groove #999999;
}
 
#main{
   background-color: #ffffff;
   position: absolute;
   left: 0px;
   top: 350px;
   width: 800px;
   border-right: 2px groove #999999;
}

Da sowohl der #header wie #main auf 800px fixiert ist funktioniert folgende Background Lösung:

Das Hintergrundbild bei #body ändern

Der Website Background zeigt sich am ganzen Bildschirm so:
Weiß – der schmale dunkle Rand – die kleinen Kästchen.

Die weiße Fläche ist bis zum Rand ganz genau 800px, die kleinen Kästchen können in ihrer Breite varieren.

Das derzeitige Bild, das bei #body (blackbird2.gif) eingebunden wurde zeigt derzeit nur die kleinen Kästchen.

Methode 1:

Dieses Bild (blackbird2.gif)müßte so geändert werden:
1024x (Höhe der kleinen Kästchen)

Von Links nach Rechts:788px weiß dann 2px in der Farbe des jetzigen rechten Randes, die restliche Fläche aufgefüllt mit den kleinen Kästchen.

Methode 2:

Oder einen Screenshot der jetzigen Website machen und aus dieser einen Streifen herausschneiden – dies funktioniert nur, wenn man sehr genau arbeitet, aber es funktioniert.

Wenn dieser lange Streifen dann wieder unter blackbird2.gif abgespeichert wird, muss die CSS Angabe bei #body nur mehr so geändert werden:

body{
   background-image: url(/blackbird/blackbird2.gif)repeat-y;
   font-family: garamond, serif;
   font-size: 11.5pt;
}

Dieses repeat-y gibt an, dass das Bild nur Vertikal wiederholt werden darf.
Fertig!

Bei der Schriftgröße fand ich die Angabe:

..code..font-size: 11.5pt;.. /code..

1. Eine fixierte Schriftgröße sperrt viele Leser aus – alle, die Brillen tragen als Beispiel.
2. pt ist eine Größenangabe aus der Druckerei, aber nicht für Websites geeignet.
   Prozentangaben oder die Angabe:1em, 0.9em ist sinnvoll, hilfreich und einfach richtiger.

… viel Spaß beim Website Background Tüfteln

aber das mit den WordPress templates und sonstigen Sachen

Selber ein WordPress Theme zu gestalten bedeutet etwas von (X)HTML und CSS zu verstehen und dann vielleicht, wenn man mag, sich in die fertigen PHP Template Tags einzulesen und copy&paste zu beherrschen .
Ich beginne mit dem Aufbau eines WP-Themes.

1. Ein WordPress Theme besteht aus einer style.css und mehreren PHP Dateien, die templates genannt werden. Die Bilder für das Design sind meist im Ordner *images*.
   Dieser Ordner, die templates und die style.css sind in einem Ordner, der den Namen des Themes hat.
2. In diesen templates sind die XHTML Angaben, die mit der style.css gestaltet werden können.
3. WordPress ist so programmiert, dass die templates einer Hierarchie unterliegen – das kompakteste WP Theme besteht aus einer index.php und einer style.css.

Wieso hat ein WordPress Theme viele templates, wenn eines reicht?

Wegen der übersicht!
Jede HTML Datei besteht aus einem head und body und da PHP mehr Möglichkeiten bietet ist es wesentlich übersichtlicher für einzelne Abschnitte auch eigene templates zu machen. Sowohl für die CSS Gestaltung wie auch dann für die template tags also den PHP Teil.

Template Hierarchie

Du hast eine Kategorie mit der ID (Identifikationsnummer) 26 und magst genau diese eine Kategorie anders darstellen als alle anderen Kategorien, so erstelle die “category-26.php” und WP kapiert, dass es für die Kategorie nur dieses template nutzen darf.

Es gibt für die Suche im default theme zwei templates: search.php und searchform.php. In der search.php steht drin wie es Aussehen soll, wenn das Ergebnis einer Suche sichtbar wird und die search.php beinhaltet nur die HTML Angaben für das Suchfeld.

Theoretisch benötigst Du beide templates nicht, denn die HTML Angaben für das Suchfeld kannst Du ja auch direkt in die index.php hinein schreiben.

Die archive.php ruft WP auf, wenn man auf eine Kategorie klickt, aber gibt es diese nicht, nimmt WP einfach die index.php dafür her.

In der header.php steht meist all das drin, was man sonst auch in den Header einer HTML Datei hineinschreibt. Im default theme findet man dort auch alle Angaben, die die Hintergrundbilder und das Header Bild betreffen.

Die Kommentare mit all den Angaben – Pings ja -Trackback nein -Kommentare geschlossen oder offen etc. sind in der comments.php, mag man aber Pop Ups dann ist dies die comments-popup.php.

Footer.php dort finden meist die html tags ihren “Abschluss”.

Also die Namen der WordPress templates eines Themes geben Auskunft über den Inhalt, sidebar.php als klassisches Beispiel.

statische Seiten

Für diese nutzt das default theme die page.php. Du kannst aber auch eigene page.php templates machen. sitemap.php, gaestebuch.php, impressum.php als Beispiele.
Du .musst diesen nur einen “Namen” geben:

 <?php
/*
Template Name: Sitemap
*/
?>

Diese sitemap.php im Ordner des Themes laden.
Admincenter==>Schreiben==>Seite schreiben==>Seiteneinstellungen==>Template der Seite: und dort dann auswählen.