A+ / A- Özelliği ile Font Boyutlandırma Özelliği

Başta haber siteleri olmak üzere bir çok site ziyaretçilerinin içerikleri daha kolay okuyabilmesi için A+ / A- Özelliği ile Font Boyutlandırma Özelliğini kullanmaktadır. Bu özellik sayesinde sitenizde belirteceğiniz bir alan içinde bulunan yazı fontunu büyütüp küçültebilmekteyiz. Ziyaretçilerin sitenizde içerikleri daha kolay ve rahat inceleyebilmesi sitenize sürekli ziyaretçiler kazandırmakta büyük rol oynamaktadır.

Kaynak Dosya İndir Demo İncele

Orta derece kod bilgisi olan herkes bu düzenlemeyi sorunsuz olarak yapabilecektir. Öncelike tema dosyalarınızı yedeklemenizi öneririz! Düzenlemeye geçmeden önce gerekli dosyaları indirmek için makalenin sonunda bulunan indirme linkini kullanabileceğinizi belirtmek isterim.

İlk olarak single.php dosyamızda fontları büyütülecek yazı alanını belirlemeliyiz. Bu alan content olarak yazı içeriğinin sayfaya bastırıldığı alan olacaktır. Biz örnek amaçlı olarak WordPress standart temalarından olan Twenty Twelve temasını kullanacağız. Kendi temanıza göre sizde aynı isimde dosyalarda düzenleme yapmalısınız.

Temamızın single.php dosyasını Notepad++ ile açarak content verisinin çekildiği alanı bularak gerekli düzenlemeyi yapıyoruz.

<?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="blogizma_resize">
			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
		   </div><!-- #blogizma_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(); ?>

13 ve 16.ncı satırda bulunan değer temanın içerik alanıdır biz bu alanı bir div içine alarak kendi css değerimizle belirteceğiz.

<div class="blogizma_resize">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
</div><!-- #blogizma_resize -->

şeklinde düzenlememizi yaptık, şimdi gerekli fonksiyonu temamızın functions.php dosyasına ekleyeceğiz.

Ekleyeceğimiz fonksiyon ile resize işlemi için gerekli JavaScript dosyasının yolunu belirteceğiz, ayrıca ziyaretçi siteye girdiğinde bu dosyayı yüklemesini sağlayacağız.

 wp_enqueue_script( 'resize', get_bloginfo('stylesheet_directory'). '/js/resize.js', array( 'jquery' ) );

Kaynak dosyaları içinde bulunan resize.js dosyasını tema dizininde js klasörünüze yüklemeniz gereklidir.