ナマスカーラ！パプリ子です。
前回に続いて、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にサイドバーを外すための関数を追加する
①と②は、コチラの記事で詳しく解説しているので、説明は省きます。
↓↓↓
③特定のページでのみ、サイドバーを外す関数が読み込まれるように、条件分岐させる
前回子テーマのfunctions.phpに追加したコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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文で囲います。
この記事↑↑↑でも少し触れましたが、サーバー変数を使ってURIを指定して、条件分岐させていきます。
もちろん、トップページやホームのみ何かをしたい時は、
is_home()やis_front_page()といった、WordPress内で有効な条件分岐タグを使っても大丈夫です！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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の子テーマをアップロードしましょう。
そうして、そのまま有効化させてしまいましょう。
下の図のようになれば、オッケーです。
ーーーーーーーー
Simplivcity2以外のテーマをお使いの方は、子テーマを動かすのに最低限必要なファイルを用意しましょう。
テキストエディタやメモ帳を開いて、
・style.css
・functions.php
の2つのファイルを作成します。
まず、style.css（スタイルシート）から。
|
1 2 3 4 |
/* Template:hogehoge //使っているテーマの名前 Theme Name:hogehoge_child //子テーマの名前（何でもいい） */ |
コメントアウトじゃん！と思うかもしれませんが、これがないと、子テーマが動きません。
「hogehoge」の部分を、お使いのテーマの名前に変えて作成してください。
リファレンスを見るに、子テーマの名前は、なんでもいい（親テーマと無関係でもいい）ようですが、
拡張子は、.cssで保存してくださいね！
そして、次にfunctions.php
「テーマの編集」の中で「テーマのための関数」と記載される大事なファイルです。
|
1 2 3 4 5 6 |
<?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」で新規フォルダを作成します。
↓↓↓
|
1 2 3 4 |
/* Template:hogehoge //使っているテーマの名前 Theme Name:hogehoge_child //子テーマの名前（何でもいい） */ |
そこに、作成したstyle.cssとfunctions.phpをアップロードします。
もう一度、Wordpressのダッシュボードに戻って、外観→テーマと進んでみましょう。
先程つくった子テーマが、選べるようになっているはずです。
それを有効化して、この工程は終わりです。
次はいよいよ、固定ページ用テンプレートを使って、サイドバーを外したページの全幅をつかって、１カラムレイアウトに変えていきますよ！
お楽しみに！
次の記事↓↓↓