Farben im Stylesheet beim WordPress Child Theme anpassen

In dem Artikel „Ein WordPress Child Theme anlegen“ habe ich gezeigt, wie man ein Child Theme in WordPress anlegen kann. Nun möchte ich zeigen, wie bei dem Child Theme eine Anpassung der Farben erfolgen kann. Dafür muss die Datei style.css des Childs angepasst werden. Dies kann z.B. so aussehen:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/
Description: Twenty Fourteen Child Theme
Author: Ihr Name
Author URI: http://blog.boisen.biz/
Template: twentyfourteen
Version: 1.0.0
*/

@import url("../twentyfourteen/style.css");

/* Theme Anpassungen ab hier einfügen*/
a {color: red;} /* Linkfarbe */
a:hover {color: grey;} /* Linkfarbe beim Überfahren mit der Maus */

/* Farben für Kopfzeile, linke Seitenleiste und Fußleiste */
.site-header, .site:before {background-color: #9ebe25;} /* Kopfzeile */ 
secondary {background-color: #9ebe25; color: red;} /* linke Seitenleiste */
.site-footer {background-color: grey;} /* Fußleiste */

/* Links */
a {color: red;} /* Farbe der Links */
a:hover {color: grey;} /* Linkfarbe beim Überfahren mit der Maus */

/* Farben für die Widgets*/
.content-sidebar .widget .widget-title {color: grey;} /* Überschriften */
.content-sidebar .widget a {color: red;} /* Farbe der Links in der Seitenleiste */
.widget a:hover {color: white;} /* Linkfarbe in der Seitenleiste beim Überfahren mit der Maus */

/* Suchmaske*/
.search-toggle {background-color: red;} /* Hintergrund für Lupe */
.search-toggle:hover:before, .search-toggle.active:before {color: white;} /* Farb des Lupensymbols */
.search-toggle:hover, .search-toggle.active {background-color: grey;} /* Hintergrund beim Überfahren mit der Maus */
.search-box {background: grey;} /* Hintergrund für Suchmaske */

/* Navigation oben*/
.primary-navigation li > a, .primary-navigation ul ul a {background-color: #9ebe25; color: white;} /* Farbe der Navigation */
.primary-navigation li:hover > a, .primary-navigation li.focus > a, .primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a {background-color: grey; color: white;} /* Farbe beim Überfahren mit der Maus */
.primary-navigation .current-menu-item > a {background-color: #9ebe25; color: grey;} /* Aktive Seite */

/* Navigation links*/
.secondary-navigation li:hover > a, .secondary-navigation li.focus > a, .secondary-navigation ul ul a {background: grey; color: white;} /* Farbe der Navigation */
.site-navigation a:hover,.secondary-navigation ul ul a:hover, .secondary-navigation ul ul li.focus > a {background: grey; color: red;} /* Farbe beim Überfahren mit der Maus */
.site-navigation .current-menu-item > a {color: grey;} /* Aktive Seite */

Die Farben können entweder direkt bezeichnet werden oder mittels einem HTML Code gesetzt werden.

Gruß,

Stefan

Ein WordPress Child Theme anlegen

Um ein WordPress Theme an die eigenen Bedürfnisse anzupassen, ist es am sinnvollsten, ein Child Theme anzulegen. Hier können dann die gewünschten Änderungen vorgenommen werden, ohne das Original Theme verändern zu müssen. Hierbei wird das Parent Theme inkludiert und nur die Änderungen im Child Theme hinterlegt. Hauptsächlich werden die Änderungen im sogenannten CSS (Cascading Style Sheets, zu deutsch „Kaskadierende Stilvorlagen“) vorgenommen. Diese Datei nennt sich bei WordPress style.css und befindet sich im Wurzelverzeichnis des Themes.

Weitere Vorteile dieses Konzeptes sind z.B., dass Updates vom Parent Theme weiter durchgeführt werden können. Außerdem werden in dem Ordner des Child Themes ausschließlich die Dateien abgelegt, die tatsächlich angepasst werden. Dies macht die Handhabung deutlich einfacher.

Voraussetzung um ein Child anzulegen, ist ein FTP-Zugang mit entsprechenden Zugangsdaten zu dem Server auf dem die WordPress Seite gehostet ist. Außerdem wird ein FTP-Client benötigt, um auf die Dateien zugreifen zu können. Für Linux und Windows Systeme kann z.B. FileZilla verwendet werden. Zusätzlich braucht ihr natürlich ein Programm um die Dateien bearbeiten zu können. Hierfür kann ein einfacher Texteditor verwendet werden.

Ich werde das vorgehen anhand von dem Theme Twenty Fourteen beschreiben, da aus meiner Sicht eines der schönsten und für meine Bedürfnisse  am besten passendste von den Standard Themes ist. Das vorgehen ist allerdings auch auf andere Themes übertragbar.

Im root Verzeichnis der WorPress Installation auf dem Server liegt das Theme Twenty Fourten im folgenden Vereichnis:

/wp-content/themes/twentyfourteen

In dem Order /wp-content/themes wird nun ein entsprechender Ordner für das Child Theme angelegt. Hierbei sollte darauf geachtet werden, dass keine Umlaute oder Leerzeichen verwendet werden, z.B. twentyfourteen-child:

/wp-content/themes/twentyfourteen-child

Jetzt muss ein neues Stylesheet erstellt werden und mit folgendem Inhalt gefüllt werden:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/
Description: Twenty Fourteen Child Theme
Author: Ihr Name
Author URI: http://blog.boisen.biz/
Template: twentyfourteen
Version: 1.0.0
*/

@import url("../twentyfourteen/style.css");

/* Theme Anpassungen ab hier einfügen*/

Die erzeugte style.css Datei kann nun in den oben angelegten Ordner hochgeladen werden.

Ein paar Anmerkungen zu dem Inhalt:

Theme Name: Dies ist selbstredend. Einen Namen braucht das neue Theme. Eine Name ist zwingend erforderlich. Kann aber frei gewählt werden.

Theme URI: Hier kann optional die Webadresse der WordPress Seite eingetragen werden, für der das Theme erstellt wurde. Dies ist aber nicht zwingend erforderlich.

Description: Hier kann eine kurze Beschreibung des neuen Themes erfolgen. Auch diese Angabe ist nur optional.

Author: Hier kann der Name des Autors eingetragen werden. Diese Angabe ist aber nicht erforderlich.

Author URI: Zusätzlich kann optional eine Webadresse des Autors mit hinterlegt werden.

Template: Hier muss das Verzeichnis des Parent Themes angegeben werden. Dies Angabe ist zwingend erforderlich, damit WordPress die restlichen Bestandteile des Themes findet. Dabei ist auf die richtige Schreibweise und auf Groß- und Kleinschreibung zu achten.

Version: Hier kann eine Versionsnummer angegeben werden. Auch diese Angabe ist optional.

Die zusätzlich Import Anweisung ist in eigentlich nicht zwingend erforderlich, da das Theme prinzipiell auch ohne funktionieren würde. Allerdings werden dann nur die Angaben verwendet, die in der neuen style.css Datei beschrieben wurden. Sprich: Das alte Stylesheet wird vollständig ersetzt. In der Regel werden die original Stylesheets importiert und nur die Unterschiede in die Datei aufgenommen:

@import url("../twentyfourteen/style.css");

In den Klammern wird der Pfad zur style.css des Parent Themes angegeben. Die Import Anweisung muss zwingend nach dem Header der Datei erfolgen.

Das Child Theme ist nun fertig angelegt und kann in WordPress unter Design ausgewählt werden. Anpassungen können nun direkt mit dem WordPress eigenen Editor (Design->Editor) vorgenommen werden.

Sinnvoll ist es, dass die Änderung nach einer sinnvollen Gruppierung eingetragen werden, damit man sich später besser zurecht findet und die Änderungen leichter nachvollziehen kann:

/* Theme Anpassungen ab hier einfügen*/

/* Änderungen der Farben */

/* Änderungen der Schriften */

...

Zusätzlich kann dem neuen Theme noch mit ein Bild hinterlegt werden, dass dann im WordPress unter Design als Vorschaubild erscheint. Dafür muss einfach ein Bild mit dem Namen screenshot.png und einer Größe von 600×450 Pixel in das Theme Verzeichnis abgelegt werden.

Gruß,

Stefan

 

 

 

WordPress Umzug von Subdomain auf Domain

Heute möchte ich euch zeigen, wie die Domain einer WordPress Installation von einer Subdomain wp.domain.tld auf die normaler Domain domain.tld gewechselt werden kann.

Dies kann nötig sein, wenn man z.B. ein bestehendes CMS System hat und auf WordPress umsteigen möchte. Die WordPress Seite kann dann beliebig mit Inhalt und das Design angepasst werden.
In meinem Fall hatte ich die WordPress Seite auf dem Server in der passenden Verzeichnis wp.domain.tld liegen. Die Daten vom vorherigen CMS habe ich gesichert und das httpdocs Verzeichnis geleert. Hier können dann die WordPress Dateien hinein kopiert werden. Dies ist mit Plesk ganz komfortabler durchführbar.
In der WordPress Datenbank müssen nun die URLs angepasst werden.

Am einfachsten ist dabei einen SQL Befehl in über phpmyadmin abzusetzen:

UPDATE wp_options SET option_value = replace(option_value, 'http://wp.domain.tld', 'http://domain.tld') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://wp.domain.tld','http://domain.tld');
UPDATE wp_posts SET post_content = replace(post_content, 'http://domain.tld', 'http://wp.domain.tld');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://wp.domain.tld','http://domain.tld');

Hierbei muss eventuell noch der Tabellen Präfix angepasst werden. Im Beispiel lautet dieser: wp_

Fertig. Jetzt sollte die Seite schon auf der neuen Domain erreichbar sein.

 

Gruß,

Stefan

FHEM-Server auf einem Rasberry Pi installieren

FHEM (Freundliche Hausautomatisierung und Energie-Messung) ist ein Perl-basiertes Serverprogramm für die Hausautomation. Es lassen sich automatisierte Bedienungen von Aktoren wie zum Beispiel Lichtschaltern oder Heizung sowie der Aufzeichnung von Sensorinformationen wie Raumtemperatur oder Luftfeuchtigkeit realisieren.

Dieser FHEM-Server lässt sich problemlos auf einem Rasperry Pi installieren. Dafür wird folgende Hardware benötigt:

Der Raspberry Pi ist hervorragend für einen 24/7 Betrieb geeignet, da er nur ca. 3 Watt verbraucht.

Beginnend wird die SDHC Speicherkarte mit einer speziellen Linux Distribution für den Raspberry Pi versehen. Wheezy kann direkt auf der offiziellen Raspberry Pi Homepage herunter geladen werden.

Unter Windows lässt sich das Image mit dem win32diskimager (Direktdownload) auf die Karte schreiben. Dieser Vorgang ist nach wenigen Minuten erledigt und die SD-Karte kann direkt in den SD-Reader des Raspberry Pi gesteckt werden.

Nachdem das Image auf die Karte geschrieben wurde, kann die Karte direkt in den Raspberry Pi gesteckt werden. Anschließend muss nur noch der Raspberry Pi mit dem heimischen Netz verbunden werden und mit Strom versorgt werden.

Im Router muss man nun die vergebe IP Adresse (z.B. 192.168.178.21) der Raspberry Pi nachsehen. Anschließend kann mittels PuTTY (Direktdownload) auf den Raspberry Pi zugegriffen werden.

Standard Benutzername: pi

Standard Passwort: raspberry

Zeitzone einstellen, Filesystem erweitern:

sudo raspi-config

Paketliste aktualisieren:

sudo apt-get update

System aktualisieren:

sudo apt-get upgrade

Unnötige Pakete löschen:

sudo apt-get autoremove

Neustart

sudo reboot

Perl-Pakete installieren:

sudo apt-get -f install && sudo apt-get install perl libdevice-serialport-perl && sudo apt-get install libio-socket-ssl-perl && sudo apt-get install libwww-perl

fhem herunterladen und installieren:

sudo wget http://fhem.de/fhem-5.5.deb && sudo dpkg -i fhem-5.5.deb

In das FHEM-Installationsverzeichnis wechseln:

cd /opt

Rechte setzen:

sudo chmod -R a+w fhem && sudo usermod -a -G tty pi && sudo usermod -a -G tty fhem

Webinterface im Webbrowser aufrufen (IP Adresse anpassen):

http://192.168.178.21:8083/fhem

Provider Info trotz anonymisierter IP

Da ich aus datenschutzrechtlichen Gründen die IP Adressen bei Piwik anonymisiere, hatte ich das Problem, dass die Provider Informationen des Besuchers verloren gingen.
Nach längerer Suche im Internet habe ich eine elegante Lösung für dieses Problem gefunden. Bei meiner Piwik Version 1.8.3 muss in der Datei ..\piwik\plugins\Provider\Provider.php ab der Zeile 171 findet man folgende Zeilen:

// In case the IP was anonymized, we should not continue since the DNS reverse lookup will fail and this will slow down tracking
if(substr($ip, -2, 2) == ‚.0‘)
{
printDebug(„IP Was anonymized so we skip the Provider DNS reverse lookup…“);
return;
}

Diese muss in das Folgende geändert werden:

// In case the IP was anonymized, we should not continue since the DNS reverse lookup will fail and this will slow down tracking
if(substr($ip, -2, 2) == ‚.0‘)
{
$ip = substr($ip, 0, -2) . ‚.1‘;
}

Das sollte es gewesen sein.

Natürlich hoffe ich darauf, dass in der nächsten Version diese Änderung nicht mehr erforderlich ist.

Gruß,
Stefan

BIOS Reset bei Thinkpad Lenovo

Ich habe manchmal das Problem, dass bei meinem Lenovo Thinkpad X121e mit Ubuntu 12.04 plötzlich das W-LAN und Bluetooth nicht mehr funktioniert.

Nach längerer Suche habe ich herausgefunden, dass da ein BIOS Reset hilft. Dies ist mit wenigen Schritten erledigt:

  • Netzteil abnehmen.
  • Akku entfernen.
  • Power Taste länger als 30 Sekunden drücken.
  • Akku wieder rein.
  • Einschalten.
  • Mit Enter und F1 ins BIOS.
  • Mit F9 das BIOS auf die default settings setzten.

Jetzt sollte es wieder alles funktionieren.

Gruß,
Stefan

W-LAN mit Ubuntu 12.04 und dem Lenovo Thinkpad X121e

Ubuntu 12.04 läuft sehr gut auf dem Lenovo Thinkpad X121e. Nur der W-LAN Treiber läuft standardmäßig nicht.

Dies lässt sich sehr leicht korrigieren:

Im laufendem System einfach ein Terminal öffnen und mit folgendem Befehl ein Modul deaktivieren:

sudo modprobe -r acer_wmi

Jetzt sollte W-LAN bis zum nächsten Neustart funktionieren. Um eine permanente Funktion zu erreichen, muss das Modul in die Blacklist eingetragen werden. Also einfach die Datei mit einem beliebigen Editor öffnen und editieren, z.B.:

sudo gedit /etc/modeprobe.d/blacklist.conf

Und ans Ende das Modul eintragen:

blacklist acer_wmi

Nach dem Speichern ist auch nach einem Neustart das W-LAN aktiv.

Bitte beachte, dass ich die Anleitung für die W-LAN Karte mit dem Chipsatz rtl8188ce geschrieben habe. Durch den Befehl lspi in einem Terminalfenster lässt sich unter Network Controller der Chipsatz prüfen.

Gruß,
Stefan