개요
위와 같은 동적 페이지를 만들기 위한 방법을 기록해보겠습니다.
방법 자체는 Isotope플러그인의 filter기능으로 구현했습니다. Isotope – Filtering을 보시는게 더 쉽고 간단할 수 있습니다.
위의 페이지는 Types플러그인 이용하여 아래의 기능으로 이루어졌습니다.
custom post 생성 : ‘link’
taxonomy 생성 : ‘linktag
‘link’ custom post를 ‘linktag’ taxonomy와 연결
아래 소스는 http://blogurl.com/link 로 접속했을 때 출력되는 페이지를 overdrive하기 위해 만든 archive-link.php이고, 이 파일의 loop안에서 content-linkthumb.php를 불러오게 됩니다.
archive-link.php
<?php
/**
* The template for displaying Archive pages.
*
*/
get_header(); ?>
<?php
//custom post name : link
//tag(taxonomy) : linktag
//
//archive-link.php는 link 라는 custom post를 출력하는 페이지.
//이 파일이 없을 경우 archive.php가 출력되는데, 테마 폴더 안에 이 파일을 만들면 http://blogurl.com/link로 접근할 때
//archive.php대신 출력된다.
$args = array(
'post_type' => 'link',
'posts_per_page' => -1
);
$the_query = new WP_Query( $args ); // 포스트 갯수는 설정에서 지정해 둔 숫자로 출력되는데 전체 포스트를 출력하기 위해 wp_query를 새로 지정해줌.
?>
<section id="primary" class="content-area">
<h2>A.some.link</h2>
<div id="filters" class="button-group">
<button data-filter="*">show all</button>
<?php
// 페이지 상단 버튼 태그 버튼 그룹.
// taxonomy 'linktag'의 terms들을 출력한다.
$args = array(
'orderby' => 'name',
'taxonomy' => 'linktag',
'hide_empty' => 1,
'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
echo '<button data-filter="'.$category->slug.'">'.$category->name.'</button>';
}
?>
</div>
<div class="linkthumbs">
<?php
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( 'content', 'linkthumb'); // content-linkthumb.php를 인클루드한다.
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</section>
<script src="http://dev.0-q.me/js/isotope.pkgd.min.js"></script>
<script>
jQuery( document ).ready( function( $ ) {
var $container = $('.linkthumbs');
var currentFilter = '*';
$container.isotope({
itemSelector: '.linkthumbs article',
layoutMode: 'fitRows'
});
$('#filters').on( 'click', 'button', function() {
//#filters아래의 button을 클릭했을 때 이벤트.
var filterValue = $(this).attr('data-filter') ; // 클릭한 버튼의 data-filter을 확인
if(currentFilter != filterValue ){ // 현재의 filterValue와 클릭한 filterValue를 확인하여 다를때 실행.
currentFilter = filterValue;
$(this).siblings().removeClass('selected');
$(this).toggleClass('selected'); // 클릭한 버튼에 selected 클래스를 지정하고 나머지 버튼에서 해당 클래스를 제거
filterValue = $(this).attr('data-filter') == '*' ? '*' : '.tag-'+$(this).attr('data-filter') // filterValue확인
$container.isotope({ filter: filterValue }); // isotope에서 해당 데이터만 보이게 함.
}
});
$('.tags').on( 'click', 'a', function() {
// .tags아래의 버튼을 클릭할때 data-filter속성을 확인하여 jquery의 trigger을 이용. 상단의 태그들에서 같은 버튼을 클릭한 효과를 낸다.
var thisValue = $(this).attr('data-filter') == '*' ? '*' : $(this).attr('data-filter') ;
$('#filters').find("[data-filter='" + thisValue + "']").trigger('click');
//console.log(thisValue); // 디버깅 용도
});
});
</script>
<?php get_sidebar('sidebar-1'); ?>
<?php get_footer(); ?>
`</pre>content-linkthumb.php
<?php
/**
*/
$linkurl = types_render_field("links", array("raw"=>"true")); //types에서 지정한 links 항목을 $linkurl에 불러온다.
if($linkurl){
$linkurl = addhttp($linkurl); // http://가 없을 시 붙여주는 펑션(functions.php에서 만들어 줌.)
}
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<div class="entry-meta">
<span class="entry-in-time" style="display:none;"> <?php the_time('Y.m.d'); ?> </span>
<span class="tags"><?php
$linktags = wp_get_object_terms($post->ID, 'linktag');
// taxonomy : 'linktag'의 terms들을 출력한다.
foreach($linktags as $category) {
echo '<a data-filter="'.$category->slug.'" href="#">'.$category->name.'</a>';
}
?></span>
</div>
<h3 class="entry-title">
<a href="<?php echo $linkurl ?>" title="<?php echo 'go to '.$linkurl ?>" rel="bookmark" target="_blank" class="newwindow">
<?php the_title(); ?>
</a>
</h3>
</header>
<div class="entry-summary">
<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="post-thumbnail">
<a href="<?php echo $linkurl ?>" title="<?php echo 'go to '.$linkurl ?>" rel="bookmark" target="_blank" class="newwindow"><?php the_post_thumbnail();?></a>
</div>
<?php elseif($linkurl != ''): ?>
<a href="<?php echo $linkurl ?>" title="<?php echo 'go to '.$linkurl ?>" rel="bookmark" target="_blank" class="newwindow">
<?php echo do_shortcode('[stwthumb]'.$linkurl.'[/stwthumb]' ); //shrinktheweb 플러그인을 이용해 썸네일을 생성?>
</a>
<?php endif; ?>
</div>
</article>