Du hast Dein Theme liebgewonnen oder Du überlegst Dir ein neues Theme zu nutzen. Mit dem WP Plugin Theme Check kannst Du ganz leicht überprüfen, ob es auch den WordPress Standards entspricht.

Was prüft Theme Check

Es prüft die Theme Guidelines, die es auf wordpress.org/extend/themes seit geraumer Zeit gibt==> Theme Review.

Download: Theme Check.
Aktivieren und via Admin nutzen.

Gäb es diese Qualität auch bei den WP Plugins blieb uns oft Kopfzerbrechen erspart

Be My Guest ist ein WordPress Magazine Theme mit eine Unmenge an Einstellungsmöglichkeiten.

Werbung kann an vielen Plätzen geschaltet und leicht in der OptionsPage eingetragen werden.

Dein Counter Code ist ebenfalls dort daheim.

Außerdem kannst Du angeben ob Du: das Datum, den Autor, die postmeta oder die Autoreninfo anzeigen lassen magst.

Kategorien und Anzahl der Artikel auf der Startseite sidn ebenfalls wählbar.

Mehr Information zu Be My Guest gibts im Release Artikel: Be My Guest WP Magazin Theme

Live Preview und Download von Be My Guest dem WordPress Magazin.

WordPress.org/extend/themes hat über Nacht die Regeln für das Hosten und Promoten von WordPress geändert.

Somit sind dort an die 200 WordPress Themes weniger zu sehen. Der Grund:

All themes are subject to review. Themes for sites that support “premium” (non-GPL or compatible) themes will not be approved.Requirements

Dies bedeutet:selbst wenn das WP Theme der GPL entspricht, es nur einen Link zum Theme Autor gibt, aber dieser auch WordPress Themes auf dieser Domain verkauft oder WordPress Themes mit einer zusätzlichen Lizenz als GPL anbietet, werden dort nicht mehr freigeschaltet.

Auttomatic, die Firma dahinter kann dies tun, es ist ihre Domain. Sie sind Hausherr. Regeln über Nacht zu ändern-ohne die Betroffenen vorher zu informieren, hinterläßt einen schalen Geschmack.

Ebenfalls sind die Tags,mit denen man die WordPress Themes näher beschreiben ab nun limitiert.

WordPress.org/extend hostet darüber hinaus sowieso nur reine Blog Themes, es müssen alle Template Tags benutzt werden, die auch im default Theme vorhanden sind. Man kann also diesbezüglich keine wirklichen Business Designs online stellen.

Wie auch immer, 200 WordPress Themes sind jede Menge. Darunter welche, die einen Tag davor noch hervorgehoben wurden.

Justin bietet eine interessante Diskussion. Einerseits promotet WP Revolution mit eigenem Banner auf WordPress.org/extend/themes, andererseits löscht es andere Designs, die nichts anders machen.

Ein Schelm wer Böses dabei denkt…

WordPress Theme Vorlage – > WordPress 2.8

Ein Ausschnitt aus der auskommentierten index.php.

Oft taucht die Frage auf, wie man denn WordPress seiner eigenen Seite anpassen kann. Ob es denn kein Tutorial dafür gäbe.
Ängste machen sich breit, weil man zwar CSS und HTML kann, aber nicht PHP.

WordPress Theme Vorlage

Dieses WordPress Theme hat absolut kein Design. Jede der Dateien ist von mir mit vielen Kommentaren versehen, damit Du weißt was Du da gestaltest.

Ich empfehle Dir aktiviere dieses Theme ohne Design und sieh Dir an, was dann alles passiert.
So bekommst Du eine Ahnung und Wissen was dies alles bedeutet.

Das WordPress Theme Vorlage beinhaltet folgende Templates:

