WordPress Resim Galerisi (Resimli İleri Geri) Yapımı

Aralık 27, 2013

Arkadaşlar merhaba, temalarımızı tasarlarken karşılaştığımız sorunları, aradığımız çözümünü zor bulduğumuz özellikleri çözdükten ve bulduktan sonra buradan blogumuzdan sizlerle paylaşmaya çalışıyoruz. Genelde türk forumlarında bulunmayan yada tam olarak çalışmayan bu wordpress özellikleri yada sorunları yabancı sitelerden arayıp bulup herkese yardımcı olaması dileğiyle paylaşıyoruz. Lafı çok uzatmadan konuya geçelim.

Haber sitelerinde ve magazin sitelerinde çokca karşılaştığımız resim galerilerini biliyorsunuzdur, normalde yazı içine eklenen resimleri oklar yada numaralandırma yöntemiyle sayfa sayfa listeleyerek yaptığımız galeriyi bu sitelerde resim üstüne tıkladığımızda da sonraki resme geçtiğini göreceksiniz.

Demo: Galeri yapımı

WP-Magazin-Portal-Teması

Peki wordpress sitelerimizde bu resim galerisini, resimleri birbirine nasıl bağlıyoruz?

Bu özellik, wordpress’ in kendi galeri özelliğine birkaç eklemeyle yapılıyor. Genelde türk forumlarında attachment.php dosyasından bahsedilmiş ancak hiçbirin de sorunu tamamen çözecek bilgiler paylaşılmamış, herkes bir default wordpress temalarında bulunan attachment.php dosyasını yada kendi attachment dosyasını paylaşmış.Ne var ki bu attachment dosyaları single.php dosyası gibi her temanın kendine has bir dosyasıdır. Yani kendi tema klasörünüze attığınızda işinize yaramaz. Halbuki, wordpress temamıza bu resim galeri özelliğini kazandırmak için kısa bir kod eklemekten başka yapmamız gereken birşey yok.

— Uygulama —

  1. Single.php dosyamızın bir kopyasını alıp image.php olarak kaydediyoruz. Daha sonra image.php dosyamızda < ?php the_content(); ? > kodunu silip yerine
 <?php
// code copied from adjacent_image_link() in wp-include/media.php
$attachments = array_values(get_children( array('post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') ));
foreach ( $attachments as $k => $attachment )
  if ( $attachment->ID == $post->ID )
    break;

$next_url =  isset($attachments[$k+1]) ? get_permalink($attachments[$k+1]->ID) : get_permalink($attachments[0]->ID);
?>

<div class="attachment"><a href="<?php echo $next_url; ?>" title="<?php the_title(); ?>"><?php echo wp_get_attachment_image( $post->ID, 'large' );  ?></a></div>

tırnak içindeki kodu yapıştırıyoruz. Buraya kadar işlemimiz bitti aslında ancak daha önceden eklediğimiz yazılarımızda bahsettiğimiz galeri özelliği çalışmayacaktır.Devam ediyoruz.

Yeni bir konu açıyoruz, ekleyeceğimiz resimleri ister galeri olarak ister yazı sayfasında bir resim konulurak resime basılınca diğer resimlere geçmesini sağlayabilirsiniz. Resimleri seçip aşağıdaki resimdeki gibi bağlantı seçeneğini Ek sayfası olarak seçip resmi Tam boy ekliyoruz.

wordpress-magazin

Galeri oluşturmadan yazı sayfasındaki resim üzerine basınca diğer resimlere geçen bir galeri oluşturmak istersek öncelikle konuya yukarda anlattığımız gibi resim ekliyoruz daha sonra alttaki resimdeki sayfa sonu ekle butonuyla sayfa sonu ekliyoruz ve tekrar bir resim ekleyip yine aynı şekilde sayfa sonu ekliyoruz

wp-magazin-teması

Bu şekilde resimleri ekleyip galerimizi oluşturabiliriz.

Sayfa sonu özelliği olmayanlar  aşağıdaki kodu functions.php dosyasında uygun yere ekleyerek bu özelliği temalarına kazandırabilir.

// add <!– next-page –> button to tinymce
add_filter(‘mce_buttons’,’wysiwyg_editor’);
function wysiwyg_editor($mce_buttons) {
    $pos = array_search(‘wp_more’,$mce_buttons,true);
    if ($pos !== false) {
        $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
        $tmp_buttons[] = ‘wp_page’;
        $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
    }
    return $mce_buttons;
}

Son olarak deneyen ve başarılı olamayan arkadaşlar buradan iletişime geçerlerse yardımcı olmaya çalışırız.

 

GÜNCELLEME – 21.05.2014

Arkadaşlar konuda verdiğim kodları tema dosyasına entegre ettiğimizde kodlar da bozulma olduğunu ve doğru çalışmadığını yorumlarınızdan sonra farkettim bu yüzden kodları word dosyasına attım ve aynı şekilde adım adım anlattım, işlemi doğru uygularsanız çalışacaktır.

wpmod – resim galeri

 

GÜNCELLEME – 13.10.2014

Galeriyi sayfalandırma için aşağıdaki kodu kullanabilirsiniz.

/*———————————————————————————–*/

<div class="pagenavi"><?php wp_link_pages(array(
    'before' => '<p>' . __(''),
    'after' => '</p>',
    'previouspagelink' => __('&laquo;'),
    'nextpagelink' => __('&raquo;'),
    'pagelink' => '%',
    'echo' => 1 )
); ?></div>

/*———————————————————————————–*/

0
Connecting
Please wait...
Mesaj Gönder

Canlı destek şuan aktif değil bize mesaj atabilirsiniz. Ortalama 60 DK içerisinde dönüş sağlanacaktır

Adınız Soyadınız
* E-Posta
* Mesajınız
Sohbet

Merhaba, size nasıl yardımcı olabilirim?

Adınız Soyadınız
* E-Posta
* Sorunuz
Sohbet
Geri Dönüş

Destekle ilgili geri dönüşlerinizi bekliyoruz.

Sorunuzu Çözmeden Yardımcı Oldu mu?