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のプラグインを多用するリスクと対策先日、WordPressで作ったサイトのバックアップと、ヘッダー画像を差し替えたいとのご相談があったのですが、 サイトを [続きを読む]
-
WordPressメールフォームで「スパム送信の可能性があります」表示の修正方法WordPressでメールフォームプラグインを設置して、送信テストをしていると「スパム送信の可能性があります」と表示され [続きを読む]
-
ポチッと押すだけ！初心者も簡単WordPressのバックアップ【Updraft Plus】WordPressは標準でバックアップ機能が付いていないので、バックアップする方法を記載しました。 バックアップだけでな [続きを読む]
-
WordPressの無料テーマを配布しました・日本語スマホ対応WordPressでの制作案件で使用しているベーステーマを無料テーマとして配布してみました。主に小規模の制作関係の方に特 [続きを読む]
最新の投稿
2024年11月12日
2024年10月31日
2024年10月31日
2024年10月17日
2024年10月02日
カテゴリー
アーカイブ
