In WordPress können eigene Benutzerroller erstellt werden, falls die 5 von WordPress vorgegebenen Benutzerrollen nicht den Bedürfnissen entsprechen. Neue Benutzerrollen ermöglichen eine bessere Differenzierung der einzelnen Rollen und Benutzer und somit eine weit bessere Möglichkeit, individuell auf den jeweiligen Benutzer (und auf seine Rolle) eingehen zu können.

Man könnte auch die bereits vorhandenen Benutzerprofile anpassen, was jedoch nicht immer die beste Lösung ist, da sich hier leichter Fehler bei der Editierung der Rechtevergabe einschleichen können. Auch sind neue Benutzerrollen besser, wenn es sich um Benutzerrollen handelt, welche der eigentlichen Verwaltung des WordPress ziemlich fern sind. Hier im Beispiel sind das Autoverkäufer und Interessenten, welche in unserem Theme „MotorMarket“ erstellt werden.

Neue Benutzerrollen: Verkäufer und Interessenten

Beide Benutzerrollen werden nicht nur der eigentlichen Verwaltung der Website aus Sicherheitsgründen möglichst fern gehalten und bedürfen daher eine komplett angepasste Rechtevergabe. Auch unterscheiden sich die beiden Rollen im Beispiel erheblich und müssen mit komplett anderen Rechten ausgestattet werden.

Aber keine Sorge: was hier kompliziert klingt, ist einfacher als wahrscheinlich gedacht und schnell getan.

Los gehts: functions.php

Eine neue Benutzerrolle wird zeitgleich mit seinen Berechtigungen erstellt. Die Rolle wird also benannt und sogleich definiert. Der PHP-Code, welcher dies tätigt, wird in die functions.php geschrieben (oder alternativ inkludiert). Nachdem die function.php entsprechend erweitert wurde, muss der Webserver die functions.php einmal neu laden und die neue Rolle ist verfügbar.

(Wie bitte? Die functions.php neu laden? Keine Sorge, das tut sie automatisch bei jedem Seitenaufruf deines WordPress, egal ob der Aufruf im Front- oder Backend stattfindet – also schon beim nächsten Aufruf, um beispielsweise einen neuen Benutzer in dieser Rolle zu erstellen.)

Folgender Code in der functions.php erstellt die Benutzerrolle „Seller“:

$newuser = add_role( 'seller', __('Seller'), array() );
Leicht verständlich: Die Variable ist austauschbar und beinhaltet den Befehl add_role (Rolle hinzufügen), welche den Slug seller bekommt. Als Name wird Seller gewählt, was sich hier im Beispiel dann aber auch leicht übersetzen lassen wird. Zum Schluss kommt ein Array, welches die Angaben zur Berechtigungsvergabe enthält. Obiges Beispiel würde zwar tatsächlich eine Benutzerrolle erstellen, welche so aber keine Funktionalität hat.

Daher: folgender Code erstellt die Benutzerrolle „Seller“ und gibt ihr im Array sogleich Berechtigungen und Restriktionen:

$newuser = add_role( 'seller', __('Seller'), array(
'read' => true, // true erlaubt das reguläre lesen
'edit_posts' => true, // Erlaubt eigene Beiträge (Posts) zu editieren
'edit_pages' => false, // Verbietet Seiten (Pages) zu editieren
'edit_others_posts' => false, // Verbietet Beiträge anderer Benutzer zu editieren
'create_posts' => true, // Erlaubt neue Beiträge (Posts) zu erstellen
'manage_categories' => false, // Verbietet Beitrags-Kategorien zu managen
'publish_posts' => true, // Erlaubt das Veröffentlichen eigener Beiträge (Andererseits würden sie als Entwurf gespeichert werden)
'edit_themes' => false, // Verbietet das Theme zu editieren
'install_plugins' => false, // Verbietet neue Plugins zu installieren
'update_plugin' => false, // Verbietet Plugins zu aktualisieren
'update_core' => false // Verbietet den WordPress-Core zu updaten
)
);

Die so erstellte Benutzerrolle hat nun sehr angepasste Berechtigungen. Um diese Rolle, und die Gruppe der Benutzer derer, aber auch weitestgehend von wichtigen Einstellungen fern zu halten, wie weiter oben im Beitrag als Ziel definiert, sollten noch weitere Zugangs- und Sicherheitsmechanismen eingebaut werden – was aber nicht Inhalt des Artikels ist. Benutzerrolle erstellt, funktioniert, alles fein.

Im Grunde kann nun der Eintrag aus der functions.php wieder gelöscht werden, was auch in Bezug auf Dateigröße und Ladegeschwindigkeit Sinn macht. Ich empfehle jedoch, den Vorgang ordentlich zu protokollieren, um später einfach nachschauen zu können, welcher Benutzerrolle welche Rechte gegeben wurden.

Fragen, Anregungen oder konstruktive Kritik? Ich freue mich über den Dialog!

