위젯으로 특정 포스트 포맷의 기사 표시하기

위젯을 이용해서 특정 포스트 포맷의 기사를 사이드바에 표시한다. 포스트 포맷이 status인 기사만을 표시하는 위젯을 작성한다.

->POINT

  • 사용자정의 메뉴: register_nav_menus() / wp_nav_menu()
  • 사용자정의 헤더: add_custom_image_header() / header_image()
  1. 포스트 포맷이 status인 기사의 표시
    포스트 포맷이 status인 기사는 특정 포스트 포맷의 기사 표시하기에서 작성한 것처럼 사이드바에 표시한다. 그러나 출력 설정은 템플릿에 직접 입력하기 때문에 다른 메뉴와의 배치를 변경할 수 없다. 따라서 status인 기사를 표시하는 부분을 위젯을 사용하여 관리화면에서 취급할 수 있게한다.
  2. status인 기사를 출력하는 소스 복사하기
    sidebar.php를 열고 다음과 같이 초록색으로 표시된 부분을 복사한다. ‘STATUS’라고 입력한 제목 부분은 위젯에 의해 삽입되기 때문에 <ul>~</ul>을 복사한다.

    <!– 사이드바 –>
    <div id=”sidebar”>
    <ul>
    <li id=”status” class=”widget”><h2>STATUS</h2>

    <ul>
    <?php $myquery_status = array(
    ‘tax_query’ => array(array(
    ‘taxonomy’ => ‘post_format’,
    ‘field’ => ‘slug’,
    ‘terms’ => ‘post-format-status’
    ))
    ); ?>
    <?php query_posts($myquery_status); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <li>
    <?php echo get_the_content(); ?> <span><?php echo get_the_date(‘n월 j일 A h:i’); ?></span>
    </li>
    <?php endwhile; endif; ?>
    </ul>

    </li>
    <?php dynamic_sidebar(); ?>
    </ul>
    </div>

  3. 오리지널 위젯 작성하기
    관리화면의 [외모]-[위젯]을 열고, 위에서 추가한 ‘PHP Code’를 위젯 영역의 ‘사이드바1’에 추가한다.
    위젯 설정화면이 나타나면 제목을 ‘STATUS’라고 입력하고, 위에서 복사한 소스를 붙여넣기하여 입력한다. 단, 입력할 때 아래와 같이 소스의 가장 마지막에 <? php  wp_reset_query(); ?>를 추가한다. 이것은 의 지정을 초기화해서 다른 플러그인의 처리에 영향을 미치지 않도록 하기 위한 템플릿 태그이다. 설정을 저장한다. (※ 위젯 설정의 소스를 수정할 때 워드 프로그램에서 작성한 후 붙여넣기를 하면 따옴표(‘) 때문에 에러가 발생할 수 있다. 따라서 위젯 설정 영역에 직접 소스를 입력하거나 텍스트 에디터 프로그램을 이용해서 수정해야 한다).

    <!– 사이드바 –>
    (생략)
    <?php dynamic_sidebar(); ?>
    </ul>
    </div>
    <? php  wp_reset_query(); ?>
  4. 사이드바의 표시 확인하기
    톱페이지를 열면 사이드바에 ‘STATUS’라는 항목이 추가되고, 포스트 포맷이 status인 기사가 표시된다. 단,특정 포스트 포맷의 기사 표시하기에서 지정한 스타일시트의 설정은 적용되지 않고, 다른 메뉴와 동일한 디자인으로 표시된다. 이것은 출력된 소스에 다른 메뉴와 동일한 클래스 이름이 지정되기 때문이다.
  5. 플러그인이 출력한 ID 확인하기
    STATUS 메뉴에만 스타일시트의 설정을 적용하기 위해 플러그인이 출력한 ID를 확인한다. 톱페이지으 소스를 확인해보면 제목의 ‘STATUS’를 마크업한 <li>의 ID 속성 값을 확인한다. ‘execphp-2’이라고 되어 있는데, ‘2’라는 숫자는 위젯의 수 등에 의해 변하기 때문에 반드시 확인해야 한다.

    <li id=”execphp-2″ class=”widget widget_execphp”><h2 class=”widgettitle”>STATUS</h2>
  6. 스타일시트의 설정 적용하기
    style.css를 열고 ‘status’라는 ID ‘execphp-2’으로 스타일시트를 수정한다.
  7. 템플릿에 입력한 설정 삭제하기
    특정 포스트 포맷의 기사 표시하기에서 추가한 사이드바 위쪽에 표시된 status 기사의 표시를 삭제하기 위해 sidebar.php를 열고 제목을 포함한 <li>~</li>를 삭제한다.

    <!– 사이드바 –>
    <div id=”sidebar”><ul>

    <li id=”status” class=”widget”><h2>STATUS</h2>
    <ul>
    <?php $myquery_status = array(
    ‘tax_query’ => array(array(
    ‘taxonomy’ => ‘post_format’,
    ‘field’ => ‘slug’,
    ‘terms’ => ‘post-format-status’
    ))
    ); ?>
    <?php query_posts($myquery_status); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <li>
    <?php echo get_the_content(); ?> <span><?php echo get_the_date(‘n월 j일 A h:i’); ?></span>
    </li>
    <?php endwhile; endif; ?>
    </ul>
    </li>

    <?php dynamic_sidebar(); ?>
    </ul>

    </div>

  8. 위젯의 표시 순서 변경하기

