WordPress Meta-Tag “generator” ohne Plugin entfernen

Kurze Frage, kurze Antwort. Der meta-tag “generator” wird nicht vom verwendeten Theme generiert, sondern stammt aus dem Kern der WordPress-Installation. Wie immer: möchte man eine Kernfunktion von WordPress ändern, sollte man nicht direkt im Kern eingreifen und modifizieren, sondern die gewünschte Änderung in der function.php des verwendeten Themes vornehmen. Von hieraus harkt man sich dann im Kern ein und veranlasst die Änderung.

Warum man die function.php bearbeitet und nicht direkt im Kern

Da sind 2 wichtige Gründe. Erstens zerschießt es dir, sofern Du etwas falsch machst (was man ja aber auch wieder rückgängig machen kann), erstmal nur das Theme und nicht gleich die ganze Website. Zweitens: sobald die neue Version von WordPress erscheint und man updatet, gehen leicht alle Änderungen im Kern verloren. Daher immer in der functions.php Funktionen des Kern ändern.

Ja, und wie nun das meta-tag “generator” ändern?

Einfach folgenden Codeschnipsel in die functions.php des verwendeten Themes eintragen:

remove_action('wp_head', 'wp_generator');

So einfach ist das. Schon ist das meta-tag “generator” aus dem Header von WordPress verschwunden.

Youtube & z-index: die finale Lösung

Manch einer kennt es: man bindet einen Videoplayer von YouTube auf einer Website ein und dieser legt sich scheinbar willkürlich über andere Elemente, obwohl diese Elemente per z-index (und/oder per position:absolute oder position:relative) korrekt angeordnet sind. Dieses oder ähnliche Probleme treten häufig bei inkludierten Inhalten auf. Hier die Lösung für den YouTube-Player.

Das “Problem”

Der YouTube-Player kommt meist in einem iframe daher und ist zudem oftmals noch ein Flashelement. Diese lassen sich manchmal nur schwer in Ihrer Ebene bestimmen. Bevor ich hier nun aber zu weit ins Detail gehe, ganz einfach mal die Lösung, wie man seinen YouTube-Player korrekt positioniert bekommt.

Kurz zeige ich noch den Code, welcher seitens YouTube erzeugt wird, sofern man einen Player auf einer Website einbindet. Er kann von Eurem Code eventuell leicht abweichen, was jedoch nicht tragisch ist. Wichtig ist die URl im Player – beachtet mal diese und vergleicht sie in beiden folgenden Beispielen – dann erkennt Ihr den Unterschied und sogleich die Lösung des “Problems”.

<iframe width="640" height="360" src="http://www.youtube.com/embed/crCtD9cUEs0?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

Die Lösung:

Nun der Code, wie er aussehen muss, damit sich das “Problem” erledigt. Der Code unterscheidet sich in nur einer einzigen Gegenbenheit, der URl. Hier wird das Attribut wmode=transparent angefügt. Sonnst ist alles gleich.

<iframe width="640" height="360" src="http://www.youtube.com/embed/crCtD9cUEs0?feature=oembed&wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

Manuell oder automatisch?

Nun kann man also wmode=transparent manuell in jeden Player integrieren. Wer wie ich, den Player automatisch einbindet (jahahaha, ich liebe automatisch), der kann auch die Ergänzung um das wmode=transparent automatisiert vornehmen lassen. Dazu dient der folgende JavaScript. Am besten wird er im head-Bereich der Website eingefügt. Ich zeige zwei Codes, welche nach dem Prinzip entweder/oder verwendet werden müssen.

Entweder/oder? Geht mal in den Quelltext der Website und schaut, wie die URl im Player aussieht. Wird dort bereits ein Parameter angehängt, muss der folgende Code verwendet werden. Wird in der URl noch kein Parameter übergeben, muss der zweite Codeschnipsel verwendet werden.

Codeschnipsel 1:

$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});

Codeschnipsel 2:

$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"&wmode=transparent");
});
});

Voila!

Nun klebt der YouTube-Player auf jener Ebene, wo er auch sein soll. Man kann nun genüsslich weiterarbeiten. Hat alles geklappt oder brauchst Du Hilfestellung? Du findest den Tipp gut? Ich freue mich auf Dein Kommentar!

WordPress: ohne Plugin Cookies erstellen und abfragen

Jaja, man muss sich notieren, was man sich merken mag… Heute: wie speichert man Cookies mit WordPress ohne Plugin und wie regelt man die Abfrage des Cookies?

An sich ganz einfach. Um das Prinzip einfach zu erklären, gehen wir davon aus, wir möchten einen Besucher begrüßen. Ist es der erste Besuch, zeigen wir ein “Hallo Fremder!”. Sobald der Besucher ein zweites mal auf die Website kommt, möchten wir ihm eine Meldung wie “Schön, Dich wieder zu sehen!”

