Cocoonをコーポレートサイト型にする方法・トップページ

Cocoonカスタマイズ

WordPressのCocoonテーマをコーポレート型サイトとしてカスタマイズする方法をお話します。

Cocoonは標準ではヘッダーが表示された後にすぐブログ記事が表示される構成になっているので、この上に固定ページを作ればコーポレートサイトらしくなります。

一番簡単な方法はWordPres管理画面の「設定」→「表示設定」から「ホームページ」を表示したい固定ページに選択することですが、ブログ表示が消えてしまいます。
投稿の新着記事一覧のショートコードを追加することで記事一覧を並べて表示できますが、元のデザインがそのまま表示されなくなるので。

今回はCocoon元々のブログ記事表示はそのままで、固定ページを手動で追加する方法をやってみます。ちょっと面倒くさいですが、覚えてしまえば柔軟なカスタマイズができます。

トップページに表示したい固定ページのタグを埋め込む

まずはトップページに表示したい固定ページを作ります。

固定ページ作成

編集画面のアドレス部分、固定ページのIDを控えておきます。あとでトップページに呼び出すので。

ページID

それから、トップページに固定ページを表示させるためのタグを埋め込みます。
FTPもしくは、サーバーのファイルマネージャーからテーマの「index.php」ファイルをダウンロードして表示します。wp-contentのtheme内、cocoonフォルダの中です。サーバーごとにファイルマネージャーまでたどり着く方法が異なるので、各サーバーのマニュアルを閲覧してください。

index.phpをダウンロード

ややこしければ、WordPress管理画面の「外観」→「テーマエディター」からindex.phpファイルを直接編集する方法もありますが、子テーマを作っていないとアップデートされた時に消えてしまうのと、バックアップは取っておいたほうが安全なのでなるべくサーバーからindex.phpファイルをダウンロードするほうが良いですね。

index.phpのバックアップを取ってからテキストエディタで開き、get_headerのタグを探します。

  1. <?php get_header(); ?>

上記はメニューなどのヘッダー部分のタグを読み込んでいるという意味です。今回はこの真下に作った固定ページを表示させたいので、下記のタグを追記します。

  1. <?php if( is_front_page() && !is_paged()): //トップページだけに作った固定ページを呼び出し ?>
  2. <?php
  3. $page_id = ○; //○を消して固定ページIDを記入します。半角数字のみです。
  4. $page = get_post($page_id, 'OBJECT', 'raw'); //指定のページIDから情報を取得
  5. $page_include = apply_filters( 'the_content',$page->post_content); //ページの本文を整形
  6. echo $page_include; //出力します
  7. ?>
  8. <?php endif; ?>

page_idの○の部分は、さっき作った固定ページのIDに書き換えてからコピペしてください。

index.phpを上書き保存したら、サーバーにアップロードします。
ブラウザに戻って、内容を変更したので表示し直します。

↓以下は実際の表示。ブログ記事一覧の上に、作った固定ページが表示されました。

実際のトップページの表示

ブログ記事はそのままのレイアウト表示で、固定ページを追加できました。

まとめ

今回はブログ記事一覧の上に固定ページを表示させる方法を書きましたが、ブログ記事表示を優先したいなら下など表示させたい場所に追記してもいいです。

タグを直接埋め込むメリットは、自由自在に好きな場所へ固定ページを表示させられるという点です。
固定ページ側から触れるなら更新も楽にできますので。

くれぐれもphpファイルを触るときは、必ず元のファイルをコピーしてバックアップしてから触るようにしましょう。何かあったらすぐに戻せますので。

ひと足踏み込んだカスタマイズの参考になれば嬉しいです。

[公開日] 2022年7月22日 / [最終更新日] 2024年2月25日 / カテゴリー:WordPress


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBクリエイター・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookXInstagram

同じカテゴリーの記事