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

شاید تابحال وب سایت هایی را مشاهده کرده اید که این امکان را به کاربر می دهند تا یا یک کلیک متون صفحه را بزرگ و یا کوچک کند. امروز قصد داریم نحوه انجام اینکار با استفاده از 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);
        });
    });
});
//3 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 به چشم می خورد که به وسیله آن ها می توانید متن را بزرگ و کوچک کنید.

نظرات و دیگر موارد
اگر این قالب را دوست دارید امتیاز دهید :
8 دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. خدا خیرت بده عالی بود ممنون

  2. چرا برای وبلاگ همچین ابزاری وجود نداره؟؟؟؟ینی نمیشه ؟؟؟؟؟؟

  3. آرسین در ژانویه 5, 2014 ساعت 8:37 ب.ظ  گفته :

    سلام خدمت شما. ببخشید کد چرخه مطلب وردپرس دقیقاً کجاست؟
    هرکاری می کنم فونت رو تغییر نمیده

  4. سلام.من دوتا سوال ازتون داشتم:
    1-وقتي از خاصيت font-face استفاده مي كنم ، مثلا فونت يكان ، كناره هاي فونت به صورت بريده يا تيز در مياد…من چطوري ميتونم فونتم رو smooth كنم؟

    2-من وقتي ميخوام فونتي رو در وردپرس آپلود كنم مينويسه : بارگذاري نشد – به دليل مسائل امنيتي. حالا من فونتم رو كجا بايد آپلود كنم؟

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

  5. خدا ازت راضی باشه داداش گلم. کلی بهم کمک کردی. فقط یه راهنمایی دیگه هم بهم کمک کنی عالی میشه اونم اینه که چجوری متن داخل اون کادر رو بصورت کج ننویسه، راست بنویسه؟ و اینکه وقتی میرم روش رنگش آبی بشه نه مشکی؟
    اینم لینکش تو سایتم:
    http://www.premiumiha.ir/%D8%B3%D9%84%D8%A7%D9%85-%D8%AF%D9%86%DB%8C%D8%A7/
    واقعا نمیدونم چجوری تشکر کنم ازتون

    پاسخ شما:
    برای بنده که آبی میشه. عزیز دل برخی چیز ها به مرورگر برمی گرده و css که شما هیچ یک رو تنظیم نکردید.

  6. سلام. یه سوال داشتم شاید اینجا جاش نبود چون جایی شبیه تر به سوالم از اینجا پیدا نکردم.
    من یه سایت دارم ولی یه کم آماتور هستم میخواستم تو پست هایی که میزارم از یه سری یوزر و پسورد کنم که داخل کادر باشند (مثل کادرهای ادیتور)
    دقیقا شبیه این
    http://freepremiumaccounts-dxteam.com/share-online-premium-account-cookies-free.html
    که وقتی میری روی یوزر یا پسورد خودش آبی بشه. من از وردپرس استفاده میکنم. جوابم بدید خیلی ممنون میشم هیچ جا پیدا نکردم جوابمو

    پاسخ شما:
    این کار براحتی قابل انجامه اما باید به input یکسری تگ های خاص بدید که نمیشه تو نظر گذاشت. با مرورگر کروم به سایت مربوطه برید کلیک راست کنید و سپس کلمه موجود در فیلد رو جستجو کنید. سپس تمام کد input رو کپی کنید.