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

دسته بندی ها : آموزشگاه 20 ژانویه 2014 خانه وردپرس 902 بازدید

شاید تابحال وب سایت هایی را مشاهده کرده اید که این امکان را به کاربر می دهند تا یا یک کلیک متون صفحه را بزرگ و یا کوچک کند. امروز قصد داریم نحوه انجام اینکار با استفاده از jQuery را بررسی کنیم.


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

<?php the_content(); ?>

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

<div>
<?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 &amp;&amp; newSize >= min) {
jQuery(element).css('font-size', newSize + 'px');
}

 

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

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

نظرات کاربران

    دیدگاهتان را بنویسید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    Time limit is exhausted. Please reload CAPTCHA.

    این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    لینک کوتاه :
    0