Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

Less in WordPress Themes nutzen

Less in WordPress Themes nutzen

Less im WordPress Theme

Less ist in aller Munde, denn CSS reicht vielen nicht mehr aus. Sie wollen ihre Stylesheets dynamischer anlegen, mehr Ordnung hereinbringen, Möglichkeiten nutzen die oft einfacher sind als pures CSS. Gemeint sind damit Variablen, Mixins, Berechnungen und Funktionen, eben alles was mit CSS im Normalfall nicht möglich ist. Ein gutes Beispiel für den Einsatz von Less sind Variablen. So lässt sich mit “@color: #000000;” beispielsweise eine Farbe festlegen, die immer wieder genutzt wird oder einfach als Standard verwendet werden kann. Bei späteren Einträgen müsst ihr dann nur noch so etwas wie “background: @color;” eintragen, um automatisch die zuvor festgelegte Farbe zu wählen. Das macht vieles einfacher, vor allem später, wenn ihr genau diese Farbe ändern wollt. Natürlich ist das jetzt nur ein einfaches Beispiel, denn Less hat noch viel mehr zu bieten, um Stylesheets praktischer, übersichtlicher, eben dynamischer zu machen. Wer Less in WordPress nutzen möchte, muss aber einiges beachten. Hier ein paar kurze Snippets und Hinweise dazu, wie ihr Less in eurem WordPress Theme ganz einfach verwenden könnt, ohne Umwege oder komplizierte Schritte.

Less in WordPress integrieren

1. Löscht den kompletten Inhalt eurer style.css im Theme-Ordner, entfernt aber nicht die Datei selbst, denn damit hat WordPress so seine Probleme.

2. Legt nun im Theme-Ordner eine Datei namens style.less an und fügt dort den entsprechenden Code ein.

3. In der header.php integriert ihr nun das Script Less, welches ihr über das kostenlose CDN CDNJS einbinden könnt, um Ladezeit zu sparen.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>

4. Ebenfalls im Header müsst ihr nun noch den Link zur style.css entfernen und stattdessen unter dem Script von oben eure style.less integrieren.

<link rel="stylesheet/less" type="text/css" href="<?php bloginfo('template_url'); ?>/style.less" />

Less nutzen und ausprobieren

Ich kann nur jedem raten Less mal ein wenig auszuprobieren und sich das Ganze genauer anzuschauen. Zum einen muss man sich einfach weiterbilden und aktuell bleiben, zum anderen hat Less durchaus seine Vorteile, die in manchen bereichen wirklich Wunder wirken können und die Übersicht wahren. Ich selbst hatte zuletzt ein WordPress Theme mit Less aufgesetzt, einfach um es mal ein wenig auszuprobieren und damit herumzuspielen. Am Ende habe ich dann zwar alles wieder in CSS umgewandelt, was aber einfach daran lag, dass Less aus meiner Sicht vor allem bei größeren Stylsheets seine Vorteile ausspielt. Bei minimalistischen Designs machen solche Zusätze daher meiner Meinung nach keinen Sinn. Interessant ist die dynamische Stylesheet Sprache aber allemal und einen Blick sollte jeder mal riskieren. Nicht weil Less unbedingt genutzt werden muss, sondern weil sich das Ganze jeder mal genauer anschauen sollte, bevor er urteilt.



Wordpress Performance eBook