【WordPress】 サイトマップを作る

   2018/08/09   icon-clock-o読了時間:約19分21秒

消えたサイトマップ

サイトマップ、つまりこのブログの『記事一覧』は
PS Auto Sitemapというプラグインにお任せして全自動で表示させていました。
このプラグインのおかげで投稿した記事は勝手に記事一覧に追加されていたのですが
2月に入ってふと気づくといつの間にか表示されなくなっていました。なんということでしょう。

たぶんプラグインやテーマの更新が入って、いずれかと競合してしまったせいだとは思うのですが、
1月中はバタバタしていたのであんまり良く考えずに『 更新ね、はいはい更新更新… 』と
言われるがまま実行していたのでいつどの更新でおかしくなったのかが分かりません。
毎日バックアップを取っているので、以前の状態に戻そうと思えば戻せるのですが
どの段階まで戻したらいいのかも分かりません。

仕方ないので片っ端から競合しているプラグインが無いか確認したり、
テーマの変更点を見てみたり、プラグイン自体をインストールし直してみたり。
色々試行錯誤してみたものの解決できませんでした。く、悔しい (ッ_ _)ッ

プラグイン以外でサイトマップを作る

PS Auto Sitemap自体も長らくアップデートされていないようですし、
他に使いやすそうなプラグインも無いし、
もし何かの拍子にサイトマップが表示できるようになったとしても
原因が解明できてない限りは同じ状況になる可能性もあるしで、
こうなったらしょうがないので自分でサイトマップを作ろうと思いました。

今まで記事一覧を表示させていた固定ページに自力で一個ずつリンクを貼って
サイトマップを作ってもいいのですが、そうなると新しい記事を投稿する都度
そこにリンクを足していかなければならないのでとても大変です。
どうにかもっと簡単にサイトマップを作れないかとフラフラしている内にこちらの記事を見つけました。

運命さんの記事『コピペでOK!プラグインなしでWordPressに自作サイトマップを追加
(ページ移動もしくは消去により現在はリンク切れとなっております)

これだ・・・!<●><●>カッ

こちらの記事の‘‘2-2:カテゴリー別で記事一覧を表示’’を参考に固定ページを編集することにしました。
記事の筆者さん有難うございます!
手順としては以下のとおりです。

①固定ページを作ってスラッグを『sitemap』に変更する

②固定ページ (page.php)を編集する

③CSSをいじってお好みの外観に整える



一からサイトマップを作る方もいらっしゃるかもしれませんので
手順①から順番にご説明していきます。
既に固定ページを作成し『sitemap』というスラッグにしていらっしゃる場合は
飛ばして ②固定ページ (page.php)を編集 からご覧ください。

①固定ページ『sitemap』の作成

WordPress編集メニュー(左サイド)の固定ページから新規追加を選択します。
ページタイトルを入力後、スラッグを変更します。

スラッグはそのページを表す記述で、新規作成中であれば
ページタイトルがそのまま自動入力されます。
このままでもページ自体は問題なく稼動しますが、
次の段階であるPHPの稼動のためには変更しておく必要があります。

固定ページ追加01

この固定ページにサイトマップを表示させるのは別のファイルのお仕事なので本文は空白で大丈夫です。

スラッグの内容は『site-map』、『sitemap02』、『blogsitemap』など
お好みのもので大丈夫ですが必ず半角英数字で記述するようにしてください。
※単に sitemap というスラッグにすると sitemap.xml と競合してしまうことがあるようなので、
 できれば sitemap 以外のスラッグにしておくと安心かも?

この例の場合は『sitemap-2』に変更しています。

固定ページ追加02

これで固定ページは使用できる状態になりましたので次の手順に進みます。

②固定ページ (page.php)を編集

それではいざ、PHPの記述によって固定ページにサイトマップを表示させるようにしていきます。
固定ページのファイル名はloop-page.php となっているテーマもあるようですが
ここではpage.phpで統一してご説明します。

私はカテゴリごとに表示させたかったので
コピペでOK!プラグインなしでWordPressに自作サイトマップを追加』の
‘‘2-2:カテゴリー別で記事一覧を表示’’を参考にさせていただきましたが、
ずらっと一覧にするパターンや、本文抜粋も合わせて表示するパターンなども
掲載してくださっていますのでそこはお好みで選択してください。

予め確認しておく重要なポイント

必ず元のpage.phpファイルのバックアップを取る

色々編集している内にもう何が何だか、となってしまった場合に
元のファイルが無いと元通りにすることもできません。
ファイル自体をダウンロードしておくか、どこかに内容をコピーしておきましょう。

固定ページのスラッグを確認する

『site-map』、『sitemap02』、『blogsitemap』など
ご自分が入力したスラッグが必要なので間違えないようにご確認ください。

いざPHPで書かれたファイルをいじる

まず元のpage.phpファイルを開いて確認

メニューの中から外観テーマ編集を選択します。
更に右サイドのファイルの中から固定ページテンプレート (page.php)を開くと現在のPHP記述を確認できます。
ここでそのまま編集しても良いのですが、普段お使いのエディタがある方はそちらにコピペで編集してから、
再度ここに完成形をコピペしても大丈夫です。

実際のファイル内容

私は無料配布テーマのMantra(マントラ)を使わせていただいているので
page.phpファイルの前半、緑色の部分はマントラのバージョン情報などが記述されています。
その後にはページ内のヘッダー、メイン、フッターなどにそれぞれ何を表示させるか、という命令が書かれています。

