Wordplessでパンくずを表示させる

[記事公開日]2013/09/03
[最終更新日]2013/09/20

Wordplessでパンくずを表示させる

Wordplessでパンくずナビを追加したいと思って、いろいろ調べました。プラグインなしでも、簡単に設置できるですね!設定メモとして残しておきます。詳しいことは、参考にしたサイトを見てください。

なお、今回は「固定ページ」で、カテゴリ分けし、ページの親子関係を設定した部分のみパンくずが現れます。ブログのほうは出ませんでした。あくまで、固定ページのカテゴリでのパンくずの表示方法です。

パンくずナビとは

パンくずナビとは、「HOME>会社概要>アクセスマップ」のように、そのページの階層構造をリンクでたどれるようにしたものです。設置したほうがページの構成もわかりやすいし、クリックしただけで、その上位のページに移れるので、操作性&ユーザビリティが向上します。

Wordplessで親子関係を設置

Wordplessでブログではなく、Webページを作成するときは、「固定ページ」を使うと思います。固定ページにはカテゴリを設定するメニューありません。ブログ投稿のほうにはカテゴリ設定画面があります。

固定ページでカテゴリやページの親子関係を設定する場合は、親になるページを最初に作ってから、子になるページを作成します。で、子のぺージを保存するときに、[ページ属性]で[親]を設定できますので、そこで上位になるページ(親となるページ)を設定すれば、簡単に親子関係が設定できます。

親-子-孫と、階層は深くできます。

Wordplessでの 「パンくずナビ」自動生成

Wordplessでパンくずを表示させるには、プラグインを使う方法と、phpを書き加える方法の二つがあるようです。簡単なのは、phpの追記だと思います。

やり方

  1. [functions.php]の一番下に、パンくずが表示されるように、以下のソースを追記。

    <?php
    function get_breadcrumbs(){
    global $wp_query;
    if ( !is_home() ){
    // Start the UL
    echo ‘<ul class="breadcrumbs">’;
    // Add the Home link
    echo ‘<li><a href="’. get_settings(‘home’) .’">’.
    get_bloginfo(‘name’) .'</a></li>’;
    if ( is_category() )
    {
    $catTitle = single_cat_title( "", false );
    $cat = get_cat_ID( $catTitle );
    echo "<li> &raquo; ". get_category_parents( $cat, TRUE,
    " &raquo; " ) ."</li>";
    }
    elseif ( is_archive() && !is_category() )
    {
    echo "<li> &raquo; Archives</li>";
    }
    elseif ( is_search() ) {
    echo "<li> &raquo; Search Results</li>";
    }
    elseif ( is_404() )
    {
    echo "<li> &raquo; 404 Not Found</li>";
    }
    elseif ( is_single() )
    {
    $category = get_the_category();
    $category_id = get_cat_ID( $category[0]->cat_name );
    echo ‘<li> &raquo; ‘. get_category_parents( $category_id, TRUE,
    " &raquo; " );
    echo the_title(”,”, FALSE) ."</li>";
    }
    elseif ( is_page() )
    {
    $post = $wp_query->get_queried_object();
    if ( $post->post_parent == 0 ){
    echo "<li> &raquo; ".the_title(”,”, FALSE)."</li>";
    } else {
    $title = the_title(”,”, FALSE);
    $ancestors = array_reverse( get_post_ancestors( $post->ID ) );
    array_push($ancestors, $post->ID);
    foreach ( $ancestors as $ancestor ){
    if( $ancestor != end($ancestors) ){
    echo ‘<li> &raquo; <a href="’. get_permalink($ancestor)
    .’">’. strip_tags( apply_filters( ‘single_post_title’, get_the_title(
    $ancestor ) ) ) .'</a></li>’;
    } else {
    echo ‘<li> &raquo; ‘. strip_tags( apply_filters( ‘single_post_title’,
    get_the_title( $ancestor ) ) ) .'</li>’;
    }
    }
    }
    }
    // End the UL
    echo "</ul>";
    }
    }
    ?>

    ※こちらのソースは、「Blog × Play Under World」さんが掲載されているソースをほぼ転載しています。
    ※ 6行目の「<ul class="breadcrumbs">」 部分で、CSSのクラスを指定をしないと、スタイルの設定ができませんのでご注意を!

  2. スタイルシート(Ex,style.css)に、以下のソースを追記

    ul.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size:12px;
    }
    ul.breadcrumbs li {
    float: left;
    0;
    padding: 0;
    margin: 0 5px 0 }

    ※こちらのソースは、「Blog × Play Under World」さんが掲載されているソースを転載しています。

  3. パンくずを挿入したいページのテンプレート(page.php)に、以下のソースを追記。
    page.phpなどに挿入するなら、「<div id="main">」の一文の下あたりがオススメ。

    <?php get_breadcrumbs(); ?>
    <br class="clearfix">

  4. ※php文:パンくずの表示 ※brタグで、フロートの解除をしています。クラス指定は適宜変えてください。

設定情報

有益な情報、ありがとうございます。いろいろお世話になりました。このほか、いろんなページで情報あさりましたが、今回使用したソースは、以下の二つのサイトのソースが大本です。

私はちょっとカスタマイズしただけになります。本当はこのまま掲載しちゃいけないのかもしれないんですが、忘れないメモとして残させてください。もし問題があれば削除します。



Copyright © 2000-2018 Makiko HOSOKAWA. All rights reserved.