Benutzerdefinierte Felder für weitere Informationen zu den Benutzerprofilen in WordPress hinzufügen? Ohne Plugin! Es gibt 2 Möglichkeiten. Einerseits weitere Felder im Bereich Kontaktangaben hinzufügen oder andererseits einen kompletten Bereich, beispielsweise Weitere Informationen genannt, selbst erstellen.

WordPress Benutzerprofil: Benutzerdefinierte Felder ohne Plugin hinzufügen

Möglichkeit 1: weitere Felder zum Bereich Kontaktangaben

Die schnellste und einfachste Methode. Auch wenn diese zusätzlichen Felder im Backend unter Kontaktangaben angezeigt werden, müssen sie nicht zwangsläufig für Kontaktangaben genutzt werden. Auch ein Input-Feld ist nicht zwingend notwendig. Auch Textboxen, Datums- oder Farbwahl wäre denkbar.

Folgender PHP-Code ist klein, leicht anpassbar und wird in die functions.php kopiert und dort den eigenen Anforderungen angepasst.

function modify_contact_methods($profile_fields) {

// Add new fields
$profile_fields[‚twitter‘] = ‚Twitter Username‘;
$profile_fields[‚facebook‘] = ‚Facebook URL‘;
$profile_fields[‚gplus‘] = ‚Google+ URL‘;

return $profile_fields;
}
add_filter(‚user_contactmethods‘, ‚modify_contact_methods‘);

Ausgabe der gespeicherten Informationen

Alle Felder sind nun über
get_the_author_meta();
ansprechbar. Für das Feld twitter wäre es also:
get_the_author_meta('twitter');

Möglichkeit 2: einen eigenen Bereich erstellen

Vom Code her etwas umfangreicher, aber immernoch übersichtlich. Dieses Beispiel erstellt einen Bereich namens „Informations for seoite“ und erstellt 3 Felder, um Angaben zu sozialen Profilen zu machen. Dies kann natürlich leicht angepasst werden. Der Code ist sehr leicht und selbsterklärend. Bei Fragen, bitte ich um Kommentare oder E-Mails.

Der Code wurde in Englisch gehalten und zur Übersetzung vorbereitet. Arbeitet man im Team und/oder soll eine mehrsprachigkeit umgesetzt werden oder wenn man einfach nur sauber arbeiten will, empfiehlt sich diese Vorgehensweise. Einheitlich im Code und übersetzt über eine entsprechende Sprachdatei.

In die functions.php kopieren und den eigenen Anforderungen anpassen:

/**
* More informations on user profiles
*/

add_action( ’show_user_profile‘, ‚extra_user_profile_fields‘ );
add_action( ‚edit_user_profile‘, ‚extra_user_profile_fields‘ );

