WordPressのテーマを換えました
この「ちょいプラ素材」のブログを立ち上げたときから使っているWordPressのテーマ「Simplicity」を後継の「Cocoon」に換えました。
一昨日、「Simplicity」のホームページに行くと、
Simplicity2.6.9公開。細かな修正のみ。と題して、新しいバージョンの「Simplicity」がアップされていました。
気になったのは、作者のわいひらさんの以下のコメント。
今は、Cocoonテーマの正式版に向けて開発中なので、ちょっとした不具合修正のみです。
「Cocoon？」
「何それ？」
「なんか作ってんの？」
というわけで、「Cocoon」でGoogle検索すると、トップに
無料WordPressテーマ「Cocoon（コクーン）」を公開しました - 寝ログ
と出てきました。
寝ログは、わいひらさんの個人サイトです。
「Cocoon」を使ってみた
「Cocoon」の正体が知りたい方は、以下オフィシャルサイトにアクセスしてください。
私もこのサイトで「Cocoon」の特徴を確認しました。
- コンテンツの幅がカスタマイズできる
- ヘッダやアピールエリアにパララックス効果が設定できる
- テーマ独自のカスタマイズ画面でカスタマイズができる
- ビジュアルエディターで簡単に吹き出しを挿入できる
などなど、一目で気に入ってしまいました。
何と言っても、作者がわいひらさんというのが安心できます。
まだ、正式版ではないので、「ちょいプラ素材」のWordPressのテーマをいきなり「Cocoon」変えるわけにはいきませんが、なる早で使って見たくて、急ぎユーザー登録をし、最新版のVer.0.7.5をダウウンロード。
ローカルPCの環境にさっそく導入してみました。
不具合や課題もちらほら
使ってみて、一番困ったのが、
- 画面上部のグローバルナビにカテゴリを設定すると、カテゴリの説明文が表示されてしまう
といった小さな不具合です。
ただ、この件に関しては、半日ほど試行錯誤して解決策が見つかりました。
さらに、新しく追加された便利機能ゆえの悩みも。
- 「本文上にアイキャッチを表示する」という機能を使うと、もともと、記事ごとに自分で挿入していた画像とダブってしまう
- 新しく追加された「目次」機能を使うと、自分で追加していた目次とダブってしまう
これは、一つずつ、記事のコンテンツを手直しして行けば済む話です。
よし、「Cocoon」に換えよう！
半日そこそこですが、ローカル環境で使ってみて大きな問題もなかったので、「ちょいプラ素材」のWordPressのテーマを換えることに決めました。
「Cocoon」のテーマをアップロードして、「Simplicity」から「Cocoon」にスイッチするのは、いとも簡単な作業です。
ところが、大きな問題が発生していまいました。
インデックス画面のサムネイル画像が表示されない
今回発生したトラブルは、インデックス画面で一覧表示されるカードのサムネイル画像に関する問題でした。
しかも、スマートフォンなど、画面サイズが小さいデバイスで閲覧したときだけ発生します。
このトラブルの原因究明と対策に、ほぼ1日かかっていまいました。
カード形式を選ぶ
「Cocoon」は、ホームページなどのインデックス画面で記事が一覧表示されるときに、次の7種類のカード形式を選ぶことができます。
- エントリーカード
- 大きなカード（先頭のみ）
- 大きなカード
- 縦型カード2列
- 縦型カード3列
- タイルカード2列
- タイルカード3列
詳しくは、以下のページを参照してください。
私は、「5．縦型カード3列」を選びました。
カードのサムネイル画像の再生成
一つ一つのカードの横幅は、ここで選んだ「カード形式」に加え、別途自分で設定した「コンテンツの幅」（表示画面の幅）で決まります。
なので、これらの設定を変更したときには、カードに表示するサムネイル画像の幅も変わってしまいます。
ということで、「Cocoon」では、以下のページでも、Regenerate Thumbnailsプラグインを使って、サムネイル画像を再生成することを薦めています。
私もローカル環境で、サムネイル画像を再生成し、インデックス画面のカードにサムネイル画像が正しく表示されることを確認していました。
サムネイル画像がない
WordPressのテーマを「Simplicity」から「Cocoon」に切り替えた後、念のため、スマフォでアクセスして確認すると、トップページの記事一覧にサムネイル画像が全くありません。
まずは、原因を探る必要があります。
この原因究明の流れを「Cocoon」の新機能の吹き出しを使って説明します。
あれ？
よく見ると、200ほどある記事のうち、4つほどの記事には、ちゃんとサムネイル画像がついているな。
サムネイル画像の再生成がうまくいってなかったのかな？
もう一度、再生成してみるか？
ダメです。
キャッシュの問題かな？
キャッシュをクリアしてみるか。
ダメです。
プラグインが悪さをしているかもしれない。
全てのプラグインを無効にしてみよう。
ダメです。
インデック画面のHTMLソースを確認してみよう。
あれ？
サムネイル画像が表示されない記事で求められている、
AAAA-342x192.jpg
というサイズの画像が見つからないぞ！
逆に、サムネイル画像が表示される記事では、
BBBB-320x180.jpg
というサイズの画像が求められていて、このサイズのサムネイル画像は、ちゃんと生成されているな。
ビンゴです！
先に述べたように、自分で選んだ「カード形式」と「コンテンツの幅」によって、最適なサムネイル画像のサイズを計算しているようなのですが、何らかの要因で、最適なサイズのサムネイル画像が生成されていないようです。
暫定対策
暫定対策として、「Cocoon」の子テーマのfunctions.phpに、
add_image_size('thumb342', 342, 192, true);と記入した後、再度、Regenerate Thumbnailsプラグインを実行し、要求される 342 × 192 のサイズのサムネイル画像を生成します。
これで、インデックス画面にスマフォでアクセスしたときでも、無事、記事の一覧にサムネイル画像が表示されるようになりました。
「ちょいプラ素材」のホームページにスマフォでアクセスした方の中には、
今日は、なんか表示がおかしいわね？
と思われた方もいらっしゃるかもしれません。
ご迷惑をおかけしました。
まとめ
サムネイル画像が表示されないというトラブルに見舞われましたが、なんとか、「ちょいプラ素材」のWordPressのテーマを「Simplicity」から「Cocoon」に切り替えることができました。
この不具合については、「Cocoon」の不具合報告フォーラムで、わいひらさんに報告しておきます。
また、「Simplicity」には、4年近くお世話になりました。
このテーマの改良とともに、私自身もWordPressやPHP、JavaScriptなどの理解を深めることができました。
本当にありがとうございました。
今後、「ちょいプラ素材」は、「Cocoon」を使って記事を書いていきます。
まだ、アイキャッチ画像がダブって表示されたり、一部、未対応のところも残っていますが、引き続き、よろしくお願いします。
その後
「Cocoon」の不具合報告フォーラムで報告したところ、わいひらさんが丁寧に対応いただき、無事に解決しました。
原因
当初、私は、「Cocoon」のカスタマイズ設定で、
- コンテンツ幅：1080px
- カード形式：縦型カード3列
を設定していました。
なので、カードの幅は、
1080px / 3 ＝ 360px
になります。
ただし、カードは、左右それぞれ9pxのpaddingエリアを持っているので、
360px - (9px × 2) = 342px
サムネイル画像の幅は、342pxになります。
この後、私は、コンテンツ幅が少し広いことが気になり、
- コンテンツ幅：800px
- カード形式：縦型カード3列（変更なし）
の設定に変更しました。
すると、カードの幅は、
800px / 3 ＝ 266.666px
になり、左右8pxのpaddingエリアを差し引いて、サムネイル画像の幅は、
266px - (8px × 2) = 250px
になります。
なお、paddingエリアのサイズは、コンテンツ幅の大小に応じて、若干変更されるようです。
コンテンツ幅が1080pxのときも800pxのときも、Regenerate Thumbnailsプラグインを実行すると、それぞれに応じた342pxもしくは250pxの幅のサムネイルが再生成されます。
ところが、最初の設定の際、サムネイル画像の再生成処理を私が途中でキャンセルしたみたいで、投稿によって、342px幅のサムネイル画像があったり無かったりの状態になってしまったようです。
HTMLソース
さらにややこしいことに、コンテンツ幅を1080pxから800pxに変更した後も、HTMLソースには、サムネイル画像の<img>タグに
srcset="http://…/AAA-250x141.jpg 250w, http://…/AAA-342x192.jpg 342w"のように、不要になったコンテンツ幅1080pxのときの http://…/AAA-342x192.jpg 342w の記述が残ってしまいます。
342px幅のサムネイル画像が生成されてない状態で、HTMLにこの記述が残っていると、サムネイル画像が表示されない不具合が起こります（アクセスするデバイスの表示画面解像度によって、不具合が起こらないこともある）。
対策
サムネイル画像の再生成にForce Regenerate Thumbnailsプラグインを使うことで解決しました。
このブラグインは、わいひらさんから紹介いただきました。
このプラグインを使うと、古いサイズのサムネイル画像をすべて削除した後で、サムネイル画像を再生成するので、必要なサイズのサムネイル画像のみに整理できます。
同時に、HTMLソースの不要な http://…/AAA-342x192.jpg 342w の記述もなくなり、HTML記述とサムネイル画像のサイズの整合性が取れます。
ということで、一件落着です。
わいひらさん、ありがとうございました。
コメント