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

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

Stinger3 のレイアウト構造

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

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

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

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

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

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

カスタマイズ箇所

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

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

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

※後方に追加するコード

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

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

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

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

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

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

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

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

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

まとめ

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