Einstieg in SASS

Dies ist der Start einer kleinen Serie von Blogbeiträgen. Ich möchte nicht zu viel verraten, aber das Endergebnis hat etwas mit der speziellen Zeit des Jahres zu tun, in der wir uns gerade befinden. Die Idee hierzu kam von einer sehr guten Freundin. Daher möchte ich die Chance ergreifen und euch zu Beginn erst einmal eine Einführung in SASS geben. Bevor wir also an den eigentlichen Code gehen, starten wir erst einmal mit den Basics.

SASS installieren

SASS ist das Akronym für "Syntactically Awesome Style Sheets". Man könnte es auch als "Programmieren in CSS" bezeichnen. Um SASS zu verwenden, muss der Code, den man geschrieben hat, in normales CSS kompiliert werden. Hierzu gibt es verschiedene Optionen.

Verwendung des ruby gem

SASS wurde ursprünglich in ruby geschriebeb. Um also mit dieser Version loslegen zu können, muss erst einmal ruby installiert werden. Auf einem Windows-System würde ich euch den RubyInstaller empfehlen. Auf einem Mac kann man Homebrew und das folgende Kommando verwenden.

brew install ruby

Falls ihr Linux verwendet findet ihr ruby vermutlich in eurem Paketmanager. Ich würde euch empfehlen die Version 2.2 oder neuer zu installieren, aber auch ältere Versionen sollen noch funktionieren.

Um schließlich SASS zu installieren, kann man einfach das ruby gem (das SASS "Paket" für ruby) mit diesem Kommando installieren:

gem install ruby

Ihr solltet nun in einer Kommandozeile das ruby Kommando ausführen können.

Verwendung von grunt

Falls ihr euch mit grunt auskennt, könnt ihr auch hierfür ein SASS-Paket installieren und dieses verwenden, um die Dateien zu kompilieren. Es gibt zwei Varianten. Ein Paket basiert auf der ruby Version, eine andere verwendet libsass, eine JavaScript-Implementierung von SASS. Das ruby Paket installiert ihr wir folgt:

npm install grunt-contrib-sass --save-dev

Für die libsass Version, der allerdings einige Features der ruby Version fehlen, installiert ihr dieses Paket:

npm install grunt-sass --save-dev

Verwendung von gulp

Wenn ihr eher mit dem Task Runner gulp arbeitet, dann funktioniert die Installation sehr ähnlich zu grunt. Für die libsass Version installiert ihr dieses Paket:

npm install gulp-sass --save-dev

Auch hier gibt es eine ruby Version, aber ich bin mir nicht sicher, ob sie noch aktiv weiterentwickelt wird:

npm install --save-dev gulp-ruby-sass

SASS kompilieren

Sobald ihr SASS installiert habt, könnt ihr eine SASS-Datei in eine normale CSS-Datei mit folgendem Kommando kompilieren:

sass style.scss style.css

Dieses Beispiel verwendet die alternative SCSS syntax, die beliebter und weiter verbreitet ist, da sie sehr ähnlich zu normalem CSS ist. Das Kommando kompiliert die Datei ein einziges Mal. Da man dieses Kommando natürlich nicht nach jeder kleinen Änderung an einer Datei manuell ausführen möchte bietet SASS einen einfachen "Wachter" an, der Änderungen an einer Datei automatisch erkennt (normalerweise beim Speichern) und die Datei neu kompiliert:

sass --watch style.scss:style.css

Für weiter Optionen solltet ihr einen Blick in die offizielle Dokumentation werfen.

Fazit

Ihr solltet nun in der Lage sein SASS zu verwenden und euren CSS-Entwicklungsprozess zu verbessern. Im nächsten Beitrag werde ich euch, wie man SASS in PhpStorm integiert, eine IDE, die heutzutage sehr viele Entwickler verwenden.

Korrekte Zitate in WordPress

