今までCocoonでブログ運営したけど、
カッコいいトップページを自由に設計したい。
完成度が高いCocoonを全部捨てるのは勿体ない。
Cocoonでブログを運用したけど、トップページを自由にカッコいいもので作りたいけど、自作テーマ作るのは時間かかるし、頻繁にメンテナンスする自信がないです。何かいい方法がないかを考える時、Cocoonをそのまま利用して、トップページだけをカスタマイズする方法したらいいかなと実践しました。
この記事はCocoonのトップページを自由にカスタマイズ方法を記載しています。ご参考になれたら幸いです。
●この記事を実践する前提スキル ●完成サンプルサイト ●カスタマイズ方法
この記事を実践する前提スキル
この記事を実践するには下記のスキルを前提とします。 ・HTML/CSSの基本を理解 HTML/CSSを書けるなら、基本問題ないです。PHP、WordPressスキルもあれば良いけど、なくてもこの記事を真似すればできます。
完成サンプルサイト
このサイトが実践した結果です。
https://s3updev.foreign-in-japan.com/
基本制限がなく、どのデザインでも実現可能です。 Webサイトで検索し、カッコいいデザインがあれば、参考して作ったらいいでしょう。
カスタマイズ方法
まずカスタマイズ方法を整理しましょう。
●自作テーマ：自由度高いけど、時間かかるし、メンテナンスが大変 ●Cocoonの機能「ブログ型」：プログラミング必要ないど、制限あり ●Cocoonの機能 「固定ページ」： プログラミング必要ないど、制限あり ●Cocoonのカスタマイズ：今回採用。自由度が高く、メンテナンスしてくれるCocoonも利用
この記事で紹介するのはCocoonの子テーマカスタマイズする方法です。
Cocoonの構造確認
自分サーバーにCocoonの親テーマの構造が下記になります。 XXX/wp-content/themes/cocoon-master
ではトップページを表示するのはどのファイルでしょうか。 WordPressではテンプレート階層のルールがあり、下記の図です。
それによると、Cocoonのトップページでは優先度高いfront-page.php、home.phpがなく、index.phpでトップページを表示しているようです。
つまり、子テーマにfront-page.phpを作れば基本的にトップページのカスタマイズできます。
カスタマイズ： front-page.php作成
では子テーマにfront-page.phpを作りましょう。完成形は下図です。
フッターは共通のものを利用しますが、ヘッダーは後説明しますが、メインのコンテンツのCSSも含めて、カスタマイズする必要で、トップページ専用のヘッダーheader-front.phpを作りました。 そうすると、下図のように、ヘッダー、フッターがありました。
ちなみに、サイトバーでトップページで非表示に設定しましょう。
だけど、問題はコンテンツの幅は制限されており、横いっぱいを使えたいです。 その問題を解決するには、ヘッダーのカスタマイズが必要です。
カスタマイズ： header-front.php作成
コンテンツの幅のCSSはcontentクラスです。
header.php→/tmp/body-top.phpの下記のコードになります。そこでbodyの直後にコンテンツの幅を制限されました。
" itemscope itemtype="https://schema.org/Blog">では、子テーマでトップページ専用のヘッダーファイルheader-front.phpを作り、呼び出しのbody-top-front.phpもトップページ専用に作り、他のページに影響しないです。
header-front.phpでは下記のように修正
/body-top-front'); ?>
-->body-top-front.phpではContentクラスを削除
そうすると、トップページでコンテンツの幅が制限なくし、幅いっぱいに自由に設計できました。
カスタマイズ： front-page.php修正
土台を作りました。では設計通りにトップページを実装するだけです。 後はHTML/CSS、Javascriptを利用し、コーティングです。
ちなみに、CSSも子テーマのstyle.cssを修正しましょう。
子テーマを修正するため、Cocoonのアップデートで影響されないです。そして今回のカスタマイズはトップページだけに影響しますため、最小限の影響になります。
まとめ
Cocoonのトップページをカスタマイズ方法を記載しました。 自分が実践した内容をまとめたものです。質問があればコメントをお待ちしております。