امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

ساخت تغییردهنده اندازه فونت مطالب وردپرس با jQuery

امروزه قبول اینکه وردپرس یکی از محبوب‌ترین سیستم‌های مدیریت محتوی به‌شمار می‌رود برای کمتر کسی سخت می‌باشد. حال اگر این CMS قدرتمند با jQuery ترکیب شود، می‌تواند شگفتی‌ساز شود! در این آموزش با ساخت یک تغییردهنده اندازه فونت برای محتوای سایت، شما را با یک نمونه از فواید استفاده از jQuery در وردپرس آشنا خواهیم ساخت.

فرض کنید شما در حال خواندن مطلبی در یک سایتی می‌باشید و به‌خاطر اندازه کوچک یا بزرگ فونت‌های آن مطلب، خواندن آن برای‌تان دشوار است. در اینجاست که نیاز یک تغییردهنده اندازه فونت احساس می‌شود. در این آموزش ما با ایجاد 2 دکمه +A و -A به بازدیدکننده این امکان را خواهیم داد تا با کلیک بر روی آنها اندازه فونت بخش مورد نظر را کوچک یا بزرگ کند.

مرحله اول : تعیین بخش مورد نظر برای تغییر اندازه فونت آن

این مرحله مهمترین قسمت ساخت این تغییردهنده اندازه فونت می‌باشد که در آن باید element مورد نظرتان را به این تغییردهنده ربط دهید. با اینکه می‌توانید این تغییردهنده را در صفحه نخست سایت‌تان (index.php) قرار دهید، اما توصیه می‌شود آن را در صفحه single.php قرار داده تا تنها موقع خواندن یک مطلب استفاده شود.

جهت اینکه بتوانیم اندازه فونت یک element را قابل تغییر بکنیم، بایستی آن را داخل یک div با کلاس منحصربه‌فردی قرار دهیم. از آنجایی که ما از پوسته دو هزار و دوازده وردپرس برای این آموزش استفاده می‌کنیم، فایل single.php ما بعد از اضافه کردن کد مورد نظر که محتوی را داخل کلاس resize قرار می‌دهد، به قرار زیر خواهد بود :

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>
    <div id="primary" class="site-content">
        <div id="content" role="main">
            <div class="resize">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
            </div><!-- #resize -->
                <nav class="nav-single">
                    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->
                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template( '', true );
                ?>
            <?php endwhile; // end of the loop. ?>
        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

در قسمت highlight شده در کد بالا، div را با کلاس resize طوری قرار دادیم که فقط بخش body نوشته را شامل شود.

مرحله دوم : اضافه کردن لینک‌های تغییر اندازه فونت

قدم بعدی، اضافه کردن 2 عدد لینک در صفحه است که به‌عنوان دو دکمه برای تغییر اندازه متن استفاده خواهند شد. یکی برای کوچک کردن و دیگری برای بزرگ کردن. این لینک‌ها را در هر جای صفحه به غیر از داخل حلقه(loop) وردپرس، می‌توانید قرار دهید. در زیر کدهای صفحه single.phpمان را مشاهده می‌فرمایید و خط highlight شده مربوط به لینک‌های‌مان می‌باشد که هر کدام را با یک ID منحصربه‌فرد مشخص کرده‌ایم.

<?php
/**
 * The Template for displaying all single posts.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
get_header(); ?>
    <div id="primary" class="site-content">
        <div id="content" role="main">
             <div class="resize">
            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', get_post_format() ); ?>
              </div><!-- #resize -->
                <nav class="nav-single">
                    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
                    <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span>
                    <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span>
                </nav><!-- .nav-single -->
                <?php
                    // If comments are open or we have at least one comment, load up the comment template
                    if ( comments_open() || '0' != get_comments_number() )
                        comments_template( '', true );
                ?>
            <?php endwhile; // end of the loop. ?>
        </div><!-- #content -->
    </div><!-- #primary -->
<p><a id="increase-font" href="#">[ A+ ] </a>/<a id="decrease-font" href="#">[ A- ] </a> </p>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

مرحله سوم : اضافه کردن جادوی jQuery

اکنون زمان آن است که کدهای jQuery را به پوسته‌مان اضافه کنیم تا لینک‌های تغییردهنده فونت عمل کنند. در داخل پوشه مربوط به فایل‌های جاوا اسکریپت پوسته‌تان یک فایل با نام resize.js ساخته وکدهای زیر را در آن وارد نمایید. اگر همچین پوشه‌ای داخل پوشه پوسته‌تان وجود ندارد، بهتر است یکی با نام js بسازید و فایل resize.js را در آن قرار دهید.

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

مرحله چهارم : ارجاع اسکریپت در وردپرس

قدم آخر برای این کار اضافه کردن یک مرجع برای resize.js در وردپرس می‌باشد تا کدهای‌مان را اجرا کند. به‌طور پیش‌فرض سیستم وردپرس دارای کتابخانه jQuery می‌باشد و ما تنها کافیست اسکریپت را داخل پوسته ارجاع دهیم. برای انجام این کار فایل 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 اندازه فونت آنها را تغییر دهید. همچنین می‌توانید با کدهای CSS مناسبی دکمه‌ها را استایل داده و در محل مورد نظرتان نمایش دهید.

امیدوارم این آموزش به دردتان خورده باشد.

موفق باشید

منبع

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

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

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.