WordPress Customizer: Einen Bereich entfernen

Heute zeige ich dir ein kleines Snippet für den WordPress Customizer. Auch wenn das Theme selbst keine weiteren Optionen im Customizer anbietet, werden die Standard-Optionen angezeigt. Es gibt insgesamt sechs vordefinierte Bereiche, die im Codex aufgelistet sind.

Beispiel: wenn in deinem Theme kein Header-Bild dargestellt werden soll, kann die Option mit dem Snippet ausgeblendet werden:

function mytheme_customize_register( $wp_customize ) {
$wp_customize->remove_section( 'header-image' );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Dieses Snippet wird in die functions.php des Themes eingefügt.

Welche (Programmier-)Sprache soll ich lernen?

Ich bin diese Woche in einer der WordPress-Gruppen auf Facebook über diese Frage gestoßen und dachte mir, ich mache einen ausführlichen Beitrag hier auf meinem Blog draus. Dieser Artikel richtet sich eher an Anfänger, die schon mal was mit WordPress (oder einem anderen System) gemacht haben. Wobei “gemacht haben” sich auf so etwas wie Beiträge schreiben oder Plugins und Themes installieren und einrichten bezieht. Man kann mit WordPress schon sehr viel machen, ohne eine Zeile Code zu schreiben, aber über kurz oder lang kommt man einfach nicht “drum rum”. Beispielsweise, wenn du etwas in einem Theme ändern willst, was die Einstellungen nicht hergeben – da musst du an den Quellcode ran (nach Möglichkeit in einem Child-Theme, aber das würde den Rahmen jetzt hier sprengen).

Ich habe eine kurze Übersicht zusammengestellt mit den Sprachen, mit welchen du dich befassen solltest.

HTML (Hypertext Markup Language)

Das Skelett jeder Webseite

HTML ist DIE Grundlage für Webseiten. Dabei gibt es weitaus mehr als die <div> Container und die <p> Absätze. HTML ist dabei keine Programmiersprache, sondern eine Auszeichnungssprache. Die aktuelle Fassung ist HTML5, die gegenüber HTML4 und XHTML einige neue Elemente (bspw. Audio, Video, Section, Article, Aside) enthält. Eine tolle Ressource für Infos zu HTML, ist das Wiki von SELFHTML, auf das ich auch immer wieder zurückgreife.

Ein einfaches Beispiel:

<html>
<title>Mein erstes HTML-Dokument</title>
<body>


Hallo Welt!

</body>
</html>

CSS (Cascading Style Sheets)

Damit es hübsch aussieht

Wenn du so grob weißt, wie eine Seite aufgebaut ist wirst du feststellen, dass diese gar nicht so schön aussieht, wie du es von vielen anderen Seiten gewohnt bist. Die Browser rendern das HTML ohne weitere Angaben zur Gestaltung sehr einfach und unspektakulär. Damit aus der Textwüste eine übersichtliche Seite wird, kommt die Stylesheet-Sprache CSS ins Spiel. Mit CSS kannst du nicht nur Farbe und Ausrichtung anpassen, sondern je nach Element viele weitere Dinge. Einen ersten Überblick kannst du dir im Wikipedia-Artikel zu CSS verschaffen. Auch bei SELFHTML gibt es einen großen Bereich zu dem Thema. Da nicht alle Browser alles unterstützen, gibt es die hilfreiche Seite Can I Use, auf der du zu jedem Feature abfragen kannst, ob die Browser das unterstützen.

Ein einfaches Beispiel:

body {
background-color: #444;
color: #fff;
}

JavaScript

Die Skriptsprache (nicht nur) für das Frontend

Mit JavaScript – nicht zu verwechseln mit der Sprache Java – kommst du heute vermutlich als erstes im Frontend in Berührung. Wer kennt sie nicht, die Slider, Akkordeons, das Neuladen von Seiten, ohne das sich die Seite im Browser komplett lädt – all das lässt sich mit JavaScript clientseitig (also im Browser des Benutzers der Seite) realisieren. Für mehr Hintergrundwissen ist auch hier der Wikipedia-Artikel nicht verkehrt. Und auf SELFHTML möchte ich wieder verweisen, da du dort eine gute Übersicht über die nativen Elemente bekommst. Um JavaScript herum sind in den letzten Jahren viele Bibliotheken und Frameworks entstanden, z. B. jQuery, AngularJS, Backbone, React, Vue.js und noch viele mehr. Mit Node.js ist es möglich, JavaScript auch serverseitig auszuführen.

Ein einfaches Beispiel, mittels JavaScript etwas im Browser auszugeben:

alert( 'Hallo Welt!' );

PHP (PHP: Hypertext Preprocessor)

Ohne PHP gäbe es kein WordPress

WordPress selbst basiert auf PHP, ebenso wie viele andere bekannte Systeme (z. B. Typo3, Joomla, Drupal, Contao). PHP wird komplett serverseitig ausgeführt. Auch hier ist für den ersten Überblick der Wikipedia-Artikel gut. Sehr ausführlich ist außerdem die PHP Dokumentation, die auf deutsch verfügbar ist. Die aktuelle Version ist PHP 7.1, die im Vergleich zur Vorgängerversion PHP 5.6 viele Neuerungen bereit hält und auch etwas schneller ist.

Ein einfaches Beispiel:

<?php echo 'Hallo Welt!'; ?>

Was gibt es sonst noch für Sprachen?

Wenn wir bei der Webentwicklung bleiben wollen, sind Python und Ruby. Python und Ruby sind von der Syntax her schon etwas anders aufgebaut als PHP. Als bekannte Web Application Frameworks gibt es Django für Python und Ruby on Rails für Ruby. Natürlich gibt es noch viel mehr Sprachen, bei Wikipedia gibt es eine ganz schön lange Liste. 😉

Und wie lerne ich jetzt die ganzen Sachen?

Ich habe bewusst in dem Artikel nur auf Ressourcen verwiesen, nicht direkt auf Tutorials. Davon gibt es reichlich im Netz – ohne die mal selbst durchgearbeitet zu haben, kann ich da schwer sagen, welches Tutorial das Beste für dich ist. Auch Bücher gibt es reichlich zu diesen Themen. Ich persönlich habe sehr vieles durch learning by doing gelernt. Ich habe damals (anno 2003) mit einem Buch über HTML 4 angefangen. Vieles ist aber ausprobieren und recherchieren und wieder probieren und wieder recherchieren. Heute gibt es auch viele Video-Tutorials, falls du eher der Mensch für das Visuelle bist. Das Motto lautet eher: einfach ausprobieren, mit kleineren Änderungen anfangen und sich dann immer weiter steigern. Und: nicht davon abschrecken lassen, nicht alles bis ins Detail zu wissen. Ich weiß auch nicht alles und suche auch oft über Google nach einer Lösung oder frage jemanden, von dem ich weiß, dass er/sie Ahnung hat. 🙂

Kennst du noch weitere Ressourcen oder hast Tipps zu den einzelnen Sprachen? Was sind deine Erfahrungen mit dem Lernen der “Internet-Technik”?

WordPress Veranstaltungen für Frauen – nötig oder nicht?

Eieiei, was habe ich da am Freitag losgetreten. Eine Diskussion, die zum Glück sehr sachlich und ohne großes Brimborium auf Twitter geführt wurde/wird. Es fing alles ganz harmlos mit einem Emoji an:

Danach wurde ich in Worten etwas konkreter:

Auf Twitter sind Diskussionen auch gerne mal schwierig, da man mit 140 Zeichen nicht sooo viel Platz hat, seine Gedanken ausführlich zu teilen. Zum obigen Tweet von mir möchte ich noch meine Hintergedanken hinzufügen. Ich war 2014 auf meinem ersten WordCamp in Hamburg und seit Frühjahr 2015 besuche ich regelmäßig das WordPress Meetup Münster/Osnabrück. Ich persönlich habe die Veranstaltungen nie als irgendwie ausgrenzend betrachtet, egal ob vom Geschlecht oder Kenntnisstand her. Ich habe mich immer wohl gefühlt und bin gerne Teil der Community.

Du bist also eine Frau in der IT

Vielleicht hole ich noch etwas mehr zu mir aus, bevor es weiter um das Thema geht. Nachdem ich in meiner Jugend schon gerne mal was mit Webseiten gemacht habe, konnte ich 2006 eine Ausbildung zur Fachinformatikerin für Anwendungsentwicklung beginnen und habe diese nach drei Jahren erfolgreich abgeschlossen. Seither arbeite ich im Bereich des Web Development. Während meiner Ausbildung und in den ersten Berufsjahren hatte ich tolle Vorgesetzte, die mich in meinem Tun bestärkt haben und für die die klassische Rollenverteilung nicht existent war. Auch wenn ich bisher nie damit offen konfrontiert wurde, als Frau in einem typischen “Männerberuf” zu arbeiten, so habe ich dennoch Skepsis und unterschwellige Abneigung durch einige Männer erfahren, die meinen Berufsweg kreuzten. Vielleicht kam es mir auch nie so offen entgegen, da ich eigentlich sehr “un-mädchenhaft” bin. Die Farbe Pink kann ich gar nicht leiden und so typischer “Mädchenkram” ist nicht meins. Vielleicht trägt es auch dazu bei, dass mir so manch ein “dummer” Kommentar des anderen Geschlechts bisher erspart blieb.

Natürlich gibt es andere (männliche) Entwickler, die in verschiedenen Bereichen mehr Wissen und mehr Erfahrung haben als wie ich. Ich habe mich auch in den ersten Berufsjahren schwer getan einzugestehen, dass ich nicht alles weiß. Aber mit der Zeit habe ich gelernt, dass es einfach nicht schlimm ist. Man muss offen bleiben für neues und sich einfach nicht dafür schämen, nicht alles zu wissen. Keiner kommt mit dem gesamten Wissen der Wikipedia, der PHP Dokumentation oder des WordPress Codex zur Welt.

Du sagst doch, das Meetup braucht es nicht, was soll das Gelaber?

Wie gesagt, WordCamps und Meetups empfand ich persönlich nie als ausgrenzend, eher als sehr offene Veranstaltungen. Vielleicht habe ich auch einfach einen “Tech”-Bonus, um bei einigen Diskussionen mithalten zu können, welche für andere nur aus böhmischen Dörfern bestehen. Oder einen “ich-bin-nicht-so-mädchenhaft”-Bonus. Wer weiß.

Das wir ein gesamt-gesellschaftliches Problem haben, was die Unterscheidung der Geschlechter angeht, ist nichts neues. Es zieht sich wie Gummi durch alle Bereiche, leider eben auch durch die Arbeitswelt und die IT. Wobei ich dazu sagen muss, dass mir eben in der WordPress Community eigentlich noch kein Mann besonders aufgefallen ist, der ein “jerk-like behaviour” an den Tag gelegt hat, wie es Bernhard in seinem Blog so schön formuliert hat (Lesenswerter Beitrag von ihm zu dieser Diskussion!) – von daher auch meine erstaunte Antwort in dem Tweet oben. Ich bin bisher einfach nur unglaublich vielen sympathischen Menschen des anderen (und auch des eigenen) Geschlechts begegnet, weshalb ich die Community sehr schätze. Ich finde, da muss man einfach keine Angst haben, sich zu einem Meetup zu gesellen oder ein WordCamp zu besuchen.

Die Diskussion auf Twitter sowie die hohe Teilnehmerzahl der Female WordPress Meetup Veranstaltung sind aber zwei Gründe, sich da nochmal konkreter Gedanken zu dem Thema zu machen.

Und was schlägst du jetzt vor?

Eins vorweg: lasst das Female WordPress Meetup doch erstmal stattfinden.

Die Kommunikation um die Ankündigung der Veranstaltung ist vielleicht etwas unglücklich gelaufen. Mein Gott, shit happens. Ja, auch Twitter ist vielleicht etwas ungünstig im Austausch – zu wenig Platz, um Gedanken ausführlich zu teilen. Shit happens die zweite. Wie oben schon erwähnt fand ich es gut, das es eine sachlich geführte Diskussion auf Twitter in Folge meines Tweets gab. Wir hatten das ja vor nicht mal einem halben Jahr schon etwas anders. (Stringintelligenz, ihr erinnert euch?)

Was mich persönlich als Feedback der Veranstaltung interessieren würde (für Maja):

  1. Aus welchem Grund besuchen die Teilnehmerinnen ein Female WordPress Meetup, aber nicht das reguläre?
  2. Was könnte man für die WordPress Meetups generell (nicht nur das in Berlin) besser machen, um die Teilnehmerinnen des Female WordPress Meetups / Frauen, die bisher noch nicht das reguläre Meetup besuchen besser anzusprechen?

Um den WordPress Code of Conduct gerecht zu werden, könnte ja eine männliche Begleitperson zu einer regulären Teilnehmerin erlaubt sein. 😉 Einfach nur, um ein im Umkehrschluss entstehendes “dann machen wir halt unser Männer-Meetup, wenn ihr Frauen euch schon zusammenrottet” von Anfang an auszuschließen. (Ich glaube zwar nicht, dass sich sowas im Berliner Meetup etablieren wird, aber erinnert euch an das “jerk-like behaviour”.)

Fazit

Ja, es gibt wohl einen Bedarf für ein Female WordPress Meetup. Lasst es stattfinden und holt das Feedback ein. Auch wenn wir insgesamt nicht das gesellschaftliche Denken mit dieser oder anderen WordPress Veranstaltungen ändern können, so können wir den ersten Schritt in die richtige Richtung machen. Es fühlen sich Personen nicht abgeholt / nicht zum regulären Meetup zugehörig. Da sollten wir ansetzen und für diese Personen ein offenes Ohr haben.

Was ist deine Meinung zu dem Thema? Welche Erfahrungen hast du in der WordPress Community bisher gemacht?

 

CSS Hack: FontAwesome Icons im :before Element

Heute mal ein kleiner CSS Hack, über den ich vor einiger Zeit selbst mal gestolpert bin. Folgende Ausgangslage: Ein Link, dessen HTML nicht geändert werden kann, soll ein FontAwesome Icon davor erhalten. Klar, mit dem :before Pseudo-Element geht das ja ganz einfach. Aber dann ist da noch die Sache mit der text-decoration. Die war auf underline gesetzt und war natürlich auch unter dem Icon zu sehen. Was also tun, um beim Text den Unterstrich zu erhalten, beim Icon aber zu entfernen?

Die Lösung ist tatsächlich sehr simpel: Das :before Pseudo-Element erhält die Angabe display: inline-block; – siehe folgenden Pen:

See the Pen Font Awesome Icon as :before with no text-decoration by Jessica (@luminuu) on CodePen.0

Mit dieser Lösung kann man auch noch einen zusätzlichen padding angeben, ohne dass der gesamte Link zu bescheuert aussieht. 🙂

CSS: Die calc() Funktion

Ich bin vermutlich extrem spät dran damit, aber ich habe erst im letzten Jahr von dieser tollen CSS-Funktion erfahren, die mir seither das Leben viel einfacher macht: Die calc() Funktion.

calc() kann überall da eingesetzt werden, wo man Zahlenwerte definieren kann. Ein einfaches Beispiel mit einem div:

div {
  width: calc( 100% - 250px );
}

Das div wird dann eben so breit, wie der verfügbare Platz, minus 250px. Das schöne an calc() ist, dass sämtliche Angaben untereinander gemischt werden können, also z. B. %, px, em, rem, vh, vw, oder auch einfach eine Ganzzahl:

div {
  width: calc( 100% / 4 );
}

Als Operatoren gibt es +, , * und /. Es gilt “Punkt vor Strich” und es können auch mehrere Berechnungen hintereinander gesetzt werden:

div {
  width: calc( (50% + 25px) + (10% * 3em) );
}

Das letzte Beispiel ist natürlich etwas unsinnig, aber technisch möglich. 😉  So kann man beispielsweise Bereiche/Elemente mit einer festen Breite in ein flexibles Layout integrieren, ohne irgendwelche Krücken bauen zu müssen.  Und auch andere tolle Dinge lassen sich einfach damit lösen. Wer die Funktion weiter kennen lernen möchte, kann gerne hier vorbei schauen:

Wie sieht es bei dir aus? Hast du calc() schon einmal eingesetzt? Kennst du noch andere Möglichkeiten, mit der Funktion zu arbeiten? Hinterlasse gerne einen Kommentar. 🙂

Plugin-Tipp: What The File

Im letzten Beitrag zur Projekt52 Challenge habe ich ja schon angerissen, dass es sich heute um eine Plugin-Vorstellung geht: ich möchte euch What The File vorstellen.

Dieses kleine Plugin hat mir in den letzten Monaten oft weiter geholfen. Da muss man was in einem Theme ändern und steht dann plötzlich vor einem riesigen Berg an Theme-Dateien, die oft in Unterordner versteckt bzw. ordentlich einsortiert sind. Klar, die Template Hierarchie ist ein Anfang, aber so muss man sich von Template zu Template hangeln, verirrt sich vielleicht an die falsche Stelle. Gerade bei größeren Premium-Themes ist das doch mit etwas Aufwand verbunden, da die richtige Stelle zu finden. Und jetzt kommt meine Plugin-Empfehlung ins Spiel: What The File zeigt einem an, welche Templates auf genau dieser Seite geladen werden.

Als erstes Beispiel zeige ich euch mal einen Screenshot von einem Blog mit dem Uku Theme von Elmastudio:

Das ist die Einzelansicht eines Beitrages. Hier werden nur zwei Dateien aus dem Theme geladen, daher ist es recht übersichtlich.

Als zweites Beispiel zeige ich euch das hier im Blog verwendete Make Theme von The Theme Foundry:

Hier habe ich ebenso die Einzelansicht eines Beitrags genommen. Hier sieht man deutlich den Vorteil des Plugins: wirklich jedes verwendete Template wird angezeigt. Es gibt zwar “nur” zwei Ebenen, aber das hilft mir persönlich schon sehr. So kann ich gezielt die Stelle finden, die ich editieren möchte.

Gerade in Kundenprojekten mit eigenem Theme, welches über viele Templates verfügt, ist das Plugin sehr hilfreich. Aber auch bei anderen Themes, um deren Aufbau zu verstehen. Inzwischen ist das Plugin fester Bestandteil meiner täglichen Arbeit, wenn es um die Theme Entwicklung geht. 🙂

 

#Projekt52 – 2017 erst recht!

Eigentlich sollte dieser Blog schon seit 2016 regelmäßig befüllt werden, aber irgendwie… Kam mir ständig was dazwischen. Ich hatte ja letztes Jahr beim #Projekt52 schon versucht, einmal die Woche was zu bloggen. Ohne wirkliches Ziel verlief es nach kurzer Zeit schnell im Sand und dann durfte ich auf dem WordCamp Nürnberg auch meine erste Session überhaupt halten. Aufregung pur im Vorfeld. Danach passierte auch ziemlich viel. Schwupps war Sommer, schwupps war Herbst, schwupps war Weihnachten. Zeit, einmal das Jahr zu reflektieren.

Natürlich verfolge ich fleißig, was sonst so los ist. Da schlugen dann wirklich tolle, sehr ausführliche Blogbeiträge auf. Nach dem Lesen fühle ich mich dann irgendwie unter Druck gesetzt, nicht nur einfach etwas “hinzurotzen”, sondern natürlich auch sowas tolles zu liefern. Ich denke das ist der Punkt, der mich in den letzten Jahren hauptsächlich vom Bloggen abgehalten hat. 😕

2017 möchte ich das definitiv ändern. Es hat ja schon fast ein halbes Jahr gebraucht, bis ich diesen Blog fertig gestaltet und für “release”-fähig gehalten habe. In den letzten Wochen habe ich mir fleißig Stichpunkte für Beiträge gesammelt und dieses Jahr möchte ich mich wieder am #Projekt52 beteiligen. Diesmal wird der Fokus ausschließlich auf WordPress und Themen rund herum sein. Genau das, worum es in diesem Blog hauptsächlich gehen soll. 🙂

Den Anstoß dazu hat mir ein Erlebnis beim letzten WordPress Meetup in Osnabrück gegeben. Wir durften unsere Lieblings- und Hass-Plugins vorstellen. Ich konnte mich nicht so recht zwischen zwei Plugins entscheiden, welches ich als Lieblings-Plugin nennen sollte und das kund tat, so durfte ich dann beide vorstellen. Bei dem Plugin, wo ich dachte, es würde niemanden interessieren, ging ein erstauntes Raunen durch den Raum. “Cool, das kannte ich gar nicht”, “Das ist ja praktisch” – ich war sehr erstaunt über das positive Feedback. Mit dem Plugin geht es dann in der nächsten Woche los!

Mein Motto für die #Projekt52 Challenge wird daher sein: Persönliche Erwartung ganz weit runter schrauben. Wenn auch nur ein Beitrag dieses Jahr für einen Leser hilfreich ist, hat sich das schon gelohnt. 🙂

Das WordCamp Köln 2016 – Barcamp Edition

Letzten Samstag war es soweit, das letzte WordCamp für dieses Jahr stand vor der Tür! Diesmal war alles etwas anders und doch so wie immer, denn: als reines Barcamp unterschied es sich von den “normalen” WordCamps. Die tollen Leute sowie die gute Stimmung blieb genauso wie bei den bisherigen WordCamps. 🙂 Nach der Begrüßung und der Vorstellungsrunde ging es dann los mit der Session-Planung. Tatsächlich konnten alle 28 Session-Slots direkt gefüllt werden. Die Beitrags-Palette war gut gemischt und ich musste mich (wie eigentlich auf jedem WordCamp) teilweise zwischen drei zeitgleich stattfindenden Sessions entscheiden.

Weiterlesen

Hallo Welt!

Nein, jetzt kommt nicht dieser Standard-Text, der bei jeder WordPress Installation angelegt wird. 🙂

Gut Ding will Weile haben heißt es ja so schön – auch wenn es nicht spektakulär aussieht, habe ich mir vorab einiges an Gedanken zu diesem Blog gemacht. Der Fokus soll auf WordPress und Web Development liegen. Auch so ein bisschen eine Gedankenablage für die vielen kleinen Dinge, die ich mir gerne mal merken würde, aber oft vergesse. Code-Snippets, Erfahrungen mit Plugins, Themes und WordPress im Allgemeinen. Über WordCamps soll man ja auch immer bloggen, wenn man sie besucht hat. 😉 Vielleicht das ein oder andere Thema im Web Development und darüber hinaus. Da will ich mich aber noch gar nicht so konkret festlegen.

Auf geht die Reise! 👋🏻