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

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

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

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

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

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

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

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

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

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

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



<?php get_header(); ?>

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



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

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

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

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

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

まとめ

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

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

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

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

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

この記事を書いた人

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

この記事が気に入ったら
いいね！をお願いします

Follow @popodesign

最新情報をお届けします

同じカテゴリーの記事

Jetpackでお問い合わせフォームを作る
WordPressでは標準でお問い合わせフォームが付いていないので、「プラグイン」というオプション機能を入れます。 Wo [続きを読む]
WordPressの[…]を【続きを読む】に表示・抜粋文字数を変更する方法
PHPのバージョンを上げたら、投稿の抜粋を表示するPHPタグで下記のようなエラーが出ました。 Warning: Unde [続きを読む]
WordPressの自動更新機能を案件で使用したことについて
WordPress5.5から標準機能でシステムとプラグイン、テーマの自動更新ができるようになったので、昨年頃から実際の制 [続きを読む]
Lazy Blocksプラグインの使い方・WordPressカスタムブロックの作り方
WordPressのブロックエディターで、独自のカスタムブロックを作れるプラグイン、Lazy Blocksを使ってみたの [続きを読む]