ブログをカスタマイズ

WordPresプラグインを使わないで、ブログにサイトマップをつくってみた!

 

こんにちは、りゅうやん。です!

 

ブログを見るときに、カテゴリーの一覧からさがすと思います。

それ以外にも、サイトマップ(すべての記事一覧)から特定の記事をさがすことだってあるかもしれません。

ぼくのブログでは、意外にもサイトマップへのアクセスもけっこうあります。

でも、WordPressのプラグインに頼らずに、サイトマップをつくってみたいなーと思って、ネットサーフィンをしてたところ…、

イイ感じのを発見したのです!

 

そこで今回は、WordPressのプラグインを使わずにサイトマップをつくることができたのでまとめてみました!

 

こんな人にオススメ!
  • CSSを使ったブログのカスタマイズがしたい!
  • プラグインの数を減らしたい!

↑の記事でまつみさんが紹介しているものを、ぼくもまるまるコピペで使わせてもらってます。

このブログのサイトマップは、↓こんな感じですになってます。

サイトマップ...

 

事前準備として

①カスタマイズには子テーマを使う

 

ブログをカスタマイズするときは、必ず子テーマを使います。

なぜなら、親テーマがアップデートして仕様が変わっても、子テーマでカスタマイズした内容は消えないからです!

もし、親テーマでカスタマイズすると、テーマをアップデートしたときにカスタマイズや設定がリセットされてしまいます。

 

②バックアップをとっておく

 

今回のカスタマイズでは、pafe.phpを編集するので、事前にバックアップ取っておいてくださいね!

カスタマイズによってサイトが真っ白になっても、エックスサーバーを使っているのであれば、↓のやり方で復旧させることができるので、ご参考に!

ブログのカスタマイズで真っ白になっても、エックスサーバーで解決させる方法を伝授! こんにちは、りゅうやん。です! ブログをやっていると、自分好みにカスタマイズしたいですよね。 でも、CSSと...

 

③子テーマにpage.phpをつくっておく

 

これはテーマによるかもしれませんが、たぶん、子テーマに最初からpage.phpはないと思います。

なので、このカスタマイズには子テーマのなかにあるpage.phpが必要なので、前もってつくっておいてくださいね!

つくりかたは、↓の記事を参考にしてください。

エックスサーバーを使って子テーマに「single.php」をかんたんに追加する方法 こんにちは、りゅうやん。です! ブログをやっていると、自分好みにカスタマイズしたくなりますよね。 ぼくはワー...

 

この記事では、子テーマにsingle.phpをつくる内容ですが、この部分をpage.phpに変えるだけでいいので難しくはないと思います。

もちろん、子テーマにつくったpage.phpのなかに入れるファイルは、親テーマにあるpage.phpを全部コピペですからね!

一部だけとか、別の〇〇.phpを入れるとサイトが真っ白になるので、そこだけは注意してください!

 

④サイトマップ用の固定ページをつくっておく

 

サイトマップをつくりたくてCSSだけ入力しても、それを表示するページがなければいけませんね。

固定ページで新しくつくってくださいよ。

もし、プラグインとかでサイトマップ用の固定ページがあるならば、それを使っても問題はありません。

りゅうやん。
りゅうやん。
ぼくも、プラグインで出力していた固定ページをつかったよ!

 

固定ページのパーマリンク設定は、自分のURLの末尾をsitemapにしてくださいね。

【例】https://〇〇〇.△△/sitemap

 

もし、もともとあるページのパーマリンクが、sitemapではなくてsite-mapsitemapsとかでも、コピペするCSSの記述を変えればいいので、ここで無理に変えなくても大丈ですよ!

 

サイトマップのつくりかた

①子テーマのpage.phpをひらく

 

ワードプレスのダッシュボードから、

外観 → テーマの編集

と進んで、使用テーマの子テーマpage.phpに入ります。

くれぐれも、別のシートに入らないようにしましょうね!

 