コード
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other ‘pages’ on your WordPress site will use a
* different template.
*
* @package Cryout Creations
* @subpackage mantra
* @since mantra 0.5
*/
get_header();
if ($mantra_frontpage==”Enable” && is_front_page() ) {
mantra_frontpage_generator();
}
else {
?>
<section id=”container”>

<div id=”content” role=”main”>
<?php cryout_before_content_hook(); ?>

<?php get_template_part( ‘content’, ‘page’); ?>

/**
* ここに追加の記述を加える
*/

<?php cryout_after_content_hook(); ?>
</div><!– #content –>
<?php get_sidebar(); ?>
</section><!– #container –>

<?php } // else
get_footer(); ?>

どこに追加の記述を入れるか

php the_content(); の下 です。
間違えると変な場所にサイトマップが表示されたりしますのでご注意を。
これはコンテンツ、つまりページの本文の部分をどうするかという命令です。
ですのでお使いのテーマによっては php the_content(); という記述そのままでない場合もあります。
その場合には content について指定している箇所を探します。
上の例で言えば
php get_template_part( ‘content’, ‘page’); がコンテンツ指定の記述なので
その下から26~30行目のあたりに追加を行います。
見ていただきやすいように改行で間を少し空けましたが
実際はどのテーマでももっと隙間なく記述されていると思いますので
注意して追加する場所を確認してください。

追加する記述

こちらから コピーさせていただいた記述が以下です。

追加するコード
<?php if (is_page(‘sitemap’)) { ?>
<?php
$args=array(‘orderby’ => ‘name’, ‘order’ => ‘ASC’ );
$categories=get_categories($args);

foreach($categories as $category) {echo ‘<h2><a href=”‘ . get_category_link( $category->term_id ) . ‘” title=”‘ . sprintf( __( “View all posts in %s” ), $category->name ) . ‘”‘ . ‘>’ . $category->name.'</a></h2>’;
?>

<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 }; ?>

この記述を追加することによって
『 もしもページのスラッグが’sitemap’だったら
  こうこうこんな感じで記事一覧を表示させてね! 』
という命令を出すことができます。
つまりこの命令が有効なページは’sitemap’とスラッグによって指定されたページだけで
その他の固定ページには表示させることができません。

記述を修正して完成!

例として作成したスラッグを『sitemap-2』にしたので、追加した記述の中で『sitemap』になっているところを
『sitemap-2』に修正しなければなりません。

直すのは追加した記述の一行目

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

これを

<?php if (is_page(‘sitemap-2’)) { ?>
こうすればOK。

出来上がったpage.phpファイルを更新・保存する

テキストエディタで編集していた場合は、再度WordPressを開いてファイルを書き換えましょう。
WordPress内で直接編集していた場合はそのままファイルの更新を行います。

ここまで完了したら固定ページを確認してみてください。
サイトマップが表示されているはずです。
表示されていない場合には記述が間違っているか
他の問題があるか、ということになるので今一度ファイルを確認しましょう。

③CSSを編集して外観を整える

先ほどまでの手順でサイトマップとしては充分稼動するのですが、
『せっかくだから見た目も自分のブログに合わせて改造したい!』という場合は
PHPファイルとCSSファイルを編集して見た目を変える必要があります。

これは元々お使いのテーマのCSSや自作CSSの内容によっても変わってきますので
ひとまず簡単に設定が変えられる見出し(上の例で言うとカテゴリの部分)の外観を
変更する方法をご紹介しておきます。

固定ページテンプレート (page.php)を編集

先ほど追加した記述の6行目にh2のタグがあります。

h2のコード
foreach($categories as $category) {echo ‘<h2><a href=”‘ . get_category_link( $category->term_id ) . ‘” title=”‘ . sprintf( __( “View all posts in %s” ), $category->name ) . ‘”‘ . ‘>’ . $category->name.'</a></h2>’;

h2タグに対して、後ほど指定するクラス”midashi”を適用させるために以下のように変更します。

変更内容
foreach($categories as $category) {echo ‘<h2 class=”midashi”><a href=”‘ . get_category_link( $category->term_id ) . ‘” title=”‘ . sprintf( __( “View all posts in %s” ), $category->name ) . ‘”‘ . ‘>’ . $category->name.'</a></h2>’;

class=”midashi” を追加しただけですね。
ここでpage.phpファイルを更新してPHPについては完了です。

スタイルシート (style.css)を編集する

次はスタイルシートに”midashi”というクラスを追加します。
クラス名は何でもいいのでご自分の分かりやすいものに変更してください。

見出しCSS
/* ========================= */
/* サイトマップ用の見出しH2 */
.midashi {
position: relative;
text-align: left;
font-color:#194f32;
font-size:120%;
font-weight: bold;
line-height: 50px;
margin: 30px -10px 20px -10px;
padding: 10px 5px 10px 20px;
border-top-width: 4px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: #999;
background-color: #e6f0ff;
}

こんな感じでCSSを追加して、ファイル更新を行います。
ここでご注意いただきたいのが、自作CSSではなく配布テーマを利用している場合には
テーマの更新の度にCSSも上書きされてしまいます。
自分で決めたスタイルのCSSのみを子テーマにして元のスタイルシートと別物にしておくか、
更新前に自分で追加したスタイルを保存しておいて、更新後に改めてCSSファイルを編集するか、といった手順が必要です。

いかがでしょう、無事に思い通りのサイトマップを作ることができましたでしょうか。
このサイトマップ作成に絡んで、親カテゴリと子カテゴリについてどうも上手く改造できず
諦めて親カテゴリのみ使うことにしてみたり、カテゴリを並べ替えるプラグインを入れてみたり
更に試行錯誤していたので、それはまた別の記事にてお話したいと思います。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket