トップページのデザインを切り替えて確認してみる

この記事は約3分で読めます。

Image

トップページにタイル状に画像を並べる レスポンシブデザイン対応でトップページを修正してからだいぶ経ったのでそろそろ違うデザインに、ということも考えたくなってきました。

ただ、今の状態を見ながら違うデザインとも見比べていきたいのでデザインしている間は引数で違うデザインを表示するようにして作って行きたいと思います。その方法について書きます。

引数に文字を指定することで違うデザインが見られるようにしたい

通常トップページは

https://usortblog.com

で見ますが、これを

https://usortblog.com/?home_option=new

とかしたら新しいデザインのものが見られたらいいなぁと思います。

今のトップページは子テーマに home.php というものを追加したので、home_new.phpとかいうファイルを追加して新しいデザインを考えていきたいです。

安全に引数を受け取って判定するために、引数を追加する

php的に?の後に付いた文字を受け取るのは簡単なのですが、昨今色々XSSなどのことを考えるとWordPressが準備している受け取り方で受け取りたいです。

ということで

関数リファレンス/get query var

こちらを参考にやってみました。

get_query_var() は WP_Query で認識されている「パブリック・クエリ変数」のみを取得します。言い換えれば、独自のクエリ変数でカスタム URL を作成したのみで追加処理(以下参照)を伴わない場合 get_query_var() はそういったクエリ変数を取得できません。

ということなので、カスタムクエリ変数を追加します。

子テーマfunctions.phpに追加したい変数 home_option を追加します。

function add_query_vars_filter( $vars ){
  $vars[] = "home_option";
  return $vars;
}
add_filter( 'query_vars', 'add_query_vars_filter' );

これで get_query_var(‘home_option’) の形で引数を見ることが出来るようになります。

home.phpで引数を見て、どちらのトップページを表示するか判定する

次に、今タイル状にトップページを表示している home.php に判定を追加します。

get_header(); ?>

とあるところの上に、

$home_option = get_query_var('home_option');
if ($home_option == 'new'){
    include('home_new.php');
    exit;
}

と書きます。

引数 home_optionの値がnewだったら home_new.php を読み込んで終了、それ以外は今までの処理を行うという感じのコードです。

実際に動かしてみました!

home.phpをコピーして、home_new.phpを作り、動きを1行に1記事とかにしてみました。
*デザインはまだまだ未完成です(>_<)。

Image

PhotonAPIで画像を取ってきているので、数字を操作して画像を大きくしました。そして1行に1記事を並べてみます。

…ってこんな感じで実際のblogでどんな感じになるかを見ながらトップページのデザインを変更することができるのでちょっと便利かなーと思いました。

実際に見られるようにしてみました、どうぞ https://usortblog.com/?home_option=new

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。