WordPress için Twitter tarzı sayfalama (daha fazla – more )

Son 2 haftadır toplanan iletişim mesajlarında en çok sorulan iki soruya buradan cevap yazacağım, insanlar gördükleri her şeyi benim olsun istiyor herhalde doğa böyle, siteye yeni bir şey yapsak hemen soruluyor aslında bu doğal yani kötü bir şey yok bunda şikayetçi değilim şu kriterlere uydukları sürece her şeyi sorabilir insanlar web sitesi üzerinden.

Burada cevaplayacağım ilk soru sitenin altındaki “Daha fazla” bağlantısı, Twitter tarzı sayfalama. Lütfen dikkat edin ben amatör arkadaşlar için yazıyorum.

Bu sitenin temasına ekledğimiz Twitter tarzı sayfalama Tweetpress isimli temaya ait, o temadaki fonksiyonu buna uyarladık o temayı da inceleyebilirsiniz.

Kendi temasına bunu eklemek isteyenler şu adımları yapacaklar;
1- tweetpress.zip isimli dosyayı indirin içindekileri tema dosyalarının(https://wolkanca.com/wp-content/themes/kullandiginiz_tema/) bulunduğu klasör içine atın.

2 -Bu fonksiyon jQuery ile çalışıyor bu yüzden temanızın üst kısmına jQuery koyacağız, temanızda jQuery yoksa temanın üst kısmına şunu yazın: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type="text/javascript"></script>

3- 1. maddede tema dosyalarının içine attığınız 2 Javascript dosyasını da 2. maddede olduğu gibi sitenizin temasının üst kısmına yazın, şöyle: <script src="<?php bloginfo('template_directory'); ?>/jquery.cookie.js” type="text/javascript"></script> <script src="<?php bloginfo('template_directory'); ?>/jquery.scrollTo-min.js” type="text/javascript"></script>

4- Aynı şekilde sitenin temasının üst kısmına(header.php) yine şunu ekleyin:

<?php
$paged = intval(get_query_var('paged'));
if($paged==undefined||$paged==0)$paged=1;
$maxpages = $wp_query->max_num_pages;
$uri = get_bloginfo('template_url') . '/tweetpress.js.php?paged=' . $paged . '&amp;maxpages=' . $maxpages;
if(isset($_POST['status'])) {
$txt = $_POST['status'];
if(post_twitter_status($txt)) {
$uri .= '&status=' . urlencode($txt);
}
}
?>
<script type="text/javascript” src="<?php echo $uri; ?>"></script>

Yukarıdakilerin toplamı sitenin üst kısma aşağıdakileri yazacaksınız:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.cookie.js” type="text/javascript"> <script src="<?php bloginfo('template_directory'); ?>/jquery.scrollTo-min.js” type="text/javascript">
<?php
$paged = intval(get_query_var('paged'));
if($paged==undefined||$paged==0)$paged=1;
$maxpages = $wp_query->max_num_pages;
$uri = get_bloginfo('template_url') . '/tweetpress.js.php?paged=' . $paged . '&amp;maxpages=' . $maxpages;
if(isset($_POST['status'])) {
$txt = $_POST['status'];
if(post_twitter_status($txt)) {
$uri .= '&status=' . urlencode($txt);
}
}
?>
<script type="text/javascript” src="<?php echo $uri; ?>"></script>

Üst kısmı hallettik şimdi sayfalama yapacağımız bölgeyi belirleyeceğiz. Javascript e göre sayfalanacak bölgenin class değeri posts olmalı. Temanın index.php, varsa archive.php dosyalarını açıp içinde <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> bulup hemen üzerine <div id="timeline” class="posts"> ekleyin. Daha sonra <?php endwhile; ?> yazan kısmı bulun hemen altına </div> <div id="pagination"> <a href="javascript:void(0);” id="more” class="round more">daha fazla…</a></div> ekleyin.

Örnek arşiv sayfası;

<?php get_header(); ?>

<div id="content” class="narrowcolumn” role="main">

<div id="timeline” class="posts">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

<h3><a href="<?php the_permalink() ?>” rel="bookmark"><?php the_title(); ?></a></h3>

<?php the_content(__('(more…)')); ?>

<p class="postmetadata"><?php _e("Filed under:"); ?> <?php the_category(',') ?> &#8212; <?php the_tags(__('Tags: '), ', ', ' &#8212; '); ?> <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__(’edit This')); ?></p>

</div>

<?php endwhile; ?>

</div>

<div id="pagination">
<a href="javascript:void(0);” id="more” class="round more">daha fazla…</a>
</div>

<?php else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Hepsi bu kadar şimdi CSS den sitil vermek gerekiyor ona da örnek style.css dosyasına aşağıdakiler ekleyebilrisiniz veya kendinize göre yapın;

#pagination {width:490px;text-align:center;}
.more {background:#fff;border-color:#ddd #aaa #aaa #ddd;border-style:solid;border-width:1px;display:block;font-size:14px;font-weight:bold;height:22px;line-height:1.5em;margin-bottom:6px;padding:6px 0;text-align:center;text-shadow:1px 1px 1px #fff;width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;color:#333;-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.3);}
.more:hover{border:1px solid #bbb;text-decoration:none;}
.more:active{color:#666;}.more::-moz-focus-inner{border:0;}

Bir sonraki girdi şu sayfanın sağ solundaki ok işaretleri hakkında olacak ikinci en çok sorulan soru da oydu, ben elimden geldiği kadar basit anlatmaya çalıştım bunu size babanız yapmaz, kolay gelsin.