15 Dos und Don’ts effektiver WordPress-Themes

Heute möchte ich einige der Dinge besprechen, die man bei der Erstellung von WordPress-Themes tun und nicht tun sollte. Unabhängig davon, ob Sie ein WordPress-Theme für sich selbst erstellen oder ob Sie eines zur Veröffentlichung erstellen, damit andere es nutzen können, sollten Sie diese Do's und Don'ts so genau wie möglich befolgen.

1. Hardcoden Sie keine vollständigen URLs in Ihre Themes

Wenn Sie Ihre Themes erstellen, kann es vorkommen, dass Bilder für Social-Media-Icons oder RSS-Feed-Icons verwendet werden. Zu diesen Zeitpunkten in Ihrer Programmierung möchten Sie vielleicht die vollständige URL ausgeben (z. B. /wp-content/themes/your-theme-name/images/image.jpg), aber dies führt zu Fehlern auf der Website, wenn die Person, die Ihr Theme verwendet, ihren Theme-Ordnernamen ändert.

Die richtigen Codes, um die vollständigen URLs dynamisch abzurufen, finden Sie unten.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Nutzen Sie die Template-Tags so weit wie möglich

WordPress leistet hervorragende Arbeit bei der Auflistung aller verfügbaren Template-Tags. Tun Sie sich selbst (sowie den Rest der Leute, die Ihre Themes verwenden könnten) einen Gefallen und lernen Sie die WordPress-Template-Tags – nutzen Sie sie dann so weit wie möglich. Durch die Verwendung von Template-Tags stellen Sie sicher, dass Ihre Themes nicht fehlschlagen oder Fehler verursachen, wenn der Endbenutzer sie einrichtet und zum Laufen bringt.

3. Vergessen Sie nicht die Dropdown-Codes für die Navigation

Wenn Sie Ihr WordPress-Theme erstellen, ist ein Punkt, der oft übersehen wird, die Dropdown-Codes für Ihre Navigation. Sicher, einige Themes haben vielleicht die Navigation so eingerichtet, dass sie keine mehrstufigen ULs verwenden und alles in einer einzigen Zeile halten, aber was ist mit denen von uns, die mehrere Unterseiten für jede Haupt-Oberseite haben?

Dafür gibt es eine Lösung. Sie können sich einige der unten aufgeführten Tutorials ansehen, wie Sie mehrstufige Dropdown-Menüs codieren.

• So implementieren Sie eine perfekte mehrstufige Navigationsleiste
• Mehrstufige Dropdown-Navigationsmenüs: Beispiele und Tutorials
• Mehrstufige Menüs mit jQuery und CSS

4. Machen Sie Ihr Theme Widget-fähig

Meiner Meinung nach gibt es als Endbenutzer nichts Schlimmeres, als ein Theme bereitzustellen und mit der Einrichtung zu beginnen, nur um festzustellen, dass ich nun vor der Aufgabe stehe, Teile meines Themes anzupassen, indem ich Informationen fest codiere. Ihre Seitenleisten und verschiedene andere Bereiche in Ihrem Theme (haben Sie eine Drei-Spalten-Fußzeile? Machen Sie sie widget-fähig!) sollten so einfach wie möglich zu bearbeiten sein. Es ist eines der einfachsten Dinge, die Sie mit Ihren Themes tun können, und es wird den Benutzern Ihres Themes sehr zugutekommen.

Automattic hat ein großartiges Tutorial, wie Sie Ihr Theme widget-fähig machen. Schauen Sie es sich hier an.

Schauen Sie sich auch das Tutorial Widgetizing Themes hier bei Theme Lab an.

5. Lassen Sie Benutzer nicht von zahlreichen Plugins abhängig sein, damit Ihr Theme funktioniert

Wenn Sie kostenlose Themes veröffentlichen oder kommerzielle WordPress-Themes erstellen, sollten Sie die Interessen Ihrer Endbenutzer berücksichtigen, wenn Sie Ihre Themes erstellen. Das Überladen Ihrer Themes mit 5-10 benötigten Plugins wird nicht nur dazu führen, dass die Leute frustriert sind, wenn sie Ihr Theme herunterladen und auf ihrer Website einrichten, sondern es wird auch dazu führen, dass viele Leute es gar nicht erst herunterladen, denn seien wir ehrlich, die Aufmerksamkeitsspanne der Leute beträgt nicht mehr als 2-3 Sekunden.

Wenn Sie beispielsweise die Paginierung in Ihrem Theme einrichten möchten, warum nutzen Sie nicht diesen Artikel, um zu lernen, wie Sie sie automatisch in Ihrem Theme einrichten. Cats Who Code hat ein ziemlich gutes Tutorial dazu, wie Sie die Paginierung in Ihr Theme einfügen, ohne ein Plugin aktivieren zu müssen.

