【Simplicity2】テーマで空白のページ(いわゆるランディングページ)を作る方法

役に立つ情報でしたら是非拡散(シェア)をお願いします

もはやここまで来ると完全に【Simplicity2】の機能から外れてしまうようなネタです。

知人から「教えてもらった【Simplicity2】テーマとってもいいんだけど、テーマの要素に左右されないページを挿入できないか?」という相談がありました。

いろいろとやり取りした結果、要するにやりたいことは

  1. WordPressの管理画面からペラページ(空白ページ)を作りたい(後から修正できるようにもしたい)
  2. WordPressにインストールしているプラグインの機能はそのまま使いたい
  3. デザインの基本要素は【Simplicity2】のものを踏襲したい
  4. 独自デザインの割り当てをテーマ(子テーマ)のCSSへ追記して反映させたい

というもの。簡単に言うなぁ・・・と思いましたが興味もあったので実際に作ってみました。

スポンサーリンク



【Simplicity2】テーマで空白のページ(いわゆるランディングページ)を作る手順と考え方など

基本は固定ページテンプレートを作成するということになります。ここから書く内容で??という部分がある方はちょっとハードルが高いと思いますので断念された方がいいかもしれません

テンプレートを作る

親テーマの「page-template」の中に新しくテンプレートファイルを作ります。
テンプレートは基本的に

<?php
/**
 * Template Name: landpage
  */
?>

という「これはテンプレートですよ」という宣言が入ったものが先頭にあるphpファイルを任意の名前で作るだけです(別のテンプレートをコピーして名前変更とTemplate Name:の部分の文字列を変更すれば新規のテンプレートとして認識してくれます)。

ファイルの名前は「lp-temp」としました。

必要な要素をコピーして他の要素を追加する

基本は固定ページのテンプレートなので、page.phpの内容をそのままコピーします。

【Simplicity】のpageテンプレートはいろいろな部品を寄せ集めて作られていますので、get_template_part関数が使われている部品名のファイルの内容をどんどんコピーしてget_template_partの列へ上書きしていきます(要するに他の部品を引っ張るのをなくします)

いきなり先頭にあるのがヘッダー情報ですからheader.phpからコピーして・・・というのを行っていくわけです。

出来上がるとこのテンプレートのみで固定ページの表示ができるようになります。

そこから、ペラページ(普通のhtmlページ)で必要な要素とスクリプトやCSSの読み込み部分を残して不要なものをどんどん削除していきます。

そうして出来上がったものをこのページの末尾へソース表示しています(自己責任でコピーして使っていただいてもかまいません)のでじーっと見て何を残して何を削除しているのかを見てみてくださいね。

テンプレートを適用する方法

通常通り固定ページの新規作成をします。

特別な選択をするのは

  1. 固定ページの属性にある「テンプレート」を作成したものにする
  2. ページ設定の「ページタイプ」を【1カラム(広い)】にする

たったこれだけです。【Simplicity】は通常サイドバーのあるテーマなのですが、1カラムの表示方法も選択できるようになっているのでとっても便利ですね。

これで他のページや投稿と幅は同じで真っ白な固定ページが作れるようになります。

今回作ったテンプレートのソースは以下の通りです

<?php
/**
 * Template Name: landpage
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php
//////////////////////////////////
//ウェブマスターツール用のID表示
//////////////////////////////////
if ( get_webmaster_tool_id() ): ?>
<meta name="google-site-verification" content="<?php echo get_webmaster_tool_id() ?>" />
<?php endif;//ウェブマスターツールID終了 ?>
<meta charset="<?php bloginfo('charset'); ?>">
<?php //ビューポート
//モバイルもしくはページキャシュモードの時
if ( is_mobile() || is_responsive_enable() || is_page_cache_enable() ): ?>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
<?php else: ?>
  <meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<?php endif ?>
<link rel="alternate" type="application/rss+xml" title="<?php the_title(); //投稿のタイトル?>" />
<?php get_template_part('header-seo');//SEOの設定テンプレート?>
<?php //get_template_part('header-css');//CSS関連の記述まとめテンプレート?>
<?php //wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php //get_template_part('header-css-mobile-responsive');//モバイル時、レスポンシブ時のCSS関連ファイル読み込みテンプレート(本来ならheader-css.phpに一つにまとめたいところだけど、このテンプレート(モバイル関連の記述)をここで読み込まないとモバイルで表示が崩れるサーバもあったので、あえて分けて書いてあります。?>
<?php //get_template_part('header-javascript');//JavaScript関連の記述まとめテンプレート?>
<?php the_apple_touch_icon_tag();//Appleタッチアイコンの呼び出し ?>
<?php if ( is_facebook_ogp_enable() ) //Facebook OGPタグ挿入がオンのとき
  get_template_part('header-ogp');//Facebook OGP用のタグテンプレート?>
<?php if ( is_twitter_cards_enable() ) //Twitterカードタグ挿入がオンのとき
  get_template_part('header-twitter-card');//Twitterカード用のタグテンプレート?>
<?php get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?>
<?php get_template_part('head-custom-field');//カスタムフィールドの挿入(カスタムフィールド名:head_custom)?>
<?php wp_head(); ?>
</head>
  <body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">
    <div id="container">
      <!– 本体部分 –>
      <div id="body">
        <div id="body-in">
          <!– main –>
          <main itemscope itemprop="mainContentOfPage">
            <div id="main" itemscope itemtype="http://schema.org/Blog">
        <div id="the-content" class="entry-content">
        <?php the_content(); //本文の呼び出し?>
        </div>
       <footer>
        </footer>
        </article><!– .article –>
      </div><!– .page –>
            </div><!– /#main –>
          </main>
        </div><!– /#body-in –>
      </div><!– /#body –>
      <!– footer –>
      <footer itemscope itemtype="http://schema.org/WPFooter">
        <div id="footer" class="main-footer">
          <div id="footer-in">
          <div class="clear"></div>
        </div><!– /#footer-in –>
        </div><!– /#footer –>
      </footer>
      <?php get_template_part('button-go-to-top'); //トップへ戻るボタンテンプレート?>
      <?php get_template_part('buttons-footer-mobile'); //フッターモバイルボタンのテンプレート?>
    </div><!– /#container –>
    <?php wp_footer(); ?>
    <?php get_template_part('footer-custom-field');//カスタムフィールドの挿入(カスタムフィールド名:footer_custom)?>
    <?php get_template_part('footer-slicknav'); //SlickNav用のテンプレート(ツリー式モバイル用メニュー)?>
    <?php get_template_part('footer-javascript'); //フッターで呼び出すJavaScript用のテンプレート?>
    <?php get_template_part('analytics'); //アクセス解析用テンプレート?>
    <?php get_template_part('footer-insert'); //</body>手前のフッターにタグを挿入したいとき用のテンプレート?>
  </body>
</html>

興味のある方は頑張って作ってみてくださいね

トップへ戻る