サイトマップ

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

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

ちびこママ(Chibiko_mama)です。

Simplicityで有名なわいひらさん(MrYhira)が新たに作成した無料のワードプレステーマ、「Cocoon 」をご存知ですか?

当サイトはただいま、Cocoonに変更すべく全力で作業しております!めちゃ大変!(笑)

関連記事 ≫ 【予告】ワードプレスのテーマをCocoonに変更します

この作業の過程で、サムネイル付きサイトマップの固定ページテンプレートを作りました。サムネイル入れたい方、プラグイン使いたくない方、自由にどうぞ~♪

先に断っておくと、私はWEB屋でもなんでもなく、独学の素人主婦です。カスタマイズは自己責任でお願いします(;▽;)

 

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

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

まずは、以下のコードをメモ帳などに貼り付けて、拡張子「.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にアップロードします。アップロード先は、wp-contents→themes→cocoon-child-master内へ。

ロリポップの場合はこんな感じ

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

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

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

すると、こんな感じであっという間にサムネイル付きのサイトマップが表示されると思います(*^^*)

簡単ですね♪

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

とりあえずサイトマップはサクッとできましたが、このままだと見た目がちょっと。。。ですよねf^^;

これを、CSSでお好みの見た目に調整します。

もしこんな感じでよければ、後述するコードを「カスタムCSS」欄にペタッと貼り付けて更新してみてください。

コードはこちら。

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

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

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

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

.sitemap-post{
 display:flex;
 padding:.5em 0;
}

li img{
 margin-right:.5em;
}

.sitemap-page li{
 position: relative;
 padding-left: 2.4em;
 line-height:3em;
}

.sitemap-page li:before{
 content: '●';
 position: absolute;
 font-size: 1em;
 left: 1em;
 top: 0;
 color:#FFF4B1;
}

.children li:before{
 content: '◆';
 position: absolute;
 font-size: 1em;
 left: 1em;
 top: 0;
 color:#ffe5ce;
}

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

.breadcrumb{display:none;}

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

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

表示が崩れる場合は、自分で設定した別のCSSが影響している可能性が

上記でサンプル用に掲載している画像は、思い付きで作ったけど挫折して絶賛放置中の素材サイトです(笑)

こちらは余計なCSSを加えていないので、特に表示は崩れていません(*^^*)

でも、あかえほの英語ページのサイトマップ では、サムネイルがスクエアにならないんですよね。こちらは相当手を入れているので、多分ほかのカスタマイズ内容が影響しちゃってるんだと思います・・・。

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

 

・・・ん~、でもま、いっか!致し方なし!(笑)

 

素人がアレコレ手を加えたせいですね、肝に銘じます(;´∀`)

最後に&おまけ

プラグインに頼らず、サムネイル付きのサイトマップを固定ページテンプレートでサクッと設置する方法でした。これはあくまで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(); ?>

 

・・・需要ありそうですかね?うーん(笑)

記事数が多いサイトだと、サムネイルが無い方がいい方もいると思います。その場合は、サムネイルを呼び出す記述をphpファイルから削除すればOKです。

サムネイル無しバージョンの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><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>

<?php endforeach; ?>
<h2>固定ページ一覧</h2>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>

<?php get_footer(); ?>

サムネイルなしにする場合には、以下のコードをカスタムCSSに貼り付けていただければ、無難な感じの見た目になると思います(笑)

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

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

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

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

どんな見た目になるかは、やってみてのお楽しみ、という事で( *´艸`)

 

※もし、本記事のテンプレートを使ってページを開いてみたら、エラーになって画面が真っ白になってしまった、という場合、phpファイルに記述ミスがあります。

焦らず画面の「戻る」ボダンで編集画面に戻り、テンプレートはいったんデフォルトの物を選択して更新してください。その後、phpファイルを見直してみてくださいね。

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