Kategoriler
Blog

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.

Wordpress için Twitter tarzı sayfalama

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.tr/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.

WOLKANCA

Volkan Yılmaz

Volkan Yılmaz #SEO, Digital Marketing, Growth Hacking #wolkanca volkan@volkanyilmaz.com.tr

“WordPress için Twitter tarzı sayfalama (daha fazla – more )” için 12 yanıt

dediklerinizi harfiyen yapıyorum ama olmuyor bir türlü daha fazla kısmına basıldığında hiçbirşey gelmiyor. benim kullandığım temada jquery var zaten ondan mı kaynaklanıyor acaba?

sayın eduman temada jquery varsa(versiyon 1.4.2 son versiyon olmalı muhtemelen önceki versiyonlarda çalışmayabilir) tekrar eklemeyin.

tema kodlarınızı http://pastebin.com/ a yapıştırıp bize burada yazarsanız bakıp yanlış olan nedir bakarız ayrıca site adresinizi de yazın yorumunuza.

kolay gelsin.

sayın eduman henüz bakmadım gönderdiklerinze fakat şöyle bir durum var header da kodların sıralaması önemli en üste jquery sicript olsun ve en altlarda da /head dan hemen önce de diğer kodlar yani jquery.cookie.js, query.scrollto-min.js php echo $uri;.

sorun büyük ihtimalle böyle bir durumdandır veya başka script uygulamalarla çakışıyordur.

aynı yaptıklarımı default temada da denedim yine olmadı. demek ki ben bir yerde yanlış yapıyorum. 🙂 teşekkür ederim tekrardan ben uğraşıcam dedikleriniz doğrultusunda

acaba header de koyduğunuz yeri bize biraz açıklar mısınız? default temada nereye koyduysam olmadı heralde yanlış yere koyuyorum çünkü sayfada çıkıyor ama basınca gelmiyor.

r10 da bile konu açtım kimseden ses çıkmadı 😀 bende herşeyi harfi harfine yapdım 30 kere yeniden silip silip yapdım ama yok işte olmadı ama bana acilen gerek böyle birşey :s inşallah yardım edebilirsiniz bana olmazsa msnden bi size bilgileri versem 2 dk baksanız süper olu

sayın cankatx
msn kullanamıyorum o yüzden isteiğinizi karşılayamayız birkaç kez üzerinden geçin kontrol ederseniz hatayı bulursunuz umarım.

sayın burak
eklediğiniz şeyleri kontrol edin hatayı bulup düzelteceğinizi umuyorum benim yazdığım konu da hata yok varsa hatayı bulursanız neresi olduğunu yazın.