TIPS – ツリー状の目次を表示する

今回のTIPSでは、WordPressのテーマを改造し、静的ページのツリー状の目次を表示する方法を解説します。

そもそも、「静的ページ」って何のことでしょう? 実は、WordPressはブログ管理ソフトウェアでありながら、「普通のウェブサイト」を作成する機能ももっているのです。では、普通のウェブサイトとブログの違いとは何でしょうか。普通のウェブサイトは本の目次のように章・節・小見出しのようなツリー状の構造(階層構造)をもっています。また、記事の更新頻度はそれほど頻繁ではありません。一方、ブログはツリー状の構造をもつ必要がなく、記事の更新頻度が頻繁です。WordPressには「ページ」作成機能があり、章・節・小見出しのようなツリー型構造が実現できるのです。

では、「ページ」を作る方法を説明します。WordPressの管理画面で、「投稿」タブ→「ページ作成」をクリックします。 次に、ページタイトルとページコンテンツを記入して、「公開」をクリックします。これでページが作成され、サイトのコンテンツとしてインターネットに公開されます。記事投稿とほとんど一緒ですね。

次に、ツリー状の構造とはどういうものでしょうか。サイトの目次例を次に示します。これで一目瞭然ですね。

– 1. はじめに
— 1.1. サイトの紹介
— 1.2. 管理人の紹介
— 1.2.1. 管理人のプロフィール
— 1.2.2. 皆さんへのメッセージ
– 2. 事業概要
— 2.1. 会社概要
— 2.2. 事業概要
– 3. コンタクト

さて、どうしたらこのようなツリー型構造ができるのでしょうか。「はじめに」の子ページとして、「サイトの紹介」がありますね。まず「はじめに」を作成します。次に、「サイトの紹介」を作成します。このとき、画面右側の「親ページ」のプルダウンメニューを「メインページ(親ページなし)」から「はじめに」に変更します。これで、保存・公開すれば、「サイトの紹介」は「はじめに」の子ページになります。同様に、「管理人の紹介」を「はじめに」の子ページとして作成し、「管理人のプロフィール」を「管理人の紹介」の子ページとして作成します。これで、「管理人のプロフィール」は「はじめに」の孫ページになる、というわけです。

では、ウェブサイトのトップページに、これらのページへのリンク、つまり目次を表示する方法を説明します。普通、目次を表示したい場所は、メインコンテンツの右側か左側にあるサイドバーですね。サイドバーは次のファイルになります。

  • wp-content/themes/THEME/sidebar.php

このファイルの中でメニューが書かれている場所を探し、次のようなコードを挿入します。

<?php wp_list_pages(‘sort_column=menu_order&depth=3&title_li=<h2>ページ</h2>’ ); ?>

これで、サイトの目次が表示されます。ここで、 ‘sort_column=menu_order’ はページ作成時に、「ページ表示順」に入力した数字で並べ替える指定です。’depth=3′ は目次メニューの階層構造が3段階(親→子→孫)までとする指定です。この数字を’1’に変えると、トップレベルの目次だけが表示されます。’title_li=<h2>ページ</h2>’ は<li>~</li>タグの中に表示されるタイトル文字列を指定しています。

分かってしまうと簡単ですね。WordPressを普通のウェブサイト制作にもぜひ活用してください。

ご質問・ご意見はコメント欄にどうぞ♪

コメントを残す