「Stinger3」に１カラムテンプレートを追加する方法

公開日： 2014/07/05 最終更新日：2014/07/11

stinger3　１カラムテンプレートサンプル
このブログで使っているテーマ「Stinger3」はメインコンテンツ領域（横幅）が550pxとやや狭いです。いろんな方が横幅を広げるカスタマイズ記事は書いてますので、今回はランディングページの様な１カラムテンプレートの追加方法を実施してみましたので覚書として残しておきます。

スポンサードリンク

Stinger3 のレイアウト構造

テーマ「Stinger3」の基本レイアウトは下画像のようになっています。

１カラムテンプレートとしてサイド領域を消しメイン領域を横一杯に表示する

追加する前に既存部分のカスタマイズ

単に全体に横幅を拡げるだけならCSS定義の986pxの部分と550pxの部分をカスタマイズすればいけますが、１カラムテンプレートを追加する為には既存のテンプレートファイルをカスタマイズする事と１カラム用のテンプレートファイルを追加する必要があります。追加した１カラムの定義をパソコン版デザイン（style.css）とスマートフォンデザイン（smart.css）に追加します。

「Stinger3」のテーマフォルダ内ファイル構成

「Stinger3」のテーマフォルダ内には下表の22個のファイルとフォルダが存在します。その中で※印の部分をカスタマイズします。

№	ファイル名	拡張子名	カスタマイズ対象
1	header.php	php	※１
2	footer.php	php	※２
3	home.php	php	※３
4	index.php	php	※３
5	archive.php	php	※３
6	page.php	php	※３
7	single.php	php	※３
8	search.php	php	※３
9	404.php	php	※３
10	ad.php	php
11	comments.php	php
12	functions.php	php
13	scroll-ad.php	php
14	searchform.php	php
15	sidebar.php	php
16	page-itiran.php	php	※３ (Verによってない場合もある)
17	style.css	css
18	smart.css	css
19	home.html	html
20	screenshot.png	png画像
21	base.js	js
22	smartbase.js	js
23	images	フォルダー

カスタマイズ箇所

※１.header.phpに記載している#mainの指定を各テンプレートファイルに移動する為に削除します。

<div id="main">

1	<div id="main">

※２.footer.phpに記載している#mainの終了指定とサイド（sidebar.php）の読み込むを移動する為に削除します。

</div><!-- /#main -->
<?php get_sidebar(); ?>

1 2	</div><!-- /#main --> <?php get_sidebar(); ?>

※３.メインコンテンツを表示する各テーマファイルでヘッダー（header.php）を読み込んだ後に#mainの指定を追加しフッター（footer.php）を読み込む前に#mainの終了指定とサイド（sidebar.php）の読み込むを追加します。
※前方に追加するコード

<?php get_header(); ?>
<!--header.phpからmainを移動-->
<div id="main">
<div class="kuzu">

<?php get_header(); ?>

※後方に追加するコード

<!-- END div.post -->
</div>
<!-- /#main 2014/05/28 footer.phpから移動-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

１カラムテンプレートを追加する方法

１カラムのテンプレートを投稿ページとして追加するのか、固定ページとして追加するのかによって手順が変わってきます。今回は固定ページにランディングページの様な１カラムテンプレートを追加する方法を記載します。

カスタマイズ箇所と追加箇所

今回は#onecolumn-mainという領域名で追加
1.上表の№17 style.cssに１カラム用の領域を追加します。

#wrap #wrap-in #onecolumn-main {
     float: left;
     width: 908px;
     padding-right: 39px;
     padding-left: 39px;
     padding-top: 10px;
     padding-bottom: 20px;
     background-color: #FFF;
}

#wrap #wrap-in #onecolumn-main {

float: left;

width: 908px;

padding-right: 39px;

padding-left: 39px;

padding-top: 10px;

padding-bottom: 20px;

background-color: #FFF;

}

2.上表の№18 smart.cssに１カラム用の領域を追加します。

#onecolumn-main {
	overflow: hidden;
	background-color: #FFF;
	margin-bottom: 2px;
	padding-top: 1px;
	padding-right: 1px;
	padding-bottom: 1px;
	padding-left: 1px;
}

#onecolumn-main {

overflow: hidden;

background-color: #FFF;

margin-bottom: 2px;

padding-top: 1px;

padding-right: 1px;

padding-bottom: 1px;

padding-left: 1px;

}

3.上表の№6 page.phpをコピーし別名でonecolumn-page.phpという１カラム用のテンプレートファイルを追加します。
3-1.コピーして作ったonecolumn-page.phpの最上部に以下のコードを記入します。


<?php
/*
Template Name:PAGE onecolumn
*/
?>
<?php get_header(); ?>

<div id="onecolumn-main">

<?php

Template Name:PAGE onecolumn

<?php get_header(); ?>

3-2.右サイドは不要ですので、サイド（sidebar.php）を読み込む部分を削除します。


<!-- 下のコードは不要 --> 
<?php get_sidebar(); ?>

<?php get_sidebar(); ?>

１カラムテンプレートを管理画面で固定ページ作成

固定ページの新規作成画面の右にテンプレートを選択する画面が表示されるので、3-1.で追加したテンプレートネーム「PAGE onecolumn」を選んで【公開】すればワンカラムでページが作成されます。サンプルページは下の太字部分のリンクから確認できます。

出来上がった１カラムページ

まとめ

サンプルページではヘッダー部分やグローバルナビメニューが表示されています。もっとランディングページっぽくするならヘッダーもナビメニューも必要ありませんから、その場合は（header.php内）に以下のコードを追加して１カラム固定ページの時はヘッダー部分やグローバルナビメニュー部分を表示させないようにしようと思います。

<?php if(is_page_template('onecolumn-page.php') ) { ?>

1	<?php if(is_page_template('onecolumn-page.php') ) { ?>

Post Categories: Wordpress Tags:Stinger3

Message コメントをキャンセル

PREV: レスポンシブweb対応のWordpress無料テーマ「wsc7」を使ってみたので少し解説
NEXT: スマホ対応テーマ（レスポンシブデザイン）での投稿記事内の画像横並び表示方法

「Stinger3」に１カラムテンプレートを追加する方法

Stinger3 のレイアウト構造

追加する前に既存部分のカスタマイズ

「Stinger3」のテーマフォルダ内ファイル構成

カスタマイズ箇所

１カラムテンプレートを追加する方法

カスタマイズ箇所と追加箇所

１カラムテンプレートを管理画面で固定ページ作成

まとめ

AD

関連記事

プラグインを使わずに自分でページングを実装するfunction.phpのコードサンプル

WordPressの仕組みを理解する

WordPressで記事を書き始める前に入れた方がいいプラグイン

著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

WordPressテーマ『mono-lab | CUBIC』を少しカスタマイズしてみた

プラグイン「wordpress meta robots」を止めてカスタムフィールドで対応した方法

人気のWordPress無料テーマ「Stinger3」に変えてみた

WordPress管理画面の投稿一覧にカスタムフィールドの項目を追加表示する方法

WordPress テンプレートページ別にタイトル（title）・見出し（h1/h2）・メタの各タグは何を書くべき？

簡単に自分のパソコン（PC）にWordPress開発環境を作る方法

Message コメントをキャンセル

AD

About

NEW ENTRY

category

Popular Posts