ایجاد کلید های بزرگنمایی و کوچک نمایی متن

شاید تابحال وب سایت هایی را مشاهده کرده اید که این امکان را به کاربر می دهند تا یا یک کلیک متون صفحه را بزرگ و یا کوچک کند. امروز قصد داریم نحوه انجام اینکار با استفاده از jQuery را بررسی کنیم.
نمونه این امر را می توانید در وب سایت phpnuke.ir مشاهده کنید. حال برای افزودن این قابلیت به وردپرس چه کار باید کرد؟
ابتدا به ویرایشگر پوسته خود بروید، فایل single.php رو انتخاب کنید و به دنبال تابع زیر بگردید:

<?php the_content(); ?>

سپس برای آن یک کلاس با نام resize تعریف کنید. نتیجه شبیه زیر خواهد شد:

<div class="resize">
<?php the_content(); ?>
</div>

سپس دستور زیر را پس از بسته شدن چرخه مطلب وردپرس درج کنید:

<div style="font-family: Tahoma;"><a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a></div>

حالا یک فایل با نام resize.js ایجاد کنید و کد زیر را درون آن قرار دهید. (این فایل را با NotePad می توانید بسازید)

// in khat jeloye ejra shodane code ra ghabl az etmame bargozarie matlab migirad.
jQuery(document).ready(function() {
    // dar in khat elemente marboot be 'A+' dar safhe fh evente jQuerye click() ertebat dade mishavad.
    jQuery('#increase-font').click(function(event) {
        // in khat jeloye ejra shodane amale pishfarze evente click() ra migirad.
        event.preventDefault();
        // evente each() jQuery roye har elementi ke shamele classe 'resize' mibashad emaal mishavad.
        jQuery('.resize').each(function() {
            // farakhaniye yek tabeye shakhsi baraye afzayesh size text
            changeTextSize(this, change);
        });
    });
    // dar in khat elemente marboot be 'A-' dar safhe fh evente jQuerye click() ertebat dade mishavad.
    jQuery('#decrease-font').click(function(event) {
        // in khat jeloye ejra shodane amale pishfarze evente click() ra migirad.
        event.preventDefault();
        // evente each() jQuery roye har elementi ke shamele classe 'resize' mibashad emaal mishavad.
        jQuery('.resize').each(function() {
            // farakhaniye yek tabeye shakhsi baraye kaheshe size text
            changeTextSize(this, -change);
        });
    });
});
//۳ moteghayer be tartib baraye tarife hoodooe size text va meghdar afzayesh/kahesh estefade mishavand.
var min = 8, max = 100, change = 2;
//tarife yek tabeye shakhsi ba 2 parametr shamele elemente morede nazar baraye resize kardan va size morede nazar.
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');
    }

سپس یک پوشه با نام js درون پوشه قالب خود ایجاد کنید و این فایل را در این پوشه آپلود کنید.
سپس کد زیر را به فایل functions.php قالب خود اضافه کنید.

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' );

تمام شد! هم اکنون در پایین هر مطلب شما دو کلید +A و -A به چشم می خورد که به وسیله آن ها می توانید متن را بزرگ و کوچک کنید.