1. index.php==>Startseite.
2. single.php==>zeigt den ganzen Artikel.
3. comments.php==>Liefert die Kommentare und das Formular dafür.
4. search.php==>zeigt Suchergebnisse an.
5. searchform.php==>gestaltet die Suche.==> gibt es ab WP 2.7 nicht mehr kannst Du Dir aber selbst einfach machen.
6. archive.php==>zeigt Archive und Kategorienübersicht an.
7. archives.php==>eigene statische Seite zb für eine Usersitemap.
8. images.php==>zeigt Anhänge an und Bilder etc.
9. 404.php==>eigene Error 404.
10. page.php==>für statische Seiten.
11. links.php==>Muster für eine eigene statische Seite.
12. sidebar.php==>die Navigation.
13. header.php==>der notwendige html Header.
14. footer.php==>der notwendige html footer und für einen eigenen Footer.
15. functions.php==>ist vorbereite für viele Sidebars.

Nur dort wo ich es als nötig erachtet habe steht bereits HTML dabei. Da WordPress einiges bereits mit li tags erzeugt findest Du in der sidebar.php eben die ungeordnete Liste oder bei den Kommentaren, weil dies sonst total unübersichtlich wird. Ebenso bei den Artikeltiteln, weil sonst die nötige Information verloren gegangen wäre.

• WordPress Theme Vorlage downloaden als zip Datei downloaden:
  WordPress Theme Vorlage für >WP 2.8.
• Entpacken.
• Nach wp-content/themes/ hochladen==>wp-content/themes/default_deleer.
• Dem Ordner die nötigen Schreibrechte geben.
• Admincenter==>Themes==>WordPress Theme Vorlage aktivieren.
• Ansehen was wie wo erscheint.
• Admincenter==>Themes==>Theme-Editor==>Beginne Dein Werk.;)

neu seit Juni 2007 bis WP > 2.8

In der style.css sind einige Grundangaben gemacht, damit man l nicht was vergisst zum Gestalten.

Functions.php und wie macht man sein Theme Widget fähig:

functions.php ist im Download enthalten!

So kan man Widget einbinden.

In der sidebar.php steht drin:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>

dann ganz unten

<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Das in Klammerngesetzte “Right Sidebar” gibt an, dass alles was man in die Right Sidebar setzt jetzt in der sidebar.php landet.

Beispiel Du magst ein Theme mit zwei Sidebars machen eine Links und eine Rechts.

In die linke Sidebar kommt dann:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Navigation') ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

In die Rechte:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Drei extra Spalten unterhalb des Contens und die sollen auch für Widget Nutzung hergerichtet werden:

Für die ganz die rechte Spalte

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Footer) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Für die mittlere der beiden:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Middle Footer) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Für die ganz die Linke:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Footer) ) : else : ?>
dazwischen alles mögliche falls keine widgets genutzt werden
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

Der Himmel fällt Dir auf denKopf,wenn…

• Du mir hier keinen Kommentar hinterläßt.
• Du mir keinen Link Deines Werkes zeigst.

Artikelhistorie

Erstfassung am 09.05.06
Deutsche Fassungam 16. Juni 2007 erneuert.
Englische und Deutsche Fassung erneuert 04.01.08.
Englische und Deutsche Fassung an WP 2.7 angepasst: 1.11.08
Englische und Deutsche Fassung an WP > 2.8 angepasst: 29.11.09
Und wenn es hilfreich war, freue ich mich über einen Link auf texto.de. Danke!

Blank WordPress Theme – WP > 2.8 ready

You would like to have your own WordPress Theme. You know something about CSS and HTML. You don’t know PHP and template tags are not your friends.

Blank WordPress Theme

Templates without design. HTML only if it is absolut necessary for you. But full of comments to explain the functions.

1. index.php==>Mainpage.
2. single.php==>full article.
3. comments.php==>comments and the necessary fields..==>new at WP 2.7!
4. search.php==>searchresults.
5. searchform.php==>searchfield.==>there is no template but a new template tag at WP 2.7
6. archive.php==>archives and categories.
7. images.php==>for attachments >WP 2.5
8. 404.php==>your own error 404.
9. page.php==>static pages.
10. links.php==>individual static page.
11. sidebar.php==>sidebar navigation.
12. header.php==>html header.
13. footer.php==>html footer.
14. functions.php
    

