ゲーム大好きWEBデザイナーの雑記ブログ

WEB関係

簡単にサイトマップを作れる「PS Auto Sitemap」の使い方

更新日:

サイトマップを自動生成してくれるWordPressプラグイン「PS Auto Sitemap」。

一度設定すればあとは自動で記事を追加してくれるので、初心者だけでなく、WEB制作者もよく使っているプラグインです。

このブログでも実装してみたので紹介します。

PS Auto Sitemapの設定方法

プラグイン自体は、WordPressのプラグイン新規追加から「PS Auto Sitemap」で検索すれば出てきますのでインストール、有効化してください。

①サイトマップを表示する記事を作成

サイトマップを表示するにはサイトマップを表示するためのページとIDが必要です。
まずは固定ページに「サイトマップ」という空っぽの記事を作成。(名前はなんでもいいですが)
「サイトマップ」ページ編集画面のURLに数字が表示されているので、コピーしておきましょう。

URLに表示される数字の部分をコピーしておく
/wp-admin/post.php?post=114514&action=edit

②プラグインの設定

「設定」→「PS Auto Sitemap」

先ほど保存した数字をサイトマップを表示する記事の欄にペースト。

除外カテゴリ除外記事の欄にIDを入力すれば、サイトマップには表示さたくないカテゴリや記事も設定できます。

設定が完了したら変更を保存してください。

最後に下記のコードを記事に貼り付ける必要がありますので、コピーしておきましょう。

<!– SITEMAP CONTENT REPLACE POINT –>

設定画面の一番下にあります。

③記事にコードを貼り付けて完了

コピーしたコードを記事に貼り付けて完了です。実際に表示されているか確認しましょう。

注意点として、ビジュアルモードで貼り付けても表示されないので、HTMLモードで貼り付けて下さい。

「ビジュアル」ではなく右の「テキスト」タブに変更してから貼り付け。

普段からずっとビジュアルエディターを使っている初心者がやりがちなミスです。

④サイトマップのデザイン変更

設定画面の「スタイル変更」からサイトマップの見た目を変更できます。

例えばうちのサイトだとこんな感じでシンプルにしています。
サイトマップ

色々なデザインから選べるので、サイトに合ったデザインにしましょう。

基本的にあまり見られるページではないので、個人的にはシンプルでいいと思いますが。

まとめ

最初の設定さえ出来れば、あとは勝手に書いた記事をどんどん自動で追加してくれるので、自分で追加する必要はありません。

企業やお店のWEBサイトには、サイトマップを作ることでユーザーの利便性の向上を図れます。
個人ブログとかだと正直微妙かもしれませんが…
SEOにも効果がある…かもしれないし、ないかもしれない(;・∀・)

個人的にはあまりサイトマップは見ない派なんですが、サイトマップが無いよりはあったほうがいいので、サイトを作ったらとりあえず作成しておきましょう。







この記事をシェアする

関連記事

新人のWEBデザイナーはまずProgateで勉強しよう

未経験で入社した新人WEBデザイナーへの教育で、HTML・CSSの基本から教えるのめんどくさいな〜まずは本を読んでもらおうかな…と悩んでいたとき、思い出した。 オンラインの学習サービス「Progate …

【3分で完成】CSS3だけでSVGアニメーションロゴ作ってみた

あまりにも地味すぎて、気づいている人はいないかもしれないけど…このブログのロゴはSVGをアニメーションさせています。 ページを読み込んだ時、線を書くようなアニメーションでロゴが表示されます。 イラスト …

Atomのactivate power modeを使ってドヤる

Webデザイナーがコーディングするためには欠かせないエディタ。 同じ社内でも人によって使っているエディタが全然違う場合もあるでしょう。 社員A コーディングするならやはりDreamweaverです。 …

勉強せずにWebアナリスト検定に挑んだら難易度がヤバすぎた件

つい最近、「Webアナリスト検定」という試験を受けてきました。 いまさら資格なんていらないだろ…と思いつつも、会社から「金は出すから受けてこい」と言われたのでやむなし。 「Webアナリスト検定」とは、 …

iPad版のPhotoshopが使いにくすぎて絶望した!「WEBデザイン無理です」

どうも、WEBデザイナー(笑)のERAです。 最近はPHPのプログラミングがメインですが、WEBデザインもひっそりと続けております。 iPad Proを持っているので、「せっかくならiPadでPSDデ …


コメント

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA