【WordPress】特定のページのみサイドバーを外す方法

paplico

6年 ago

ナマスカーラ！パプリ子です。
前回に続いて、WordPressのサイドバーを外す方法をご紹介します。
一つ前の記事は、コチラ↓↓↓

【Wordpress】サイドバーウィジェットを消す方法 - パプリコ！

前回の記事では、ユーザー定義関数を用いてサイドバーを外す方法をご紹介しましたが、今回の記事では、固定ページやトップページなど、特定のページでのみサイドバーを非表示にするべく、条件分岐について触れていきたいと思います。

大まかな流れと必要なスキル

【追記】記事をまとめてから気づいたけど、Simplicity2の場合、「ページ設定」→「本文のみor1カラム」で、これと同じことができるんだね！！！！無駄足踏んじまったぜ〜♪

子テーマのfunctions.phpにサイドバーを外すための関数を追加する
親テーマ内で、外したいサイドバーの名前を調べる
特定のページでのみ、サイドバーを外す関数が読み込まれるように、条件分岐させる
固定ページ用テンプレートを作成し、FTPソフトを用いてサーバーへアップロードする*
該当ページのCSSデザインをしやすくするため、テンプレートファイル内のget_template_partを直読み込みに書き換える*

3番目のテンプレート作成と、4番目の、テンプレートファイル内のget_template_partを直読み込みに書き換えるは、応用編なので、別の記事にてご紹介します。

上の画像のように、特定のページのみ、1カラムのコンテンツを全幅で表示させたい時に、試してみてください。

この記事でのカスタマイズのは、基本的にコピペでOKなので、特別にPHPやHTML/CSSの知識がなくても大丈夫です。
ですが、都合上、以下のスキルを習得している＆環境が整っていることを前提として、話を進めていきます。

子テーマが有効化されている
FTPソフトを使って、ファイルをダウンロード・アップロードすることができる
テキストエディタを用いて、新規PHPファイルを作成することができる

分からない箇所や、できなさそうな箇所があったら、適当に検索してみてくださいね。
Googleはいつでもあなたの友だちです。

①、②子テーマのfunctions.phpにサイドバーを外すための関数を追加する

①と②は、コチラの記事で詳しく解説しているので、説明は省きます。
↓↓↓

【Wordpress】サイドバーウィジェットを消す方法 - パプリコ！

③特定のページでのみ、サイドバーを外す関数が読み込まれるように、条件分岐させる

前回子テーマのfunctions.phpに追加したコード


<?php
add_filter( 'sidebars_widgets', 'wpsites_remove_sidebar_widget' );
/**
 * @link   http://wpsites.net/wordpress-tips/ways-to-remove-sidebar-widgets/
 */
function wpsites_remove_sidebar_widget( $sidebars_widgets ) {
$sidebars_widgets['$sidebar-1'] = false;
return $sidebars_widgets;
}
?>

<?php

add_filter( 'sidebars_widgets', 'wpsites_remove_sidebar_widget' );

/**

* @link http://wpsites.net/wordpress-tips/ways-to-remove-sidebar-widgets/

function wpsites_remove_sidebar_widget( $sidebars_widgets ) {

$sidebars_widgets['$sidebar-1'] = false;

return $sidebars_widgets;

}

これを、if文で囲います。

【WordPress】wp_reset_query()でループ処理をリセットしても、is_home()など条件... - パプリコ！

この記事↑↑↑でも少し触れましたが、サーバー変数を使ってURIを指定して、条件分岐させていきます。
もちろん、トップページやホームのみ何かをしたい時は、is_home()やis_front_page()といった、WordPress内で有効な条件分岐タグを使っても大丈夫です！


<?php
if ($_SERVER["REQUEST_URI"] === "/privacy-policy/" || $_SERVER["REQUEST_URI"] === "/about_paplico/" || is_home() )
{
add_filter( 'sidebars_widgets', 'wpsites_remove_sidebar_widget' );
/**
 * @link   http://wpsites.net/wordpress-tips/ways-to-remove-sidebar-widgets/
 */
function wpsites_remove_sidebar_widget( $sidebars_widgets ) {
$sidebars_widgets['sidebar-1'] = false;
return $sidebars_widgets;
}
}
?>

<?php

if ($_SERVER["REQUEST_URI"] === "/privacy-policy/" || $_SERVER["REQUEST_URI"] === "/about_paplico/" || is_home() )