Verschiedene Sprachen haben unterschiedliche Anführungsstriche bei Zitaten. In Englisch sehen sie wie folgt aus: “…”. Im Deutschen werden folgende verwendet: „…“. Und im Französichen: « … ».

Korrekte Typographie ist nicht immer einfach zu erreichen, gerade dann, wenn man die Zeichen nicht direkt auf der Tastatur tippen kann (selbst wenn die richtige Sprache eingestellt ist). Aber es gibt einen Weg zur Hilfe, zumindest für Kommentar-Blöcke (blockquotes).

CSS für Zitate

Man kann ein wenig CSS definieren, dass automatisch die korrekten Anführungsstriche um ein q Element setzt (normalerweise innerhalb eines blockquote elements). Ein Standard für Anführungsstriche ist im Browser implementiert. Hierzu einfach folgendes verwenden:

 q { quotes: "\00ab" "\00bb" "\2039" "\203A"; } 

Dieses Beispiel definiert die beiden Varianten für französische Anführungsstriche (da Zitate auch wiederum "innere Zitate" enthalten können).

Verwenden des HTML-Elements

Es gibt aber noch einen einfacheren Weg. Statt die Anführungsstriche explizit zu definieren, kann man diese Aufgabe auch dem Browser überlassen. Hierzu muss man einfach nur dass korrekte lang Attribut für das Dokument angeben.

But there is an easier way. Just don't define anything specifically and let the browser handle the correct quoting. All you have to do is to set the correct lang attribute on the document.

<html lang="fr">
    ...

</html>

Nun kann man einfach ein q Element verwenden und die Anführungsstriche werden automatisch abhängig von der gewählten Sprache gesetzt.

Anführungsstriche in WordPress reparieren

WordPress für ein lang Attribut zum HTML Tag hinzu, aber leider verwendet es die "vier Zeichen Locale". Statt "fr" steht dort also "fr-FR", was leider in den meisten Browsern dazu führt, dass keine korrekten Anführungsstriche verwendet werden. Daher habe ich ein kleines Plugin geschrieben, dass diesen Fehler behebt.

Keine Ads mehr auf diesem Blog

Ab heute gibt es auf diesem Blog keine Ads mehr. Ich habe fast seit dem Start durchgehend AdSense eingebunden. Zusätzlich hatte ich auch mit anderen Arten von Finanzierung experimentiert. Bis heute hatte ich zwei Banner zum Affiliateprogramm meines Hoster auf der Seite (natürlich klar als solche erkennbar).

Warum ich Ads auf meinen Blog hatte

Der Betrieb eines selbst gehosteten Blogs ist nicht kostenlos. Die Kosten für Hostings und Domains sind im Laufe der Zeit gestiegen, da auch die Anforderungen an die Performance immer höher wurden, denn auf diesem einen Server laufen mehrere Websites. Um diese Kosten ein wenig zu decken, habe ich Werbung platziert. In dem ersten Jahren haben sie vermutlich nur etwa. 15% der Gesamtkosten getragen.

Wieso ich alle Ads entfernt habe

Im gestrigen Beitrag habe ich meinen Unmut bezüglich Affiliatelinks in Supportforen und Gruppen niedergeschrieben. Ich kann das wirklich nicht leiden. Ebensowenig wie Websites, die vollgestopft sind mit Werbung. Vor allem mitten im Inhalt. Daher hatte ich die Werbung auch an Stellen platziert, an denen sie nicht so sehr stören.

Mit Werbung kommt aber auch ein ordentlicher Overhead daher. Ich habe die Website mal vor dem Entfernen der Werbung getestet und sie hatte etwa 70 Requests von 19 verschiedenen Domains und eine Größe von ca. 1MB. Nach dem Entfernen waren es nur noch 30 Requests von 9 Domains und ca. 640KB.

