ホームページを作ろう!WordPress編(17)パンくずリストを作る

0

    JUGEMテーマ:ホームページ作成
    JUGEMテーマ:wordpress

    w069

    さあいよいよ大詰めとなってきました、このホームページを作ろう!WordPress編、最後はパンくずリストを作るです。

    パンくずリストとは、上の図でいうとブログ、ギャラリーなどのメニューのすぐ下にある「ホーム>ダウンロード>ゆるキャラ>とうじっち上級編」とあるリンクです。サイト内のどの階層に居るかが一目でわかり、戻りたいときも簡単に戻れて迷子にならない便利なナビゲーションの一種です。これはもちろんページ毎に違う内容が表示されますので、前回サイドバーで使った条件分岐が大活躍します。

    今回、こちらのサイト「WordPressテーマの作り方」様を参考にさせていただきました。私が説明不足の場合はこちらのサイトを訪問いただくと非常に親切に丁寧に解説いただける、という仕組みになっております。

    ではコードを見ながら説明していきますが、ちょっと長くなりますので、分割して提示していきます。まずはコードその1、準備部分です。

    <?php
    $get_link_html = function ($url, $title) {
    return '<a href="'.$url.'">'.$title.'</a>';
    };
    $del_str = " › ";
    $out = $get_link_html(home_url(), 'ホーム') . $del_str;
    

    1行目:PHP開始宣言です。

    2〜4行目:URLと文字列を与えると<a>タグに入れて返してくれる簡単な関数を準備しておきます。

    6行目:階層の仕切り文字です。実際は「&rsaquo;」として指定します。

    7行目:早速先ほどの関数を使い、全ページ共通で一番トップになるホームのリンクを$outという変数に入れておきます。この先この$outという変数にリンクを継ぎ足していって、パンくずリストを作っていきます。

    では実際の判定・表示部分を順にお見せしていきます。まずホームにいる場合。

    if (is_home()) {
    $out = "";
    

    今回ホームではパンくずリストを表示しないことにしましたので、$outをヌルに置き換えています。トップページでも表示したい場合は、上の2行目を削除してやればOKです。

    次に、各投稿タイプ/カテゴリーの底、個別投稿ページにいる場合。

    } elseif ( is_singular('post') ) {
    $terms = get_the_category();
    $term1 = array_shift($terms);
    $term_name = $term1->name;
    $term_link = get_term_link($term1);
    $out .= $get_link_html('http://papercraft.techikun.com/?page_id=27', 'ブログ')
    . $del_str
    . $get_link_html($term_link,$term_name)
    . $del_str
    . $get_link_html(get_permalink(), get_the_title());
    } elseif ( is_singular('gallery') ) {
    $posttype = 'gallery';
    $terms = get_the_terms($post->ID,'gallerytype');
    $term1 = array_shift($terms);
    $term_name = $term1->name;
    $term_link = get_term_link($term1);
    $out .= $get_link_html(get_post_type_archive_link($posttype), get_post_type_object($posttype)->label)
    . $del_str
    . $get_link_html($term_link,$term_name)
    . $del_str
    . $get_link_html(get_permalink(), get_the_title());
    } elseif ( is_singular('downloads') ) {
    $posttype = 'downloads';
    $terms = get_the_terms($post->ID,'downloadtype');
    $term1 = array_shift($terms);
    $term_name = $term1->name;
    $term_link = get_term_link($term1);
    $out .= $get_link_html(get_post_type_archive_link($posttype), get_post_type_object($posttype)->label)
    . $del_str
    . $get_link_html($term_link,$term_name)
    . $del_str
    . $get_link_html(get_permalink(), get_the_title());
    

    1、12、24行目のis_singular()で、ポストタイプ指定で個別投稿ページに居ることを確認しています。その後は、通常の投稿タイプかカスタム投稿タイプかでカテゴリー情報や投稿タイプ毎のトップページリンクの作り方が少し変わっています。

    2、14、26行目でカテゴリー/タクソノミー情報を取得します。

    3、15、27行目では、複数のカテゴリー情報を入れられるようになっている配列変数から、カテゴリー1つ分の情報を取り出しています。

    4、5、16、17、28、29行目で、構造体からカテゴリー/タクソノミーの名前とリンクを取り出しています。

    6、18、30行目では、各投稿タイプのトップページのリンクを$outに書き込んでいます

    8、20、32行目では、先ほど取得したカテゴリー/タクソノミーページへのリンクを$outに書き込んでいます。

    9、21、33行目で、現在いる個別投稿ページのタイトルとURLを$outに書き込んでいます。

    お次は各カテゴリー/タクソノミーページに居る場合。

    } elseif ( is_category() ) {
    $out .= $get_link_html('http://papercraft.techikun.com/?page_id=27', 'ブログ')
    . $del_str;
    $cat_obj = get_queried_object();
    $out .= get_category_parents($cat_obj->term_id, true, "");
    } elseif ( is_tax('gallerytype') ) {
    $out .= $get_link_html('http://papercraft.techikun.com/?page_id=29', 'ギャラリー')
    . $del_str;
    $tax_obj = get_queried_object();
    $out .= $get_link_html(get_term_link($tax_obj), $tax_obj->name);
    } elseif ( is_tax('downloadtype') ) {
    $out .= $get_link_html('http://papercraft.techikun.com/?page_id=31', 'ダウンロード')
    . $del_str;
    $tax_obj = get_queried_object();
    $out .= $get_link_html(get_term_link($tax_obj), $tax_obj->name);
    

    1、6、11行目、今度はis_category()とis_tax()でどの投稿タイプのカテゴリー/タクソノミーページにいるかを識別しています。

    2、3、7、8、12、13行目で、投稿タイプトップへのリンクを作っています。

    4、9、14行目で現在のページ情報を取得します。

    そして5、10、15行目で、カテゴリー/タクソノミーページのリンクを作っています。get_category_parents()は自分も含めたカテゴリーの親を遡ってリンクを作ってくれる関数です。今回の私のページはカテゴリーは1階層しかないので親まで見る必要はないのですが、将来の拡張性を考えてこうしています。タクソノミーでは各々の分類名をtermと呼びます。このtermページのリンクを取得するのがget_term_link()です。タクソノミーページの方ではこちらの関数を使っています。

    そして、各投稿タイプのトップやその他の固定ページにいる場合、こちらの通りです。

    } elseif ( is_page() ) {
    $out .= $get_link_html(get_permalink(), get_the_title());
    

    今回のサイトでは、固定ページは全てトップページの1段下に置きましたので、固定ページであることが確認できたら、トップページのリンクのすぐ次に現在のページのリンクを追加してやればOKということになります。

    あとはおまけと出力・終了処理です。

    } elseif ( is_search() ) {
    $out .= '検索結果';
    } elseif ( is_404() ) {
    $out .= 'ページが見つかりません';
    } else {
    // そのまま出力
    }
    echo $out;
    // クエリをリセットしておく
    wp_reset_query();
    

    1、2行目は今後実装予定のサイト内検索結果のページです。特にリンクは貼りません。

    3、4行目は今後実装予定の404エラーページです。特にリンクは貼りません。

    5、6行目は今までのどれにも該当しなかった場合。今後ページを増やしたときか何かで、パンくずリストを作り損ねた場合に登場します。ホームリンクだけ出す設定にしておきます。

    7行目で長かったif〜elseif文が終わります。

    8行目で出来上がった$outをhtmlに出力します。

    そして11行目、クエリをリセットして終わります。これで冒頭の図のようなパンくずリストが出来上がりです。

    以上で今回の講座は全て終了になります。お疲れ様でした。最後に出来上がったサイトはこちらになります。

    ペーパークラフトが好きなんです

    今回のサイト制作を振り返ってみて、苦労したのはやはりバグ取りでしたが、その3大原因は次の通りでした。

    (1) タイプミス:7割方はこれでした。
    (2) 全角スペース混入:これには参りました・・・
    (3) 相性の悪いプラグイン:特にCustom Post Type Pluginが相性悪くて・・・

    皆様もどうも動きがおかしいと思ったら、これらを疑ってみてください。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天