サイト・リニューアル作業メモ 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
Javascript を利用した折り畳み式のカテゴリ別投稿一覧をウジェットに追加します。

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

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

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

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

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

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

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

その3へつづく

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