Aber nicht nur die Größe war ein Grund für mich, aus dem ich schon länger vor hatte, die Werbung zu entfernen. Auch der Datenschutz und die Sicherheit waren mir wichtig, denn über Werbung können Nutzer angegriffen werden.

Wie ich meine Blog finanziere

Letztes Jahr war ich zum ersten Mal in der Lage, die Kosten für meine Website zu decken. Zum einen durch Google AdSense (43%) und zum andern durch die VG Wort (57%), die Verwertungsgesellschaft für Autoren. Da nun ein Teil dieses Finanzierung gefällt, muss ich mir einen anderen Weg suchen. Ich hoste aber seit einiger Zeit auch die Websites von Freunden, wodurch ich mir nun dir Kosten ein wenig teilen kann.

Wie finanziert ihre eure Website?

Mich würde sehr interessieren, wie ihr die Kosten für euren persönlichen Blog oder eure Website finanziert. Habt ihr auch Werbung auf der Seite? Oder nehmt ihr N Affiliateprogrammen teil? Vielleicht nutzt ihr ja auch eine Art von Crowdfunding. Für mich wird es erst einmal nur VG Wort und mein Wunschzettel sein.

Eigennütziger WordPress-Support

Ich liebe die WordPress Community. Ich habe dort viele wunderbare Menschen kennengelernt und genieße es, so viele WordCamps wie möglich in neuen Städten/Ländern zu besuchen um noch mehr tolle Mitglieder der weltweiten Community kennenzulernen.

Das ist auch einer der Gründe, weshalb ich sehr gerne Hilfe auf verschiedene Arten gebe. Ich organisiere WordCamps und Meetups, wirke in mehreren Meta-Teams mit und beantworte Fragen in einigen Facebook-Gruppen.

Anderen helfen … oder eher dir selbst?

In der Weihnachtszeit bieten viele Unternehmen WordPress Produkte und Dienstleistungen zu vergünstigten Preisen an. Gerade heute gab es aber mal wieder einen negativen Fall in einer Facebook-Gruppe. Ein Mitglied hat einen Link zu einem Angebot für ein bekanntes Premium-Theme gepostet. Toll oder? Jeder erfährt von diesem Angebot und profitiert davon. Nicht wirklich. Die Person, die am meisten davon profitiert ist das Mitglied, das den Link gepostet hat. Denn wie sich herausstellte handelte es sich um einen Affiliate-Link.

Stoppt eigennützige Hilfe!

Vielleicht bin ich ja zu altruistisch eingestellt. Aber es ärgert mich wirklich maßlos, wenn jemand anderen "hilft", nur um von dieser Hilfe selbst einen Vorteil zu haben. Ich habe kein Problem damit, wenn Freelancer oder Agenturen individuelle Hilfe anbieten und dafür eine gerechte Bezahlung erwarten. Aber das Teilen von Affiliate-Links auf Facebook ist meiner Meinung nach nicht in ordnung.

Wie ist deine Meinung?

Was denkst du? Regt euch so eine Art von Hilfe auch auf? Oder meint ihr, dass ich bei diesem Thema überreagiere?

Gutenberg Test

Vorwort

Dieser Artikel ist auf der Fahrt zum WordCamp Cologne entstanden. Ich habe dabei zum ersten Mal Gutenberg getestet und da ich nicht einfach nur sinnlosen Text tippen wollte, habe ich mich entschieden, daraus eine Geschichte zu machen. Aber lest selbst …

Eine kleine WeihnachtsGutenberg-Geschichte

Das sieht ja schon mal sehr schick aus. Was kann man denn hier alles machen? Wie wäre es zum Beispiel mit fettem oder kursivem Text?

Oder mit einem Link auf meinen Blog? Geht das vielleicht auch noch immer mit STRG + V, wie ich es mal beschrieben hatte? Ja, das klappt noch, super!

Weiterlesen →

Shortcodes in Sidebar-Widgets einfügen

