【上級者向け】Cocoonのトップページをカスタマイズ方法

ITエンジニア

今までCocoonでブログ運営したけど、

カッコいいトップページを自由に設計したい。

完成度が高いCocoonを全部捨てるのは勿体ない。

Cocoonでブログを運用したけど、トップページを自由にカッコいいもので作りたいけど、自作テーマ作るのは時間かかるし、頻繁にメンテナンスする自信がないです。何かいい方法がないかを考える時、Cocoonをそのまま利用して、トップページだけをカスタマイズする方法したらいいかなと実践しました。

この記事はCocoonのトップページを自由にカスタマイズ方法を記載しています。ご参考になれたら幸いです。

●この記事を実践する前提スキル
●完成サンプルサイト
●カスタマイズ方法


この記事を実践する前提スキル

この記事を実践するには下記のスキルを前提とします。
・HTML/CSSの基本を理解
HTML/CSSを書けるなら、基本問題ないです。PHP、WordPressスキルもあれば良いけど、なくてもこの記事を真似すればできます。

完成サンプルサイト

このサイトが実践した結果です。

ヤキンブ | 人生向上する情報を発信
ヤキンブではFXトレードスキル、株分析スキル、ITエンジニアスキルを向上し、人生を豊かにするブログ

基本制限がなく、どのデザインでも実現可能です。
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を作りましょう。完成形は下図です。

<?php get_header('front'); ?>

<?php get_footer(); ?>

フッターは共通のものを利用しますが、ヘッダーは後説明しますが、メインのコンテンツのCSSも含めて、カスタマイズする必要で、トップページ専用のヘッダーheader-front.phpを作りました。
そうすると、下図のように、ヘッダー、フッターがありました。

ちなみに、サイトバーでトップページで非表示に設定しましょう。

だけど、問題はコンテンツの幅は制限されており、横いっぱいを使えたいです。
その問題を解決するには、ヘッダーのカスタマイズが必要です。

カスタマイズ: header-front.php作成

コンテンツの幅のCSSはcontentクラスです。

header.php→/tmp/body-top.phpの下記のコードになります。そこでbodyの直後にコンテンツの幅を制限されました。


  <div id="content" class="content cf">

    <div id="content-in" class="content-in wrap">

        <main id="main" class="main<?php echo get_additional_main_classes(); ?>" itemscope itemtype="https://schema.org/Blog">

では、子テーマでトップページ専用のヘッダーファイルheader-front.phpを作り、呼び出しのbody-top-front.phpもトップページ専用に作り、他のページに影響しないです。

header-front.phpでは下記のように修正

<?php //サイトヘッダーからコンテンツまでbodyタグ最初のHTML
get_template_part('tmp/body-top-front'); ?>

<!-- <?php var_dump(is_singular('news')); ?> -->

body-top-front.phpではContentクラスを削除

  <?php //メインカラム手前に挿入するユーザー用テンプレート
  get_template_part('tmp-user/main-before'); ?>

  <div id="front-content" class="cf">

    <div id="content-in" class="content-in ">

        <main id="main" class="" itemscope itemtype="https://schema.org/Blog">

そうすると、トップページでコンテンツの幅が制限なくし、幅いっぱいに自由に設計できました。

カスタマイズ: front-page.php修正

土台を作りました。では設計通りにトップページを実装するだけです。
後はHTML/CSS、Javascriptを利用し、コーティングです。

ちなみに、CSSも子テーマのstyle.cssを修正しましょう。

子テーマを修正するため、Cocoonのアップデートで影響されないです。そして今回のカスタマイズはトップページだけに影響しますため、最小限の影響になります。

まとめ

Cocoonのトップページをカスタマイズ方法を記載しました。
自分が実践した内容をまとめたものです。質問があればコメントをお待ちしております。

コメント

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