_s(Underscores)でサイドバーを出すページと出さないページを分ける

まだまだ躓いていきますw

 

今回やりたかったのは、

ブログページにはサイドバーを表示して、

それ以外の固定ページにはサイドバーを出さない、です。

 

意外と情報少なかった気がします。

あんまり需要ないのかもしれないですね。

 

参考にさせていただいたのは、以下の3つのサイトです。

 

_s(underscores)の構成内容をメモ

_s(underscores)を2カラムレイアウトにする

WordPressでページやカテゴリごとにサイドバーを切り替えるには

 

まず、UnderScoresのデフォルトのレイアウトは、

1カラム(メインコンテンツの下にサイドバーが並ぶ)なので、

これを2カラムにしてサイドバーが右側に来るように変えます。

 

レイアウト用のCSSがあらかじめ用意されていますので、

「functions.php」に以下の一文を追記します。

(※「XXXX」の部分はブログ名に読み換えてください。)

function XXXX_scripts() {
  〜中略〜

  wp_enqueue_style( 'XXXX-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );
}
add_action( 'wp_enqueue_scripts', 'XXXX_scripts' );

 

「content-sidebar.css」を使えばサイドバーは右、

「sidebar-content.css」を使えばサイドバーは左になります。

 

続いて、固定ページのテンプレである「page.php」を修正します。

「page.php」の一番下に「get_sidebar();」という記述があるので、

これを以下のようにコメントアウトするか、削除します。

〜中略〜
<?php
// get_sidebar();
get_footer();

 

これで行けるかなっと思ったんですが、あと1つ。

 

固定ページにサイドバーの情報は表示されないようにしたんですが、

表示するはずだった空枠だけが残っているようで、2カラムレイアウトになってしまいます。

つまりサイドバーの部分が空白になってしまうんですね。

 

なので、先ほどの「functions.php」に以下を追記します。

function XXXX_scripts() {
  〜中略〜
  if( !is_page() ) {
    wp_enqueue_style( 'XXXX-layout-content-sidebar', get_template_directory_uri() . '/layouts/content-sidebar.css' );
  }
}
add_action( 'wp_enqueue_scripts', 'XXXX_scripts' );

 

「!is_page()」は「固定ページ以外」という条件になります。

これで固定ページの時にCSSは読み込まれないようになるため、

1カラムレイアウトのまま、ということになります。

 

意外と苦労しました汗

シェアする

コメントを残す

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

コメントする