Shortcodes sind wirklich praktisch, wenn man dynamischen Content in statische Seiten und Beiträge einfügen will. WordPress bringt schon einige interne shortcodes mit, wie etwa den gallery shortcode (der normalerweise im Backend gerendert wird).Standardmäßig funktionieren diese Shortcodes nur im Inhalt von Seiten und Beiträgen

Einfügen von Shortcodes mit dem Text oder HTML Widget?

Nun könnte man annehmen, dass man einfach das Text oder HTML widget verwenden kann. Aber leider funktioniert diese Lösung nur für einige Shortcodes, bei anderen führt es dazu, dass der Shortcode gar nicht ausgewertet wird. The gallery Shortcode etwa wird bei beiden nicht angezeigt und das Syntax-Highlighting-Plugin, das ich einsetzte, spuckt entweder falschen Code aus oder es funktioniert gar nicht.

Das Shortcode Widget Plugin

Wie fast immer ist dieses Problem nicht neu ein jemand anderes hat schon eine Lösung hiefür gefunden. Das Plugin Shortcode Widget wurde genau für diese eine Aufgabe geschrieben. Sobald man es installiert und aktiviert hat, findet man ein neues Widget, das ein wenig wie das alte Text-Widget aussieht und nur einen Titel und eine Textbox hat. Hier hinein kann man nun einen beliebigen Shortcode einfügen und das Widget dann in einer beliebigen Widget-Area verwenden.

Der Umgang mit geschlossenen Plugins aus dem Plugin-Verzeichnis

Ich bin mir sicher, dass ihr alle Plugins aus dem offiziellen Plugin Directory verwendet. Alle diese Plugins werden bei der Einreichung geprüft, bevor sie online gehen. Sollten sie in den letzten zwei Jahren nicht aktualisiert worden sein, kann man sie über die Suche nicht mehr finden (man kann sie aber weiterhin downloaden, sofern man den Direktlink noch kennt). Aber habt ihr euch mal gefragt was passiert, wenn ein Plugin geschlossen und aus dem Plugin-Directory entfernt wurde, aus welchem Grund auch immer?

Ein potentielles Sicherheitsrisiko

Ein Plugin kann aus verschiedenen Gründen geschlossen und/oder entfernt werden. Aktuell sind folgende Gründe denkbar:

  • Security Issue
  • Author Request
  • Guideline Violation
  • Licensing/Trademark violations
  • Merged into Core

Zwei meiner eigenen Plugins werden wohl auch bald geschlossen werden, da ihre Funktionalität entweder bereits im Core gelandet ist oder dieses in naher Zukunft passieren wird. In diesen Fällen ist es also nicht unbedingt kritisch, wenn diese weiterhin installiert und aktiviert sind, sofern sie sich nicht mit den Core-Funktionen ins Gehege kommen. Aber was ist mit Plugins, die ein Sicherheitsrisiko darstellen können? Das ist ein echtes Problem.

Keine Benachrichtigung der Nutzer

Wenn ein Plugin geschlossen wird, werden die Nutzer, die es noch installiert (und vielleicht sogar aktiviert) haben darüber nicht informiert. Selbst wenn der Pluginautor also einen Weg gefunden hat, die Sicherheitslücke zu schließen, würde kein Nutzer davon profitieren, da der einzige Weg einer Aktualisierung, der über das Plugin-Directory, nicht mehr existiert. In der Zwischenzeit sind alle Websites mit der alten Version potentiell für Hacker angreifbar.

Ein Plugin als Rettung

Da dieses Problem schon eine ganz Weile besteht und das Plugin-Team bisher noch mit keiner schnellen Lösung dienen konnte, wurde das Plugin No Longer in Directory veröffentlicht. Wenn man es installiert und auf dessen Einstellungsseite geht, bekommt man eine Liste aller Plugins angezeigt, die seit mehr als zwei Jahren nicht mehr aktualisiert wurden sowie eine Liste aller Plugins, die nicht im Plugin-Directory gefunden werden konnten.

