Der nächste Gedanke: ist ja schnell gemacht, einfach doppelte Größe einbinden und fertig. Allerdings findet Google das wiederum alles andere als lustig, was sogar nachvollziehbar ist: warum 300px laden, wenn nur 150 Pixel genutzt werden?

Die Lösung ist dabei so einfach wie effizient und wird von WordPress schon länger genutzt: srcset. Mit diesem Attribut kann man einfach für verschiedene Fälle den Browser entscheiden lassen, welche Bild-Variante er darstellt. Das ist hilfreich bei Responsive Design, aber eben auch wenn es darum geht, Retina-Displays die passende Variante zu liefern.

Ein einfaches Beispiel

Hier mal eine Variante für non-Retina-Displays:

Und hier die gleiche Variante für Retina-Displays:

Größentechnisch ein ordentlicher Unterschied. Logisch ist dann auch, dass die zweite Variante in verkleinerter Darstellung schärfer wird, da mehr Pixel auf weniger Platz. Das Endergebnis sieht dann so aus:

(wer diesen Beitrag ohne Retina-Display aufruft, wird keinen Unterschied zum ersten Bild sehen).

Wie das Ganze nun also umsetzen? Einfach so:

<img title=“Big Balls Hosting“ src=“https://www.nginxwordpresshosting.com/wp-content/uploads/2017/01/big-balls.png“ srcset=“https://www.nginxwordpresshosting.com/wp-content/uploads/2017/01/big-balls.png 1x, https://www.nginxwordpresshosting.com/wp-content/uploads/2017/01/big-balls_retina.png 2x“ alt=“Big Balls Hosting“ />

Schaut man sich das srcset-Attribut genauer an, sieht man, dass dort zwei Angaben gemacht sind, nämlich einmal ein Bild für 1x und einmal für ein Bild für 2x. Und genau da passiert die Magic, die dem Browser sagt: „Kannst du kein Retina, nimm die Variante für 1x. Bist du cool und kannst Retina, dann nimm die Variante für 2x“. Und das macht dann auch keine Probleme mit Googles Pagespeed-Tool.

Wer es noch umfassender haben möchte, schaut sich mal das Plugin WP Retina 2x an. Haben wir hier nicht getestet und auch nicht im Einsatz, allerdings kam es mir bei der Suche nach meinem Problem immer wieder unter die Nase. Aber bedenkt: Retina-Bilder nehmen auch physischen Speicherplatz auf der Festplatte ein – und ihr hättet wieder ein Plugin mehr im Einsatz. Wer nur ein paar Bilder optimieren will, greift zur eben beschriebenen DIY-Variante.

Der Beitrag Retina-Grafiken nutzen, wenn es sinnvoll ist erschien zuerst auf Big Balls Hosting.

Wer ein bisschen länger blogt und auch über eine gewisse Reichweite verfügt, der wird irgendwann die ersten ernsthaften Anfragen bekommen, in denen er für Geld oder anderweitige Gegenleistungen über ein Produkt oder eine Aktion berichten Soll. Sponsored Posts nennt man das und ist mittlerweile in der Bloglandschaft Gang und Gäbe. Dabei gibt es aber diverse Stolpersteine, die vor allem juristisch zu beachten sind.

Unter anderem wäre da natürlich die Kennzeichnung sämtlicher Links als nofollow, aber auch die Kennzeichnung des Beitrags als Werbung. Denn im Gegensatz zum nofollow-Tag, das hauptsächlich für Suchmaschinen da ist, dient die Kennzeichnung dem Leser – dieser soll eindeutig sehen, dass es sich hier um einen Beitrag handelt, für den Geld o.ä. geflossen ist.

Das ist nicht nur dem Leser gegenüber fair, sondern auch rechtlich so vorgeschrieben und gilt nicht nur für große Medien-Häuser, sondern auch für kleine Pups-Blogs. Manch einer nimmt diese Kennzeichnung durch die Überschrift vor, in dem er oder sie einfach „Werbung“ dazu schreibt, möglich sind auch „Sponsored“ oder „Advertorial“. Hier sei zunächst zu beachten, dass „Sponsored“ wohl nicht ausreicht, die Formulierung „Werbung“ scheint da sicherer – allerdings sind wir hier auch keine Juristen, sondern nur Nerds.