• Dowonload
  Blank WordPress Theme for WP >= 2.8
• Unzip it.
• Upload to wp-content/themes/
• Admincenter==>Themes==>activate the theme.
• Admincenter==>Theme==>Themeeditor==>Here you are able to do as you likes.

New since Juni 2007 and new since 29.11.09

style.css full with necessary class and id or tags.

Functions.php ==>How to use Widget

sidebar.php :

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>

at the end:

<!--widget function end-->
			<?php endif; ?>

Example two Sidebars one right one left

left sidebar:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Navigation') ) : else : ?>
your stuff if no widget
<!--widget function end-->
			<?php endif; ?>

right sidebar:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar) ) : else : ?>
your stuff if no widget
<!--widget function end-->
			<?php endif; ?>

Three Columns under content or in the footer:

right column:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Footer) ) : else : ?>
your stuff if no widget
 
 
<!--widget function end-->
			<?php endif; ?>

middle column

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Middle Footer) ) : else : ?>
your stuff if no widget
<!--dieses endif beendet die widget funktion-->
			<?php endif; ?>

left column:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Footer) ) : else : ?>
your stuff if no widget
<!--widget function end-->
			<?php endif; ?>

Articlehistorie

First: am 09.05.06
english new since 16. Juni 2007
typos and ready for WP >2.3 04/01/08
ready for WP 2.7: 11/01/08
ready for WP >2.8 since 11/29/09
Please leave a reply or spent me a social bookmark …. or

the sky will fall on your head.

und noch was …

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

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

WP Themes zu erstellen ist ja nicht nur eine Notwendigkeit. Oft stellt es sich als Sucht heraus. Hat man einmal den Dreh heraußen welches Template was anzeigt, sind der Gestaltungswut ja keine Grenzen mehr gesetzt.

Doch damit so ein WP Theme auch gut nutzbar ist, sollte man sich beim Erstellen einige Fragen stellen.

1. Frage: Sind alle Templates auch da

Du hast ein Template erstellt, dass Du irgendwo einbinden magst. Auf der ganz sicheren Seite bist Du, wenn Du nachfragst, ob das Template auch im Theme Ordner liegt.

Hier als Beispiel das Template mit dem Namen sidebar-about.php

 <?php if ( file_exists(TEMPLATEPATH . "/sidebar-about.php") ) include (TEMPLATEPATH . '/sidebar-about.php'); ?>

Dies bedeutet: PHP wenn die Datei (file) existiert und zwar im Themeordner (Templatepath) dann includier diese Datei , sonst nicht.

2. Frage: Sind alle Funktionen da

Du bindest gleich mehrere Funktionen unterschiedlichster WP Plugins ein. Dies alles erleichtert das Benutzen des WP Themes ungemein. Doch hat der Benutzer die Plugins nicht aktiviert hagelt es oftmals viele Fehler, weil nicht nachgefragt wurde, ob es die Funktion überhaupt gibt.

Sehr viele Plugin Autoren stellen diesen Code gleich mit der Abfrage zur Verfügung. Ist dem nicht so, dann geht dies so.

Sagen wir Du findest beim Pluginautor nur folgende Angabe:

<?php last_posts(); ?>

Du möchtest aber gerne eine Überschrift dazu geben und diese letzten Artikel (last posts) werden zwischen li und /li ausgegeben.

Oft steht dann im Template einfach

<h3>zuletzt gelesene Artikel</h3
<ul><?php last_posts(); ?></ul>

Dies erzeugt Fehler, wenn der Nutzer das Plugin nicht aktiviert hat.

Folgende Einbindung in das Template fragt zuerst, ob die Funktion vorhanden ist, dann sollte PHP die Überschrift wiedergeben, die nötigen ul , die Funktion und das abschließene de /ul.

    <?php if (function_exists('last_posts')) {
echo'<h3>zuletzt gelesene Artikel</h3><ul>';
echo last_posts();
echo '</ul>';}?>

