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

公開日: 最終更新日:2014/07/11

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

スポンサードリンク

Stinger3 のレイアウト構造

テーマ「Stinger3」の基本レイアウトは下画像のようになっています。
Stinger3 基本レイアウト図
1カラム テンプレートとしてサイド領域を消しメイン領域を横一杯に表示する
Stinger3 1カラムレイアウト図

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

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

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

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

ファイル名 拡張子名 カスタマイズ対象
1 header.php php ※1
2 footer.php php ※2
3 home.php php ※3
4 index.php php ※3
5 archive.php php ※3
6 page.php php ※3
7 single.php php ※3
8 search.php php ※3
9 404.php php ※3
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 ※3 (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 フォルダー

カスタマイズ箇所

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

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

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

※後方に追加するコード

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

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

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

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

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

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

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

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

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

まとめ

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

Post Categories: Wordpress  Tags:

AD

関連記事

ワードプレステーマ wsc7

レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触ってみたので少し解説含む覚書メモです。 2011年10月25日にリリ

記事を読む

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像

スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する記事内のhtmlタグの書き方によっては表示が想定外って事もありますよね

記事を読む

メタタグセット記事のアイキャッチイメージ

プラグイン『Meta Manager』の使い方と注意点

WordPressでSEO対策用プラグインの『ALL in One SEO Pack』は機能が豊富すぎて使いきれないので、メタタグのDe

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

WordPressの固定ページで投稿タグが設定できるようにするfunction.phpのコードサンプル

WordPressの固定ページはデフォルトでは投稿タグを設定することができません。固定ページを1カラムのランディングページとして使う場合

記事を読む

all-in-one-seo

プラグイン『ALL in One SEO Pack』って使う必要はあるのか?

WordPressでSEO対策としてTITLEタグとメタタグのDescriptionとkeywordsをページ単位に設定できるプラグイン

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

WordPressの固定ページの拡張子にhtmlをつけるfunction.phpのコードサンプル

WordPressを始めた頃にパーマリンク設定で悩んだこともあった。拡張子.htmlが付いた静的ページっぽい方がSEO的にも優位なのでは

記事を読む

ワードプレスタイトル

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

二つ前の記事「WordPressの仕組みを理解する」でも書いたが、WordPressのテンプレートファイルは、ざっくり以下の6パターン、

記事を読む

wordpressテーマ stinger3

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

ブログのテーマをスマホ対応済の人気無料テーマ「Stinger3」に変更しました。 一つ前に適用していたモノラボさんのテーマ CUBIC

記事を読む

Exec-PHPを使わずに投稿ページや固定ページでphpを使う

カテゴリーページや投稿タグページに入力した説明文を反映させる方法

WordPressのテーマではカテゴリーページや投稿タグページに各々の編集画面で入力した説明文を表示するテーマは少ないのですが、今回入力

記事を読む

Wordpress パソコン開発環境構築の記事

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

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカスタマイズする時に直接テーマファイルを触るのは危険です。別途サーバー上に

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

AD

WordPress(ワードプレス)も SEO(エスイーオー)も、今一つ解らない、アラフィフおやじのWeb勉強ノート

・なんでやねん?
・忘れたらアカン!
・えらいこっちゃ !!

などなど、諸々かきつけていきます。

livedoor-reader-btn
follow us in feedly
著作権表示が要らない素材サイト「pixabay」が使えるプラグイン

ブログにアイキャッチ画像を設定することは、魅力的な画像が記事本

Wordpress パソコン開発環境構築の記事
簡単に自分のパソコン(PC)にWordPress開発環境を作る方法

ワードプレス(Wordpress)で既に稼働中サイトのテーマをカス

スマホ対応テーマ 画像をtableタグで表示すると入らない時の記事に使った画像
スマホ対応テーマ(レスポンシブデザイン)での投稿記事内の画像横並び表示方法

スマートフォン対応(スマホ最適化)したテーマを選んでも投稿する

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

このブログで使っているテーマ「Stinger3」はメインコンテンツ

ワードプレステーマ wsc7
レスポンシブweb対応のWordPress無料テーマ「wsc7」を使ってみたので少し解説

Wordpressのレスポンシブデザイン無料テーマ「wsc7」を触

→もっと見る