Wer auf die Nummer mit der Überschrift nicht steht, für den hab ich hier ein bisschen Code, der das Ganze ein wenig abwandelt. Letztendlich erzeugt dieser Code in der Artikelansicht im Backend eine kleine, zusätzliche Box. Klickt ihr diese an, wird im entsprechenden Gegenstück im Frontend die Kennzeichnung zur Werbung aktiviert.

Der Code stammt dabei nicht von uns, sondern Adrian Korte, wurde von uns allerdings abgewandelt – die Gründe dafür gibt es nach dem technischen Kram.

In die functions.php packt ihr am besten am Ende folgenden Code:

/** Sponsor Box **/

	// add a meta box to your edit/new post screen
	add_action( 'add_meta_boxes', 'meta_dingens_box_add' );
	function meta_dingens_box_add()
	{
		// name and define box and it's appearance
		add_meta_box( 'dingens-box-id', 'Werbung', 'meta_dingens_box', 'post', 'side', 'high' );
	}

	function meta_dingens_box($post)
	{
	// $post is already set, and contains an object: the WordPress post
  global $post;

  // check if value is set
  $values = get_post_custom( $post->ID );
  $check = isset( $values['meta_dingens_box_check'] ) ? esc_attr($values['meta_dingens_box_check'][0]) : '';

  // We'll use this nonce field later on when saving.
  wp_nonce_field( 'meta_dingens_box_nonce', 'meta_dingens_box_noncename' );

  	// Show checkbox on screen
  	echo (
  		'<input type="checkbox" id="meta_dingens_box_check" name="meta_dingens_box_check"'. checked($check, 'on', false) .'/>'.
  		'<label for="meta_dingens_box_check">Bei diesem Beitrag handelt es sich um Werbung</label>'
  	);
  }

  // save values in database
  add_action( 'save_post', 'meta_dingens_box_save' );
  function meta_dingens_box_save( $post_id )
  {
  	// enable autosave
  	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

  	// if our nonce isn't there, or we can't verify it, bail
  	if( !isset( $_POST['meta_dingens_box_noncename'] ) || !wp_verify_nonce( $_POST['meta_dingens_box_noncename'], 'meta_dingens_box_nonce' ) ) return;

  	// if our current user can't edit this post, bail
  	if( !current_user_can( 'edit_post' ) ) return;

  	// get value of checkbox
  	$chk = isset( $_POST['meta_dingens_box_check'] ) ? 'on' : 'off';

  	// save value to database, as post_meta
  	update_post_meta( $post_id, 'meta_dingens_box_check', $chk );
  }

In Zeile 8 bestimmt ihr die Überschrift, in diesem Beispiel steht dort einfach „Werbung“. Genauso könnt ihr in Zeile 26 die Beschreibung der Box ändern. Das dient aber eher kosmetischer Natur und hat keinen Einfluss auf die Funktion. Wer da was anderes stehen haben will, ändert es – der Rest lässt es, wie es ist.

Nun fügt ihr folgenden Code an die Stelle in euerm Template ein, an dem die Kennzeichnung passieren soll (am besten in die single.php und – sofern nötig – auch in die index.php. Wichtig ist, dass es auch auf der Startseite, Kategorie-Seite, Archiv-Seite usw. zu sehen ist. Einfach überall.):

  // get value for meta_box
	$dingensbutton = get_post_meta( get_the_ID(), 'meta_dingens_box_check', true );
	// If value is 'on', show hint
	if ( $dingensbutton == 'on' ) {
		echo '<div class="dingens-tag">Werbung</div>';
	};

Das ist eigentlich schon alles. Die Beiträge, bei denen ihr anschließend die Checkbox in der Artikelansicht gesetzt habt, bekommen dann das „Werbung“ angezeigt, dass ihr eben eingefügt habt.

In eurer css-Datei könnt ihr nun noch mittels Ansprache von .dingens-tag entsprechend ein bisschen was fürs Auge tun – ich hab zum Beispiel bei mir den Hintergrund rot gemacht, sodass es wie ein Button aussieht und auch gleich ins Auge fällt. Das darf aber gern jeder so machen, wie er möchte.

