メニューの作成

しかしこのままでは管理画面で存在を確認できるだけで、一般のユーザーは見ることができません。

メニューを作って、固定ページと投稿ページを選択できるようにしておきます。

管理画面で[外観]-[メニュー]を選択します。

メニューの名前をつけて[メニュー作成]をおこないます。

ここでは“メインメニュー”としておきます。

[固定ページ]で[すべて選択]し、[メニューに追加]して、[メニューを保存]します。

これで公開画面がどうなったか見てみます。

WS000004

ヘッダーの上の方に、[ホーム]と[サンプルページ]という2つが表示されました。最初は[ホーム]が表示されていますが[サンプルページ]をクリックすると次のような画面が表示されます。

WS000005

メニューで、コンテンツ部分を[ホーム]と[サンプルページ]で切り替えられるようになりました。

しかしサイドバーの部分は変わりません。投稿記事ページでも固定ページでも同じものが表示されています。

サイドバーには、[外観]-[ウィジェット]でいろいろなウィジェット(一種の部品です)を選択して配置することができます。

しかし会社のホームページなどではサイドバーそのものを表示したくない場合があります。

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

 ・・・・・・・・

記事がありません<!–?php endif; ?–>
<!–ループ終了–>

<!–//article_body–>

<!–//entry_body–>

<!–//main–>

<!–?php get_sidebar(); ?–>

<!–?php get_footer(); ?–>

page.php の最後の部分ですが、下から2行目の

を削除します。

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

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

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

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

分りやすいように、それぞれに色をつけてどこに相当するのか見てみます。

#contents {
background-color: #ccf;
}
#contents #main{
background-color: #cfc;
}
#contents #main #entry_body{
background-color: #fcc;
}
#contents #main #entry_body #article_body {
background-color: #ffa;
}

投稿一覧ページ

WS000007

固定ページ

WS000006

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

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

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

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

それでページごとにCSSを変える方法を考えます。

方法はいくつかありますが、一番簡単なのは header.php に追記する方法でしょう。
heder.php はヘッダーを出力するテンプレートですが、そこでが出力される前に、

でスタイルシートを入れてしまう方法です。

もちろん head.php は固定ページだけでなく他のページのヘッダー出力にも使われますので、

<?php if( is_page.php() ) { ?>

<style>

#contents #main{

box-sizing:border-box;

max-width: 100%;

width: 100%;

padding: 20px;

background-color: #cfc;

}

#contents #main #entry_body{

box-sizing:border-box;

width: 100%;

}

#contents #main #entry_body #article_body {

box-sizing:border-box;

width: 100%;

}

</style>

<?php } ?>

とします。

is_page.php() 関数はWordPressで用意されているPHPの関数です。

戻り値として、指定された条件の固定ページを表示している場合は true、しれ以外は falseを返します。

パラメーターが無い場合、任意の固定ページは「任意の固定ページ」という意味になります。

パラメーターには、IDやタイトルを指定することができます。

詳しくは、WordPress Codex日本語版を参照してください。

試で入れた、background-color ははずしてください。

スポンサーリンク