Shortcodes, CSS und JS nur wenn nötig einbinden

nicolas — Sat, 24 Oct 2009 10:05:48 +0000

Vor kurzem wollte ich eine neue Funktionalität für mein Blog haben, und ich wollte dafür ein neues plugin hinzufügen. Also habe ich verschiedene getestet und bin auf etwas überraschendes gestoßen: zumindest eines der plugins, die ich mir angeschaut habe, wollte seine CSS-Datei und jquery auf jeder Seite meines Blogs laden. Nach einigen weiteren Tests wurde mir dann klar dass dieses Verhalten weit verbreitet ist.

Und das ist nicht gut so. Jquery ist durchaus klein, CSS Stile normalerweise auch. Aber das ist kein Grund sie jedem Besucher beim Aufruf irgend einer beliebigen Seite aufzuzwingen. Ein paar weitere Nachforschungen haben keine einfache Lösung ergeben, also habe ich meine eigene geschrieben.

Normalerweise bindet ein plugin seine Dateien über die wp_print_styles oder wp_print_scripts Aktionen ein:

add_action( 'wp_print_styles', 'deinplugin_css_einbinden' );
 
function deinplugin_css_einbinden() {
    echo $csslink;
}

Nimm statt dessen etwas wie folgendes:

add_action( 'wp_print_styles', 'deinplugin_css_einbinden' );
 
function deinplugin_css_einbinden() {
    // Prüfen ob der shortcode im Inhalt der Seite vorkommt
    global $post;
    if ( strstr( $post->post_content, '[deinshortcode]' ) ) {
        echo $csslink;
    }
}

Das ist schon alles. Bitte fügt eure CSS- und JavaScript-Dateien nicht jeder Seite meines Blogs hinzu.

Update: Dieser exzellente Artikel stellt eine verbesserte Lösung dieses Problems dar.

Update 2: Die bisher beste Lösung um JavaScript zu laden

Typo3, YAML und die vertikale Navigation

nicolas — Thu, 08 Oct 2009 08:47:02 +0000

Mit dem YAML CSS framework TYPO3 templates zu entwickeln ist recht einfach, wenn man die Grundlagen von typoscript kennt. Allerdings muss man valides HTML produzieren, damit die Navigationskomponente vertikale Listennavigation korrekt dargestellt wird.

Hier ist ein Ansatz, dies in Typo3 zu erreichen:

tmp.nav = HMENU
tmp.nav {
    1 = TMENU
    1 {
        expAll = 1
        wrap = |
        NO = 1
        NO {
            wrapItemAndSub = |
        }
        CUR = 1
        CUR {
            wrapItemAndSub = |
            ATagParams= id="active"
        }
    }
    2 < .1
    2.wrap = |
    3 < .2
    # [...]
}

Nicolas Kuttler » CSS

Shortcodes, CSS und JS nur wenn nötig einbinden

Typo3, YAML und die vertikale Navigation