jFontSize para WordPress

Entrada desactualizada.

•

jFontSize es un plugin de jQuery desarrollado por Frederico Soares Vanelli que permite al usuario aumentar o disminuir el tamaño de la fuente de un contenido. (Se puede ver cómo funciona en cualquier entrada de mi nuevo blog, Tannhäuser Cabaret).

ejemplo_fontsize

Voy con prisa, por lo que me limito a escribir un post medio telegráfico para explicar cómo incorporarlo a un tema de WordPress.

1) Se descarga el plugin en su versión "Uncompressed"

2) Lo reescribimos en modo no conflicto, es decir, lo dejamos así:

(function($){
jQuery.fn.jfontsize = function(opcoes) {
var jQuerythis=jQuery(this);
var defaults = {
btnMinusClasseId: '#jfontsize-minus',
btnDefaultClasseId: '#jfontsize-default',
btnPlusClasseId: '#jfontsize-plus',
btnMinusMaxHits: 10,
btnPlusMaxHits: 10,
sizeChange: 1
};
if((jQuery.isArray(opcoes))||(!opcoes)){
opcoes = jQuery.extend(defaults, opcoes);
} else {
defaults.sizeChange = opcoes;
opcoes = defaults;
}
var limite=new Array();
var fontsize_padrao=new Array();
jQuery(this).each(function(i){
limite[i]=0;
fontsize_padrao[i];
})
jQuery('#jfontsize-minus, #jfontsize-default, #jfontsize-plus').removeAttr('href');
jQuery('#jfontsize-minus, #jfontsize-default, #jfontsize-plus').css('cursor', 'pointer');
/* Ação do Botão A- */
jQuery('#jfontsize-minus').click(function(){
jQuerythis.each(function(i){
if (limite[i]>(-(opcoes.btnMinusMaxHits))){
fontsize_padrao[i]=jQuery(this).css('font-size');
fontsize_padrao[i]=fontsize_padrao[i].replace('px', '');
fontsize=jQuery(this).css('font-size');
fontsize=parseInt(fontsize.replace('px', ''));
fontsize=fontsize-(opcoes.sizeChange);
fontsize_padrao[i]=fontsize_padrao[i]-(limite[i]*opcoes.sizeChange);
limite[i]--;
jQuery(this).css('font-size', fontsize+'px');
}
})
})
/* Ação do Botão A */
jQuery('#jfontsize-default').click(function(){
jQuerythis.each(function(i){
limite[i]=0;
jQuery(this).css('font-size', fontsize_padrao[i]+'px');
})
})
/* Ação do Botão A+ */
jQuery('#jfontsize-plus').click(function(){
jQuerythis.each(function(i){
if (limite[i]<opcoes.btnPlusMaxHits){
fontsize_padrao[i]=jQuery(this).css('font-size');
fontsize_padrao[i]=fontsize_padrao[i].replace('px', '');
fontsize=jQuery(this).css('font-size');
fontsize=parseInt(fontsize.replace('px', ''));
fontsize=fontsize+opcoes.sizeChange;
fontsize_padrao[i]=fontsize_padrao[i]-(limite[i]*opcoes.sizeChange);
limite[i]++;
jQuery(this).css('font-size', fontsize+'px');
}
})
})
};
})(jQuery);

3) Tras la última línea, indicamos el nombre de la clase sobre la que debe actuar. Por ejemplo, ".fontsize":

jQuery('.fontsize').jfontsize();

4) Guardamos el archivo, por ejemplo llamándolo jfontsize.js en nuestra carpetita js, donde guardamos todos los script de forma ordenadica 😛

5) En otro archivo, que podemos llamar loadjfontsize.js y que también guardamos el /js, ponemos la llamada al script.

jQuery(document).ready(function($) {
jQuery('.fontsize').jfontsize();
});

6) Añadimos los scripts a functions, cargándolos en el footer (false):

function carga_jqueries() {
wp_register_script ('jfontsize', get_template_directory_uri().'/js/jfontsize.js', array('jquery'),false);
wp_enqueue_script( 'jfontsize' );
wp_register_script('loadjfontsize', get_template_directory_uri() . '/js/loadjfontsize.js', array('jquery'),false);
wp_enqueue_script( 'loadjfontsize' );
}
add_action( 'wp_enqueue_scripts', 'carga_jqueries' );

7) En single.php o content-single.php, depende del tema, añadimos los botoncicos para aumentar o disminuir la fuente:

|| <?php _e('Fuente: ','tannhauser'); ?>
<a id="jfontsize-minus" href="#" class="jfontsize-button">A-</a>
<a id="jfontsize-default" href="#" class="jfontsize-button">A</a>
<a id="jfontsize-plus" href="#" class="jfontsize-button">A+</a>

8) En style.css los ponemos bonicos:

/* Jsize */
.jfontsize-button {
font: bold 12px arial;
padding: 3px;
border: solid 1px #ccc;
}
.jfontsize-button:hover {
text-decoration: none;
background: #333;
color: #fff;
border: solid 1px #333;
}
.jfontsize-disabled, .jfontsize-disabled:hover {
color: #aaa;
border: solid 1px #eee;
background: #eee;
}

9) Y ya solo falta añadir la clase .fontsize donde queremos que actúe (en content-single o single o donde sea). Por ejemplo, en Tannhäuser Cabaret, solo aumento el contenido del post, y no los asides, headers...