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

公開日: 使い方など
Knowledge Base Wordpress パソコン カスタマイズ 設定

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

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

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

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

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

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

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

テンプレートを作る

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

<?php
/**
 * Template Name: landpage
  */
?>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

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

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

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

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

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

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

WordPressの標準ギャラリーでカテゴリーから自動抽出&自動更新、画像クリックで拡大表示(Lightbox)をする方法

WordPress Popular Postsで収集したデータをダッシュボード(管理画面)で利用する方法

【WordPress】たった数個のプラグインと少しの設定で商品販売サイトを作る方法


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

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

特別な選択をするのは

  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>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報