前回のアイキャッチ画像設定が意外にスムーズに進んだので、その勢いを借りて今回は記事ごとの番号表示について。当ブログでは、左図の矢印の箇所には記事のカテゴリーを表示させているのですが、引っ越し先では上部にデカデカと仮タイトル(カテゴリー)を載せる予定なので、さらに重複して掲載する必要もありません。そこでもっと有益そうな「この記事は、そのカテゴリー内で何番目の記事なのか」という情報を載せたいと思いました。制作日記で使えば「この曲を完成させるのに要したおおよその作業日数」の目安になりそうです。
簡単に取得できないのね
これまで当ブログでも全く考えたことが無かった記事番号。簡単に専用のテンプレートタグで取得出来るのかと思っていたのだけれど、意外にも標準装備されてない気配。そこでいろいろググってみて、まずコチラの記事がドンピシャだったので、自分のローカルで動作するかテストしてみることにしました。
まず記事中にあるコードを前回作成した「FLFLテーマ」のfunctions.phpに追記(↓)します。6行目以降がソレ。
functions.php:カテゴリー内の記事番号表示(8−1)
<?php //アイキャッチ画像機能オン add_theme_support('post-thumbnails'); //カテゴリー内の記事番号の抽出その1 function ps_number_cat( $post_type = 'post', $op = '<=' ,$cat_id = '5') { global $wpdb, $post; $categories = get_the_category($post->ID); $in_cat=0; foreach($categories as $category){if($category->term_id == $cat_id){$in_cat=1;}} if($in_cat){ $post_type = is_array($post_type) ? implode("','", $post_type) : $post_type; $number = $wpdb->get_var(" SELECT COUNT( * ) FROM $wpdb->posts as p LEFT JOIN $wpdb->term_relationships as r ON p.ID = r.object_ID LEFT JOIN $wpdb->term_taxonomy as t ON r.term_taxonomy_id = t.term_taxonomy_id LEFT JOIN $wpdb->terms as terms ON t.term_id = terms.term_id WHERE post_date {$op} '{$post->post_date}' AND post_status = 'publish' AND post_type = ('{$post_type}') AND t.taxonomy = 'category' AND terms.term_id = '{$cat_id}' "); return $number; }else{ return ""; } } ?>
4行目:前回設定したアイキャッチ画像機能を追加するもの。
7行目:$cat_id = ‘5’で番号を取得したいカテゴリーIDを指定している。
どうやら上のコードでは、カテゴリーIDが「5」に固定されていて、そのカテゴリーに属している記事の番号のみ取得可能な模様。まずは動作テストということで、これまでカテゴリー分けされていなかった「未分類」のものに「動作テスト」というカテゴリーを割り当てました。
ところで、そのカテゴリーIDってどうやって確認するんだっけ?と。WordPressってダッシュボード上から簡単にIDを確認する事がまだ出来ない様子。カテゴリーIDを使った設定は幾度も行ってきたんだけど、またすっかり忘れている。そこでまた、その方法をアチコチ調べることになるのですが、コチラの記事を探し当ててようやく思い出しました。
カテゴリーのリンク部分にマウスオーバーさせて、ステータスバーを確認
そう、これこれ、以前自力で発見したんだった。「動作テスト」はカテゴリーIDが「1」だったので、上記コード内の該当部分である4行目を「$cat_id = ‘1’」としました。そしてindex.phpのタイトル部分に、次のコードを挿入。
echo ps_number_cat( $post->post_type );
カテゴリー内の記事番号表示:タイトル周りhtml(8−2)
<section id="title"> <img id="ICON" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?> "> <h5>記事番号 <?php echo ps_number_cat( $post->post_type ); ?></h5> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <h6><?php echo get_the_date(); ?>更新</h6> </section>
その結果がコチラ(↓)。「動作テスト(カテゴリーID 1番)」に属している2つの記事は、矢印のように順番に番号が表示されています。当然ながら、カテゴリーID 2番である「Night Head」に属している記事「Waldorf MicroWave〜」には何も表示されません。
カテゴリーIDを取得する
課題が見えます。参考記事から拝借したコードでは、カテゴリーIDが決め打ちになっています。限られた数の既存のカテゴリーだけで運用するのなら問題ないですが(それでも必要数だけコピペするのは効率が悪そう…)、制作日記では手をつけた曲の数だけどんどん増えてゆくことになります。上記コード内で、自動的にカテゴリーIDを取得するにはどう記述すれば良いのか??
そこでいつもお世話になっているGoogle先生に、なるべく正しい質問を繰り返して、参考になりそうな記事を探し当てました(↓)。
WordPressで今見ているカテゴリーのIDを取得し、query_postsに代入(Magicalog)
WordPressで今見ているカテゴリーのIDを取得し、query_postsに代入(改)(Magicalog)
特に後者の(改)記事において、ブログ主が自作したコードに対し、同僚のプログラマーさんから問題箇所を指摘されたところを、しっかり要点を抑えて復習しているところが記事として素晴らしい。
僕はプログラミングの事はさっぱり分からないけれど、ジーーーーーッと眺めていたら、冒頭の8−1で拝借したコード内で決め打ちされている「$cat_id = ‘5’」を、 Magicalogさんの考案されたコードで補えられれば、なんとかなるんじゃないか…という感じがしてきました。文章の構造的に。
そこで下図のように追記・修正。
functions.php:カテゴリー内の記事番号表示(8−3)
<?php //アイキャッチ画像機能オン add_theme_support('post-thumbnails'); //カテゴリー内の記事番号の抽出その2 function ps_number_cat( $post_type = 'post', $op = '<=' ,$cat_id) { global $wpdb, $post; $categories = get_the_category($post->ID); $in_cat=0; //カテゴリーIDの取得(追記部分) foreach((get_the_category()) as $cat) { $cat_id = $cat->cat_ID ; break ; }//カテゴリーIDの取得(追記部分おわり) foreach($categories as $category){if($category->term_id == $cat_id){$in_cat=1;}} if($in_cat){ $post_type = is_array($post_type) ? implode("','", $post_type) : $post_type; $number = $wpdb->get_var(" SELECT COUNT( * ) FROM $wpdb->posts as p LEFT JOIN $wpdb->term_relationships as r ON p.ID = r.object_ID LEFT JOIN $wpdb->term_taxonomy as t ON r.term_taxonomy_id = t.term_taxonomy_id LEFT JOIN $wpdb->terms as terms ON t.term_id = terms.term_id WHERE post_date {$op} '{$post->post_date}' AND post_status = 'publish' AND post_type = ('{$post_type}') AND t.taxonomy = 'category' AND terms.term_id = '{$cat_id}' "); return $number; }else{ return ""; } } ?>
さて、動作チェックです。矢印部に記事番号が表示されている(↓)ということは、「Night Head」のID 2番が取得できている…と考えてOKでしょうか。テキトーに思い付いたものが、1発で動作するとはちょっと信じ難いものがあるけれど…やっぱり、通し番号の取得など簡単に出来ちゃうタグなんかがどこかに存在してるんじゃなかろうか。僕が知らないだけで。
もう少し整えておく
ローカルのテスト環境では意図通り動いてくれたけれど、素人の僕が考えたものなのでどこかに不具合が秘匿されている可能性も大きい。とりあえず問題が起きたらお気楽に撤去し、これまでのように「記事件数など人力入力で良いわ!」とラテンに考え直すことにして、まずはこの辺りでタイトルのテキスト周りの見た目を整えておくことにします。
まずindex.phpループ内のタイトル周り最新版は下記のようになりました。<h5>の記事番号関連は、実際に画面に表示させてみるとやはり仮タイトル(カテゴリー)があった方がアクセスしやすい感じがしたので、記事番号の左側に配置することにしました。
index.php:カテゴリー内の記事番号表示(8−4)
<section id="post"> <section id="title"> <a href="<?php the_permalink(); ?>"><img id="ICON" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?> "></a> <h5><?php the_category(','); ?> ― 第<?php echo ps_number_cat( $post->post_type ); ?>回</h5> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <h6><?php echo get_the_date(); ?> 更新</h6> </section> <?php the_content(); ?> </section>
5行目:今回の記事番号関連を反映してみました。
さらに色や間隔などの見出し周りを簡単に調整し、ひとまずの現状は下図のようになりました。つづく。
だいぶカタチになってきたような。次回は記事の本文エリアのレイアウトを考えてみます。
2014-06-15 > VPS&WordPress引っ越しメモ