Monat: August 2011

JQuery UI dialog in WordPress

23. August 2011 - JavaScript, wordpress

Für ein eiliges Kundenprojekt mußten  die Sponsoren eines gespendeten Fahrzeugs auf der Sponsorenliste hervorgehoben werden. Standard war bei der Sponsorengruppe: per Popup. Ich habe mich dann für den jQuery UI dialog entschieden und hier sind meine Erfahrungen dazu.

English summary: In the following I wrap up my experiences with jQuery UI dialog in a WordPress environment.

Solide Grundlage zur Lösung der Anforderung ist wie oft ein Plugin. Hier bringt man den php Code unter und kann die Javascript Programme so eintüten, dass sie nicht auf jeder Seite geladen werden.

Die ersten Zeilen des Plugins sehen etwa so aus:


if ( !class_exists('xxxxSponsoren') ) {
class xxxxSponsoren{
         function xxxxSponsoren() {
                add_action('wp_print_scripts', array (&$this,'sponsoren_scripts'));
                add_action('wp_print_styles', array (&$this, 'sponsoren_styles'));

         }
         function sponsoren_scripts() {

           if (is_page('sponsoren')) {
             wp_register_script('show_sponsoren', WP_PLUGIN_URL.'/sponsoren/js/show_sponsoren.js', array('jquery', 'jquery-ui-core', 'jquery-ui-dialog'),false,true);
             wp_enqueue_script('show_sponsoren');
          }
         }
         function sponsoren_styles() {
            if (is_page('sponsoren')) {
              wp_register_style('nf_dialog',WP_PLUGIN_URL.'/sponsoren/css/jquery-ui-1.8.16.custom.css');
              wp_enqueue_style('nf_dialog');
           }
         }
.....

Die grundlegenden Javascript Dateien jquery , jquery-ui-core, jquery-ui-dialog sind in WordPress vorhanden und werden automatisch in die Seite inkludiert, wenn man beim Registrieren der eigenen js Datei (hier: show_sponsoren.js) die Abhängigkeiten angibt.

Seltsamerweise trifft das für die Stylesheets nicht zu, und ohne diese ist das Ergebnis sehr schrecklich und entmutigend.  Das WordPress Stylesheet zum UI Dialog ist vollkommen unbrauchbar. Im Internet gibt es verschiedene Quellen , z.B. http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css oder auch Einzelhinweise zum css.

Um es kurz zu machen: man braucht

  • das gesamte css zu UI und nicht nur das für den Dialog (d.h. anstelle von 3k css 32k css)
  • und alle icons dazu (sonst sieht es ebenfalls schrecklich und entmutigend aus)

Am Ende habe ich mir von http://jqueryui.com/ das gesamte Bundle geholt und das css mitsamt den Icons lokal im Plugin abgelegt; die Version ist  jquery-ui-1.8.16.custom.css

Netterweise sah das Ergebnis bei jedem css Versuch anders aus. Im letzten Fall ist der Dialog orange. Wenn man gezielt ein css-Theme auswählen möchte, sollte man das css von Google holen. Dort sind alle Themes erhältlich. Das „Orangene“ ist ui-lightness 🙂

Der Rest ist einfacher: man legt die anzuzeigenden Daten unsichtbar mit display: none und einer passenden id (hier: id=“spon_li“) auf der Webseite ab und braucht dann nur noch ein kurzes js Script (hier:show_sponsoren.js)


jQuery(document).ready(function() {
     jQuery("[title*=danken]").click(function() {
     jQuery("#spon_li").dialog({
        width: 600,
        resizable: true,
        title: 'Die Sponsoren für unseren neuen Transporter',
        position: 'center'
});

return false;
});

In der zweiten Zeile wird ein Bild gesucht (und hoffentlich auch  gefunden), dessen ‚title=‘ den String „danken“ enthält. Wenn man auf dieses Bild clickt wird der Dialog aktiviert, hier mit Optionen wie einem Titel, einer Position usw.

Leben mit dem Bitdefender heißt Leben mit 98% CPU Auslastung

23. August 2011 - Uncategorized

Es werden viele Witze über Windows gemacht. Z.B. Windows wird bei Startrek als Virus eingesetzt, um die Computer der feindlichen Borg auszuschalten, da es mit seinen Updates schneller in der Lage ist, Systemressourcen zu belegen, als die Borg hinzufügen können.

Das ist halt so. Man kann etwas dagegen tun: neuer PC mit höherer Rechnleistung, mehr DSL, mehr Speicher. Keine Windows Updates (siehe oben)!

Insgesamt hatte man aber noch das Gefühl, vor dem Bildschirm der Herr und Gebieter zu sein. Windows bekommt zwar seinen Teil der Ressourcen, aber der Löwenanteil war für einen selbst!

Das ändert sich, wenn man Bitdefender im Hause hat. Bitdefender ist der König der Ressourcenfresser.

Bitdefender nimmt sich keinen Teil, Bitdefender nimmt sich alles! Naja, nicht 100%.  Es lässt noch ein paar Prozente übrig. 2%, manchmal 10%, machmal sogar 20%.

Man fragte sich, was der Kumpel vsserv aus dem Hause Bitdefender da so macht. Er ist schließlich ein Virenscanner. Hat er ein Hobby? Rechnet er große Primzahlen aus? Macht er einen Wetterbericht über die nächsten 4 Jahre?

Von mir bekommt er auf jeden Fall kaum Arbeit, ich sitze ja nur da und warte, bis sich wieder mal ein Programm öffnen lässt.

Mails kommen auch kaum herein, weil ich nichts fertig bekomme und daher nichts verschicken kann. Der Browser ist auch nicht das Problem, weil er für jeden Seitenaufruf Minuten braucht.

Alle paar Stunden schicke ich eine Fehlermeldung an Bitdefender ab. Die scannen das ganze System und bedanken sich am Ende höflich für meine Geduld. Ach so, sie sagen auch, sie melden sich dann.

Und in der Zwischenzeit hat vsserv mal wieder die Zahl Pi auf zwei Millionen Stellen ausgerechnet. Oder die Entfernung Erde Mond im Jahre 2525.

Wenn die Website größer wird, werden functions.php und Plugins zu Monstern

22. August 2011 - wordpress

Es fängt meistens klein an und wird dann größer als gedacht: das CMS für einen Kunden. Leider ist das Wachstum keine Stärke von WordPress. Nette Annehmlichkeiten entwickeln sich dann zu unzähmbaren Code-Monstern.

English Summary: If your WordPress CMS website grows, be sure that some of the functionality inside WordPress you always loved before is going to kill you, i.e. functions.php or plugins .

Bei 50 Seiten im CMS hatte meine functions.php bereits 1000 Zeilen Code, bei 100 waren es über 2000. Aus fünf Plugins wurden fünfundzwanzig, davon die Hälfte selbst geschrieben. Von der Größe der CSS Dateien will ich erst gar nicht anfangen.

Dabei war die einzelne Seite  im Durchschnitt nicht komplizierter geworden. Es waren aber mehr, und jede Seite brauchte einen etwas anderen Code, eine etwas individuellere CSS Behandlung.

Ein Webshop auf WordPress? Vergiß es. Das Ding fliegt Dir um die Ohren, dann, wenn Du es am wenigsten gebrauchen kannst: wenn es wächst. Sagt man dann dem Kunden: wir müssen jetzt auf xx wechseln, dauert aber ein Jahr? Oder zwei?

Ich mag WordPress eigentlich sehr, aber man sollte auch wissen, wo die Grenzen für ein CMS auf dieser Basis liegen:

Man kann den Code für eine spezielle Seite nicht einer speziellen Seite zuordnen. Sicher, man kann js Scripte einer Seite beim Laden zuordnen, um die Ladezeiten zu verrringern. Auf dem Server muß aber der Inhalt der gesamten Webseite, auch alles, was in functions.php oder den plugins enthalten ist, einmal geladen werden. Für die Webseite yy werden dann die meisten dieser Funktionen nicht aufgerufen, das verringert die Rechenzeit, aber geladen werden muss das ganze Zeug.

Die meisten Provider bieten für das Geld eine Produkt aus max. Rechenzeit mal  max. Speicherbedarf an. Leider hat man auf den Speicherbedarf als Programmierer wenig Einfluß.

Wo sind die functions-sponsoren.php, functions-aktionen.php, functions-was-weiss-ich.php für jede spezielle Webseite? Plugins, die zu 100% einer bestimmten Webseite zuordbar sind, und nicht nur für den js Teil?

Natürlich kann man aus jeder page.php eine aktionen.php oder sponsoren.php machen und den Code da reinschreiben oder inkludieren. Wo bleibt aber dann das template Konzept, wenn man 15mal page.php verwendet und 85 Sonderseiten hat?

Ein riesige functions.php lässt sich auch nicht mehr warten, weil Nebeneffekte auf anderen Seiten nicht ausgeschlossen werden können. Man verbessert einen Fehler und fängt sich einen anderen auf einer anderen Webseite ein, die bis dahin immer problemlos funktionierte.

Ich will hier nicht behaupten, dass das Problem zu komplex wäre, um gelöst zu werden. Natürlich kann man von außen dazu programmieren. Aber der richtige Ansatz dafür liegt im WordPress kernel.