6. Zeigen Sie den Suchbegriff auf der Suchergebnisseite an

Aus irgendeinem Grund ist dies ein oft übersehener Tipp, den Sie in Ihre Themes implementieren können (und sollten). Es ist ein einfacher Einzeiler, der es Ihrem Theme ermöglicht, den Besucher daran zu erinnern, wonach er gerade gesucht hat. Es mag trivial erscheinen, ist aber hilfreich, denn wenn die Ergebnisse null Beiträge zurückgeben, weiß der Besucher, nach welcher genauen Phrase er gesucht hat, und kann dann einen anderen Suchbegriff eingeben.

Unten sehen Sie den Code, der verwendet wird, um Ihren aktuellen "Suchergebnisse"-Titel in Ihrem Theme zu ersetzen.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Machen Sie keine halben Sachen bei Ihren 404-Fehlerseiten

Anstatt Ihre 404-Seite nur mit "404 – Seite nicht gefunden" anzuzeigen, warum geben Sie Ihren Besuchern nicht mehr Optionen? Das Hinzufügen einer Kategorie-Liste, neuer Beiträge, beliebter Beiträge, einer Suchleiste und (wenn Sie Ihre 404-Seite monetarisieren möchten) einer Anzeige kann Ihrer 404-Seite etwas Würze verleihen im Vergleich zu den langweiligen, nutzlosen, die in den meisten WordPress-Themes zu finden sind.

Wenn Sie Inspiration für 404-Seiten suchen, hat Smashing Magazine eine tolle Sammlung von 404-Seiten aus dem Web, die einen Blick wert ist.

8. Stellen Sie sicher, dass Sie alle grundlegenden Dateien in Ihrem Theme-Ordner haben

Wenn Sie ein WordPress-Theme erstellen, ist es unerlässlich, dass Sie es von Anfang an so weit wie möglich anpassen können. Mit einer Kombination aus index.php, header.php, sidebar.php und footer.php zu beginnen, mag für Minimalisten eine gute Idee sein, aber ich empfehle, mit allen unten aufgeführten Grundlagen zu beginnen, um Ihnen etwas mehr Kontrolle darüber zu geben, was – wann, wo und wie – angezeigt wird.

• style.css
• header.php
• index.php
• sidebar.php
• footer.php
• single.php
• page.php
• comments.php
• 404.php
• functions.php
• archive.php
• searchform.php
• search.php

Weitere Informationen zu diesen Vorlagendateien und ihrer Funktion finden Sie auf der Seite Template-Hierarchie auf WordPress.org.

9. Vergessen Sie nicht die RSS-Integration

