賢威6.1にレビューやデモページに使える1カラムレイアウトを追加する

この記事は約10分で読めます。

  • LINEで送る

賢威6に1カラムデモページ作成

賢威6以降、WordPressの管理画面上でカラム数の選択が可能になりました。
メインとなる記事は2カラム、デモページやレビューページを1カラムで表示するというように、
各コンテンツに沿ったカラム数の選択ができるので、賢威テンプレートのみでサイトを構築できます。

しかし、1カラムを選択するとフッターがメインコンテンツの下側に表示され、
レビューページ等のコンバージョンコンテンツには使いづらくなってしまいます。
(ユーザーがページ遷移しやすい最下部がフッターコンテンツとなるため)

そこで、1カラムでレビューページやデモページ用にフッターを非表示にして、
しっかり、コンテンツの下部でコンバージョンを狙えるレイアウトを作成する方法を説明します。

投稿・固定ページのレイアウト選択に「1カラムデモ」を追加

賢威のカラム数詳細

投稿画面等で選択できる通常の1カラムは、図の通りフッター、サブコンテンツやサイドバーが
メインコンテンツ下部に表示されます、まずはこれを表示しないレイアウトを作成します。

賢威の「functions.php」を修正します。

//---------------------------------------------------------------------------
//	管理画面上でのレイアウトの指定
//---------------------------------------------------------------------------
$layout = array("def" => "共通設定を適用する",
								"col1" => "1カラム",
								"col1d" => "1カラムデモ",
								"col2" => "2カラム",
								"col2r" => "2カラムリバース",
								"col3" => "3カラム",
								"col3r" => "3カラムリバース"
								);

管理画面上の「外観 > テーマ編集」から「functions.php」を開きます。
「管理画面上でのレイアウトの指定」で検索し、上記のソース部分を探します。

6行目のとおり、「”col1d” => “1カラムデモ”,」を追加します。
「col1d」、「1カラムデモ」は好みの名称で構いません。
最後の「,(カンマ)」を忘れないように注意してください。

レイアウト選択

投稿画面や固定ページのレイアウトで「1カラムデモ」が選択できるようになります。

サイドバー、サブコンテンツを非表示にする

コンテンツエリア変更

投稿画面や固定ページの「コンテンツエリア」でサブコンテンツとサイドバーを
「表示しない」にすると、該当のページのみ非表示になります。

1カラムデモページの不要部分を非表示にする

レビュー、デモページ専用の1カラムは作成できましたが、
フッターやグローバルナビなど、細かな不要部分が残っているので非表示とします。

方法は簡単で、非表示にしたい部分を以下のコードで囲みます。

<?php if (getPageLayout(get_the_ID()) != 'col1d') { ?>
 :
<?php } ?>

「col1d」は1カラムデモを追加した時と同じ英数字にしてください。
以下で、それぞれの不要部分を非表示にする方法の詳細を説明します。

フッターとトップメニュー

1カラムデモページのフッターとトップメニュー(右上のサイトマップ)を非表示にします。

<?php if (getPageLayout(get_the_ID()) != 'col1d') { ?>
<!--▼フッター-->
<div id="footer">
<div id="footer-in">


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


<!--フッターメニュー-->
<div class="area02">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>
<!--/フッターメニュー-->


</div>

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

<!--▼トップメニュー-->
<div id="top">
<div id="top-in">

<ul id="top-menu">
<li><a href="<?php bloginfo('url'); ?>/sitemaps/">サイトマップ</a></li>
</ul>

</div>
</div>
<!--▲トップメニュー-->
<?php } ?>

「外観 > テーマ編集」から「footer.php」を開きます。
「<!–▼フッター–>」で検索し、コメントの前後にコードを追加します。

これで追加した「1カラムデモ」の場合のみフッターとトップメニューが非表示になります。

グローバルナビ

1カラムデモページのグローバルナビを非表示にします。

<?php if (getPageLayout(get_the_ID()) != 'col1d') { ?>
<!--▼グローバルナビ-->
<div id="global-nav">
<dl id="global-nav-in">
<dt class="btn-gnav">メニュー</dt>
<dd class="menu-wrap">
<ul id="menu" class="menu">
<?php echo get_globalmenu_keni(); ?>
</ul>
</dd>
</dl>
</div>
<!--▲グローバルナビ-->
<?php } ?>

「外観 > テーマ編集」から「header.php」を開きます。
「<!–▼グローバルナビ–>」で検索し、コメントの前後にコードを追加します。

これで、追加した「1カラムデモ」の場合のみグローバルナビが非表示になります。

パンくずリストとソーシャルボタン

1カラムデモページのパンくずリストとソーシャルボタンを非表示にします。
パンくずリストは以下のphpファイルに記載されています。

  • 404 テンプレート (404.php)
  • アーカイブ (archive.php)
  • メインインデックスのテンプレート (index.php)
  • 固定ページテンプレート (page.php)
  • 単一記事の投稿 (single.php)

この内、デモページに関係するphpは「page.php」と「single.php」です。
両方とも同じ修正内容で非表示にできますが、デモやレビューページは
固定ページで作成することがほとんどだと思いますので、固定ページでの修正を例にします。

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

「外観 > テーマ編集」から「page.php」を開きます。
「<!–▼パン屑ナビ–>」で検索し、コメントの前後にコードを追加します。

ソーシャルボタンもパンくずリストと同様に「page.php」を修正します。

<?php if (getPageLayout(get_the_ID()) != 'col1d') { ?>
<?php get_template_part('social-button'); 
<?php }

条件文終了の「<?php }」に「>」が入っていないのは誤植ではありません。
続きのコードとの関係上、ここで「>」をつけると崩れてしまいます。

これで、追加した「1カラムデモ」の場合のみパンくずリストとソーシャルボタンが非表示になります。

コンテンツ部分の幅を変更する

コンテンツ部分の幅を変更します。
賢威の全てのレイアウト幅はCSSで管理されているので、1カラムデモもCSSに追加します。

/*--------------------------------------------------------
1カラムデモレイアウト
--------------------------------------------------------*/

.col1d #container,
.col1d #top,
.col1d #header,
.col1d #global-nav,
.col1d #main,
.col1d #main-image,
.col1d #footer,
.col1d .copyright{
	width: 100%;
	min-width: 950px;
}

.col1d #top-in,
.col1d #header-in,
.col1d #global-nav-in,
.col1d #main-in,
.col1d #main-image-in,
.col1d #footer-in,
.col1d .copyright p{
	width: 950px;
	margin: auto;
}

.col1d #main-contents{ width: 100%; }

「外観 > テーマ編集」から「layout.css」を開き、上記のコードを全て追加します。
元々「1カラムレイアウト」がありますので、コピーして「col1」を「col1d」に変更します。

「min-width: 950px;」や「width: 950px;」の数値を変更すると、横幅を自由に縮小・拡大できます。

まとめ

レビューやデモなどに利用できる、1カラムレイアウトの作成を説明しました。
繰り返しとなりますが、以下の条件文を追加することで表示/非表示をコントロールできます。

<?php if (getPageLayout(get_the_ID()) != 'col1d') { ?>
 :
<?php } ?>

phpを複雑にしすぎるのは、レスポンスにも関わるのでおすすめできませんが、
さらに応用して、オリジナルの1カラムページを作成してください。

  • LINEで送る

コメントを残す

このページの先頭へ