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).
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:
- <!-- font-size -->
- || <?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>
- <!-- #font-size -->
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...
- <div class="fuente_9 interlineado_160 columna_estrecha fontsize">
- <span itemprop="articleBody"><?php the_content(); ?></span>
- </div>
Si consigo sacar dos segundos, lo convierto en un plugin, aunque seguro que debe de existir ya algo parecido...
