下記の記事にもとづき、cocoonに3つの機能を実装致します。
- カテゴリーページでカテゴリー直下の投稿とカテゴリー配下のサブカテゴリーを表示する。
- WIndowsのエクスフローラ―でフォルダーを表示させると、フォルダー直下に置かれているファイルとサブフォルダーが見えます。それと同様な動き方を実装しています。
- アーカイブページで上りのパンくずリストと年別、月別、日別の情報を表示する。以下2行は【追記
】(2019/3/7)- タブアーカイブページの場合は選択されているタブの情報を表示する。
- 作成者アーカイブページの場合は投稿作成者の「ブログ上の表示名」を表示する。 //
- 検索ページで入力された検索ワードを残すようにする。
カテゴリーページでの表示
カテゴリーのなかには、サブカテゴリーと個別投稿が含まれています。
WPの機能でカテゴリーに属する記事一覧を表示させると、カテゴリーに含まれる、すべての階層でのサブカテゴリーである子カテゴリー、孫カテゴリー、ひ孫カテゴリー、…に属する記事がすべて抽出されてしまいます。
下りパンくずリスト(エクスプローラーのような表示)では、子カテゴリーと、直下の個別記事へのリンクを表示させることで、もとの記事や、もとの記事が属するカテゴリーページを直感的に選択できるようにします。
そのため抽出パラメータに該当する子カテゴリーに属する記事を除外するための条件を入れています。
なおカテゴリーの読み取り順番はslugにして、カテゴリーのslugにソートキーを付けるひと手間を加えています。
この部分の変更は後から追加で修正していますので、もう少し詳しい説明は本記事の後で書いた「簡単なサイトマップを表示するサンプルプログラム」の中でしていますのでご参照ください。
アーカイブページでの表示
本サイトでは年別、月別、日別のアーカイブページは「書庫(アーカイブ)」という固定ページから呼んで表示させています。そのためパンくずリストととしては、ホーム>書庫(アーカイブ)>年別、月別、日別：[[[yyyy年]mm月]dd日]という形での表示になります。
【追記】(2019/3/2)タブアーカイブの場合は、ホーム>タブ名という形で表示します。//
【追記】(2019/3/7)作成者アーカイブの場合は、ホーム>ブログ上の表示名という形で表示します。//
検索結果での表示
「サイト内を検索」で入力された内容を検索結果のページの本文の先頭に、検査窓を追加して表示させています。
※下画面の赤枠の中の表示になります。
まとめ-具体的な修正方法
Cocoonではヘッダー下でかつ本文上位にタイトルを表記するためのlist-title.phpというプログラムがtmpフォルダーに設定されています。
上記の3機能は、このlist-title.phpにコードを追記することで実装しています。
※tmpにlist-title.phpをコピーするやり方は「カテゴリーページに一般的なパンくずリストを表示する」をご参照ください。
なおもともとのlist-title.phpファイルはタイトルを出力するためのほんの数行の内容でしたので、ヘッダーと最後のelse句以外はほぼほぼ追加となります。
※なお下記コードなかで＆nbsp;の特殊文字は表記の関係で最初の＆が全角になっていますので、ご注意ください。
<?php //リストのタイトル
/**
* Cocoon WordPress Theme
* @author: yhira
* @link: https://wp-cocoon.com/
* @license: http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
*/
if ( !defined( 'ABSPATH' ) ) exit; ?>
<?php //子カテゴリー表示
if (is_category()){
$catNAME = single_cat_title('',false);
$catID = get_cat_ID( $catNAME );
echo '<i class="fa fa-folder-open fa-fw"></i>' . $catNAME . '＆nbsp;＆nbsp;<i class="fa fa-angle-right"></i>';
$args = array(
'parent' => $catID,
'pad_counts' => 1,
'orderby' => 'slug',
);
$categories = get_categories( $args );
echo '<span class="myfont80">';
if ( $categories ) {
$catnot = '';
foreach ( $categories as $category ) {
$catcount = $category->category_count;
if ( $catcount == 0 ) {
$catcount = '+';
}
echo ' <i class="fa fa-folder"></i><a href="' . get_category_link( $category->term_id ) . '">' . $category->name . '</a> <span>(' . $catcount . ')</span>';
$catnot = $catnot . ',-' . $category->term_id;
}
$myposts = get_posts('order="DESC"&category=' . $catID . $catnot);
foreach ( $myposts as $post ) {
echo '＆nbsp;＆nbsp;<i class="fa fa-leaf"></i><a href="' . get_the_permalink() . '">' . get_the_title() .'</a>';
}
} else {
echo '＆nbsp;＆nbsp;記事のみ(子フォルダーなし)';
}
echo '</span><!-- Child Navigation -->';
} elseif (is_archive()) {
if (is_date()) {
echo '<div><i class="fa fa-home fa-fw"></i><a href="'.home_url().'"><span itemprop="name">'.__( 'ホーム', THEME_NAME ).'</span></a><i class="fa fa-angle-right"></i>';
echo '<span class="myfont80">';
echo '＆nbsp;＆nbsp;<i class="fa fa-folder"></i><a href="https://neverendworks.com/news/archive/"><span>書庫(アーカイブ)</span></a><i class="fa fa-angle-right"></i>';
echo '＆nbsp;＆nbsp;<i class="fa fa-folder"></i><span>' . get_the_archive_title() . '</span>';
echo '</span></div>';
} elseif (is_tag()) {
$currenttag = single_tag_title( "", false );
echo '<div><i class="fa fa-home fa-fw"></i><a href="'.home_url().'"><span itemprop="name">'.__( 'ホーム', THEME_NAME ).'</span></a><i class="fa fa-angle-right"></i>';
echo '<i class="fa fa-tag fa-fw"></i>' . $currenttag;
echo '</div>';
} elseif (is_author()) {
$author = get_the_author();
echo '<div><i class="fa fa-home fa-fw"></i><a href="'.home_url().'"><span itemprop="name">'.__( 'ホーム', THEME_NAME ).'</span></a><i class="fa fa-angle-right"></i>';
echo '<i class="fa fa-user fa-fw"></i>' . $author;
echo '</div>';
}
} elseif (is_search()) {
$search_query = get_search_query();
if (!is_amp() || !is_ssl()) {
echo '<form class="search-box input-box" method="get" action="' . home_url('/') . '">';
} else {
echo '<form class="amp-form search-box" method="get" action="' . home_url('/') . '" target="_top">';
}
echo '<input type="text"';
if ($search_query) {
echo 'value="' . $search_query . '"';
} else {
echo 'placeholder="キーワードなしでサイト内を検索"';
}
echo ' name="s" class="search-edit" aria-label="input">';
echo '<button type="submit" class="search-submit" role="button" aria-label="button"></button>';
echo '<span class="myfont80">※元画面への戻りはブラウザの戻りボタンを使用してください。</span>';
echo '</form><!-- end search -->';
} else {
echo '<h1 id="archive-title" class="archive-title"><?php echo get_archive_chapter_text(); ?></h1>';
} ?>
※style.cssはCocoon子テーマにあるファイルに追記します。
.myfont80 {
font-size: 80%;
}
なお、上記1.のコーディングに際して、WP Codex以外で下記のページを参考にしています。
また、3.のコーディングでは下記のページを参考にしました。
以上、ご報告申し上げます。
p.s.
【追記】2019/3/2
基本的なことになりますが、Cocoonでは記事の一番最後、SNS関連の「シェアする」の前にその記事の属するカテゴリーとタグを表示する／しないの設定がCocoon設定→投稿タブの最初の段落で指定することができます。
デフォルトでは「カテゴリー・タグ1列」になっているので本サイトでもそのまま使用しています。
この時に表示されているタブアイコンをクリックすると、そのタブが設定されている記事がタブアーカイブ画面に表示されますが、この部分の考慮がされていませんでしたので、後から修正しました。
※コーディングでは43-47行目の部分になります。//
【追記】2019/3/7
これまた基本的なことですが、作成者のリンクをクリックした時にプロフィールページを設定していない場合、 作成者のアーカイブページが表示されますが、この部分の考慮が漏れていましたので修正しました。
※コーディングでは48-52行目の部分になります。 //
【追記】2019/3/13
styleタグを「 myfont80」classに変更。//
【追記】2019/8/9
子カテゴリーにフォルダーしか存在しない場合にカテゴリー数の数値表示が「0」になるのを「+」に修正//
