「プラグイン無しでパンくずリスト」みたいな記事がよくあるけど、ちゃんとやろうとすると結構大変だという話


  1. Staff Blog
  2. WordPress
  3. 「プラグイン無しでパンくずリスト」みたいな記事がよくあるけど、ちゃんとやろうとすると結構大変だという話

この記事は「WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016」がの14日目の記事です。

昨日は広報担当の石川が「BizVektorかLightningのランディングページテンプレートでヘッダーを非表示にする方法」をご紹介いたしましたが、本日は開発部の石川がお届けいたします。

さて、このLightning&BizVektorアドベントカレンダーですが、そもそものきっかけは、テーマ「Habakiri」の開発者であり、確認画面付き問い合わせフォームプラグイン「MW WP Form」の作者のキタジマさんが、昨年「Habakiri」のアドベントカレンダーをやっていたので、パクっインスパイアして今年やる事にしました。

そんなキタジマさんが、21日に「「プラグイン無しでパンくずリスト」みたいな記事がよくあるけど、ちゃんとやろうとすると結構大変だという話」という記事を公開していまして、まったくその通りだな〜と思って便乗したいと思います。

http://2inc.org/blog/2016/12/21/5538/

パンくずは地味に複雑です

いや、ほんと、キタジマさんの記事にある通り、汎用的に使えるパンくずにしようとする場合、実は何気にいろいろ大変です。

Lightningの場合パンくずリストは module_panList.phpに記載されています。

キタジマさんが述べてますが、ポイントは3つあるかなと思います。

  • 投稿トップに固定ページを指定した場合の処理
  • 表示しているページの投稿タイプの情報を正しく取得する
  • 固定ページやカテゴリーの階層の表示

投稿トップを指定した場合(「ホーム」部分)

固定フロントページを選んで投稿のトップページを固定ページで指定した場合、キタジマさんが指摘している通り、HOMEの次はその固定ページが入らないといけません。

http://lightning.nagoya/ja/setting/basic/post_toppage_setting

ここはLightningでは投稿のトップを固定ページで指定しているかどうか、指定している場合はその固定ページの情報を返す Lightning_get_page_for_post() という独自の関数を使って判別しています。

function lightning_get_page_for_posts(){
    // Get post top page by setting display page.
    $page_for_posts['post_top_id'] = get_option('page_for_posts');

    // Set use post top page flag.
    $page_for_posts['post_top_use'] = ( isset($page_for_posts['post_top_id']) && $page_for_posts['post_top_id'] ) ? true : false ;

    // When use post top page that get post top page name.
    $page_for_posts['post_top_name'] = ( $page_for_posts['post_top_use'] ) ? get_the_title( $page_for_posts['post_top_id'] ) : '';

    return $page_for_posts;
}

 

表示しているページの投稿タイプの情報を正しく取得する

これが何気にやっかいで、get_post_type()では、

  1. 該当する投稿が0件の時に投稿タイプ名は返ってこない
  2. カスタム分類アーカイブページで投稿タイプ名が返ってこない

という問題があります。1つめはなんとなくわかると思いますが、2つ目の件、例えばカスタム投稿タイプ「制作実績」を作ったとして、カスタム分類で「名古屋市」という項目があった場合、パンくずリストとしては

HOME > 制作実績 > 名古屋市

みたいな感じになるのが理想的ですが、このページはカスタム分類「名古屋市」の投稿を取得していて表示していて、投稿タイプを指定して絞り込みをしているわけではないので、該当件数が0件だった場合にはWP_Queryの中にも投稿タイプ(ここでは「制作実績」)の情報はないです。

なので、今絞り込みをしているカスタム分類の情報をWP_Queryから取得して、カスタム分類に紐付いている投稿タイプの情報をひっぱって来ないといけません。

で、この『今表示している投稿タイプの情報』って結構使うので、Lightningだと lightning_get_post_type() という投稿タイプ情報を取得する独自関数を作って、いろんな所で使用しています。

Lightningを使用している場合は、例えば

<?php
$post_type = lightning_get_post_type();
// $post_type の中身の確認
print '<pre style="text-align:left">';print_r($post_type);print '</pre>';
?>

みたいに書くと、今表示している投稿タイプの情報が表示されます。

ExUnitでも同様の関数が用意してあるので、

<?php
$post_type = vkExUnit_get_post_type();
// $post_type の中身の確認
print '<pre style="text-align:left">';print_r($post_type);print '</pre>';
?>

でもたぶん同様の結果が表示されます。

ってドヤりましたけど、get_post_type() に仕様変更があってもう今は普通に取得出来るとかだったらごめんなさい。

固定ページやカテゴリーの階層の表示

あとは、 固定ページの場合の階層の表示や、カテゴリー/カスタム分類の階層の表示も、親ページ/親カテゴリーから順に下っていくとか、地味な処理とかあります。

そんなこんなでVK All in One Expansion Unit では管理画面からカスタム投稿タイプやカスタム分類も簡単に増やせますが、パンくずも自動で追従してくれます。

パンくずを自作する事は勉強になる

でも、パンくずリストってね、自作してみると勉強になるので、今からPHP勉強してみようっていう方が条件分岐とかに慣れるのに最適じゃないかなとも思ったりします。

パンくずの情報を一旦配列にする

キタジマさんの記事で、

いきなり HTML を組み立てていくんじゃなくて一旦配列にして、それをフィルターフックに通した後、返ってきた配列を使って HTML を組み立てるのが良いです。そうしておけば特定の条件のときだけパンくずの出力をちょっと変えたい、というときはパンくず本体のコードを直接カスタマイズせずにフックしてその条件のときだけ返す配列を替えてやれば良くなります。

と、書かれていて、あー、その方がスマートですよねー・・・。と思いました。
その方が使いまわししやすかったり、外側のHTMLを操作しやすいですよね。

functions.phpに書けば軽いってわけじゃないよ

あと初心者で非プログラマーの人が勘違いしがちなんですけれど、有効化してるプラグインは少ない方が軽いって言われます。

そうですね。有効化してるプラグインは少ない方がまぁ処理は少ないですから軽いですよね。

でも、プラグイン停止してもその機能と同じコードがfunctions.phpに書けば同じですので…。

あと、『ExUnitはたくさん機能があるのにプラグイン1個だから軽い!』とか思っちゃってる人がもしかしているかもしれませんが、たくさんの処理が走っている=軽くはないので!
※使用しない機能は管理画面の「VK ExUnit」→「有効化設定」でオフにしておいた方が良いデス。

この記事を書いた人

石川栄和代表取締役
名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本(共著)
・現場でかならず使われているWordPressデザインのメソッド(共著)
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー(LT)
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。