サイト・リニューアル作業メモ 2——Cocoonのカスタマイズ

Ann Arbor, Michigan, U.S.

スポンサーリンク
スポンサーリンク

Simplicity2からCocoonへ

WPのテーマには、当初Simplicity2を適用していた。わいひらさん(@MrYhira)の製作されたこのテーマはメインブログなどで利用させていただき、そのすばらしさは十分に承知していた。また、すでにメインブログのためにカスタマイズした子テーマを流用できたため、それをベースにデザインをすすめられることも大きな要因だった。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

そのうち、わいひらさんが新たに開発されたCocoonというテーマの正式版が公開されたことを知った。レスポンシブ完全対応だという。そこで、そちらに乗り換えることにした。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

Cocoonもまたすばらしいテーマである。当サイトがレスポンシブ化できたのは、このテーマのおかげだ。

カスタマイズにあたっては、まず、Simplicity2の子テーマの内容をそのままCocoonの子テーマにコピペしてみた。しかしながら、同じ開発者によるものとはいえ、この二つのテーマは相互に別べつのものであり、子テーマもそのまま問題なく流用可能というわけにはいかなかった。そこで、組版画面を見ながら少しずつ子テーマに手を加えて調整していった。

Cocoonの設定についていえば、WPの管理画面に「Cocoon設定」という項目があり、ここからかなり細かく設定でき、ひじょうに便利だ。ただ、たとえばカラーや見出しなどの具体的なデザインなどは、子テーマのCSSからも変更できる。そしてもちろん、そちらのほうがより細かくいじることができる。今後の流用性も考慮して、ぼくのばあい、デザイン上の変更点はなるべく子テーマのCSSに集約させるようにした。

Collapsing Categoriesは正常に作動せず

WPのテーマをスイッチしたことによって生じた問題点としては、プラグインの Collapsing Categories がうまく作動しなかったことがあげられる。サイドバー・ウィジェットで投稿カテゴリーを表示させるさい、親子関係にある項目を折りたたむことができるプラグインである。

Collapsing Categories
Adds a widget which uses Javascript to dynamically expand or collapse the set of posts for each category.

しかし、Cocoonを適用してみたところ、このプラグインの使用に問題が生じた。

親項目の先頭についた黒三角形のマークを押すと子項目が展開するはずなのに、それができず、項目のテキスト部分をクリックしなければならない。展開するさいの挙動もぎこちなく、そのうえに一時にひとつの親項目しか展開できなかった。

ちなみに、現在もSimplicity2で運用中のメインブログ「散歩の思考」では、Collapsing Categoriesは問題なく作動している(下図を参照)。

カテゴリー・ウィジェットもCocoon純正を使用

修正を試みたが、うまくいかなかった。そこで、Colllapsing Categoriesの使用はあきらめ(現在はプラグインごと削除)、代わりに、Cocoonに付属のカテゴリー・ウィジェットを使用することにした。

ただオリジナルのままではやや行間が広すぎるように感じられた。そこで、行間を詰め、親項目のみ薄いグレーを敷いてラベルっぽく見えるように変更した。これならば、親子項目の関係を明確にしたまま一覧性を確保できるだろう。

現在サイドバーで「これまでの散歩旅」という見出しで表示されているコーナーがこれに当たる。

その3へつづく

タイトルとURLをコピーしました