プラグイン不要！SWELLでHTMLサイトマップを固定ページで作成する方法

「サイト内の全記事をまとめたページを作りたい…」

「サイトマップを固定ページで作成できる？」

「サイトマップの作成にプラグインは必要？」

この記事ではそんな方に向けて、SWELLでHTMLサイトマップの作り方を解説します

この記事を読めば、あなたも簡単に

• プラグインなしで自分好みのHTMLサイトマップを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、読みたい記事が見つかりやすく回遊率の改善ができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

【2種類】HTMLサイトマップとXMLサイトマップがある

サイトマップは以下の2種類あります。

本記事では、SWELLでHTMLサイトマップを作成する方法をメインに紹介します。

HTMLサイトマップの作成は必須ではありませんが、自サイト内にどんな記事があるのか見つけやすくするためにも作成はおすすめですよ。

それでは本題に入ります。

XMLサイトマップの作成方法を知りたい方はこちら 

SWELLでHTMLサイトマップを固定ページで作成【プラグイン不使用】

SWELLでHTMLサイトマップの作り方は2パターンあります。

• プラグインを導入する
• 固定ページで自作する

個人的に、HTMLサイトマップは固定ページで自作することをおすすめです。

なぜなら、導入しているプラグインの数が多くなればなるほどサーバーに負荷がかかり、サイト表示速度の低下につながるからです。

HTMLサイトマップの作成は少し手間に感じる方もいるかもしれませんが、ブロック機能や装飾を使って自分好みにカスタマイズできるので、自作は大いにメリットがありますよ。

以下の画像は、私が自作した当ブログのHTMLサイトマップです。(一部抜粋)

本記事ではプラグインを使用せず、HTMLサイトマップを固定ページで作成する手順を以下の5つに分けて紹介します。

あなたのサイトに取り入れたい部分を読んで、自作してみてください。

事前準備：固定ページで細かな設定を行う

固定ページでHTMLサイトマップを作成する前に、やっておきたい細かな設定を紹介します。

WordPress管理画面で、固定ページ⇒新規固定ページを追加の順にクリックします。

ページ画面右上の設定⇒固定ページの順にクリックしてください。

表示された右サイドバーで以下3つの項目を設定しましょう。

• リンク…「sitemap」と入力【必須】
• アイキャッチ画像…幅1200x高さ675pxの画像を挿入【任意】
• 表示の上書き設定…サイドバー非表示【任意】

これで事前準備ができました。

それでは実際にHTMLサイトマップを作っていきます。

①：カテゴリー別でページ一覧をまとめる

サイト内にあるすべての記事をカテゴリー別でまとめていきます。

見出しを作成する

始めに見出しを作ります。

当ブログではセクション用H2見出しを採用しています。

セクション用見出しとは…通常の見出しとは別のシンプルなデザインの見出しのこと

段落ブロックに見出しを挿入し、設定⇒ブロックの順にクリックします。

スタイルタブ内にあるスタイル「セクション用」を選んでください。

見出しにテキストを入力すれば完成です。

SWELLでは見出しにアイコンや画像を挿入したり装飾することができ、詳しくは下の記事を参考にしてください

ページ一覧を作成する

次にページ一覧を作ります。

作成した見出しの下に最新の投稿ブロックを挿入します。

設定⇒ブロックの順にクリックし、設定タブ内にある「カテゴリー」と「項目数」を設定しましょう。

• カテゴリー：任意のカテゴリー名を1つ入力
• 項目数：100

これら一連の作業をカテゴリーの数分だけ作成すれば完成です。

②：カテゴリーページへ移動するボタンを設置する

ページ一覧の下にカテゴリーページへ移動するボタンを設置していきます。

ページ左上の+⇒SWELLボタンの順にクリックしてください。

ページに挿入されたSWELLボタンにカテゴリー名とカテゴリーページURLを入力すれば完成です。

SWELLボタンは色やスタイルの変更、アイコンの挿入など様々なカスタマイズができ、詳しくは下の記事を参考にしてください。

③：キーワードから探せる検索窓を設置する

見出しと記事一覧の間にキーワードから探せる検索窓を設置していきます。

ページ左上の+⇒検索の順にクリックしてください。

ページに挿入された検索ブロックで以下2つを設定すれば完成です。

• 「検索ラベルを切り替え」をOFFにする
• 検索窓に「キーワードを入力」と入力する

④：視覚で分かりやすいアイコン付きリンクを作る

カテゴリーの数が多ければ、興味のあるカテゴリーを見つけるのにスクロールするのは大変ですよね。

そんなときは、サイトマップの一番始めにクリックして任意のカテゴリーまでジャンプできるページ内リンクが役立ちます。

ここではカテゴリー別のページ内リンクと「プロフィール」「SNS」「プライバシーポリシー」「お問い合わせフォーム」へ飛ぶ内部リンクをアイコン付きで作成していきます。

ページ最上部にボックスメニューブロックを2つ上下に並べて挿入します。

上のボックスメニューには「プロフィール」「SNS」「プライバシーポリシー」「お問い合わせフォーム」とテキストを入力し、ページ内リンクを設定してください。

下のボックスメニューにはカテゴリー名とそのページURLを入力しましょう。

ページ右上にある設定⇒ブロックの順にクリックし、右サイドバーの「アイコン選択」からアイコンを挿入してください。

これでアイコン付きリンクを作成できます。

ボックスメニューのアイコンカラーやサイズ変更、表示列数などの細かい設定方法については、下の記事を参考にしてください。

⑤：SNSフォロー・お問い合わせエリアを設ける

HTMLサイトマップの最後に「SNSフォローリンク」と「お問い合わせフォーム」を設置しましょう。

SNSフォローリンクの設置方法

ここでは𝕏（旧Twitter）の設置方法を紹介します。

ページ左上の+⇒Twitterを埋め込みの順にクリックします。

𝕏（旧Twitter）のURLを貼り付け、埋め込みをクリックしましょう。

これで𝕏（旧Twitter）を設置できます。

𝕏（旧Twitter）のURLはアプリではなく、Google検索から取得してください。

お問い合わせフォームの設置方法

ここではプラグイン「Contact Form 7」で作成したお問い合わせフォームの設置方法を紹介します。

ページ左上の+⇒Contact Form 7の順にクリックします。

「コンタクトフォームを選択」で作成したお問い合わせフォームのタイトルを選択してください。

これでお問い合わせフォームを設置できます。

・　　　・　　　・

HTMLサイトマップを作成し終えたら、ページ右上にある公開をクリックして、固定ページを公開してください。

これでHTMLサイトマップを作成できます。

HTMLサイトマップをフッターに設置する方法について、詳しくは下の記事を参考にしてください。

SWELLサイトマップの作成でよくある質問

ここからはSWELLでサイトマップを作成するうえでよくある質問に回答します。

まとめ：SWELL自作のHTMLサイトマップで表示スピードの低下を防ごう

今回は、SWELLでHTMLサイトマップの作り方を紹介しました。

当ブログではSWELLに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。