11:04WordPressCocoon【重要】2019年11月9日以前にカスタマイズした方へ以前ご紹介していたCocoonのトップページをカスタマイズする方法ですが、運用上好ましくないと判断したので大幅にカスタマイズ方法を変更しました。旧カスタマイズ方法はコチラ上記の旧カスタマイズ方法は非推奨です。今後は新しいカスタマイズ方法をご利用ください。いじるカスタマイズが不要で、ホントに無料?って言うくらい凄いテーマです。自分がWordPressを使い始めた頃はPHPを触らなければ思うようにデザインも出来ないという感じでしたが、今のテーマは本当にカスタマイズがしやすいです。カスタマイズが必要だったのでそのやり方を書いておきます。トップページを作るとこんな見た目になります。それを作ろうとすると上記のように不要な箇所が多いです。タグで囲っておきたいです。タグが設定されています。none;」嫌いと発表していたのも気になります。マークアップを維持してこうしたいですよね。前置きが長くなりましたがこのやり方を下記に書き残します。カスタマイズ後のサンプルは下記サイトをご確認ください。推奨の子テーマを使っている事を想定しています。上記の要件を満たすためにこのようなカスタマイズを行っていきます。フォルダを子テーマ内にアップロードする子テーマのfunctions.phpを修正するCSSで見た目を調整するカスタマイズに必要なファイルは下記へアップロードしていますのでダウンロードしてください。Cocconのフロントページ用カスタマイズファイル同梱ファイルは下記です。include/func-custom-header.phptmp/frontpage-contents.phptmp/page-contents.phpWordPressおよびCocoonは常に最新版を利用するポリシーで運用中です。変更があればこのページの内容も更新します。フォルダをFTPでアップロードしたら、functions.phpに下記コードを追加します。);}何とこれでカスタマイズはほぼ完了です。ブログをリロードしてエラーが出ていないかとか、期待通りに動作しているかを確認してください。includeディレクトリからカスタマイズファイルをインポートしているという処理になります。みたいな命名規則のPHPをこのディレクトリにぶち込めば、WordPressが勝手に読み込んでくれます。カスタマイズをしているとfunctions.phpの可読性が悪くなり「何のコードだっけ?」となるので、それを防ぐためにこうしています。不要になったカスタマイズは該当するファイルをincludeディレクトリから消せばOK!管理も楽です。見た目を調整してあげます。29px;}若干、メインコンテンツの位置がズレてしまうので子テーマのスタイルシートで調整して完了です。トップページを設定する方法も書いておきます。固定ページにトップに表示したい内容を書きます。後はおかしな所がないかを念の為チェックしておきましょう。カスタマイズファイルの解説アップロードしたファイルがどのような処理を行っているか興味がある方だけ読んでください。それ以外は読み飛ばして大丈夫です。下記でカスタマイズのポイントを説明します。func-custom-header.phpこのファイルではサイト名のHTMLタグを制御する処理をカスタマイズしています。子の順に処理するようにしました。置換するという処理にしています。これなら親テーマのアップデートにも強いはずです。frontpage-contents.phpこのファイルは新しく追加したフロントページ専用のテンプレートファイルです。元はcontent.phpになります。旧カスタマイズではカスタマイズしたcontent.phpで親のテーマを上書きするという処理でしたが、多々問題が合ったのでこのように完全にテンプレートを分ける事にしました。page-contents.phpこのファイルは親テーマよりコピーしカスタマイズした、固定ページを読み込む時のテンプレートです。これで親テーマのpage-contents.phpを上書きしています。この中でcontent.phpを呼び出しているのですが、フロントページの場合は先程のfrontpage-contentsを読み込むように変更しています。);}?>旧カスタマイズと比べ、if文の追加が1回で済むので何か変更があっても修正しやすいはずです。可読性もだいぶ良くなりました。旧カスタマイズ方法が駄目な理由ここは11/9以前の旧カスタマイズをしている方以外は読み飛ばして大丈夫です。以前はこれとは違う方法でカスタマイズしていましたが、それの何が駄目なのかを書き残しておきます。旧カスタマイズ方法を使い続ける事も可能ですが、どういう考えで刷新したかを共有させていただければと思います。Cocoonの新機能が使えない旧カスタマイズ方法で提供していたカスタマイズファイルを利用していた場合、「レビュー」等の新機能が使えません。親テーマの関数を上書きしたり、親テーマをテンプレートファイルを、子テーマ側のテンプレートファイルで上書きするというカスタマイズ仕様のためこの影響が発生します。編集していますが、これは投稿および固定ページで利用される共通のテンプレートになるので実は影響範囲が大きいです。例としては最近追加されたレビュー機能が投稿ページで使えないという残念な結果になっていると思います。新カスタマイズ方法では関係ない部分へ影響が出ないよう考慮しました。今後Cocoonで何か大きな変更が合った場合、子テーマでさらなる不具合が出る可能性があります。カスタマイズ方法がダサい旧カスタマイズ方法ははっきり言ってダサいです。それは、親テーマのアップデートに弱いからです。関数を触ったり、投稿および固定ページで共有する重要なテンプレートを複数箇所修正するのは、可読性が悪くなり差分チェックの手間が増えるので失敗だったと思っています。カスタマイズでどうしても触らないといけないメインファイルはありますが、今回は極力修正箇所を減らしシンプルにまとめました。旧カスタマイズを削除し、新しいカスタマイズ方法に修正する方法を記載します。下記フローで修正できます。関数はこのような部分です。$logo_before_tag.$site_logo_tag.$logo_after_tag;}親テーマは高頻度でアップデートされているので、こういう書き換えカスタマイズは好ましくないですね。このgenerate_the_site_logo_tag関数も既に最新のCocoonと差分があります。上記コードはくれぐれもコピーして利用しないようお願いします。トップページを作る時のカスタマイズ方法は以上となります。高機能でカスタマイズ性も良い優れたテーマですね。何かあればこのページでお知らせしますが、カスタマイズは自己責任にてお願いします。21:54とても参考になりました。cocoonの解説サイトは、簡単なカスタマイズを紹介しているところが多いので困っていましたが、知識のある方のサイトに辿り着けてよかったです。ありがとうございました。21:21コメントありがとうございます。