-> 복수의 포스트 포맷을 포함한 기사를 표시하는 경우

status 기사뿐 아니라 복수의 포스트 포맷을 포함한 기사를 표시하도록 지정할 수 있다. 예를 들어 status와 aside의 기사를 표시하는 경우 terms 파라미터의 값을 추가로 지정한다. 또한 사용하는 포스트 포맷은 function.php로 활성화해야 한다.

위젯의 설정

<ul>
<?php $myquery_status = array(
‘tax_query’ => array(array(
‘taxonomy’ => ‘post_format’,
‘field’ => ‘slug’,
‘terms’ => array(‘post-format-status’,’post-format-aside’)
))
); ?>
<?php query_posts($myquery_status); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<li>
<?php echo get_the_content(); ?> <span><?php echo get_the_date(‘n월 j일 A h:i’); ?></span>
</li>
<?php endwhile; endif; ?>
</ul>
<?php wp_reset_query(); ?>

function.php

<?php(생략)

 

//포스트 포맷
add_theme_support(‘post-formats’, array(‘status’,‘aside’));

?>

-> 포스트 포맷마다 출력 내용 변경하기

여기에서는 status의 경우 본문을 출력하도록 지정하고, aside의 경우는 제목을 출력하도록 지정하고, 제목에는 기사의 개별 페이지로 이동하는 링크를 같이 설정한다.
그리고 제목 부분에 다른 메뉴의 스타일시트 설정이 적용되기 때문에 표시 위치가 오른쪽으로 들여쓰기가 되어 있다. 따라서 style.css에 설정을 추가해서 불필요한 여백을 삭제한다.

위젯의 설정

<ul>
<?php $myquery_status = array(
‘tax_query’ => array(array(
‘taxonomy’ => ‘post_format’,
‘field’ => ‘slug’,
‘terms’ => array(‘post-format-status’,’post-format-aside’)
))
); ?>
<?php query_posts($myquery_status); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?><?php if(has_post_format(‘status’)): ?>
<li>
<?php echo get_the_content(); ?> <span><?php echo get_the_date(‘n월 j시 A h:i’); ?></span>
</li>
<?php endif; ?><?php if(has_post_format(‘aside’)): ?>
<li><a href=”<?php the_permalink(); ?>”>
&raquo; <?php the_title(); ?></a></li>
<?php endif; ?>

<?php endwhile; endif; ?>
</ul>
<?php wp_reset_query(); ?>

조건분기를 이용하지 않고 사용자정의 파트 템플릿을 이용해서 포스트 포맷마다 출력 내용을 변경할 수도 있다. 이때 포스트 포맷의 영어 이름을 출력하는 get_post_format()을 사용해서 지정한다. status의 경우는 content-status.php가 로딩되고, aside의 경우는 content-aside.php가 로딩된다. 표준 테마인 Twenty Eleven은 이 방식으로 포스트 포맷마다 출력 내용을 지정하고 있다.

위젯의 설정

<ul>
<?php $myquery_status = array(
‘tax_query’ => array(array(
‘taxonomy’ => ‘post_format’,
‘field’ => ‘slug’,
‘terms’ => array(‘post-format-status’,’post-format-aside’)
))
); ?>
<?php query_posts($myquery_status); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<?php get_template_part(‘content’,get_post_format()); ?>

<?php endwhile; endif; ?>
</ul>
<?php wp_reset_query(); ?>

출처: 바꾸면서 배우는 워드프레스 디자인

답글 남기기