개요

위와 같은 동적 페이지를 만들기 위한 방법을 기록해보겠습니다.

방법 자체는 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>