24 noviembre 2012 ~ Comentarios desactivados en Botón para cambiar el tamaño de la letra en WordPress

Botón para cambiar el tamaño de la letra en WordPress

Podemos apreciar que en muchos sitios web del Estado, como así también de diversas instituciones, poseen un botón para regular el tamaño de la letra, así poder facilitar al público la comprensión del texto que se publica en su sitio. Afortunadamente existe una manera para introducir un botón para cambiar el tamaño de la letra en un blog montado en la plataforma WordPress.

aumentar disminuir letra wordpress

Con la ayuda de la tecnología jQuery, podremos configurar un botón para que aparezca en determinada parte de nuestro blog, permitiendo que nuestros lectores puedan regular el tamaño de las letras de una sección (ejemplo: los artículos individuales). La posibilidad de poder cambiar el tamaño de la letra de un sitio web, ayuda a aquellas personas que tienen ciertas dificultades para apreciar lo que normalmente puede hacer una persona sin problemas visuales.

Introducir botón para cambiar la letra en WordPress

Agradecemos a la gente de Tutsplus que publicó el tutorial, y además ofrece una demostración en línea.

Para proceder a configurar la instalación del botón con el cual podremos regular el tamaño de las letras de nuestro tema, tendremos que comenzar editando los archivos de nuestro theme de WordPress. Si necesitas que se pueda regular únicamente la sección del artículo individual, te recomendamos que edites el archivo single.php, y agregues el siguiente código dentro de la etiqueta <content>:

<div class="resize">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            </div><!-- #resize -->
Luego del paso anterior, tendrás que proceder a instalar los botones o en cuestión. Copiarás el código que te proporcionaremos a continuación, y lo pegarás en la sección en donde creas que es más adecuado (visible a tus lectores). Código:
<p><a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a> </p>
Podrás apreciar que en tu blog se han agregado dos botones: A+ y A-
Con la ayuda de un programa FTP, tendrás que entrar a la carpeta js, que se encuentra en la carpeta del theme del sitio, y crear un archivo de texto (bloc de notas) llamado resize.js, el cual contendrá el siguiente código:
// This prevents the execution of the code before the document is finished loading.
jQuery(document).ready(function() {
    // The 'A+' element  in the page is associated with the jQuery click() event.
    jQuery('#increase-font').click(function(event) {
        // This prevents the default action of the click() event from being triggered.
        event.preventDefault();
        // The jQuery each() event interates over each elements belonging to the 'resize' class
        jQuery('.resize').each(function() {
            // Call to a custom function to increase the text size
            changeTextSize(this, change);
        });
    });
    // The 'A-' element  in the page is associated with the jQuery click() event.
    jQuery('#decrease-font').click(function(event) {
        // This prevents the default action of the click() event from being triggered.
        event.preventDefault();
        // The jQuery each() event interates over each elements belonging to the 'resize' class
        jQuery('.resize').each(function() {
            // Call to a custom function to decrease the text size
            changeTextSize(this, -change);
        });
    });
});
// Three variables have been used to define range of the text size and the increment/decrement value respectively.
var min = 8, max = 100, change = 2;
// Defines a custom function with two parameters determining the element to be resized and the size
function changeTextSize(element, value) {
    var currentSize = parseFloat(jQuery(element).css('font-size'));
    var newSize = currentSize + value;
    if (newSize <= max && newSize >= min) {
        jQuery(element).css('font-size', newSize + 'px');
    }
}
El último paso es hacer referencia a esa función jQuery desde las funciones de nuestro theme. Para ello tendremos que entrar al archivo fuctions.php y agregar la siguiente función:
function wptuts_resize_text () {
    // The array('jquery') is used to create dependency on the jQuery library in order to use it properly.
    wp_enqueue_script( 'resize', get_template_directory_uri() . '/js/resize.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wptuts_resize_text' );

Aunque parece algo complicado, solamente es copiar y pegar códigos. Esta utilidad para aumentar y disminuir el tamaño de la letra de nuestro blog de WordPress es muy necesaria y fácil de implementar.

 

Social Share Counters
Tags:

Comments are closed.