【Cocoon用】サムネイル付きサイトマップを固定ページで表示するテンプレート

当サイトは、「Cocoon」というワードプレスの無料テーマを使っています。

β版の頃から使わせていただいており、正式版リリース前にサムネイル付きサイトマップの固定ページテンプレート（固定ページ用phpコード）を作りました。

本記事は、そのテンプレートをシェアする記事です。

ただ、現在Cocoonではショートコードでサムネイル無しの簡易的なサイトマップを簡単に設置できたり、

サムネイル付きの新着記事一覧もショートコードで設置できたりと、

上手く活用すれば、もっと簡単にhtmlサイトマップを作れると思います。

なのでここから先は、ご興味ある方だけお読みください＾＾

page-sitemap.phpを作って、FTPのCocoon子テーマフォルダ内にアップロードする

本記事では細かい解説は割愛させていただきますm(_ _)m

まずは、以下のコードをメモ帳などに貼り付けて、タイトル「page-sitemap」拡張子「.php」で保存してください。

<?php
/**
* Template Name: sitemap
* Template Post Type: page
*/

//通常ページとAMPページの切り分け
if (!is_amp()) {
get_header();
} else {
get_template_part('tmp/amp-header');
}
?>

<?php //固定ページ内容
get_template_part('tmp/page-contents'); ?>

<h2>記事一覧</h2>
<?php //カテゴリーと投稿取得
$categories = get_categories();
foreach($categories as $category) :
?>
<div class="sitemap-cat"><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></div>
<ul>
<?php
query_posts('cat='.$category->cat_ID);
if (have_posts()) : while (have_posts()) : the_post();
?>
<li class="sitemap-post"><?php the_post_thumbnail( array( 90, 90 ) ); ?><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

<?php endforeach; ?>
<br />
<h2>固定ページ一覧</h2>
<ul class="sitemap-page">
<?php wp_list_pages('title_li='); ?>
</ul>

<?php get_footer(); ?>

h2タグの「記事一覧」、「固定ページ一覧」の文言はお好みでご変更ください＾＾

ファイルを作成したら、レンタルサーバーのFTPにアップロードします。

固定ページに新たなテンプレートが追加される

FTPへphpファイルを無事アップロード完了すると、固定ページ作成時に「固定ページの属性」→「テンプレート」で「sitemap」という項目が増えているはずです。

固定ページのタイトル（とパーマリンク）を「サイトマップ」に設定し、テンプレートで「sitemap」を選択し、公開してみてください。

すると、こんな感じでサムネイル付きのサイトマップが表示されると思います↓

お好みで見た目をCSSで調整する

以下のような見た目でよければ、後述のコードをサイトマップの固定ページの「カスタムCSS」欄に貼り付けて更新してみてください。

h2 {
    font-size: 20px;
    padding: .5em 0;
    margin: 1em;
    border-top: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}

ul{
 list-style: none;
 padding-left:1.4em;
 line-height:2em;
}

.sitemap-cat:before {
    font-family: 'FontAwesome';
    content: '\f07c';
    position: absolute;
    font-size: 1em;
    left: 1em;
    top: 0;
    color: #757575;
}

.sitemap-cat {
position: relative;
padding-left: 2.5em;
line-height:3em;
}

@media (max-width: 480px) {
 ul{
 font-size:14px;
 line-height:1.5em;
 padding-left: .5em;
 }
}

貼り付ける場所は、サイトマップ編集ページを下にスクロールすると出てくる「カスタムCSS」欄です。

ここに貼り付けると、他のページにこのCSSが影響しません。

表示が崩れる場合は、別のCSSが影響している可能性が

本来なら最初に作ったphpファイル内の<?php the_post_thumbnail( array( 90, 90 ) ); ?>という部分でサイズを指定しているので、90×90pxのスクエアで表示されるはずです。

ただ、当サイトは素人の私が散々CSSをいじったせいか、このテンプレートで表示されるサムネイルがスクエアになりません。

解決していなくて申し訳ないですが、思ったように表示されない時には、自分で設定した別のCSSが影響している可能性があります。

最後に

プラグインに頼らず、サムネイル付きサイトマップを固定ページテンプレートで設置する方法でした。

これはあくまでCocoon用なので、他のテーマで使う場合は、冒頭の以下の部分を、

<?php
/**
 * Template Name: sitemap
 * Template Post Type: page
 */

//通常ページとAMPページの切り分け
if (!is_amp()) {
 get_header();
 } else {
 get_template_part('tmp/amp-header');
 }
?>

次のように書き換えて使っていただければ、多分うまく行くと思います。

<?php
/**
 * Template Name: sitemap
 * Template Post Type: page
 */

get_header(); ?>

※ただし、テーマによりけりなので、あくまで自己責任でお願いいたしますm(_ _)m

 

冒頭でも書きましたが、現在、Cocoonでは、ショートコードでサムネイル無しの簡易的なサイトマップや、サムネイル付きの記事一覧を簡単に設置できるようになりました。

カスタマイズは、なるべくテーマ固有の便利機能を使いましょう＾＾

最後までお読みいただき、ありがとうございました。