jFontSize para WordPress

jFontSize es un plugin muy chulo que permite aumentar o disminuir la fuente de una web. En esta entrada veremos cómo adaptarlo a WordPress.

warholl

archivado en: WordPress / 27 febrero, 2013

Entrada desactualizada.

Ver en su lugar: mi font-size

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í:

  1. (function($){
  2. jQuery.fn.jfontsize = function(opcoes) {
  3. var jQuerythis=jQuery(this);
  4. var defaults = {
  5. btnMinusClasseId: '#jfontsize-minus',
  6. btnDefaultClasseId: '#jfontsize-default',
  7. btnPlusClasseId: '#jfontsize-plus',
  8. btnMinusMaxHits: 10,
  9. btnPlusMaxHits: 10,
  10. sizeChange: 1
  11. };
  12. if((jQuery.isArray(opcoes))||(!opcoes)){
  13. opcoes = jQuery.extend(defaults, opcoes);
  14. } else {
  15. defaults.sizeChange = opcoes;
  16. opcoes = defaults;
  17. }
  18. var limite=new Array();
  19. var fontsize_padrao=new Array();
  20. jQuery(this).each(function(i){
  21. limite[i]=0;
  22. fontsize_padrao[i];
  23. })
  24. jQuery('#jfontsize-minus, #jfontsize-default, #jfontsize-plus').removeAttr('href');
  25. jQuery('#jfontsize-minus, #jfontsize-default, #jfontsize-plus').css('cursor', 'pointer');
  26. /* Ação do Botão A- */
  27. jQuery('#jfontsize-minus').click(function(){
  28. jQuerythis.each(function(i){
  29. if (limite[i]>(-(opcoes.btnMinusMaxHits))){
  30. fontsize_padrao[i]=jQuery(this).css('font-size');
  31. fontsize_padrao[i]=fontsize_padrao[i].replace('px', '');
  32. fontsize=jQuery(this).css('font-size');
  33. fontsize=parseInt(fontsize.replace('px', ''));
  34. fontsize=fontsize-(opcoes.sizeChange);
  35. fontsize_padrao[i]=fontsize_padrao[i]-(limite[i]*opcoes.sizeChange);
  36. limite[i]--;
  37. jQuery(this).css('font-size', fontsize+'px');
  38. }
  39. })
  40. })
  41. /* Ação do Botão A */
  42. jQuery('#jfontsize-default').click(function(){
  43. jQuerythis.each(function(i){
  44. limite[i]=0;
  45. jQuery(this).css('font-size', fontsize_padrao[i]+'px');
  46. })
  47. })
  48. /* Ação do Botão A+ */
  49. jQuery('#jfontsize-plus').click(function(){
  50. jQuerythis.each(function(i){
  51. if (limite[i]<opcoes.btnPlusMaxHits){
  52. fontsize_padrao[i]=jQuery(this).css('font-size');
  53. fontsize_padrao[i]=fontsize_padrao[i].replace('px', '');
  54. fontsize=jQuery(this).css('font-size');
  55. fontsize=parseInt(fontsize.replace('px', ''));
  56. fontsize=fontsize+opcoes.sizeChange;
  57. fontsize_padrao[i]=fontsize_padrao[i]-(limite[i]*opcoes.sizeChange);
  58. limite[i]++;
  59. jQuery(this).css('font-size', fontsize+'px');
  60. }
  61. })
  62. })
  63. };
  64. })(jQuery);

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

  1. 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.

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

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

  1. function carga_jqueries() {
  2. wp_register_script ('jfontsize', get_template_directory_uri().'/js/jfontsize.js', array('jquery'),false);
  3. wp_enqueue_script( 'jfontsize' );
  4. wp_register_script('loadjfontsize', get_template_directory_uri() . '/js/loadjfontsize.js', array('jquery'),false);
  5. wp_enqueue_script( 'loadjfontsize' );
  6. }
  7. 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:

  1. <!-- font-size -->
  2. &#124;&#124; <?php _e('Fuente: ','tannhauser'); ?>
  3. <a id="jfontsize-minus" href="#" class="jfontsize-button">A-</a>
  4. <a id="jfontsize-default" href="#" class="jfontsize-button">A</a>
  5. <a id="jfontsize-plus" href="#" class="jfontsize-button">A+</a>
  6. <!-- #font-size -->

8) En style.css los ponemos bonicos:

  1. /* Jsize */
  2. .jfontsize-button {
  3. font: bold 12px arial;
  4. padding: 3px;
  5. border: solid 1px #ccc;
  6. }
  7. .jfontsize-button:hover {
  8. text-decoration: none;
  9. background: #333;
  10. color: #fff;
  11. border: solid 1px #333;
  12. }
  13. .jfontsize-disabled, .jfontsize-disabled:hover {
  14. color: #aaa;
  15. border: solid 1px #eee;
  16. background: #eee;
  17. }

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...

  1. <div class="fuente_9 interlineado_160 columna_estrecha fontsize">
  2. <span itemprop="articleBody"><?php the_content(); ?></span>
  3. </div>

Si consigo sacar dos segundos, lo convierto en un plugin, aunque seguro que debe de existir ya algo parecido...

|| Tags: , ,

valoración de los lectores sobre jFontSize para WordPress

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.