Genauso sei es euch natürlich freigestellt, dass ihr „dingens“ in irgendwas anderes umbenennt (dann aber in beiden Codeschnipseln), genauso wie das „Werbung“ im Frontend. Wie gesagt, wir sind keine Juristin und haben es auch nur so gebastelt, wie wir glauben, dass es richtig ist. Aber beachtet dabei folgendes:

Wenn ihr euch den Code genauer anschaut oder jetzt einfach mal per STRG+F bzw. CMD+F sucht, werdet ihr sehen, dass in dem Code recht häufig „dingens“ vorkommt. Zum Vergleich, hier findet ihr den Originalcode. Das steht da nicht drin, weil ich unbedingt den Code verändern wollte, sondern aus folgendem Grund:

Adblocker.

Jeder kennt sie, manch einer liebt sie, die meisten Webseitenbetreiber hassen sie. Mir sind die Dinger recht egal – soll jeder machen, wie er will. Wer sind wir, dass wir unseren Usern vorschreiben wollen, wie man das Netz benutzen soll?

Die Dinger haben aber das Problem, dass alles, was irgendwie nach Werbung aussieht, geblockt wird. Schaut man sich den Originalcode noch mal an, sieht man dort statt „dingens“ häufig „adbutton“ und ähnliches. Und genau da liegt das Problem: eure soeben mühsam eingebaute Werbekennzeichnung wird einfach vom Adblocker weggeblockt.

Das macht nicht nur eure Arbeit ein wenig Zunichte, sondern führt auch dazu, dass bei manchen die juristisch erforderliche Kennzeichnung einfach nicht erfolgt. Und das wollen wir ja nicht.

Bittegernedanke.

Der Beitrag Sponsored Posts (auch bei Adblockern) richtig kennzeichnen erschien zuerst auf Big Balls Hosting.

Früher oder später muss sich wohl jeder mit einem Blog auch mit dem Thema SEO auseinandersetzen. Ich weiß, ein Themenbereich, der nahezu unerschöpflich ist und die meisten Tipps, die man bekommt, sind entweder unfassbar allgemein gehalten oder so speziell, dass jeder etwas anderes erzählt. Wer mag, kann sich da gern einlesen, wir beschäftigen uns hier nur recht rudimentär damit. Sitemap Google ins Gesicht schmeißen, am besten keine toten Links auf der Seite haben, es mit Keywords nicht übertreiben … ihr wisst schon.

Was gern mal vernachlässigt wird, gerade weil es mitunter nervige Arbeit machen kann, sind Bilder. Alt- und title-Tags werden ganz gern mal vernachlässigt, können aber bei Google durchaus ein bisschen Traffic erzeugen. Und doch haben wirklich die wenigstens Bock drauf, am Ende eines (längeren) Beitrags auch da noch Hand anzulegen.

Es gibt allerdings einen recht einfachen Kniff, wie ihr einfach die Beitragsüberschrift sowohl für den alt- als auch den title-Tag verwenden könnt:

function add_alt_tags($content) {
	global $post;
	preg_match_all('/<img (.*?)\/>/', $content, $images);
	if (!is_null($images)) {
		foreach($images[1] as $index => $value){
			$new_img = str_replace('<img', '<img title="' . $post->post_title . '" alt="' . $post->post_title . '"', $images[0][$index]);
			$content = str_replace($images[0][$index], $new_img, $content);
			}
		}
	return $content;
}

Einfach damit in die functions.php und fertig. Beachtet aber, dass der img-Code in eurem Beiträg nicht „physisch“ verändert wird, die Magic passiert lediglich direkt auf eurer Seite.

Wieder mal kein Hexenwerk, aber 5 Minuten Zeit investiert spart im Nachgang jede Menge Arbeit.

Der Beitrag Automatische alt- und title-Tags bei Bildern erschien zuerst auf Big Balls Hosting.

Womöglich betrifft es nur einen kleinen Teil der WordPress-Nutzer, mich hat das damals aber vollkommen irre gemacht. Folgendes Szenario: ihr schreibt auf eurem Blog nicht allein, sondern zu zweit, zu dritt oder zu-vielt. In den WordPress-Einstellungen habt ihr eine E-Mail-Adresse eingetragen, die als Verteiler an alle Autoren fungiert – schließlich habt ihr ein Gemeinschaftsprojekt, da können alle auch Bescheid wissen, wenn etwas los ist.

