ブログをカスタマイズ PR

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

 

ワードプレスでブログを始めよう!

好きなURLを使いたい!

ブログやサイトを作るとき、独自ドメインは必要不可欠!



 レンタルサーバーならココ!

ワードプレスでブログやホームページを作るなら、レンタルサーバーはエックスサーバー



COMMENT

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

コメントは日本語で入力してください。(スパム対策)

CAPTCHA