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
同じカテゴリーの記事
-
WordPressをサーバーにインストールする（ロリポップ！）まずは、ロリポップ！の管理画面にログインします。 （1）サーバー申し込み時の「アカウント」を入力 （2）「ドメイン」を選 [続きを読む]
-
XWRITE子テーマの作り方備忘録WordPressをカスタマイズする際に使う「子テーマ」ですが、作り方の備忘録を書いておきます。XWRITEテーマ向けに [続きを読む]
-
Twenty Seventeen（無料テーマ）でホームページを作るWordPressは「テーマ」と呼ばれるテンプレートでデザインを変更することができます。 無料のものから有料のものまであ [続きを読む]
-
Jetpackでお問い合わせフォームを作るWordPressでは標準でお問い合わせフォームが付いていないので、「プラグイン」というオプション機能を入れます。 Wo [続きを読む]
最新の投稿
2024年04月25日
2024年04月25日
2024年04月11日
2024年04月01日
2024年03月22日
カテゴリー
アーカイブ
