Stinger5カスタマイズ！サイドバーを削除、すっきり1カラムにする方法。特定ページだけなしにもできるよ

カスタム次第で全く違ったモノへと進化するWordpressテーマ「Stinger5」。
今回は「サイドバーを削除して1カラムにしたいんだけどどうすればいいの？」と質問を頂いたので、お答えしたいと思います。

このカスタマイズは「全ページから削除したい場合」と「特定ページから削除したい場合」で方法が変わってきます。
目的に合った方を試してくださいね。

デフォルトではこうなってるよ

Stinger5のサイドバー部分は各ページの「php」ファイルで「sidebar.php」を読み込んで出力しています。

たとえばトップページの「home.php」ではこんな感じ。

なのでサイドバーを消すには

読み込んだ「sidebar.php」の中身をなくしてしまう

「sidebar.php」を読み込まないようにする

の2通りの方法があります。

今回は

全ページから削除 → 読み込んだ「sidebar.php」の中身をなくしてしまう

特定ページのみ削除 →「sidebar.php」を読み込まないようにする

という方針でカスタマイズしていきます。

全ページから削除する場合、変更するのは「sidebar.php」と「style.css」の2つのみ。

はじめに「sidebar.php」を編集して、読み込む中身をなくしてしまいます。
次に「style.css」を調整して見た目を整えれば完成です。

まず「sidebar.php」に書いてある中身を全削除してください。
これで読み込んだ中身をなくせます。

※サイドバーを復活させる可能性が少しでもある場合はどこかにメモをとっておいてくださいね

このままだとサイドバーがなくなった分余白や大きさがおかしくなっています。
修正のために以下のコードをcssの「領域④」に追記してください。
(Stinger5のstyle.cssはデバイスごとに4つの領域にわかれています。詳しくはこちらの記事をご覧ください。)

main {
	margin-right: 0px;
}

ここまで終えるとこんな1カラム表示になっています。

これでカスタマイズは完了ですが、この方法だと「sidebar.phpを読み込む」流れが無駄ですね。
表示速度を早くするためにも無駄なコードは少ないほうがいいです。できれば次に紹介する「特定ページ」の方のやり方を使ってください。

特定ページから削除する場合には削除したいページのphpファイルを変更します。
対応しているphpファイルは

トップページ → 「home.php」

記事ページ → 「single.php」

アーカイブページ → 「archive.php」

です。

まず削除したいページのphpファイルからサイドバーの読み込みコードを消します。

<?php get_sidebar(); ?>

の部分を消してください。

続いて余白の調整です。「main」の余白を変更します。
ただし「style.css」は触りません！変更したphpファイルに直書きします。

どうしてstyle.cssに書かないの？

今回変更したいのは「サイドバーをなくしたページ」のmain部分。
style.cssに余白の幅を指定すると「すべてのページ」のmain部分に変更が反映されてしまうので、サイドバーがあるページの表示が崩れてしまいます。
これを防ぐために削除したページのphpに直書きしていきます。

サイドバーを削除したphpの「main」の下に以下のコードを追記してください。

<style type="text/css" media="only screen and (min-width: 780px)">
main{
     margin-right:0px;
}
</style>

これで特定ページからサイドバーを削除出来ました。
例えばトップページのみサイドバーを消すとこうなります。

サイドバーを無くすと画面を広々使えますね！
今回は記事一覧や記事本文を広げましたが、他にも色々できそうです。
ぜひ自分好みにカスタマイズしてください。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。