CSS3 Dropdown-Menü ohne Javascript

In jedem Premium-WordPress-Theme ist ein Dropdown-Menu eingebaut.
Der Grund ist einfach: Ganz gleich, wie viele Unterseiten der User ineinanderschachtelt, das Menü sieht immer gut aus. Denn die Unterseiten erscheinen ja erst, wenn man auf einen Menüpunkt klickt.

Meistens sind diese Menüs mit Javascript animiert. Falls etwas nicht funktioniert oder wenn man etwas an der Optik verändern will, ist Suchen angesagt.

Vor einiger Zeit bin ich bei designmodo.com auf eine schöne Lösung gestoßen, bei der der Dropdown-Effekt mit reinem CSS erzeugt wird. Kein Javascript. Nur ein paar Zeilen CSS.

Weiterlesen CSS3 Dropdown-Menü ohne Javascript

Stylesheet mit enqueue_style einbinden

Laut WordPress-Codex ist es best practice, nicht nur Scripts, sondern auch Stylesheets über die Funktion wp_enqueue_style einzubinden. Das Stylesheet wird also nicht mehr klassisch per Link in den head-Bereich des HTML-Dokuments geschrieben, sondern über einen Hook in der functions.php geladen.

Ich habe mich gefragt: Wozu ist das gut? Was ist der Vorteil von enqueue_style, an welcher Stelle hat die Link-Methode Nachteile?
An der klassischen Link-Methode ist zunächst mal nichts verkehrt. Kommt das Theme mit einem einzelnen Stylesheet aus, spricht nichts dagegen, den Links zur Datei style.css direkt in die header.php einzutragen.
UPDATE: Das hat sich inzwischen geändert. Laut Codex soll ein Stylesheet nicht länger über einen Link in den head eingebaut werden, sondern über enqueue_script.

Weiterlesen Stylesheet mit enqueue_style einbinden

Was ist eigentlich Modernizr?

Für Responsive Design-Projekte setzen wir ein paar Hilfsmittel ein, um das Responsive Design über alle Browser hinweg zugänglich zu machen. Eines davon ist Modernizr.
Modernizr ist eine JavaScript-Bibliothek, mit deren Hilfe man HTML5/CSS3 einsetzen kann ohne in Kauf nehmen zu müssen, dass die Website in älteren Browsern nicht richtig funktioniert.

Modernizr überprüft jeden anfragenden Browser gezielt danach, was er leisten kann und was nicht. Das Ergebnis dieser Prüfung wird in einem eigens erzeugten JavaScript-Objekt gespeichert.
Zusätzlich ergänzt Modernizr das HTML-Element um Klassen, die erklären, welche Features unterstützt werden und welche nicht.

Weiterlesen Was ist eigentlich Modernizr?

LINKTIPP: SASS für Einsteiger

Getting started with Sass and Compass
Ich bin zwar nach wie vor skeptisch, ob sich das in meinen Workflow integrieren lässt, aber jetzt will ich es doch mal mit SASS und Compass versuchen.

Bei thinkvitamin.com gibt es eine Video-Einführung zum Thema SASS.
Update: Schade, der Link zum Video funktioniert nicht.

Eine Anleitung, wie man die ganze Kompiliererei in einen WordPress-Theme-Entwicklungsablauf integriert, gibt es hier:
Upgrade your WordPress theme CSS with Sass and Compass

Man sollte allerdings als Mac-User keine Angst vorm Terminal haben. ;o)

Linktipp: Statische Social Media Buttons

Facebook, Twitter, Google: Statische Buttons im Eigenbau
So, jetzt habe ich’s endlich getan. Ich hab die animierten Social-Buttons in der Single-Ansicht gegen statische Buttons ausgetauscht. Vladimir Simovic hat gezeigt, wie’s geht. Vielen Dank für die ausführlich Anleitung!

Mich haben die Ladeverzögerungen immer gestört. Nicht nur bei meiner Seite, auch bei anderen Seiten fand ich es lästig, wenn ich mal wieder auf Twitter und Facebook warten musste. Irgendwie beisst sich das, wenn man selbst die kleinsten Code-Schnipsel optimiert und dann lädt die Seite ewig.

Google-Web-Fonts in WordPress einbinden (Update)

Eine alternative Schrift in ein WordPress-Theme einzubinden ist nicht weiter kompliziert. In diesem Artikel beschreibe ich drei Möglichkeiten, wie Du Web-Fonts in Dein WordPress-Theme einbinden kannst: Google-Webfonts, Typekit und die @font-face-Methode.
Die Schrift-Darstellung funktioniert in allen modernen Browsern gut, es spricht also nichts dagegen, Verdana, Arial und Times in den Ruhestand zu schicken.

1. Google Web-Fonts

