Se zpětnou vazbou od čtenářů je občas problém. Neexistuje žádný jednoduchý způsob, jak by mohli dát najevo, že si článek přečetli. Ano, existují komentáře, ale ty slouží spíše k doplnění či navázání na téma. Napsat „dobrý“ je sice morálně hezké, ale na komentář trochu málo. Ano, existují sociální sítě se svými slavnými tlačítky, ale ne všichni jsou jejich fanoušci a ne všechno jsou lidé ochotni sdílet. Právě proto jsem vytvořil velmi jednoduché tlačítko „Přečetl jsem“.

Má sloužit hlavně autoru článku. Pomocí něj mu mohou čtenáři ukázat svůj zájem. Že si článek přečetli, přišel jim užitečný a na oplátku provedou tento klik. Návštěvnost sice poskytne přesnější čísla, ale počet „ručních“ přečtení je zase naopak o kousek cennější a více motivující.

Tlačítko s počtem přečtení jsem zpracoval jako plugin. Ten je velmi jednoduchý a dá se dobře použít i jako taková blank, startovní verze pro vývoj dalších aplikací. Obsahuje po jednom souboru php, js, css a lokalizační balíček. Odkaz na zip soubor naleznete na konci článku. Ten stačí nahrát do svého WordPressu a není třeba nic dalšího nastavovat. Pro pokročilejší uvedu jednotlivé funkce i s popiskem.

CSS

.irt_box {text-align: center;}
.irt_box .irt_button {background-color: #006dcc; display: inline-block; padding: 5px 15px; color: white; text-decoration: none}
.irt_box .irt_button.quest {background-color: #ccc; color: #555; margin-left: 10px}
.irt_box .irt_p {margin-top: 10px; display: block}
.irt_box .irt_thanks {display: none;}
.irt_box.showed .irt_thanks {display: block;}
.irt_box.showed .irt_button {display: none;}

.irt_smartTooltip {background: black; color: white; position: absolute; display: none; z-index: 999; padding: 4px 10px; font-size: 13px; opacity: 0.9;  filter:alpha (opacity=90); border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); max-width: 220px; line-height: 130%}
.irt_smartTooltip.show {display: inline-block}

Ke kaskádovým stylům není mnoho co vysvětlovat. Pokud budete chtít vlastní vzhled, nic vám nebrání upravit si je dle svého. Jenom bych poukázal na používání prefixů, které zabraňuje kolizím s šablonami či pluginy. Hodí se jak pro třídy, tak i pro funkce v php.

JS

jQuery(document).ready(function($) {
		$(".irt_button.quest").irt_smartTooltip();
		$(".irt_button").on("click", function(){
				var a = $(this);
				a.text(a.data("loading"));
				$.post(irtAjax.ajaxurl, {
						action: 'irt_add_read',
						id: a.data('id')
				}, function(data) {
						$(".irt_text").text(data);
						$(".irt_fade").fadeOut(400, function(){
								$(".irt_thanks").fadeIn(400);
						});
				});
				return false;
		})
});

V Javascriptu je hlavně nabindování tlačítka přečetl jsem. To po kliknutí odešle ajax požadavek. Ten má návratovou hodnotu text o počtu přečtení článku. Zároveň zobrazí děkovnou zprávu. V .zip souboru je ještě k nalezení definice mého pluginu pro jquery, které vytváří jednoduchý tooltip.

PHP

Jednotlivé funkce php si projedeme postupně zvlášť.

function irt_init(){
	session_start();
	if(!is_array($_SESSION['irt_readed'])) $_SESSION['irt_readed'] = array();
}

Iniciační funkce nám pouze nastaví session, které budeme používat pro ukládání informace, které příspěvky si uživatel již přečetl, abychom mu znovu nezobrazili button. Po smazání cookies uživatelem o tato data přijdeme, ale nejde o nějaké hodnocení nebo ankety, takže to například nemusíme omezovat na IP adresu.

function irt_lang_init() {
 $plugin_dir = basename(dirname(__FILE__));
 load_plugin_textdomain( 'i-read-this', false, $plugin_dir );
}

Nastaví parametry pro lokalizaci.

function irt_text($read){
	if($read > 0) return sprintf( _n('This article read %s person.', 'This article read %s people.', $read, 'i-read-this'), $read );
	else return __("This post nobody has yet read it. Be the first!", 'i-read-this');
}

Lokalizace hlášky o počtu přečteních. Dlouho jsem bojovat se špatným překladem plurálu. Nakonec byla chyba v pluginu „Codestyling localization“, se kterým jsem lokalizaci vytvářel. Ukázalo se, že používá jiný výpočet pro plurál než má čeština. Nechal jsem si .po soubor vytvořit jiným nástrojem.

function irt_add_box($content) {
	if(is_single()){
		$read = get_post_meta(get_the_ID(), 'iri_read', true);
		if(!$read) $read = 0;
		$class = '';
		if(isset($_SESSION['irt_readed'][get_the_ID()])) $class='showed';
		$infoText = __('Why button I read? Because with it you tell tell me, that you read it from beginning to end and encourage me by writing to others.', 'i-read-this');
	  	$content .= "<div class='irt_box $class'>
					<span class='irt_fade'><a href='#' class='irt_button' data-ID='". get_the_ID() ."' data-loading='" . __('Please, wait...', 'i-read-this') . "'>" . __("I have read", 'i-read-this') . "</a><a href='#' class='irt_button quest' title='". $infoText ."'>?</a></span><span class='irt_thanks'>" . __('Thank you for reading this.', 'i-read-this') . "</span>
					<p class='irt_p'><em><strong class='irt_text'>";
		$content .= irt_text($read);
		$content .= "</strong></em></p></div>";
	}
  	return $content;
}

HTML samotného tlačítko se automaticky přidá na detail každého postu.

function irt_script_enqueuer() {
	$dir = WP_PLUGIN_URL . '/' . str_replace(basename(__FILE__), "", plugin_basename(__FILE__));
	wp_register_style('irt_sheet', $dir . 'i-read-this.css');
	wp_enqueue_style('irt_sheet');
	wp_register_script( "ajax-script", $dir . '/i-read-this.js', array('jquery') );
	wp_localize_script( 'ajax-script', 'irtAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));   
	wp_enqueue_script('ajax-script');   

	add_action('wp_ajax_irt_add_read', 'irt_add_read');
	add_action('wp_ajax_nopriv_irt_add_read', 'irt_add_read');
}

Přidává scripty a styly do šablony. Rovněž definuje akci, která se má vykonat po přijetí ajaxového požadavku.

function irt_add_read(){
	$ID = $_POST['id'];
	$read = get_post_meta($ID, 'iri_read', true);
	if(!$read) $read = 0;
	$read++;
	update_post_meta($ID, 'iri_read', $read);
	clean_post_cache($ID);
	$_SESSION['irt_readed'][$ID] = true;
	echo irt_text($read);
	die();
	exit;
}

Samotná akce vykonaná ajaxovým. Přičte uživatelskému poli irt_readed jedničku a vypíše text. Funkce clean_post_cache by se měla vypořádat s cachováním, aby se po refreshy opravdu objevil nový počet přečtení.

add_action("init",              "irt_init");
add_action('plugins_loaded',    'irt_lang_init');
add_filter('the_content',       'irt_add_box');
add_action('init',              'irt_script_enqueuer');

A na závěr přidání akcí a filtru.

Nezapomeňte si stáhnout slíbený zip: wordpress.fabulator.cz/wp-content/uploads/i-read-this.zip