microdata를 사용한 이동경로 작성하기

이동경로(탐색경로)를 표시해서 표시 중인 페이지로부터 상위 페이지로 이동한다. 기사의 개별 페이지, 카테고리 페이지, 월별 페이지에 이동경로를 표시한다. 이때 HTML5의 microdata를 이용해서 이동경로에 관한 정보를 추가한다.

  1. 이동경로의 표시
    이동경로는 표시 중인 페이지에서 톱페이지까지의 계층구조를 나타내고, 각 계층의 페이지에 접속할 수 있는 설정이다.
  2. 기사의 개별 페이지에 이동경로 표시하기
    톱페이지의 URL은 <?php echo home_url(); ?>로 출력하고, 전체를 <div id=”breadcrumb”>로 마크업한다.single.php

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <a href=”<?php echo home_url(); ?>”TOP
    </a> &rsaquo;
    </div>

    </div>

    <!– 콘텐츠 –>

    <div id=”content”>

    (생략)

  3. microdata로 이동경로의 정보 입력하기
    <div itemscope itemtype=~>은 이동경로의 아이템이고,  itemprop=”url”은 URL을 나타내고  itemprop=”title”은 항목 이름을 나타낸다.

    <?php get_header(); ?><!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>
    TOP</span>
    </a> &rsaquo;
    </div></div><!– 콘텐츠 –>
    <div id=”content”>(생략)
  4. 기사가 속한 카테고리로 이동하는 링크 추가하기
    기사가 속한 카테고리에 관한 데이터를  get_the_category()로 취득하고, 카테고리의 ID를 추출해서 $catid에 대입한다. 카테고리의 이름은 <?php echo get_category_link($catid); ?>로 출력해서 링크를 작성할 수 있다. 또한 microdata의 지정도 포함해서, 톱페이지로 이동하는 링크와 같은 형식으로 마크업한다.

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>

    <?php $postcat = get_the_category(); ?>
    <?php $catid = $postcat[0]->cat_ID; ?>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo get_category_link($catid); ?>” itemprop=”url”>
    <span itemprop=”title”><?php echo get_cat_name($catid); ?></span>
    </a> &rsaquo;
    </div>

    <div><?php the_title(); ?></div>
    </div>

    <!– 콘텐츠 –>
    <div id=”content”>

    (생략)

  5. 표시 중인 기사의 제목 표시하기
    이동경로의 마지막에는 표시 중인 페이지의 제목을 추가한다. 링크는 설정하지 않고 <?php the_title(); ?>로 제목을 출력하고 </div>로 마크업한다. 이것으로 기사의 개별 페이지에 표시하는 이동경로 링크가 완성된다.

    (생략)

    <div><?php the_title(); ?></div>

    </div><!– 콘텐츠 –>
    <div id=”content”>(생략)
  6. 이동경로의 디자인 지정하기
  7. 카테고리 페이지에 이동경로 표시하기
    이번에는 category.php를 편집해서 카테고리 페이지에 이동경로를 표시한다. 앞에서와 같은 순서로 톱페이지로 이동하는 링크를 표시한다.
    <?php single_cat_title(); ?>로 표시 중인 카테고리의 이름을 출력하고, </div>로 마크업하면 카테고리 페이지의 이동경로가 완성된다.
    category.php

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>
    //표시 중인 카테고리 표시하기
    <div>
    <?php single_cat_title(); ?></div>

    </div>

    <!– 콘텐츠 –>
    <div id=”content”>
    (생략)

  8. 월별 페이지에 이동경로 표시하기
    date.php를 편집해서 월별 페이지에 이동경로를 표시한다. 앞에서와 같은 순서로 톱페이지로 이동하는 링크를 표시한다.
    <?php echo get_the_date(‘Y’); ?>로 연도를 표시해서, 연도별 페이지로 이동하느는 링크를 설정한다. 연도별 페이지의 URL은 <?php echo get_year_link(get_the_date(‘Y’)); ?>로 출력할 수 있다.
    또한 계속해서 표시 중인 월도 표시한다. 월은 <?php echo get_the_date(‘n’); ?>로 출력하고 <div>로 마크업하면 월별 페이지의 이동경로는 완성된다.
    date.php

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>
    //연도별 페이지로 이동하는 링크 추가하기
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo get_year_link(get_the_date(‘Y’)); ?>” itemprop=”url”>
    <span itemprop=”title”><?php echo get_the_date(‘Y’); ?>년</span>
    </a> &rsaquo;
    </div><div><?php echo get_the_date(‘n’); ?>월</div>
    </div>

    <!– 콘텐츠 –>
    (생략)

  9. 연도별 페이지로 출력하는 이동경로 변경하기
    이동경로의 ‘년>월’ 부분은 월별 페이지에 출력하고, 연도별 페이지의 경우는 ‘년’만 출력하게 지정한다. ‘년>월’을 출력하는 부분은<?php if(is_month()): ?>~<?php endif; ?> 사이에 입력한다. 연도별 페이지로 출력하는 내용은 <?php if(is_year()): ?>~<?php endif; ?> 사이에 입력한다. 여기에서는 <?php echo get_the_date(‘Y’); ?>로 ‘년’을 출력한다.
    date.php

    <?php get_header(); ?>

    <!– 이동경로 –>

    <div id=”breadcrumb”>

    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>

    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>

    <?php if(is_month()): ?>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo get_year_link(get_the_date(‘Y’)); ?>” itemprop=”url”>
    <span itemprop=”title”><?php echo get_the_date(‘Y’); ?>년</span>
    </a> &rsaquo;
    </div>

    <div><?php echo get_the_date(‘n’); ?>월</div>
    <?php endif; ?>

    <?php if(is_year()): ?>
    <div><?php echo get_the_date(‘Y’); ?>년</div>
    <?php endif; ?>
    </div>

    <!– 콘텐츠 –>

    <div id=”content”>
    <p class=”title”>
    <?php single_month_title(); ?>

    //연도별 페이지의 제목 표시하기
    <?php if(is_year()): ?>
    <?php echo get_the_date(‘Y’); ?>
    <?php endif; ?>

    </p>
    (생략)

    월별 페이지에는 표시 중인 연월을 페이지의 제목으로 표시하지만 연도별 페이지에는 표시되지 않는다. 이것은 <?php single_month_title(); ?>에서 월별 페이지의 제목만 출력되기 때문이다. 따라서 <?php echo get_the_date(‘Y’); ?>를 이용해서 현재 표시 중인 ‘연도’를 제목으로 출력한다. 제목을 연도별 페이지에만 출력하기 위해 <?php if(is_year()): ?>~<?php endif; ?> 사이에 입력한다.

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

“microdata를 사용한 이동경로 작성하기”에 대한 한개의 댓글

답글 남기기