WordPressテーマ「Cocoon」でサイトを構築してみた

はじめに

前回投稿した記事では、「Cocoon」を導入して画面を表示させるあたりまでを試した。
今回はもう少し本格的に検証し、WordPressのテーマとして使用に耐えうるかを検証してみたい。

現在、当ブログは、WordPressの2016年版標準テーマ「Twenty Sixteen」を使用しているのだが、もし「Cocoon」のメリットが大きいようなら乗り換えることも検討している。

そこで、現状で実現できていることが「Cocoon」でも可能なのか、現状では実現できていないことが「Cocoon」では解決可能なのか、ここではそのあたりに焦点を絞って見ていきたい。

参考までに、前回投稿した「Cocoon」導入に関する記事へのリンクを掲示しておく。

現状できていること

前回記事を投稿した段階で、ざっとではあるが「Cocoon」がブログサイトのテーマとして使えそうな基本機能を持っていることは確認できている。
今回はもう少し踏み込んで、特にこだわりを持って運用してきた機能が果たして「Cocoon」でも実現可能なのかを見ていきたい。

当ブログは、プラグインを導入したり、カスタマイズを施したりして、そこそこの機能改善を図っている。
それらが「Cocoon」ではどのように扱いになるのか見ていきたい。

設定が必要な場合は、その方法についても触れておきたい。

カテゴリーの階層化

カテゴリーは、個々の記事の特性を示すような属性だ。

当ブログは、このカテゴリーをまるで住所のように何段階にも階層化し、記事の分類を細かく設定している。

これは当ブログが最もこだわっている仕様の一つだ。

「Cocoon」の場合は、デフォルトの状態ではカテゴリーの階層表示が行われないが、以下の方法で設定を変更することにより階層表示が可能だ。

まずは、WordPressの管理画面からサイドバーの「外観」を選択し、さらに表示されたサブメニューから「ウィジェット」を選択しよう。

すると、以下の画面が表示される。
ここでは「サイドバースクロール追従」というボタンを押下しよう。

「Cocoon」では、この「サイドバースクロール追従」という項目内に「カテゴリー」ウィジェットが配置されている。

「サイドバースクロール追従」を押下すると、閉じていたメニューが以下のように開かれる。
ここでは「カテゴリー」を押下しよう。

すると、以下のようにカテゴリーの設定ウィンドウが表示される。
背景の画面と色合いが同じでやや見づらいが、下図の青枠で囲った部分がそれだ。

この画面で「階層を表示」にチェックを入れて設定を保存すればカテゴリーが階層表示されるようだ。
今回は当ブログと同様の表示にするため、「投稿数を表示」にもチェックを入れている。

この設定でよければ「保存」ボタンを押下しよう。
以上で、カテゴリーを階層化する設定は完了だ。

この状態でサイトを表示させたところ、カテゴリーは以下のように階層化されていた。
まだ見た目のカスタマイズはしていないので表示自体はシンプルだが、機能の確認としてはこれで問題なさそうだ。

関連記事の表示

当ブログではサイドメニューに関連記事のタイトルを表示させている。
「Twenty Sixteen」にはこのような機能はないのでプラグインを導入しているのだが、「Cocoon」ではこれが可能なのかどうかを検証してみよう。

先に結論を書いてしまうと、「Cocoon」ではカテゴリーかタグを使って関連記事を表示することはできるが、カテゴリーかタグのどちらか片方しか選ぶことができないようだ。
すなわちカテゴリーを選んだ場合には、カテゴリーのみを使用して関連記事を検索し、タグを選んだ場合には、タグのみを使用して関連記事を検索する考え方のようだ。

以下が関連記事の設定画面だ。
ラジオボタンで「カテゴリー」か「タグ」のどちらかを選ぶようになっている。

当ブログではカテゴリーとタグの両方を利用して関連記事を表示させているので、残念ながら「Cocoon」では現状と同様の機能は実現できないようだ。

もっとも、タグで関連記事を表示するニーズは現状ほとんどないので、これを諦めることはやぶさかではない。
だが、カテゴリーは階層化して使う前提なので、同一の階層だけでなく、上下の階層に位置するカテゴリーも関連記事の対象として含ませたい。

これを確認するために、カテゴリーを以下のように増やして検証してみた。
各カテゴリーには、それぞれ新たにダミーの記事を投稿している。

この状態で、例えば「PlayStation4」をカテゴリーに持つ記事を表示させた場合に、上層の「PlayStation」やさらに上層の「ゲーム」をカテゴリーに持つ記事があれば、それも関連記事の対象としたいのだ。
もちろん、下層の「RPG」やさらに下層の「FF」をカテゴリーに持つ記事があれば、それもまた関連記事の対象としたい。

それでは、「PlayStation4」をカテゴリーに持つ記事「テスト記事2」を表示させて、上記のニーズを満たすか否かを確認してみよう。
このカテゴリーには、他に「テスト記事」と「テスト記事3」が投稿されている。

