固定ページのサイドバーを消す

style.cssしか入っていない子テーマを有効化しただけの状態で、WordPressの公開アドレスにアクセスしてみましょう。次のような画面が表示されるはずです(なぜか検索が2つ出ちゃってます・・・ご愛嬌!)。

first_gush2

子テーマのフォルダーにはまだテンプレートファイルない状態ですので親テーマのテンプレートが使われています。gush2のオリジナルのままです。

基本的なレイアウトは、上部にヘッダーがあり、その下の左側にコンテンツが表示され、右側にサイドバーが表示されています。上のキュプチャー画像では見えませんが、さらにその下にフッターがあります。
かなり落ち着いているけれども、わりと明るいスッキリとしたいい感じです。はでさを求める人にはちょっともの足りないかもしれません。

Hello world! と表示されている部分は投稿記事です。管理画面から新しい記事を投稿していけば、次々と増えていきます。
しかしサイドバーの部分は変わりません。カスタマイズがなければ投稿記事ページでも固定ページでも同じものが表示されています。固定ページの例です。

initial_sample_page

サイドバーは、管理画面の[外観]-[ウィジェット]でいろいろなウィジェット(一種の部品です)を選択して配置することができるので便利なものですが、しかし会社のホームページなどではサイドバーそのものを表示したくない場合が出てきます。そういう場合にサイドバーを表示しないでようにしてみましょう。

固定ページは、page.php で出力されるので、そこでサイドバーを書きだしている部分を削除します。

page.php の最後の部分ですが、下から2行目の
<?php get_sidebar(); ?>
を削除します。

erase_saidebar

すると固定ページではサイドバーは表示されなくなりましたが、ホームの投稿記事のページでは表示されています。

でもこの状態では、固定ページの右側に空白ができてしまい不自然ですので、次にコンテンツエリアの幅をページ全体に広げることにします。

固定ページの出力されたHTMLソースを見てみます。

コンテンツは、id=”contents”のdivタグです。その中に、nain,entry_body,article_body という領域が定義されています。

分りやすいように、それぞれに色をつけてどこに相当するのか見てみます。今仮に、子テーマの style.css に追加してみます。

(注)ここで、#contens #main という書き方をしているのは、親テーマの style.css でそういう書き方がしてあるからです。ただ単に、#main と書いただけでは、親style.css での定義が上書きされず効果が出ません。

投稿一覧ページ
post_area

固定ページ
page_area

#main のCSS を以下のように修正してみます。

#contents #main{
max-width: 100%;
width: 100%;
padding: 0;
background-color: #cfc;
}
page_waide

固定ページが1カラムになりました。しかし・・・

WS000009

しかしついでに投稿記事一覧ページも1カラムになってしまいました。記事一覧の下にサイボバーが回り込んでしまっています。

なので、ページごとにCSSを変える方法を考えます。
方法はいくつかありますが、header.php に追記する方法が簡単なのでやってみます。

heder.php はヘッダーを出力するテンプレートですが、そこでHTMLの</head>タグが出力される前に<link>タグを挿入し、スタイルシートを入れてしまう方法です。

もちろん head.php は固定ページだけでなく他のページのヘッダー出力にも使われますので、固定ページかどうかを尋ねてやり、固定ページの場合だけ<link>タグを挿入するようにします。<style>タグで直接スタイルシートを書いてもいいのですが、お行儀よく外部ファイルから読み込むようにしておきます。外部CSSファイルは、子テーマのフォルダーの中に css という名前のフォルダーを作成し、その中にpage.css という名前で作成することにします。
header.php 内に各コードは、

です。

is_page.php() 関数はWordPressで用意されているPHPの関数です。
戻り値として、指定された条件の固定ページを表示している場合は true、しれ以外は falseを返します。
パラメーターが無い場合、任意の固定ページは「任意の固定ページ」という意味になります。
パラメーターには、IDやタイトルを指定することができます。
詳しくは、WordPress Codex日本語版を参照してください。

get_stylesheet_directory_uri() は、有効になっているテーマ(すなわち子テーマ)のスタイルシートがある場所のURIを返します。

以上で完了です。
ためしで入れた、background-color ははずしておいてくださいネ。

スポンサーリンク