{

add_filter( 'sidebars_widgets', 'wpsites_remove_sidebar_widget' );

/**

* @link http://wpsites.net/wordpress-tips/ways-to-remove-sidebar-widgets/

function wpsites_remove_sidebar_widget( $sidebars_widgets ) {

$sidebars_widgets['sidebar-1'] = false;

return $sidebars_widgets;

}

$_SERVER["REQUEST_URI"] === "★★★"の、★★★の部分には、サイドバーを外したいページのURIを挿入してください。
ドメインの後ろの部分が、URIです。

複数のページのサイドバーを外したい場合は、||（PHPの文法ではorの意）でつなぎましょう。&&(PHPの文法ではandの意)でも良いと思います。

文法的に解釈するなら、下の図のような感じだと思います。

これで、指定したページのサイドバー自体は外れたと思うのですが、サイドバーがあったはずの空間が、空白になっていると思います。

④、⑤では、これを下の図のように直すために、固定ページのテンプレートを作成します。

コンテンツを、横幅いっぱいに伸ばして、１カラムで表示させる、といような感じでしょうか。
実践してみたい人は、次の記事に進んでください！

…
…
…ですが、先に進む前に、
子テーマが有効化されていない人は、下の手順に従って子テーマを作成＆有効化しておいてくださいね！
って言っても、ここまでのカスタマイズでも、子テーマが有効になっていることを前提として話をすすめてきたので、今更感もありますが…

↓↓↓

Simplicity2をお使いの方で、まだ子テーマを有効化していない方は、下記よりダウンロードしましょう。

Simplicity2のダウンロード - Simplicity

その後、ダッシュボード→外観→テーマ→新規追加→テーマのアップロードの順に進んで、先程ダウンロードしたSimplicity2の子テーマをアップロードしましょう。

そうして、そのまま有効化させてしまいましょう。
下の図のようになれば、オッケーです。

ーーーーーーーー

Simplivcity2以外のテーマをお使いの方は、子テーマを動かすのに最低限必要なファイルを用意しましょう。
テキストエディタやメモ帳を開いて、
・style.css
・functions.php
の2つのファイルを作成します。

まず、style.css（スタイルシート）から。

/*
Template:hogehoge //使っているテーマの名前
Theme Name:hogehoge_child　//子テーマの名前（何でもいい）
*/

Template:hogehoge //使っているテーマの名前

Theme Name:hogehoge_child　//子テーマの名前（何でもいい）

コメントアウトじゃん！と思うかもしれませんが、これがないと、子テーマが動きません。
「hogehoge」の部分を、お使いのテーマの名前に変えて作成してください。
リファレンスを見るに、子テーマの名前は、なんでもいい（親テーマと無関係でもいい）ようですが、
拡張子は、.cssで保存してくださいね！

そして、次にfunctions.php
「テーマの編集」の中で「テーマのための関数」と記載される大事なファイルです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

親テーマのスタイルシートが読み込まれた時に子テーマ内のスタイルシートも一緒に読み込むように、アクションフックが使われています。
拡張子は.phpで保存しましょう。

次に、WordPressのダッシュボードを離れて、お使いのサーバーのFTPファイルを開きましょう。
WordPressがインストールされているフォルダのテーマファイルの中に、子テーマ用のフォルダを作成します。

場所は、該当ドメインファイル→WordPressがインストールされている場所（wp-content）を探ってみてください。
エックスサーバー

の場合は、該当ドメインファイル→public_html→wp-content→themes です。
そこに、style.cssを作成した時につけたのと同じ子テーマの名前で、フォルダを作成します。

必ず、子テーマを格納するフォルダ名は、子テーマの名前と一致させてください。
そうしないと、うまく読み込まれません。
このstyle.cssだったら、「hogehoge_child」で新規フォルダを作成します。
↓↓↓

/*
Template:hogehoge //使っているテーマの名前
Theme Name:hogehoge_child　//子テーマの名前（何でもいい）
*/

Template:hogehoge //使っているテーマの名前

Theme Name:hogehoge_child　//子テーマの名前（何でもいい）

そこに、作成したstyle.cssとfunctions.phpをアップロードします。
もう一度、Wordpressのダッシュボードに戻って、外観→テーマと進んでみましょう。
先程つくった子テーマが、選べるようになっているはずです。
それを有効化して、この工程は終わりです。

次はいよいよ、固定ページ用テンプレートを使って、サイドバーを外したページの全幅をつかって、１カラムレイアウトに変えていきますよ！
お楽しみに！

次の記事↓↓↓

【Wordpress】ページテンプレートを作成して、固定ページのレイアウトを変更する方法 - パプリコ！