また、上層の「PlayStation」カテゴリーとさらに上層の「ゲーム」カテゴリー、および下層の「RPG」カテゴリーやさらに下層の「FF」カテゴリーにも記事が投稿されている。

結果は以下の通りとなった。

「テスト記事2」の関連記事には、同一階層のカテゴリーに属する「テスト記事」と「テスト記事3」のみが表示され、上層や下層の階層のカテゴリーは無視されてしまうようだ。

以上、やや要件とは合致しない結果となった。

もっとも、記事側に設定するカテゴリーを最上位層から順にすべて選択すれば、この仕様でもニーズを満たすことは可能だ。
上記の例なら、「テスト記事2」のカテゴリーとして、「PlayStation4」のみでなく、上位層の「PlayStation」および「ゲーム」も選択すればよいのだ。

この方針を全ての記事に適用すれば、上層や下層のカテゴリーの記事も関連記事として表示できるようになる。

もちろん、そのようなやり方を採用すれば運用の負荷が発生してしまうので、避けたいところではある。
いったん「Cocoon」の仕様を受け入れるか、あるいは運用で対応するかという選択肢となりそうだ。

目次の自動生成

当ブログでは記事の本文の上に、目次を表示するようにしている。
「Twenty Sixteen」にはこんな機能はないので、現在はプラグインを導入して実現している。

導入しているプラグインの機能は、記事に見出しを書いておくと、自動的にそこから目次を生成して表示してくれるというものだ。

「Cocoon」ではこの機能を、テーマの基本機能として実現しているようだ。
次はこれを検証してみよう。

検証には前出の「テスト記事」を利用した。
ここに見出しを追加して、プラグインを導入することなく目次が表示されるかどうか試してみた。

「テスト記事」には以下のような見出しを追加した。

下図の赤枠のうち、「本文」はH2サイズの見出しで、「これは中見出し」はH3サイズの見出し、そして「これは小見出し」はH4サイズの見出しだ。

これをサイトで確認したところ、以下のように表示された。
思惑通りに、目次が自動生成されているようだ。

現状できていることのまとめ

カテゴリーの階層化、目次の自動生成は「Cocoon」では問題なく実現できるようだ。

関連記事については要件を満たさないが、そもそも現状の関連記事検索はパフォーマンスをかなり劣化させる処理のようなので、この機会に辞めてしまうのも一つの考え方だ。

それによってサイトの使い勝手が大きく落ちるのなら問題だが、カテゴリーの階層化はできているので上層や下層のカテゴリーへ移動することは大した手間ではない。

そのように考えると、「Cocoon」に乗り換えて困ることはそんなにないとも言える。

現状できていないこと

続いては、当ブログで現在は実現できていないが、今後は実現したいと考えている機能について見ていきたい。

記事の一覧表示

ずっと実現したいと考えていて、いまだに実現できていない機能の一番手がこれだ。

カテゴリー別や月別アーカイブの一覧を表示した際に、現在は先頭の記事が表示される仕様だが、これをやめて代わりに記事の一覧を表示したいのだ。

もちろん全体を俯瞰して、目的の記事を見つけやすくするためだ。

それでは、実際に何かカテゴリーを選択して、「Cocoon」ではどのように表示されるのか確認してみよう。
ここでは、以下のようにサイトを表示させ、「カテゴリー」から「PlayStation4」を選択した。

すると、表示は以下のようになった。
まだ何も設定はしていないのだが、デフォルトの状態で記事が一覧表示される仕組みのようだ。

ブログトップに記事の一覧を表示

当ブログの先頭に掲載されるコンテンツは、現状では最新の記事となっている。

日記などのブログでは、最新の記事の価値が最も高いと思われるのでこれでよいのだろうが、当ブログはいわゆるハウトゥー集なので、最新の記事の価値が高いとは必ずしも言えない。

そのため、サイトの先頭には最新の記事ではなく、記事の一覧を表示したい。

すでに気づいている方がいるかもしれないが、「Cocoon」ではデフォルトでサイトの先頭に記事の一覧が表示される仕組みになっているようだ。

以下がサイトの先頭を表示させた状態だ。

記事の一覧が表示されているのが確認できるが、これが最新の記事から降順にソートした順番になっている。

以下は、WordPressの管理画面からダッシュボードを表示させた状態だ。
記事一覧のソート順が最新からの降順になっていることが分かる。

まとめ

「Cocoon」を試した結果は予想以上に良好だった。
現状の当サイトは「Twenty Sixteen」にいくつかのカスタマイズを施して使用しているが、「Cocoon」ではデフォルトの機能でかなりの部分がカバー可能なようだ。

現状では実現できていない課題も、「Cocoon」なら解決できる場合がある。

ブログサイトなどには、おすすめ度の非常に高いテーマと言えるだろう。