arama

WordPress Resim Galerisi – Konu içi Sayfalama

  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • paylaş

WordPress sistemin geliştirilebilirliği herkesi şaşırtmaya devam ediyor. Şu anda wordpress kullanılarak yapılamayacak site yok neredeyse.

Özellikle moda ve haber sitelerinde resim galerilerini görmüşsünüzdür. Bu resim galerilerini nextgen galeri ile sayfanıza ekleyebileceğiniz gibi hiç bir eklenti olmadan da yapabilirsiniz. Bunun için temanıza bir kaç küçük kod eklemeniz yeterli olacaktır.

Vereceğimiz kodlar konu içerisinde sayfalarda ileri geri yapmanızı sağlayacaktır. Konuya ne eklerseniz onlar ileri geri olacağından sadece resimlerle sınırlandırmamak gerekir. Tamamen size kalmış olarak istediğiniz gibi iler geri butonları ile resim galeri veya inceleme sayfaları yapabilirsiniz.

Konu içi sayfalama ileri geri yapmak isteyenler için:

functions.php’ye aşağıdaki kodları ekleyin;

Kod:
//sayfalamayi yazidan sonra yap
add_filter('wp_link_pages_args','add_next_and_number');
function add_next_and_number($args){
    if($args['next_or_number'] == 'next_and_number'){
        global $page, $numpages, $multipage, $more, $pagenow;
        $args['next_or_number'] = 'number';
        $prev = '';
        $next = '';
        if ( $multipage ) {
            if ( $more ) {
                $i = $page - 1;
                if ( $i && $more ) {
                    $prev .= _wp_link_page($i);
                    $prev .= $args['link_before']. $args['previouspagelink'] . $args['link_after'] . '</a>';
                }
                $i = $page + 1;
                if ( $i <= $numpages && $more ) {
                    $next .= _wp_link_page($i);
                    $next .= $args['link_before']. $args['nextpagelink'] . $args['link_after'] . '</a>';
                }
            }
        }
        $args['before'] = $args['before'].$prev;
        $args['after'] = $next.$args['after'];   
    }
    return $args;
}

add_filter ('the_content', 'pagination_after_post',1);
function pagination_after_post($content) {
   if(is_single()) {

		$argsayfala = array(
				'before' => '<div style="height:10px;"></div><div align="center">',
				'after' => '</div><div style="height:10px;"></div>',
				'link_before' => '<span>',
				'link_after' => '</span>',
				'next_or_number' => 'next_and_number',
				'nextpagelink' => __('İleri'),
				'previouspagelink' => __('Geri'),
				'pagelink' => '%',
				'echo' => 0 );

	$content.= wp_link_pages($argsayfala);
   }
   return $content;
}

//nextpage kodu shortcode
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;
}

Ardından style.css’ye aşağıdaki kodları ekleyin;

Kod:
/* foto-galeri-sayfala */
	.foto-galeri-sayfala {margin-top:10px;overflow:hidden;font-family:open sans;}
		 .foto-galeri-sayfala a {padding:4px 7px;background:#ececec;border:1px solid #ddd;margin-right:5px;}
			.foto-galeri-sayfala a span {font-weight:700;}
		 .foto-galeri-sayfala a:hover {background:#333;color:#fff;}
			 .foto-galeri-sayfala > span {padding:4px 7px;font-weight:700;color:#fff;background:#2d80c4;border:1px solid #ddd;margin-right:5px;}

Son olarak konu içerisinde resimlerin arasına şu kodu koyun:

<!–nextpage–>

Resim galeriniz hayırlı olsun.