Wenn Sie Ihren Blog erstellen, ist eines der Elemente, das die meiste Aufmerksamkeit auf sich zieht, die Möglichkeit, Ihren Blog über einen RSS-Reader zu abonnieren. Anstatt Ihre Theme-Benutzer zu zwingen, diese Informationen selbst hinzuzufügen, warum nicht die Schritte unternehmen, um eine RSS-Abonnementbox hinzuzufügen, genau wie Sie es mit der Suchbox tun. Fügen Sie einen RSS-Button, eine Option zum Abonnieren per E-Mail hinzu und Sie können sogar die Abonnentenzahl in Textform anzeigen, indem Sie diesen Codeausschnitt zu Ihrem Theme hinzufügen, wo immer Sie ihn anzeigen möchten (ersetzen Sie „feedburner-id“ durch Ihre eigene FeedBurner-ID – wenn Sie dieses Theme veröffentlichen, schauen Sie sich #11 auf unserer Liste an und stellen Sie sicher, dass Sie dies als Option haben).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. CSS-Stile für verschachtelte Kommentare hinzufügen

Wenn Sie ein Theme erstellen, sollten Sie immer auf verschachtelte Kommentare vorbereitet sein. Es ist eine Funktion in WordPress, die viele Blogs nutzen, um Interaktion in ihrem Kommentarbereich aufzubauen. Daher ist es eine gute Idee, Ihr Stylesheet für verschachtelte Kommentare vorzubereiten. Chris hat einen großartigen Beitrag über CSS-Codes für die Standard-CSS-Klassen, die WordPress in seinem Kommentarbereich ausgibt, und gibt Ihrem Theme einen stilisierten Kommentarbereich, ohne die comments.php-Datei berühren zu müssen.

11. Ein Theme nicht ohne ein Optionsfeld veröffentlichen

Manche Leute sind vielleicht nicht damit einverstanden, aber ich glaube, es ist Teil der natürlichen Entwicklung des WordPress-Themings. Wenn Ihr Theme keine Art von WordPress-Optionsfeld mit der Möglichkeit ausführt, Elemente in Ihrem Theme zu bearbeiten, anzupassen und zu ändern, ohne Codes bearbeiten zu müssen, machen Sie etwas falsch.

Wenn Sie nicht sicher sind, wie Sie Ihr eigenes Theme-Optionsfeld erstellen können, zeigen Ihnen die folgenden Links, wie es geht.

• Benutzerdefinierte Optionsfelder mit WordPress 2.9 erstellen
• Wie man ein besseres WordPress-Optionsfeld erstellt

12. Stellen Sie sicher, dass Ihre Themes sofort einsatzbereit sind

Dies hängt eng mit Punkt #5 auf unserer Liste zusammen – Sie sollten immer sicherstellen, dass Ihre Themes sofort einsatzbereit sind. Einige Themes, die ich gesehen habe, erfordern 5-6 Schritte, bevor das Theme auf der Website funktionsfähig ist, einschließlich, aber nicht beschränkt auf Plugin-Aktivierung und Bearbeitung/Speicherung des Theme-Optionsfelds. Wenn das Theme bestimmte Dinge erfordert, stellen Sie sicher, dass ein Standard-Backup-Element verwendet wird.

Stellen Sie zum Beispiel in Ihrem Theme-Optionsfeld, das Sie erstellen und/oder verwenden, sicher, dass in jedem Abschnitt Standardinformationen vorhanden sind, damit Dinge angezeigt werden, unabhängig davon, ob der Endbenutzer sie aktualisiert hat oder nicht. Das Gleiche gilt für Plugins. Wenn Sie ein WordPress-Paginierungs-Plugin in Ihrem Theme verwenden, warum nicht so programmieren, dass das Theme auf die vorherigen/nächsten Links zurückgreift, wenn das Plugin nicht aktiv ist.

13. Verwenden Sie keine übermäßigen benutzerdefinierten Felder

Ja, die meisten Magazin-WordPress-Themes von vor ein paar Jahren wurden mit benutzerdefinierten Feldern auf Schritt und Tritt erstellt, aber die meisten Leute werden nicht wirklich 3, 4 oder 5 benutzerdefinierte Felder für jeden Beitrag ausfüllen wollen. Machen Sie es ihnen also leichter. Wenn Sie ein Bild aus dem Beitrag auf der Startseite Ihres Themes anzeigen möchten, nehmen Sie diesen praktischen Code und fügen Sie ihn in die functions.php-Datei Ihres Themes ein, und er wird automatisch das erste Bild des Beitrags anzeigen, ohne dass ein benutzerdefiniertes Feld erforderlich ist.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Sobald Sie diesen Code hinzugefügt haben, fügen Sie einfach <?php echo catch_that_image(); ?> in die Dateien Ihres Themes ein, wo immer das Bild angezeigt werden soll.

Dank der guten alten WordPress-Supportforen für diesen praktischen Tipp.

14. Machen Sie SEO für Ihr <title>-Tag

Eine großartige Möglichkeit, um sicherzustellen, dass Ihr Theme so SEO-freundlich wie möglich ist, besteht darin, das standardmäßige <title>-Tag in der header.php-Datei Ihres Themes zu entfernen und es durch die unten stehenden Codes zu ersetzen. Es verleiht den Titeln Ihres Themes etwas mehr Saft und unterstützt die SEO-Bemühungen, die Ihre Theme-Benutzer in die Praxis umsetzen möchten – und das alles, ohne dass sie etwas anfassen müssen.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Vergessen Sie nicht die Breadcrumbs

Als zusätzliche Navigation in Ihren Themes sollten Breadcrumbs (meiner Meinung nach) so viel wie möglich genutzt werden. Es ist nicht nur gut für SEO-Zwecke, sondern ermöglicht dem Besucher auch, viel schneller durch Ihre Website zu navigieren. Es gibt WordPress-Plugins für Breadcrumbs, aber dank Cats Who Code wissen wir jetzt, wie man eine Breadcrumb-Funktion in unsere WordPress-Themes einbaut.

Fügen Sie zuerst die unten stehenden Codes in die functions.php-Datei Ihres Themes ein (leicht angepasst vom ursprünglichen Cats Who Code-Post, oben verlinkt).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
	
	echo '</ul>';
}

Platzieren Sie als Nächstes dieses Code-Snippet überall dort, wo Ihre Breadcrumbs angezeigt werden sollen.

<?php the_breadcrumb(); ?>

Vielen Dank für das Lesen des Artikels

Vielen Dank, dass Sie sich die Zeit genommen haben, den Artikel zu lesen. Ich hoffe, er hat Ihnen gefallen und Sie haben unterwegs ein oder zwei Dinge gelernt – ich weiß, dass ich das getan habe. Wenn Ihnen der Beitrag gefallen hat oder Sie etwas hinzuzufügen haben, lassen Sie es uns in den Kommentaren wissen.