3ステップで完成!WordPressでランディングページを作る方法

スマートフォンが普及し、宣伝に特化したランディングページが流行して以来、一般的な会社のホームページや個人のサイトでも、長い縦スクロールでシングルページのサイトというのが増えています。

ワードプレスは基本的にはブログタイプのページを作るシステムですので、シングルページの作成にはあまり向かないのですが、それでもできないわけではありません。今回ご紹介するやり方は「固定ページ」をつなげて一つのページにするやり方ですので、各ブロック毎に内容を書き換えたりできるため、追加や修正が容易です。それではみていきましょう。

ステップ1子テーマを用意する

まず子テーマというものを用意します。子テーマとは、WordPressのテーマ(テンプレート)をカスタマイズするために作るテーマになります。親テーマの一部分だけCSSやページ構成を変えたいときに便利です。
外観→テーマの編集から親テーマのindex.phpやcssなどを変更することもできるのですが、WordPressのアップデートやテーマのアップデートがあった際に機能しなくなったり、上書きされてしまうこともあるので基本的には子テーマでカスタマイズするほうが安全です。

子テーマ作成に最低限必要なファイルは

style.css
functions.php

の2つになります。

この2つのファイルを保存するためのフォルダをFTPソフトなどで作ります。

上の画像はtwentyseventeenのテーマの子テーマでtwentyseventeen_childとして作りました。親テーマ名_childというフォルダにした方が、あとでわかりやすいかと思います。

このtwentyseventeen_childにstyle.cssとfunctions.phpを入れます。

style.cssには

と先頭に入れます。

Theme Name:新しく作った子テーマ名
Template:元の親テーマ名

です。

functions.phpには

<?phpadd_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );function theme_enqueue_styles() {wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style'));}

と入れておいてください。

ステップ2 front-page.phpを子テーマに追加しする

さらに子テーマのフォルダにfront-page.phpを追加します。front-page.phpはindex.phpやhome.phpよりも優先してトップページとして表示されます。
※home.phpでもかまわないのですが、管理者画面の表示設定の「フロントページ」で選択されているページはあるとそちらが優先されてしまいますので、紛れが発生しないためにもfront-page.phpをお勧めします。

front-page.phpには以下を記述します。

<?php get_header(); ?><main class="main">  <h1>トップページ</h1></main><?php get_footer(); ?>

今回は画面いっぱいに背景を設定する全幅のテンプレートにしますので、サイドバーなどは読み込んでいません。

ステップ3 front-page.phpに各固定ページを読み込む

ここまでくればほぼ完成です。

上記の<main></main>の間に

<?php$page_data = get_page_by_path('number01); $page = get_post($page_data);$content = $page -> post_content;echo $content; ?>

と差し込みます。

path(‘number01);の太字の部分はスラッグと呼ばれるもので、固定ページや投稿ページに設定できる名前のようなものです。投稿や固定ページの表示オプション→スラッグを選択することで、スラッグの入力欄が表示されます。スラッグはなるべく半角の英語・数字で入力しましょう。

このスラッグで設定された固定ページが表示されます。

そしてこれを

<div class="div01"><h2>ブロック1</h2><?php$page_data = get_page_by_path('number01); $page = get_post($page_data);$content = $page -> post_content;echo $content; ?></div><div class="div02"><h2>ブロック2</h2><?php$page_data = get_page_by_path('number02); $page = get_post($page_data);$content = $page -> post_content;echo $content; ?></div><div class="div03"><h2>ブロック3</h2><?php$page_data = get_page_by_path('number03); $page = get_post($page_data);$content = $page -> post_content;echo $content; ?></div><div class="div04"><h2>ブロック4</h2><?php$page_data = get_page_by_path('number04); $page = get_post($page_data);$content = $page -> post_content;echo $content; ?></div>

・・・といった感じで並べると、各固定ページの内容を連続してひとつのページで繋げることができます。



以下、参考例として私が作ったサイトをご紹介しておきます。

この方法だと各ブロックごとにCSSも指定できますので、WordPressでランディングページをできるようになります^^

最新情報をチェックしよう!