スマートフォンが普及し、宣伝に特化したランディングページが流行して以来、一般的な会社のホームページや個人のサイトでも、長い縦スクロールでシングルページのサイトというのが増えています。
ワードプレスは基本的にはブログタイプのページを作るシステムですので、ランディングページの作成にはあまり向かないのですが、それでもできないわけではありません。
今回ご紹介するやり方は「固定ページ」をつなげてランディングページにするやり方ですので、各ブロック毎に内容を書き換えたりできるため、追加や修正が容易です。それではみていきましょう。
ステップ１子テーマを用意する
まずランディングページ作る前に子テーマというものを用意します。子テーマとは、WordPressのテーマ（テンプレート）をカスタマイズするために作るテーマになります。親テーマの一部分だけCSSやページ構成を変えたいときに便利です。
外観→テーマの編集から親テーマのindex.phpやcssなどを変更することもできるのですが、WordPressのアップデートやテーマのアップデートがあった際に機能しなくなったり、上書きされてしまうこともあるので基本的には子テーマでカスタマイズするほうが安全です。
子テーマ作成に最低限必要なファイルは
style.css
functions.php
の２つになります。
この２つのファイルを保存するためのフォルダをFTPソフトなどで作ります。
今回はtwentyseventeenのテーマの子テーマでtwentyseventeen_childとして作りました。親テーマ名_childというフォルダにした方が、あとでわかりやすいかと思います。
このtwentyseventeen_childにstyle.cssとfunctions.phpを入れます。
style.cssには
Theme Name: twentyseventeen_child
Description: WordPressの子テーマです
Author: road-sign
Template: twentyseventeen
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
と先頭に入れます。
Theme Name:新しく作った子テーマ名
Template:元の親テーマ名
です。
functions.phpには
Theme Name: twentyseventeen_child
Description: WordPressの子テーマです
Author: road-sign
Template: twentyseventeen
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
<?php
add_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’)
);
}
と入れておいてください。
ステップ２ 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(); ?>
今回は画面いっぱいに背景を設定する全幅のテンプレートにしますので、サイドバーなどは読み込んでいません。
ステップ３ 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>ブロック１</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>ブロック２</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>ブロック３</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>ブロック４</h2>
<?php
$page_data = get_page_by_path(‘number04); $page = get_post($page_data);
$content = $page -> post_content;
echo $content; ?>
</div>
・・・といった感じで並べると、各固定ページの内容を連続してひとつのページでランディングページにすることができます。
この方法だと各ブロックごとにCSSも指定できますので、WordPressでランディングページを作れるようになります。