WordPress×賢威でランディングページを作る方法

WordPress×賢威で稼ぐトレンド講座 TOP
賢威カスタマイズ
WordPress×賢威でランディングページを作る方法

2015年9月19日 [賢威カスタマイズ]

WordPress×賢威でランディングページを作りたいけどHTMLやCSSの知識がないと何をどうすればいいのかわかりません。ここではHTMLやCSSの知識があまりなくても、特定の固定ページをランディングページとして使えるようにする方法をご紹介します。

1 ランディングページ用の固定ページを作る
2 ヘッダー部分やフッターを削除する
3 ランディングページ用の固定ページ（pagelp.php）でランディングページを作る
4 ランディングページのデザインを変更する

ランディングページ用の固定ページを作る

WordPress×賢威でランディングページを作るには固定ページを使います。ランディングページは「問い合わせ」や「サイトマップ」などの他の固定ページのような構成・デザインではなく独特の構成・デザインにする必要があります。

FTPソフトを使って、page.php（固定ページテンプレート）のコピーを作ります。このコピーがランディングページ用の固定ページテンプレートになります。

FTPソフトをサイトに接続し、ドメイン名のついたフォルダ＞public_html＞wp-content＞themes＞keni◯◯（例:keni62_wp_corp_140820）を開きます。

この中にある「page.php」を任意のフォルダにコピーし、ファイル名を「page.php」から他の名前に変更します。ここでは「pagelp.php」に変更します。作成した「pagelp.php」は、keni◯◯のフォルダにコピーします。

「pagelp.php」のテンプレートに名前をつけます。

WordPress管理画面＞外観＞テーマの編集をクリックします。右側のテンプレートの欄に先ほど作成した「pagelp.php」が新しく表示されています。

「pagelp.php」を開いて一番上に下記のコードを追記します。

<?php
/*
Template Name: ランディングページ
*/
?>

<?php

Template Name: ランディングページ

ヘッダー部分やフッターを削除する

ヘッダー（ページの上部）は以下のように3層の部分にわかれています。

headerd01

グローバルナビを消す

このうちグローバルナビだけ削除する場合は、先ほど「pagelp.php」に追記したコードのすぐ下にあるコードを変更します。これは「header.php」の必要箇所のみを「pagelp.php」にコピーしているということです。※変更後のコードは「header.php」の前半部分です。

＜変更前＞

<?php get_header(); ?>

1	<?php get_header(); ?>

＜変更後＞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope="itemscope" itemtype="http://schema.org/">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php title_keni(); ?></title>
<?php if (the_keni('mobile_layout') == "y") { ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php } ?>
<?php if (the_keni('view_meta') == "y") { ?>
<meta name="keywords" content="<?php keyword_keni(); ?>" />
<meta name="description" content="<?php description_keni(); ?>" />
<?php } ?>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/common.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/layout.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/design.css" type="text/css" media="all" />
<?php if (the_keni('mobile_layout') == "y") { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/mobile.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/mobile_layout.css" type="text/css" media="all" />
<?php } ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/advanced.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/home-icon.png" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<?php wp_enqueue_script('jquery');
$public = get_option('blog_public');
if ($public > 0) {
	echo getIndexFollow();
}?>
<?php canonical_keni(); ?>
<?php wp_head();?>
<?php facebook_keni();
google_plus_keni();
tw_cards_keni(); ?>
</head>

<body <?php if (isset($post->ID)) : body_class(getPageLayout($post->ID)); else: body_class(notFoundLayoutView()); endif; ?>>

<div id="fb-root"></div>
<div id="container">


<!--▼ヘッダー-->
<div id="header">
<div id="header-in">

<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>


<h1><?php h1_keni(); ?></h1>
</div>

<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>

</div>
</div>
<!--▲ヘッダー-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<?php if (the_keni('mobile_layout') == "y") { ?>

<?php } ?>

<?php if (the_keni('view_meta') == "y") { ?>

<?php } ?>

<?php if (the_keni('mobile_layout') == "y") { ?>

<?php } ?>