Einfach ausprobieren, es ist nicht schwer.

Frage 3: Stimmt das HTML

Egal, ob Du Profi oder Anfänger bist, valider Code ist sinnvoll. Viele Darstellungsfehler sind auf invalides HTML zurückzuführen und bei CC Problemen kann man auch erst helfen, wenn das HTML stimmt.

Mit diesem Validator kann man das HTML überprüfen. Findet der Fehler kann man bei “Show Source” anhaken und dann auf “revalidate” klicken, so sieht man dann die Zeilen im Quellcode gut und kann den Fehler bereinigen.

Oft sind es Folgefehler, daher nicht gleich kapitulieren, wenn viele Fehler auftauchen.

Frage 4: Stimmt das CSS

Auch im Cascading Style Sheet in der style.css können sich Tippfehler einschleichen. Diese findet man bei diesem CSS Validator.

Die URL zur style.css findet man am leichtesten im Quellcode. Beim Browser oben auf Ansicht ==>Quelltext anzeigen. Oder man nutzt eine der vielen Browsererweiterungen, die es zB für den Firefox gibt.

Neues auch hier auf Texto.de

z.B.: Die Möglichkeit der Umfragen.

Hast Du Lust, dann antworte:

[poll id="2"]

Edit :14 Stunden nach der Veröffentlichung fand ich dies -also bin ich nicht die einzige mit der Idee gewesen-schön sowas. Auch da sind einige Beispiele zu finden, wie man sichere Themes erstellt.

Ich fand dieses Plugin bei Scribu.

• WP Plugin Custom Field Images herunterladen.
• Entpacken.
• In den Ordner wp-plugins laden und im Admincenter==>Plugins==>aktivieren.

Custom Field Images Schreibpanel

Unter Admincenter==>Einstellungen==>Custom Field Images kann man sich aussuchen wo dieses Bild erscheinen soll.

Display in:==> Wo soll das Bild erscheinen:

post content ==> Im Artikel
post feed ==> Im RSS Feed des Artikels
post excerpt ==> im optionalen Auszug des Artikels.

Custom Field Image im optionalen Auszug anzeigen

WordPress gibt den optionalen Auszug mit folgendem Template tag wieder:

<?php the_excerpt();?>

Mag man jetzt dieses Bild vor dem Titel des Artikels oder darunter oder darüber anzeigen, dann muss man die index.php und die single.php zumindest öffnen und dort nach folgendem suchen:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Statt h2 kann auch ein anderer HTML Tag stehen, magst Du das Bild vorher anzeigen, dann musst Du jetzt vor dem folgendes eintragen:

<?php the_excerpt();?>
 
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Damit Du dies mittels CSS in der style.css gestalten kannst ist es hilfreich ein div mit einer bestimmten class um den optionalen Auszug zu geben.

Hier ein Beispiel:

<div class="customimg">
<?php the_excerpt();?>
</div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Jetzt kannst Du in der style.css mit

.customimg{}

Dein Bild zum Artikel gestalten.

Bei Fragen zum WP Plugin Custom Field Images bitte anden Autor Scribu wenden.

Viel Spaß

edit am 13.1.2008 neues Beispiel und ein Quick & dirty Plugin eingefügt

Template Tag wp list categories

Die Kategorien werden mit dem template tag wp list categories angezeigt. Was kann dieser Template Tag, was kann er nicht, wo muss man aufpassen und wie kann man ihn für sich sinnvoll nutzen.

 
<?php wp_list_categories('arguments'); ?>

