WordPress 3.0 Custom Background

Hier wurden Einstellmöglichkeiten um einige Optionen erweitert.

WordPress 3.0 Header Image

Das neue Theme TwentyTen bringt jetzt 8 Header Bilder mit, die über einen Dialog ausgewählt werden können.

WordPress 3.0 Menüs

Hier wird im Moment viel gebaut, so das es schwer zu sagen ist, wie es letztlich aussehen wird.

• WordPress 2.7 Backend Farben
• Probleme erkennen
• WordPress 2.9 Image editing
• Kommentar Pagination und Reply Tiefe in WordPress 2.7
• Kommentar Pagination ausblenden

Also nach meiner Rechnung zusätzliche 146 Queries durch die Post Thumbnails plus ein paar durch die Seite selber. Mich hat aber der Schlag getroffen: 372 Queries !!! Ich habe Frank Bültges Plugin Debug Queries aktiviert mir die Queries einmal ausgeben lassen.

Query: SELECT * FROM wp_posts WHERE ID = 15 LIMIT 1
Call from: require, require_once, include, the_post_thumbnail, get_the_post_thumbnail, wp_get_attachment_image, wp_get_attachment_image_src, image_downsize, wp_attachment_is_image, get_post
 
Query: SELECT `post_parent` FROM wp_posts WHERE ID = 12 LIMIT 1
Call from: require, require_once, include, the_post_thumbnail, get_the_post_thumbnail, wp_get_attachment_image, wp_get_attachment_image_src, image_downsize, wp_attachment_is_image, get_post, _get_post_ancestors
 
Query: SELECT `post_parent` FROM wp_posts WHERE ID = 221 LIMIT 1
Call from: require, require_once, include, the_post_thumbnail, get_the_post_thumbnail, wp_get_attachment_image, wp_get_attachment_image_src, image_downsize, wp_attachment_is_image, get_post, _get_post_ancestors
 
Query: SELECT `post_parent` FROM wp_posts WHERE ID = 8 LIMIT 1
Call from: require, require_once, include, the_post_thumbnail, get_the_post_thumbnail, wp_get_attachment_image, wp_get_attachment_image_src, image_downsize, wp_attachment_is_image, get_post, _get_post_ancestors
 
Query: SELECT post_id, meta_key, meta_value FROM wp_postmeta WHERE post_id IN (15)
Call from: require, require_once, include, the_post_thumbnail, get_the_post_thumbnail, wp_get_attachment_image, wp_get_attachment_image_src, image_downsize, wp_attachment_is_image, get_attached_file, get_post_meta, get_metadata, update_meta_cache

Warum WordPress in jedem Durchlauf die post_parents abklappert, ist mir schleierhaft.

Ich werde wohl oder übel eine Funktion schreiben müssen, denn so geht es nicht. Selbst die “normalen” 150 Queries sind zuviel.

• Nochmal the_post_thumbnail()
• The ultimative Guide for the_post_thumbnail in WordPress 2.9
• the_post_image ist jetzt the_post_thumbnail
• WordPress 2.8 body_class, automatic_feed_links
• Basti in America – das Apartment

add_custom_background();

Danach steht im Backend unter Design der Punkt Custom Background zur Verfügung.

Nach dem Hochladen hat man die Möglichkeit, die Kachelung einzuschalten oder auch das Backgroundimage wieder zu entfernen.

Hier das Resultat mit dem neuen Theme Twenty Ten.

• WordPress 3.0 neue Screenshots
• Bist du ein WordPress Junkie?
• Wordpress Custom Fields nutzen
• WordPress Custom Fields in Action
• WordPress Pages nach meta_value sortieren

Als Tab-Script kommt das jQuery Accessible Tabs von Dirk Ginader zum Einsatz, welches wirklich zugängliche Tabs erzeugt und Bestandteil des YAML Frameworks ist. Damit es funktioniert, braucht es einen Container, auf dem es angewendet wird, pro Tab eine Überschrift und den Contentbereich für das jeweilige Tab.

Die Grafik zeigt das Markup, wie es in WordPress erstellt wird. Der rote Rand ist das Div, welches die Post umschließt. Da Javascript für die Google Map und das Tabscript benötigt wird, liegt es auf der Hand, gleich das gesamte Markup mit jQuery umzubauen. Die Struktur, die erreicht werden soll, sieht so aus:

Zuerst bekommt die Post die Klasse ‘tabs’, dann wrappen wir die Post mit 2 Divs und fügen die Überschrift der Seite zwischen diesen Divs ein, damit sie am Beginn des Dokuments steht. Die Post bekommt eine Überschrift ‘Info’ eingeimpft. Anschließend bekommt das Div ‘wpmaps’, in welchem die Google Map erscheint, ein Div mit der ID ‘mymap’ und der Klasse ‘tabs’ herum und die Überschrift Karte. Dieses Div ‘#mymap’ wird dann aus der Post herausgenommen und hinter der Post wieder eingefügt. Zum Schluß wird das Tabscript aufgerufen. Damit das alles nur passiert, wenn eine Map da ist, wird das am Anfang abgefragt. Hier das Script:

<script type="text/javascript">
//<![CDATA[
document.documentElement.className += " js";
jQuery(document).ready( function($){
    var map = $('.wpmaps');
    if (map.length){
      $('.post').addClass('tabs').wrap('<div class="postcontent"><div class="tabber"><\/div><\/div>');
      $('h2').prependTo('.postcontent');
      $('<h6>Info<\/h6>').appendTo('.post');
      $('.wpmaps').wrap('<div id="mymap" class="tabs"><\/div>');
      $('<h6>Karte<\/h6>').prependTo('#mymap');
      $('#mymap').insertAfter('.post');
      $(".tabber").accessibleTabs({tabhead:'h6',tabbody:'.tabs'});
    }
});
//]]>
</script>

Das alleine wäre ja keinen Beitrag wert, ein bisschen DOM Manipulation kann ja jeder. Folgendes Problem trat auf: das Tabscript setzt erstmal alle Container mit der Klasse ‘tabs’ auf display: none und den ersten auf display: block. Damit kann das Google Javascript, welches die Map erzeugt und alles absolut positioniert, nichts mit dem Container wpmaps anfangen und richtet sich am nächst höheren sichtbaren Container ‘tabber’ aus. Der beinhaltet aber die Tabnavigation und damit stimmt die Zentrierung des Objekts in der Karte nicht mehr.

Also konnte ich im Tabscript mit .hide() und .show() nicht arbeiten. Das YAML Framework, welches zum Einsatz kommt, bietet im Core die Klassen hideme und print an, welche den Inhalt aus dem sichtbaren Bereich schieben.

/* YAML core/base.css */
/* (en) classes for invisible elements in the base layout */
/* (de) Klassen für unsichtbare Elemente im Basislayout */
.skip, .hideme, .print {
    position:absolute;
    top:-32768px;
    left:-32768px; /* LTR */
}

Dabei hat mir die Klasse print am besten gefallen:

@media print
{
...
/* (en) make .print class visible */
/* (de) .print-Klasse sichtbar schalten */
  .print {
    position:static;
    left:0;
}

Also kopierte ich mir das Tabscript in einen anderen Ordner und ersetzte im Tabscript hide() durch addClass(‘print’) und show() durch removeClass(‘print’) und zusätzlich die Zeile

$(el).find(o.options.tabbody).eq(i)[o.options.fx](o.options.fxspeed);
/* durch */
$(el).find(o.options.tabbody).eq(i).removeClass('print');

Dadurch gehen die konfigurierbaren Animationen nicht mehr, was mich nicht weiter stört. Der positive Effekt dank der Klasse print, die Tabs sind jetzt druckbar!

• WP Landingsites und Google Reader
• WordPress 2.3.1 und Google Pagerank Update
• jQuery Script für die Galerie
• Zwischenstop Pluginkarneval
• Firefox Tabs

Gegenüber dem in die Jahre gekommenen Default Theme wirkt es modern. Schöne Details, eine bessere Typografie, mir gefällt es.Zu den augenblicklichen Fetures:

Der Doctype ist jetzt HTML5. Die Sidebar besitzt 2 Widget Areas und eine Sidebar ist über dem Footer angeordnet. Diese beinhaltet 4 Widget Zonen. Ich habe mal nur 3 befüllt, ratet mal, was da rauskommt? 3x 25% und eine leere   . Ok, wie gesagt, es ist ein erster Schnappschuss.

Das Header Bild ist austauschbar und über Konstanten in der functions.php konfigurierbar. Was mich etwas befremdet, ist, wenn man in der Beitragseinzelansicht ist und die Post ein Post-Thumbnail hat, wird das Post-Thumbnail im Header eingeblendet. Nich so mein Ding. Zumal es von den Abmessungen sowieso nie passt.

Der Code sieht auch noch etwas grausam aus. In der index.php werden in einer Schleife 2 hardcoded Kategorien abgefragt. Ich glaube nicht, dass das so bleibt. Mir sieht der Code überhaupt nicht nach dem Entwickler Team aus.

Insgesamt ein gelungener Wurf, dem man im Augenblick noch keine Vorwürfe machen sollte, da sich noch Einiges bis zum Erscheinen ändern wird.

• Neues WordPress Theme
• Neues Theme YAML Green
• YAML Coffee Theme neue Version
• WordPress und register_sidebar
• Theme Uninstaller

So ist es jetzt möglich, eine author-michael.php oder author-123.php anzufertigen, die dann bei dem Autor mit dem Spitznamen (user_nicename) michael bzw. mit der ID 123 über die WordPress Template Hierarchie aufgerufen wird.

• Ein ♥ für Blogs
• WordPress MU sprachabhängige Templates einbinden
• Antispam Idee für WordPress
• Ext JS News 02
• WordPress Plugin Antispam Bee – kein Stress mehr mit Spam

Mike fragte mich, ob es nicht möglich wäre, Unterseiten erst nach einem Klick auf die “Vaterseite” anzuzeigen. Das hätte natürlich den Vorteil, das die Seitenliste in der Sidebar nicht so lang ist und nur diejenigen Unterseiten angezeigt werden, die gerade von Interesse sind.

Nachdem ich erstmal selber versucht habe, das Problem zu lösen, merkte ich schnell, das da mit ein paar Zeilen Code nichts zu machen ist. Alex wies mich auf das Plugin Flexi Pages Widget hin, welches ihm schon gute Dienste erwiesen hat. Ich habe das Plugin installiert und es bietet tatsächlich eine Menge Einstellmöglichkeiten, seine Seitennavigation zu beeinflussen. Wie der Name schon sagt, man findet es unter den Widgets. Das Schöne ist jedoch, man muß es nicht als Widget nutzen, sondern man kann auch den Template_Tag flexipages mit zahlreichen Parametern direkt benutzen. Eine Auflistung aller Parameter nebst Erklärung findet man hier.

In meinem Fall sieht das so aus:

<?php $child_of = wpe_highest_ancestor(); ?>
 
    <ul class="sidebar">
      <li><h3><?php echo esc_attr(get_the_title($child_of)); ?></h3>
<?php flexipages('child_of=' . $child_of . '&show_subpages=2&sort_column=menu_order&sort_order=asc'); ?>
      </li>
    </ul>

Fazit: Sehr empfehlenswert!

• WordPress Kommentar Widget
• WP Engineer Quit Smoking Widget
• Wordpress 2.2.1 erschienen
• Ein ♥ für Blogs
• WordPress Sticky Posts – Teil 3

Nachdem man im ersten Schritt seine Einstellungen getätigt hat, erält man im 2. Schritt die Inhalte für die wp-config.php und die .htaccess. Zusätzlich muß man noch inm Verzeichnis wp-content ein Unterverzeichnis blogs.dir erstellen, in dem später die Medien-Dateien für die einzelnen Blogs abgelegt werden.

Da sich WordPress 3.0 noch in der Entwicklung befindet, kann sich natürlich bis zum endgültigen Release eine Menge ändern.

• Kommentar Pagination und Reply Tiefe in WordPress 2.7
• Xtreme Contentslider
• WordPress und PHP 5.3
• WordPress 2.9 add_theme_support und has_post_image
• Eine Lösung für die WordPress Galerie

Hier also meine eingesetzte Lösung: Antispam Bee von meinem Freund Sergej Müller.

Ich war damals Betatester von Antispambee und seit dem läuft es auf allen meinen Blogs. Seit dieser Zeit hat es sich zu einem ausgewaschsenen Plugin entwickelt. Genaue Zahlen kann ich nicht liefern. Bei wpengineer.com haben wir in einem Jahr ca. 22000 Spamkommentare eingefangen, den Großteil hat Antispam Bee geblockt. Nach einer Phase, wo ich die Spamkommentare nur markiert hatte, habe ich seit geraumer Zeit (auch wegen extrem häufigen russischen Spam) den Spam auf sofort löschen gestellt.

Die Installation von Antispambee ist denkbar einfach. Hochladen, aktivieren und ein paar Einstellungen vornehmen. Das wars. Änderungen am Theme sind nicht durchzuführen. Die einzig sichtbare Änderung ist das Austauschen der Textarea im Kommentarformular, welches automatisch passiert. Wen die Arbeitsweise von Antispam Bee interessiert, der sollte sich Sergej’s Code anschauen

Die Vorteile von Antispam Bee

• keinerlei Änderungen am Theme
• keine zusätzlichen Barrieren für den Kommentator wie Captcha oder Rechenaufgabe
• kein Javascript erforderlich
• einfache Installation
• extrem hohe Trefferquote
• es werden keine Daten an Dritte übermittelt
• macht Akismet quasi überflüssig

Nachteile von Antispam Bee

Antispam Bee hilft natürlich nicht gegen manuellen Spam von Forenbesitzern und Gardinenstangen-Theos. Kann es auch garnicht.

Eine Sache sollte man ebenfalls kritisch betrachten. Wenn man Akismet abschaltet, weil man es nicht mehr braucht, werden die Daten der Spammer nicht mehr in die Akismet Datenbank eingetragen (und die unzähligen richtigen Kommentare auch nicht).

Was könnte verbessert werden? Sergej, häng dich via Filter in das Akismet Plugin und übermittle nur die Spamkommentare

Weitere Artikel zu diesem Thema (bitte melden, wenn einer fehlt)

• Frank Bültge: WP – JS AntiSpam Plugin
• Toscho: Spam verhindern mit Akismet und .htaccess
• Ocean90: Biene versus Spam oder mit Antispam Bee dem Spam entkommen
• Dieter Welzel: Spamschutz auf Webseiten-Infos.de

• WordPress Plugin Antispam Bee – kein Stress mehr mit Spam
• Antispam Idee für WordPress
• Die WordPress Galerielösung ist nun im Trac
• Eine Lösung für die WordPress Galerie
• WordPress richtig schreiben

In diesem Beitrag möchte ich ein Beispiel zeigen, in dem sich die Hauptseiten in einer horizontalen Navigation befinden. Die jeweiligen Unterseiten werden beim Klick auf die Hauptseite in der Sidebar angezeigt.

Zum besseren Verständnis nehmen wir folgende Seiten-Struktur:

• Home
• Software
  • Bildbearbeitung
    • Adobe Photoshop
    • Gimp
  • Content Managment Systeme
    • WordPress
    • Drupal
    • Joomla
• Hardware
• About us

Die Seiten Home, Software, Hardware und About us befinden sich in der horizonatlen Navigation. Wenn der Nutzer beispielsweise auf Software klickt, sollen in der Sidebar alle Unterseiten von Software angezeigt werden.

WorPress stellt für solche Aufgaben den Template Tag wp_list_pages() mit zahlreichen Parametern zur Verfügung. Da wir aber nicht alle Seiten angezeigt haben wollen, ist für uns der Parameter child_of interessant. Der Parameter child_of gefolgt von einer ID listet alle Unterseiten eben dieser Seite, wenn welche vorhanden sind.

<?php wp_list_pages('child_of='.get_the_ID().'&title_li=<h5>'.__('Pages').'</h5>'); ?>

Jetzt kommen wir zum eigentlichen Problem. Klickt man jetzt auf Content Managment Systeme in der Sidebar, erscheinen nur noch die Seiten WordPress, Drupal und Joomla. Die Übergeordneten Seiten sind weg. Logisch, es werden ja nur die Kinder der aktuellen Seite angezeigt und die ist Content Managment Systeme. Für unser Problem brauchen wir aber immer die oberste Seite. Auch da hilft WordPress weiter. Es gibt eine Funktion get_post_ancestors, die alle übergeordneten Seiten in einem Array zurückliefert. Probiert mal folgendes aus:

<?php
$my_page = get_the_ID();
$anchestors = get_post_ancestors($my_page);
var_dump($anchestors);
 
// Klick auf Software
array(0) { }
 
// Klick auf Content Managnet Systeme
array(1) { [0]=>  string(2) "63" }
// 63 ist die ID von Software
 
// Klick auf WordPress
array(2) { [0]=>  string(2) "65" [1]=>  string(2) "63" }
// 65 ist die ID von WordPress
?>

Das würde immer so weitergehen, je tiefer die Hierarchie verschachtelt ist. Wichtig für uns sind 2 Sachen: die oberste Seite steht immer am Ende des Arrays und es kann ein leeres Array zurück kommen. Also gehen wir einfach an das Ende des Arrays und für den Fall, das es keine übergeordnete Seite gibt, geben wir alle Unterseiten dieser Seite aus. Dazu schreiben wir eine Funktion in unserer functions.php, da sie dort einfacher zu pflegen ist und auch in mehreren Sidebars verwendet werden kann:

function wpe_highest_ancestor(){
    global $post;
    $page_ancestors = end($post->ancestors);
    if(!empty($page_ancestors)){
        $child_of = $page_ancestors;
    }else{
        $child_of = $post->ID;
    }
    return $child_of;
}

Jetzt wird diese Funktion in der Sidebar benutzt:

<ul class="sidebar">
  <?php wp_list_pages('child_of=' . wpe_highest_ancestor()); ?>
</ul>

Möchte man den Namen der obersten Seite mit in der Sidebar haben, kann man folgenden Code verwenden:

<ul class="sidebar">
  <?php
  $child_of = wpe_highest_ancestor();
  wp_list_pages('child_of='.$child_of.'&title_li=<h5>'.esc_attr(get_the_title($child_of)).'</h5>');
  ?>
</ul>

Wie man sieht, ist es relativ einfach, mit WordPress entsprechende Lösungen zu erzielen.

• Flexi Pages Widget für WordPress
• Xtreme – nun mit 6 Layouts
• YAML Coffee Theme neue Version
• Ein ♥ für Blogs
• Teil 4 des WordPress Theme Tutorials