Die Oberfläche der Google Web Fonts-Seite wurde vor einiger Zeit überarbeitet, das Testen und Zusammenstellen von Schriften ist jetzt sehr bequem und unkompliziert. Du kannst Dir dort eine „Kollektion“ von Schriften zusammenstellen – und beim Klick auf den Button „Use“ zeigt Dir Google die fertigen Code-Schnipsel, mit denen Du die Schriften in das WordPress-Theme einbetten kannst.
Weiterlesen Google-Web-Fonts in WordPress einbinden (Update)

WordPress Formatvorlagen in ein Theme einbauen

Seit der Version 3.1 unterstützt WordPress Post Formats oder Formatvorlagen. Das sind Artikel, die nur aus einem Foto, einem Zitat oder einem Videos bestehen. Sie erscheinen in einem eigenen Design. In diesem Artikel erkläre ich, wie Du Formatvorlagen in Dein Theme integrieren kannst.

Post Formats werden oft mit Custom Post Types verwechselt. Post Formats unterscheiden sich von Custom Post Types dadurch, dass sie eng an den Artikel gebunden sind. Sie sind eigentlich nur Formatierungen innerhalb eines Artikels und keine eigenständige Artikel-Form. Weiterlesen WordPress Formatvorlagen in ein Theme einbauen

Widgets ausblenden, die man nicht braucht

WordPress kommt mit einer ganzen Reihe von Standard-Widgets, die man in die Seitenleiste einbauen kann. Die meisten davon stammen noch aus den Tagen, in denen WordPress eine reine Blogsoftware und (noch) kein CMS war. 

Der größte Teil der Standard-Widgets kommt in keinem unserer Projekt mehr zum Einsatz. Deshalb blenden wir diese Elemente aus. Dadurch wird das WordPress-Backend für Kunden, die im Umgang mit einem Redaktionssystem nicht so geübt sind, übersichtlicher und besser bedienbar.

Hier ist ein Schnipsel, mit dem man alle Default-Widgets ansprechen kann. Mit der Funktion unregister_widget blendet man die Sidebar-Widgets aus, die man nicht braucht.

// unregister all default WP Widgets
function unregister_default_wp_widgets() {
    unregister_widget('WP_Widget_Pages');
    unregister_widget('WP_Widget_Calendar');
    unregister_widget('WP_Widget_Archives');
    unregister_widget('WP_Widget_Links');
    unregister_widget('WP_Widget_Meta');
    unregister_widget('WP_Widget_Search');
    unregister_widget('WP_Widget_Text');
    unregister_widget('WP_Widget_Categories');
    unregister_widget('WP_Widget_Recent_Posts');
    unregister_widget('WP_Widget_Recent_Comments');
    unregister_widget('WP_Widget_RSS');
    unregister_widget('WP_Widget_Tag_Cloud');
    unregister_widget('WP_Nav_Menu_Widget');
}
add_action('widgets_init', 'unregister_default_wp_widgets', 1);

Quelle: wpsnipp.com/Kevin Chard

jQuery richtig einbinden mit wp_enqueue_script

Wenn man in einem WordPress-Theme Javascript-Effekte nutzen will, muss man diese Scripts in die Theme-Dateien einbauen. Dazu gibt es verschiedene Methoden, einige davon können zu Problemen führen. Am Beispiel von jQuery zeige ich, wie man Javascripts sicher einbinden kann. 

In manchen Themes ist das jQuery-Script fest in die header.php eingebaut. Diese Anweisung steht meistens irgendwo oben zwischen den head-Tags; dort, wo auch die Stylesheets aufgerufen werden. Weiterlesen jQuery richtig einbinden mit wp_enqueue_script

Über das Für und Wider von Dropdown-Menüs

Viele WordPress-Themes kommen heute mit dieser Funktion und Kunden wie Designer sind fasziniert von dieser Technik. Man kann sie sehr schön in einen Entwurf integrieren, Dropdowns sind optisch dezent und elegant und brauchen wenig Platz. 

Was ist ein Dropdown-Menu?

Ein Dropdown-Menü ist etwas in dieser Art:

Das heisst, beim Klick auf den Menüpunkt „Leistungen“ klappt ein Untermenü heraus, auf dem dann alle Unterseiten zu sehen sind. Es gibt noch eine zweite Verainte, Fly-Out genannt. Hier klappt das Zusatzmenü zur Seite und nicht nach unten auf.

Was sind die Vorteile?

  • Mit einem ausklappbaren Menü kann man die Navigation sehr „aufgeräumt“ darstellen.
    Auch und gerade dann, wenn sich sehr viele und verschachtelte Inhalte auf den Ebenen dahinter verbergen.
  • Im aufgeklappten Bereich sieht man alle Unterseiten auf einen Blick
    Weiterlesen Über das Für und Wider von Dropdown-Menüs