<?php wp_enqueue_script('jquery');

$public = get_option('blog_public');

if ($public > 0) {

echo getIndexFollow();

}?>

<?php canonical_keni(); ?>

<?php wp_head();?>

<?php facebook_keni();

google_plus_keni();

tw_cards_keni(); ?>

</head>

<body <?php if (isset($post->ID)) : body_class(getPageLayout($post->ID)); else: body_class(notFoundLayoutView()); endif; ?>>

</div>

</div>

ヘッダーを消す

グローバルナビだけじゃなくヘッダーも消したい場合は、上記のからまでの部分を削除します。

トップを消す

トップを消す場合は、「pagelp.php」の下の方にある次のコードを変更します。

＜変更前＞

<?php get_footer(); ?>

1	<?php get_footer(); ?>

＜変更後＞

<!--▼フッター-->
<div id="footer">
<div id="footer-in">


<!--アドレスエリア-->
<div class="area01">
<h3><?php echo the_keni('footer_left_title'); ?></h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" alt=\"".the_keni('author_image_alt')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->


<!--フッターメニュー-->
<div class="area02">
<h3><?php echo the_keni('footer_right_title'); ?></h3>
<div class="footer-menu">
<?php	
get_globalmenu_keni('footermenu1');
get_globalmenu_keni('footermenu2');
?>
</div>
</div>
<!--/フッターメニュー-->


</div>

</div>
<!--▲フッター-->

<?php

if (the_keni('author_image') != "") {

echo '<p><img src="'.the_keni('author_image')."\" alt=\"".the_keni('author_image_alt')."\" /></p>\n";

}

if (the_keni('author_info') != "") {

echo nl2br(the_keni('author_info'));

}

</div>

<?php

get_globalmenu_keni('footermenu1');

get_globalmenu_keni('footermenu2');

</div>

</div>

トップは、なぜかフッターと同じ場所にコードがあります。WordPress管理画面＞外観＞テーマ編集、右側のテンプレートのフッター（footer.php）です。上の手順は、この「footer.php」のからまでをコピーしているだけです。

フッターを消す

トップだけでなくフッターも消す場合は、「pagelp.php」の下記の箇所を消すだけです。※トップを消すときに変更した部分です。

<?php get_footer(); ?>

1	<?php get_footer(); ?>

パン屑ナビを消す

グローバルナビ（メニュー）のすぐ下に「サイト名TOP＞ページタイトル」の表示があります。これはサイトのどの位置のページを見ているかを示すもので「パン屑ナビ（パン屑リスト）」と言います。

ランディングページに、この「パン屑ナビ」も必要ないので消します。「pagelp.php」の中の次のコードを消すだけです。

<?php
if (!is_front_page()) { ?>
<!--▼パン屑ナビ-->
<div id="breadcrumbs">
<ol>
<?php the_breadcrumbs(); ?>
</ol>
</div>
<!--▲パン屑ナビ-->
<?php } ?>

<?php

if (!is_front_page()) { ?>

<ol>

<?php the_breadcrumbs(); ?>

</ol>

</div>

<?php } ?>

ランディングページ用の固定ページ（pagelp.php）でランディングページを作る

WordPress管理画面＞固定ページ＞新規追加をクリックして、新しい固定ページを作ります。

ページ右側のページ属性「テンプレート」から「ランディングページ」を選択します。

ランディングページ09

その下の「レイアウト」を「1カラム」に変更、「コンテンツエリア」のサブコンテンツとサイドバーの両方を「表示しない」に変更します。

ランディングページ10

ランディングページのデザインを変更する

通常、ページの背景や見出しのデザイン、文字の色などをdesign.cssで変更すると、サイト全体のページのデザインが変更されてしまいます。ランディングページだけのデザインを変更するには、デザインを変更したいページまたはテンプレートを指定します。

特定の固定ページのみのデザインを変更する場合は、その固定ページの記事IDを調べます。ランディングページのURLの「page_id=◯」の数字です。

