サイトマップの使い方

ショートコード [menu_sitemap] を使ったサイトマップの表示方法と、カスタムCSSによるスタイルカスタマイズについて解説します。

ショートコードの基本

固定ページまたは投稿にショートコード [menu_sitemap] を挿入するだけで、設定画面で選択したメニューのHTMLサイトマップが表示されます。

[menu_sitemap]

サイトマップの出力構造

ショートコードは、ナビゲーションメニューの階層構造をネストされた <ul> / <li> タグで出力します。以下はディレクトリツリースタイルでの出力例です。

<div class="ksfm-sitemap ksfm-style-tree">
  <ul>
    <li><a href="/about/" title="会社概要ページ">会社概要</a>
      <ul>
        <li><a href="/about/team/">チーム紹介</a></li>
        <li><a href="/about/access/">アクセス</a></li>
      </ul>
    </li>
    <li><a href="/blog/">ブログ</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</div>

リストスタイルの表示例

設定画面で選択したリストスタイルに応じて、サイトマップの見た目が変わります。

ツールチップの動作

ツールチップ機能が有効な場合、サイトマップのリンクにマウスカーソルを合わせると、対象ページのSEOメタ説明文がポップアップ表示されます。

ツールチップは以下の優先順位でメタ説明文を取得します。

カスタムCSS

設定画面の「カスタムCSS」欄に任意のCSSを入力することで、サイトマップの見た目をカスタマイズできます。

カスタムCSSの記述例:

/* サイトマップのリンク色を変更 */
.ksfm-sitemap a {
    color: #0073aa;
}

/* サイトマップのリンクホバー時の装飾 */
.ksfm-sitemap a:hover {
    color: #005177;
    text-decoration: underline;
}

/* 階層のインデント幅を調整 */
.ksfm-sitemap ul ul {
    margin-left: 24px;
}