function extra_user_profile_fields( $user ) { ?>
<h3><?php _e(„Informations for seoite“, „blank“); ?></h3>

<table class=“form-table“>
<tr>
<th><label for=“fbfanpage“><?php _e(„Facebook Fanpage“); ?></th>
<td>
<input type=“text“ name=“fbfanpage“ id=“fbfanpage“ value=“<?php echo esc_attr( get_the_author_meta( ‚fbfanpage‘, $user->ID ) ); ?>“ class=“regular-text“ /><br />
<span class=“description“><?php _e(„Please enter your Facebook Fanpage like https://facebook.com/example.“); ?></span>
</td>
</tr>
<tr>
<th><label for=““twitterusername“><?php _e(„Twitter username“); ?></label></th>
<td>
<input type=“text“ name=“twitterusername“ id=“twitterusername“ value=“<?php echo esc_attr( get_the_author_meta( ‚twitterusername‘, $user->ID ) ); ?>“ class=“regular-text“ /><br />
<span class=“description“><?php _e(„Please enter your Twitter username without @.“); ?></span>
</td>
</tr>
<tr>
<th><label for=“pinterestusername“><?php _e(„Pinterest username“); ?></label></th>
<td>
<input type=“text“ name=“pinterestusername“ id=“pinterestusername“ value=“<?php echo esc_attr( get_the_author_meta( ‚pinterestusername‘, $user->ID ) ); ?>“ class=“regular-text“ /><br />
<span class=“description“><?php _e(„Please enter your Pinterest username.“); ?></span>
</td>
</tr>
</table>
<?php }

add_action( ‚personal_options_update‘, ’save_extra_user_profile_fields‘ );
add_action( ‚edit_user_profile_update‘, ’save_extra_user_profile_fields‘ );

function save_extra_user_profile_fields( $user_id ) {

if ( !current_user_can( ‚edit_user‘, $user_id ) ) { return false; }

update_user_meta( $user_id, ‚fbfanpage‘, $_POST[‚fbfanpage‘] );
update_user_meta( $user_id, ‚twitterusername‘, $_POST[‚twitterusername‘] );
update_user_meta( $user_id, ‚pinterestusername‘, $_POST[‚pinterestusername‘] );
}

Ausgabe der gespeicherten Informationen

Wie auch bei der ersten Methode ist die Ausgabe kinderleicht und exakt gleich:
<?php get_the_author_meta(); ?>
Für den Benutzernamen von twitter wäre das dann:
<?php get_the_author_meta('twitterusername'); ?>

Wenn wir eine neue Website erstellen und Enfold als WordPress-Theme verwenden, ist eine der ersten Modifikationen: den Credit-Link zu kriesi.at im Footer löschen. Das funktioniert schnell und unkompliziert per Shortcode.

Enfold-Theme Credit-Link aus dem Footer entfernen

Um den den Credit-Link aus dem Sockel zu entfernen besucht man die Enfold-Einstellungen (seines Enfold-Child-Themes). Im Reiter Footer findet sich das Eingabefeld Copyright. Dort gibt man folgenden Shortcode ein und eventuellen Text oder HTML. Der Shortcode beseitigt alle Credit-Vorgaben und ermöglicht die eigene Gestaltung.

[nolink]

Beispielsweise könnte dann der Code im Feld Copyright wie folgt aussehen:

[nolink]<a href="https://powerpaul.de" target="_blank"><img src="https://powerpaul.de/wp-content/uploads/2016/08/cropped-logo-powerpaul-208x60.png" alt="powerpaul" /></a>

Ich hoffe, ich konnte helfen. Du hast Fragen oder konstruktive Kritik? Wir freuen uns auf den Dialog!

Bilder verursachen Ladezeit. Wir sprechen nicht nur von Datenmenge, sondern auch von HTTP-Anfragen: jedes einzelne Bild verursacht eine neue HTTP-Anfrage, welche den Seitenaufbau verlangsamen. Statistiken zeigen, das eine Website oftmals geschlossen wird, bevor sie überhaupt geladen ist. Warum? Zu lange Ladezeit. Lazy Load hilft (nicht nur) diese Gegebenheit erfolgreich zu umgehen.

Lazy Load: Websites und Bilder auf der Überholspur

Was ist Lazy Load?

“Lazy Load” ist die Bezeichnung für eine Technik, Bilder erst dann zu laden, wenn sie gebraucht werden. Dein Besucher scroolt also über deine Website und sobald ein Bild im Viewport (der sichtbare Bereich deiner Website im Browser) erscheinen soll, wird es geladen. Nicht schon beim Seitenaufrauf.

Alternativ gibt es Lösungen, welche Bilder schon dann laden, wenn sie kurz vor dem Viewport sind. Beispielsweise 100 oder 200 Pixel. Mit hoher Wahrscheinlichkeit wird dein Besucher das Bild also gleich sehen wollen – Du hat also einen kleinen zeitlichen Vorsprung das Bild schon zu laden.

Warum ist Lazy Load wichtig?

User-Experience

Die Benutzererfahrung (neudeutsch User-Experience) wird durch Lazy Load steigen, da deine Website schlanker ist und schneller lädt. Fühlen sich die Besucher auf deiner Website wohl, bleiben sie länger und empfehlen sie öfters weiter. Bleiben sie länger, passiert was? Sie können deine Website besser erforschen, lesen mehr Inhalte und Du wirst somit relevanter für Google. Wenn deine Besucher deine Website empfehlen, passiert was? Doofe Frage…

Site-Speed

Google wird registrieren, das deine Website wesentlich schlanker ist, was nur von Vorteil ist. Google hat bereits mehrmals betont, das schlanke, schnell ladende Websites bevorzugt werden. Sicher, das ist nur ein Faktor, um in den SERPs zu steigen, aber es ist einer. Wieder einer. Und sei es nur ein Kleiner. Und demnächst optimierst Du den nächsten Punkt. Dann ist es wieder einer. Am Ende hast Du eine High-Performance-Website. Tut das alles Not? Frage Dich, was deine Mitbewerber alles tun und ob Du besser dastehen willst. Sodann, alles klar.

Traffic, Traffic, Traffic!

Ebenso erwähnenswert ist der Trafficverbrauch deines Servers. Der wird nämlich sinken. Ebenso der Trafficverbrauch jener Besucher. Bei Flatrates am Home-PC mag das noch irrelevant sein. Nicht aber unbedingt, wenn sie mit Mobilgeräten deine Website besuchen.

Und wenn die Trafficdrosseln der Internetrprovider erst einmal eingeführt sind oder diverse Netzagenturen entscheiden welche Websites bevorzugt schnell ausgeliefert werden, spätestens dann solltest Du Dir Gedanken machen, wie Du deine Website möglichst schlank hältst.

Die Zeit kommt, in welcher 80000er-DSL-Leitung zzgl. Flatrate und uneingeschränkter Nutzung der Vergangenheit angehören. Besser Du bereitest Dich schon jetzt darauf vor, statt später das böse erwachen zu bekommen.

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 functions.php des verwendeten Themes vornehmen. Von hieraus harkt man sich dann im Kern ein und veranlasst die Änderung.

WordPress Meta-Tag “generator” ohne Plugin entfernen

Warum man die functions.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.

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.

Youtube & z-index: die finale Lösung

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!

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.

Individuelle Pinterest-Button ohne Plugin

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.