同じデザインのランディングページを複数作成する場合は、ランディングページのテンプレート（pagelp.php）のデザインを変更します。まず「pagelp.php」の一部を書き換えます。WordPress管理画面＞外観＞テーマ編集、右側のテンプレート欄から「pagelp.php」をクリックします。コードを以下のように変更します。

＜変更前＞

<body <?php if (isset($post->ID)) : body_class(getPageLayout($post->ID)); else: body_class(notFoundLayoutView()); endif; ?>>

1	<body <?php if (isset($post->ID)) : body_class(getPageLayout($post->ID)); else: body_class(notFoundLayoutView()); endif; ?>>

＜変更後＞

<?php $add_class = (isset($post->ID)) ? getPageLayout($post->ID) : notFoundLayoutView(); ?>
<body <?php body_class($add_class." lp-design"); ?>>

1 2	<?php $add_class = (isset($post->ID)) ? getPageLayout($post->ID) : notFoundLayoutView(); ?> <body <?php body_class($add_class." lp-design"); ?>>

「lp-design」の箇所は任意の名前です。

例えば背景色を変更する場合、外観＞テーマの編集をクリックします。右側のスタイルの欄の「design.css」をクリック。一番下の方に次のコードを追加します。

特定の固定ページ（記事ID 92）の背景色を変更

/*------------------------------------------------------------
　ランディングページ（id=92）のデザイン
-------------------------------------------------------------*/
.page-id-92 #main-in {
    background-color: #c0c0c0;
}

/*------------------------------------------------------------

　ランディングページ（id=92）のデザイン

-------------------------------------------------------------*/

.page-id-92 #main-in {

background-color: #c0c0c0;

}

ランディングページのテンプレート（pagelp.php）の背景色を変更

/*------------------------------------------------------------
　ランディングページテンプレート（pagelp.php）のデザイン
-------------------------------------------------------------*/
.lp-design #container {
    background-color: #c0c0c0;
}

/*------------------------------------------------------------

　ランディングページテンプレート（pagelp.php）のデザイン

-------------------------------------------------------------*/

.lp-design #container {

background-color: #c0c0c0;

}

この例を元にして、デザインを変更してください。デザインの変更や背景画像の挿入などは下記の記事が役に立つと思います。

賢威の見出しデザインをカスタマイズする

賢威ヘッダー（ページ上部）の文字の色・サイズ・背景を変える

賢威ヘッダーを画像に変える－背景画像挿入・文字と画像の入れ替え

賢威　サイト全体の背景色の変更・背景画像の挿入の方法

こちらの記事も参考になります

WordPress☓賢威コメント欄を削除する方法・非表示にする方法最近のトレンドブログは、まるで大手メディアが運営しているかのようにみえるサイトも増えてきました。このようなサイトを作りたいと思ったとき […]
WordPress ページを表示するプラグインWP-PageNavi の使い方ブログの記事が増えてくると、ページ最下部の「以前の記事へ→」「←新しい記事へ」だけじゃ使い勝手が悪いので、Googleで検索したときに一番 […]
WordPress 個別記事にページナビ[前の記事][次の記事]をつける方法個別記事の前後の記事に関連性がある場合、「前の記事へ」「次の記事へ」などのページナビ（ページネーション）があった方が便利ですよね。ここ […]
賢威のサイトタイトル下のメニュー【グローバルナビ】のデザインをカスタマイズする賢威ではグローバルナビ（グローバルメニュー）が標準装備されています。グローバルナビは、どのページを開いてもページの上に表示されるメニ […]
賢威サイトタイトルの下のメニュー（グローバルナビ）を作る方法賢威テーマを使ったWordPressのサイトタイトルの下にあるメニュー（グローバルナビ）の設置方法について解説します。プルダウンメニュ […]
賢威7 サイト全体・各エリアの背景色をカスタマイズする賢威7のサイト全体と各エリアの背景色の変更について解説します。スタンダード版は、1箇所の変更でサイト全体の背景色を変えることができますが、 […]

コメントを残す

サブコンテンツ

WordPress×賢威でランディングページを作る方法