②シートのなかから「<?php the_content(); ?>」をさがす

 

page.phpのなかに入っても、好きな場所に貼りつけていいわけではありません。

<?php the_content(); ?>

と表記されているのものをさがします。

ぼくが使っているWordPressテーマのJINだと、上からだいたい30行めよりちょい下くらいにあります。

 

③「<?php the_content(); ?>」の下にCSSを貼る

 

<?php the_content(); ?>

があるに、以下のCSSをコピペします。

<?php if (is_page('sitemap')) { ?>
	<h2>サイト情報・お問い合わせ先</h2>
	<ul>
	<?php wp_list_pages('title_li='); ?>
	</ul>
	
	<h2>記事カテゴリー別</h2>
	<?php
	$args=array('orderby' => 'name', 'order' => 'ASC' );
	$categories=get_categories($args);
	foreach($categories as $category) { 
	    echo '<h3><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a> </h3> ';
	    ?>
	    <ul>
		<?php
		global $post;$myposts = get_posts('numberposts=100&category=' . $category->term_id);
		foreach($myposts as $post) : setup_postdata($post);
		?>
		<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		<?php endforeach; ?>
		</ul>
	<?php }; ?>
<?php }; ?>

 

つまり、

……

<?php the_content(); ?>

<?php if (is_page(‘sitemap’)) { ?>
<h2>サイト情報・お問い合わせ先</h2>
<ul>
<?php wp_list_pages(‘title_li=’); ?>
</ul>

<h2>記事カテゴリー別</h2>
<?php

……

こんな感じになる

 

2行めにある、h2タグで囲っている言葉(ここではサイト情報・お問い合わせ先)は変えることができます。

ここは固定ページが一覧で表示されるので、それに合った言葉を入れるといいかもしれません。

また、7行めにある、h2タグで囲っている言葉(ここでは記事カテゴリー別)も変えることができます。

ここにはカテゴリーごとにすべてが一覧で表示されます。

事前準備の④で出てきたパーマリンクのはなしですが、1行めに書かれている

<?php if (is_page(‘sitemap‘)) { ?>

で、sitemapとなっている部分にひもづいてます。

なので、固定ページのパーマリンクがsite-mapsitemapsのときは、これと同じ文言(つづり)でsitemapを書き換えればいいのです。

 

さいごに動作確認を

 

page.phpを編集したので、

  • サイトが真っ白になってないか?
  • 設定通りに、サイトマップが表示されているか?
  • 他に不具合が出てないか?

以上を確認してください。

 

問題がなければ、カスタマイズは終わりです!

おつかれさまでした~!

 

まとめ

 

プラグインを使わず、CSSだけでサイトマップをつくりました。

実際にやってみると、意外とかんたんにできてしまったのでよかったです!

ブログの回遊率やユーザビリティを考えたら、サイトマップは必要だと思います。

プラグインに頼りたくないけど、サイトマップは導入したいと考えている人は、ぜひ挑戦してみてくださいね!

 

最後まで読んでいただきありがとうございました!

 

ではでは(^_^)v

 

 

 

効率的に資格を勉強したい!

スキルアップのために資格を取ろうと思ったとき、どう勉強したらいいか悩んだことはありませんか?

どんな学習方法がベストなのか、学習ブロガーであるりゅうやん。がご紹介します!

効率的に学ぶ方法を知りたい!

通信教育なら『フォーサイト』がオススメ!

学習ブロガーとしては、通信教育フォーサイトをオススメしています!

  1. 図解とフルカラーでわかりやすいテキスト
  2. 講義DVDやCDなどのコンテンツが充実
  3. ネット環境があれば、いつでもどこでも学べる
  4. 徹底したフォロー体制と手厚いサポート
  5. リーズナブルな受講費用

 

僕もフォーサイトで「社会保険労務士講座」を受講中です!

一緒に資格取得を目指してみませんか?

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です