Man hat bei diesem Template Tag folgende Möglichkeiten. Neben den // steht die Erklärung dabei.

 
$defaults = array(
'show_option_all' => '',   // zeigt nicht alle Kategorien an
 
'orderby' => 'name',   // zeigt die Kategorien geordnet nach Namen 
 
'order' => 'ASC',   // ..in aufsteigender Reihenfolge an
 
'show_last_update' => 0, //zeigt nicht das Datum der letzten Akutalisierung
 
'style' => 'list', //  Ausgabe erfolgt als ungeordnete Liste
 
'show_count' => 0, //zeigt nicht wieviele Beiträge in einer Kategorie sind
 
'hide_empty' => 1, //zeigt leere Kategorien nicht an 
 
'use_desc_for_title' => 1,  //zeigt die optionale Kategorienbeschreibung  als title Attribut an.
 
'child_of' => 0, //  Ausgabe ist nicht an eine beschränkt auf das Vorhandensein einer bestimmten Unterkategorie
 
'feed' => '',  //zeigt keine Kategoriefeeds Links an
 
'feed_image' => '', //zeigt keine Bild zum Feed Link an
 
'exclude' => '',  //keine Kategorie ist ausgeschlossen
 
'include'=>'', //keine Kategorie ist speziell includiert -- schwierig zu erklären irgendwie ;)
 
'hierarchical' => true, // Unterkategorien werden genau unterhalb der Oberkategorie angezeigt
 
'title_li' => __('Categories'), //überschrift ist Kategorie
 
'echo' => 1 // erzeugt die Ausgabe
);

Besonderheiten des Template Tags wp list categories

Nutzt Du bei wp list categories include werden eventuell vorhandene Unterkategorien nicht automatisch angezeigt.

Nutzt Du bei wp list categories exclude werden eventuell vorhandene Unterkategorien ebenfalls ausgeschlossen.

Nutzt Du bei wp list categories hide empty = 1 werden Unterkategorien nur dann angezeigt, wenn die Oberkategorie nicht leer ist.

Beispiele mit wp list categories

Alle Kategorien- ausser die Leeren, Anzahl der Beiträge, eigene überschrift,

 
<ul>
<?php
wp_list_categories('show_count=1&title_li=<h2>' . __('WordPress Theme') . '</h2>' ); ?> 
</ul>

Alle Kategorien, auch die leeren, geordnet nach ID der Kategorien, keine automatische überschrift.

 
 
<ul><li><h2>individuelle überschrift</h2>
  <ul><?php
wp_list_categories('hide_empty=0&orderby=id&title_li=' ); ?> 
   </ul></li></ul>

Kategorien mit der ID 3,5,7,9 ausgeschlossen, geordnet nach Name absteigend, Anzahl der Beiträge, eigene überschrift.

 
 
<ul><li><h2>individuelle überschrift</h2>
  <ul><?php
wp_list_categories('exclude=3,5,7,9&orderby=name&order=DESC&show_count=1&title_li=' ); ?> 
   </ul></li></ul>

Die IDs müssen immer von der kleinsten zur größten geordnet sein, sonst funktioniert dies nicht. Getrennt werden die IDs mit Koma, die letzte bekommt keines mehr .

Wie erwähnt auch die Unterkategorien werden damit ausgeschlossen.

Nur die Kategorien mit der ID 5,7,8 anzeigen. Die optionale Kategorienbeschreibung NICHT als title Attribut nutzen.

 
<ul>
<?php
wp_list_categories('include=5,7,8&use_desc_for_title=0' ); ?> 
</ul>

Die Kategorien ohne überschrift und ohne Listenelemente anzeigen

<?php wp_list_categories('title_li=&style=none'); ?>

Da dann WordPress die Links mit einem <br / > anzeigt, kann man in die functions.php des verwendeten Themes folgendes Quick und Dirty Plugin tippen:

add_filter('wp_list_categories', 'mts_br');
 
function mts_br ($output) {
  $output=preg_replace(':<a href(.*)>(.*)</a><br />:','<a href$1> $2 </a>',$output);
  return $output;
}

Artikelhistorie

Erstveröffentlichung:4. Jänner 2008 @ 21:19
Geändert am 13. Jänner 2008 gegen 16.46

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.