Gleichzeitig hat aber auch jeder User seine eigene Mail-Adresse in seinem Profil hinterlegt, schließlich fetzen eigene Mail-Postfächer noch immer am meisten. WordPress allerdings hat die Eigenart, zum Beispiel bei Kommentaren eine Mail an den Beitrags-Autor zu schicken und eine an den Seiten-Admin. An sich ja auch cool, so bekommt der Admin alles mit. Im oben beschriebenen Szenario ebenfalls ganz cool, denn so bekommen auch alle im Verteiler befindlichen Adressaten mit, wenn irgendwo eine Diskussion startet.

Doof wird es allerdings für den Beitrags-Autor selbst. Denn der bekommt die E-Mails mal eben doppelt. Sicher kann man das ignorieren, auf Dauer wird es für den einen oder anderen aber nervig. Abhilfe schafft dabei eine kleine Plugindatei, die ihr einfach in euer Pluginverzeichnis schmeißt und wie ein normales Plugin aktiviert:

<?php

/**
 * Plugin Name: Disable comment/trackback/pingback notifications emails except for admins.
 * Plugin URI:  http://wordpress.stackexchange.com/a/150141/26350
 */

add_filter('comment_notification_recipients', '__return_empty_array', PHP_INT_MAX);
add_filter('comment_moderation_recipients', function ($emails) {

		// only send notification to the admin:
		return array(get_option('admin_email'));
	}, PHP_INT_MAX);

Was macht das Plugin? Es sendet schlichtweg alle E-Mails von WordPress lediglich an die Admin-Mail-Adresse und ausschließlich da hin. Natürlich könnt ihr auch Zeile 08 bis 13 einfach in eure functions.php hauen, ich bevorzuge allerdings den Plugin-Weg, da man so auch schnell mal die Funktion wieder deaktivieren kann.

Wer es auch haben will, einfach den ganzen Code kopieren (Profi-Tipp: einfach Doppelklick auf den Code, dann bekommt ihr die RAW-Version), in eine Datei schmeißen und diese von mir aus in disable_duplicate_mails.php benennen. Anschließend in das eigene Pluginverzeichnis schmeißen, im WordPress-Backend das neue Plugin aktivieren und fertig.

Wer beispielsweise bei seinen System-Mails – die coolen Leute nennen das übrigens transactional e-mails – sowas wie Mailchimp, Mandrill, Sparkpost o.ä. einsetzt, kann so sicher die eine oder andere Mark sparen.

Der Beitrag Nervige Doppel-Mail-Notifications abstellen erschien zuerst auf Big Balls Hosting.

Mittlerweile ist WordPress in Version Version 4.5.2 verfügbar, aber bereits mit Version 3.8 kam eine Verschlimmbesserung, die mich persönlich stark störte: die Spaltenanzahl im WordPress-Dashboard war nicht mehr veränderbar. Gerade wenn man nicht all zu viele Widgets nutzen möchte oder manches Widget einfach deutlich mehr Breite in Anspruch nehmen muss – Social Metrics Pro ist da so ein Kandidat – können die engen Spalten einfach nur stören. Gleichzeitig will nicht jeder Platz verschwenden oder hat sonst irgendeine Macke, die diese Änderung nicht mag.

Die Lösung ist allerdings recht simpel, kopiert einfach folgenden Code in eure functions.php:

function so_screen_layout_columns( $columns ) {
	$columns['dashboard'] = 2;
	return $columns;
}

add_filter( 'screen_layout_columns', 'so_screen_layout_columns' );
function so_screen_layout_dashboard() {
	return 2;
}
add_filter( 'get_user_option_screen_layout_dashboard', 'so_screen_layout_dashboard' );

Die Magic geschieht in der dritten Zeile von unten – hier einfach die gewünschte Anzahl der Spalten eintragen und fertig. Wir nutzen klassisch die Zwei-Spalten-Ansicht, da diese auch auf mobilen Geräten noch vernünftig aussieht, hier kann aber natürlich jeder selbst rumspielen und nach Belieben anpassen.

Einfach, aber effektiv.

Der Beitrag Änderung der Spaltenanzahl im WordPress-Dashboard erschien zuerst auf Big Balls Hosting.