Diese zweite Liste würde aber auch Plugins auflisten, die niemals im Plugin-Directrory veröffentlicht waren. Das sind beispielsweise Premium-Plugin oder Plugins, die man speziell für ein Kundenprojekt entwickelt hat. Die Lösung ist also auch nicht optimal.

Ein neuer Weg geschlossene Plugins hervorzuheben

Über die „Ideas“ Seite auf WordPress.org wurde daher eine ganze Weile zu diesem Thema diskutiert. Gestern hat das Meta/Plugin-Team auf dem Contributor Day des WordCamp US angekündigt, dass gerade hart an einer Lösung gearbeitet wird. Sie haben hierzu ein paar Mockups im entsprechenden Trac-Ticket veröffentlicht und auch ein erstes Beispiel für die Ansicht eines geschlossenen Plugins existiert bereits. Vorher wurde beim Aufruf eines geschlossenen Plugins eine 404 Fehlerseite angezeigt ohne einen Hinweis darauf, dass dieses Plugin mal existiert hat und warum es geschlossen/entfernt wurde.

Fazit

Der Umgang mit geschlossenen und entfernen Plugins ist sehr wichtig und sollte in einer transparenten Art und Weise passieren, damit die Nutzer dieses Plugins über mögliche Sicherheitsprobleme informiert sind, und das Plugin entfernen können, bevor ihre Website gehackt wird. Ich bin mir nicht sicher, ob es zusätzlich möglich sein sollte Plugins direkt zu löschen oder den Nutzern einen Hinweis im Dashboard anzuzeigen. Aber ich hoffe, dass dieses Thema nun etwas mehr Aufmerksamkeit bekommt.

Multisite-Administratoren die Option „Zusätzliches CSS“ freischalten

Dieser Blog läuft auf einer Multisite, damit ich meine Beiträge einfach mit MultilingualPress übersetzen kann. Eine weitere Seite auf dieser Multisite-Installation ist die Website des WP Meetup Berlin. Auf diese Seite gibt es weitere Nutzer mit der Adminstrator-Rolle. Mit dieser Rolle kann man die meisten Dinge tun, die man auch auf einer Singlesite tun kann. Mit einigen Ausnahmen:

  • Aktualisieren von Core, Plugins, Themes, etc.
  • Websites hinzufügen
  • Nutzer hinzufügen
  • Plugins installieren
  • Themes installieren
  • Den Editor für Plugins/Themes nuzten (was man ohnehin nie tun sollte)
  • Ungefiltertes HTML verwenden
  • Die Option „Zusätzliches CSS“ im Customizer verwenden

Diese letzte Ausnahme hat mich wirklich überrascht. Ich hätte erwartet, dass dies die einzige Möglichkeit ist, mit der Adminsitratoren einer Website das Design der Seite anpassen können (da sie ja keine Themes oder Child-Theme hochladen oder deren Dateien verändern können). Aber nur Super-Administratoren können diese Option nutzen.

Die Option für Website-Administratoren freischalten

Glücklicherweise gibt es für diese Option die Berechtigung edit_css, die wir lediglich die diesen Admins zuweisen müssen. Die kann man entweder mit einem Role-Management-Plugin wie Members tun, oder aber mit dem Plugin Multisite Custom CSS, das genau diese eine Aufgabe erfüllt.

Fazit

Aus Sicherheitsgründen macht es absolut Sinn, dass Admins einer einzelnen Website einer Multisite die Dateien eines Themes nicht verändern dürfen. Ihnen aber auch die Möglichkeit zu nehmen, die Option „Zusätzliches CSS“ im Customizer zu verwenden, macht für mich keinen Sinn. Zum Glück ist es mit einem der vorgestellten Plugins sehr einfach möglich, diese Option zu aktivieren.