Der Mechanismus dahinter ist ebenso einfach. Wir prüfen, ob ein (unserer) Cookie schon vorhanden ist. Wenn nicht, machen wie Aktion X, wenn ja, machen wir Aktion Y. Um dies zu realisieren, lassen wir beim ersten Besuch einen Cookie erstellen und prüfen zugleich, ob er schon vorhanden ist. Da der Cookie zwar beim ersten Besuch erstellt wird, aber beim Aufruf der Website noch nicht vorhanden ist, greift der Mechanismus

Cookies mit WordPress erstellen

Um das setzen des Cookies in WordPress zu realisieren, trage folgenden Code in die functions.php deines WordPress-Themes ein:

function set_newuser_cookie() {
if (!isset($_COOKIE['sitename_newvisitor'])) {
setcookie('sitename_newvisitor', 1, time()+1209600, COOKIEPATH, COOKIE_DOMAIN, false);
}
}
add_action( 'init', 'set_newuser_cookie');

Dies setzt einen Cookie namens “sitename_newvisitor”, welcher 2 Wochen lang gültig ist. Wenn Du mehr über die Funktionsweise und den Aufbau von Cookies erfahren magst, empfehle ich setcookie function at PHP.net.

Cookies mit WordPress und PHP überprüfen

Um nun zu prüfen, ob der Besucher erstmalig die Website besucht oder dies ein erneuter Besuch ist, könntest Du nun folgenden PHP-Code verwenden:

if (isset($_COOKIE['sitename_newvisitor'])) {
echo 'Schön, Dich wieder zu sehen!';
}
else {
echo 'Hallo Fremder!';
}

Nun bist Du an der Reihe!

Hat Dir das kleine Tutorial geholfen? Hat alles bei Dir funktioniert oder ist Dir das setzen eines Cookies mit WordPress immernoch ein Rätsel? Ich freue mich über Dein Feedback!

Individuelle Pinterest-Button ohne Plugin

Pinterest. Bekannt, geliebt, teilweise vergöttert. Pinterest bietet auf seiner Website auch einen Generator für den wohl bekannten “Pin-It-Button”. Schön und gut ist dieser Generator aber nicht gerade. Individualisierungswünsche lassen sich damit nicht realisieren. Dieses kleine Tutorial zeigt, wie man den “Pin-It-Button” anpasst bzw. individualisieren kann.

Pin-It-Button anpassen – garnicht so schwer

Zuvor sollte man sich die Frage stellen: was will ich eigentlich? Wie soll der Button angepasst werden und aussehen? Um nicht auf hunderte, gar tausende Individuallösungen eingehen zu müssen, zeige ich das Grundgerüst jener gewollten Individualität. Zuerst zeige ich den “Pin-It-Button”, wie er vom Generator auf Pinterest ausgegeben wird. Dies ist die Variante ohne Zähler.

Zuerst der Code, welcher im Code dort positioniert wird, wo der Button erscheinen soll.

<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Zuzüglich muss noch eine kleiner Code auf der Website zwischen <body> und </body> eingefügt werden, welcher eine JavaScript-Datei einbindet. Diese Datei liegt auf dem Server von Pinterest. Generell ist es ja zu bevorzugen, wenn man möglichst wenige Dinge von externen Servern einbindet – aber das ist eine andere Geschichte.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Obige Beispiele sehen auf den ersten Blick so aus, als könne man einfach das Bild, welches vom Link umschlossen wird, austauschen und somit frei wählen, welches Element den Pinterest-Link erhalten soll. Falsch. Funktioniert nicht. Viel mehr wird die Grafik auch von JavaScript bestimmt, welche im body eingebunden wird. Lässt man die JavaScript-Datei einfach weg, funktioniert die Funktion nicht…

Pin-It-Button für Individualisten

Wir erkennen also: Einerseits benötigen wir die Funktion der JavaScript-Datei, andererseits müssen wir den Code umschreiben. Nun könnte man den Code aus der Datei extrahieren und in eine eigene externe Datei auslagern. Könnte man. Um mein Beispiel zu veranschaulichen, habe ich den benötigten JavaScript einfach direkt im von uns benötigten Link integriert. Somit steht es mir frei, welches Element ich wie zum Pin-It-Button umwandeln will.

<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'>
 
Hier nun der zu verlinkende Inhalt. Ob Bild, Text, Container - was auch immer.
 
</a>

Da nun der benötigte JavaScript schon im Link enthalten ist, kann auf die Einbindung der externen JavaScript-Datei von Pinterest verzichtet werden.

Eigentlich ganz einfach, oder? Wenn man weiß, wie… Du schneidest das nicht ganz mit oder hast Fragen? Schreibe ruhig einen Kommentar. Oder Du hast einfach nicht das Können oder Lust, um diese Technik in die eigene Website zu integrieren? Nicht schlimm – dafür gibt es ja wellseo – einfach anrufen oder anschreiben.