トップページにタイル状に画像を並べる レスポンシブデザイン対応でトップページを修正してからだいぶ経ったのでそろそろ違うデザインに、ということも考えたくなってきました。
ただ、今の状態を見ながら違うデザインとも見比べていきたいのでデザインしている間は引数で違うデザインを表示するようにして作って行きたいと思います。その方法について書きます。
引数に文字を指定することで違うデザインが見られるようにしたい
通常トップページは
https://usortblog.com/
で見ますが、これを
https://usortblog.com//?home_option=new
とかしたら新しいデザインのものが見られたらいいなぁと思います。
今のトップページは子テーマに home.php というものを追加したので、home_new.phpとかいうファイルを追加して新しいデザインを考えていきたいです。
安全に引数を受け取って判定するために、引数を追加する
php的に?の後に付いた文字を受け取るのは簡単なのですが、昨今色々XSSなどのことを考えるとWordPressが準備している受け取り方で受け取りたいです。
ということで
こちらを参考にやってみました。
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記事とかにしてみました。
＊デザインはまだまだ未完成です(>_<)。
PhotonAPIで画像を取ってきているので、数字を操作して画像を大きくしました。そして1行に1記事を並べてみます。
…ってこんな感じで実際のblogでどんな感じになるかを見ながらトップページのデザインを変更することができるのでちょっと便利かなーと思いました。
実際に見られるようにしてみました、どうぞ https://usortblog.com//?home_option=new
コメント