Den WordPress.org Link aus Meta Widget entfernen

WordPress bring eine Menge Widget mit. Eines dieser Widgets ist das Meta Widget. Wenn man WordPress frisch installiert, wird dieses Widget normalerweise auch in die Sidebar eingefügt. Auf den meisten Seiten wird dieses Widget direkt wieder entfernt, da sein Nutzen nicht gesehen wird. Aber auch manchen Seiten kann es echt praktisch sein. Es hat Link zur Registrierung (falls erlaubt), zur Anmeldung (falls nicht gerade angemeldet), dem RSS-Feed der Beiträge, dem RSS-Feed der Kommentare der aktuellen Seite bzw. des aktuellen Beitrags:

In einer Facebook-Gruppe kam die Frage auf, ob man den Link zur WordPress.org Website im Meta-Widget entfernen können. Glücklicherweise gibt es genau für diesen Link einen Filter. Hierüber kann man den Inhalt des Links ändern oder einfach einen leeren String zurückgeben. Mit einer der „magischen Callback-Funktionen“ in WordPress erreicht man das mit einer einzelnen Zeile Code:

add_filter( 'widget_meta_poweredby', '__return_empty_string' );

Mehr braucht es nicht, um den Link zu WordPress.org aus dem Meta-Widget zu entfernen. Ich würde den Links selbst nicht entfernen, aber wenn ihr ihn nicht haben möchtet, könnt ihr einfach diese eine Zeile Code verwenden oder das kleine Plugin, das ich hierzu als Gist veröffentlicht haben.

Den „Geschützt“ und „Privat“ Präfix bei Beiträgen entfernen

Vor ein paar Wochen hatten wir in einem Projekt die Anfrage, die beiden Präfixe „Privat: “ und „Geschützt: “ vor dem Titel eines Custom Post Types zu entfernen. Wenn ihr nicht wisst, wovon ich gerade rede, lasst es mich kurz erklären.

Die Sichtbarkeit von Beiträgen

Wenn man einen Blogbeitrag schreibt hat man in der Metabox „Veröffentlichen“ die Option „Sichtbarkeit“. Normalerweise steht diese immer auf „Öffentlich“. Es gibt aber zwei weitere Optionen: „Passwortgescshützt“ und „Privat“. Wenn man die erste Option auswählt, werden Beiträge nur angemeldeten Besuchern angezeigt, egal welche Rolle diese haben. Bei der zweiten Option kann man ein einzelnes Passwort festlegen, das die Beiträge schützt (dieses Passwort wird im Klartext im Beitrag gespeichert).

Änderungen am Beitragstitel

Wenn man einen der beiden Sichtbarkeiten wählt, fügt WordPress einen Präfix „Geschützt: “ oder „Privat: “ vor den Beitragstitel ein, sofern die Funktion the_title() zur Ausgabe verwendet wird. Wie kann man also den Präfix entfernen, wenn man ihn nicht möchte?

Den Präfix über Filter entfernen

Um den Filter zu entfernen können wir einfach die beiden Filter private_title_format und protected_title_format verwenden, um den Beitragstitel solcher Beiträge zu ändern. Hierzu brauchen wir nur diese wenigen Zeilen Code:

function remove_pp_prefix_title_format( $content ) {
    return '%s';
}
add_filter( 'private_title_format', 'remove_pp_prefix_title_format' );
add_filter( 'protected_title_format', 'remove_pp_prefix_title_format' );

Fazit

Mit wenigen Zeilen Code können wir also einfach den Titel von geschützten und privaten Beiträgen ändern. Als die gleiche Frage etwas später in Facebook aufkam, habe daraus ein kleines Plugin gemacht und als Gist veröffentlicht. Kurz danach habe ich aber rausgefunden, dass jemand sogar Plugin im offiziellen Plugin Directory veröffentlicht wurde. Ich hoffe also, dass euch dies auch weiterhelfen kann.