いつまで経ってもわからない、WEBってやつは・・・(´・ω・`)

【PHP+JS】[2回目追記あり]PHPのincludeをjavascriptの分岐でわけたくてやってみた(ΦωΦ)

こんにちわんだふる、ゆでです(ΦωΦ)

ちょっと地味に四苦八苦してしまったPHPをJSの分岐でチョメチョメしたい…っていう件をメモっておこうと思います(`・ω・´)ゞ

やりたかったこと

レスポンシブで画面幅によって、表示するバナーを変更する

とか いたって普通の件なのですが、問題なのがバナーの数が未知数ということ・・・そしてそのバナーはWordPressの管理画面からガシガシ入れ替えていきたいということ…(´;ω;`)<しかもクライアントが。。。

ということで、よく見かけるやり方だと、「data-img」や「class」はエディタで入力する際の対応がめんどい・・
しかも、PC用とスマホ用の命名ルールにのっとった2種類をメディアライブラリであげたりなんだり・・とかだとクライアントに説明したりするのすらめんどい…(´;ω;`)ので

当初の予定通り、

単純にWP上でPC用とSP用のバナー用の固定ページにそれぞれの画像を好きな数入れてもらって、それをinludeして表示させる

ってことにしたのですw(ΦωΦ)<説明長げぇw

ぶち当たった壁

そもそも論なんです。そもそも…。

レスポンシブは、CSSのメディアクエリーで切り分けようとしてみたものの、PC用とスマホ用を出力して「display:none」にしたら・・・結局読み込まれていて重い、、というので読み込み自体を振り分ければいいじゃない(ΦωΦ)+と思い立ちました

しかし、PHPはサーバサイドで実行、JS(javascript)はクライアントサイドで実行するプログラム。

  • WordPressで作成したページをinclude…ってPHPよね(ΦωΦ)
  • ウィンドウの幅を都度動的に取得したりするのってJSよね(ΦωΦ)
  • …orz

そうなのです。そもそも論でした。ググってみても…

$.ajax({ type: ‘POST’, url: ‘index.php’, data: ‘testValue=boorin’, success: function(data) {…

とかなにマジわからない(´;ω;`)<自作のPHP関数動かしたいだけなのにー

とりあえずバナーページincludeしてPHP変数に代入

PC用とスマホ用で用意し、下記のように変数に代入(ΦωΦ)+

■PC用

<?php

	$page_id = get_page_by_path("pc_banner")->ID; // PC用バナーの固定ページスラッグ
	$content = get_page($page_id);
	$args = array(
		"post_type" => "page",
		"page_id" => $page_id,
		"post_status" => "publish",
	);
	$found_posts = get_posts($args);
	if($found_posts && empty( $found_posts->post_password )){
		$PCbnr = apply_filters('the_content', $content->post_content);//ここで出力せず変数に代入(ΦωΦ)
		$PCbnr = str_replace(array("\r", "\n"), '', $PCbnr);//追記:改行削除
	}
	wp_reset_query();
?>

※追記2014/10/29:上記改行削除追加(*´∀`*)<シングルで囲うから改行を処理!

■スマホ用

<?php

	$page_id = get_page_by_path("sp_banner")->ID; // スマホ用バナーの固定ページスラッグ
	$content = get_page($page_id);
	$args = array(
		"post_type" => "page",
		"page_id" => $page_id,
		"post_status" => "publish",
	);
	$found_posts = get_posts($args);
	if($found_posts && empty( $found_posts->post_password )){
		$SPbnr = apply_filters('the_content', $content->post_content);//ここで出力せず変数に代入(ΦωΦ)
		$SPbnr = str_replace(array("\r", "\n"), '', $SPbnr);//追記:改行削除
	}
	wp_reset_query();
?>

※追記2014/10/29:上記改行削除追加(*´∀`*)<エラーになるので改行を処理!

これでサーバ側で「$PCbnr」「$SPbnr」に代入完了(ΦωΦ)+

jQueryにてサイズで分岐を記述

■読み込み時+リサイズ時で分岐

<script>
var w = jQuery(window).width();
var x = 500;//ブレイクサイズ
jQuery(document).ready(function() {//読み込み時
    if (w <= x) {//スマホ用
	jQuery("バナーをいれたい場所").replaceWith(スマホ用バナーの中身);
    } else {//PC用
	jQuery("バナーをいれたい場所").replaceWith(PC用バナーの中身);
    }
});
jQuery(window).resize(function(){//リサイズ時
    w = jQuery(window).width();
    if (w <= x) {//sp
        jQuery("バナーをいれたい場所").replaceWith(スマホ用バナーの中身);
    } else {//PC用
	jQuery("バナーをいれたい場所").replaceWith(PC用バナーの中身);
}); 
</script>

PHPの変数をここで代入

変数の値を行き来させるわけではないので、そんなに難しく考える必要はありませんでした(´・ω・`)=3ヤレヤレダゼ..

var spbnr = '<?php echo $SPbnr; ?>';
var pcbnr = '<?php echo $PCbnr; ?>';
 ↓↓
[2回目追記:2014/12/4]
タグの中にシングルコートがある場合を考慮してなかったので下記に変更

■考慮バージョン
var spbnr = '<?php echo str_replace("'", "☆single☆", $SPbnr); ?>';
spbnr = spbnr.replace(/☆single☆/g,"'");
var pcbnr = '<?php echo str_replace("'", "☆single☆", $PCbnr); ?>';
pcbnr = pcbnr.replace(/☆single☆/g,"'");

[2回目追記:2014/12/4]上記シングルコート考慮バージョンに変更しました(ΦωΦ)☆

これでjavascriptの変数に代入完了(*´ω`*)

javascriptの変数に代入するとこんなかんじ

<script>
var w = jQuery(window).width();
var x = 500;//ブレイクサイズ
var spbnr = '<?php echo $SPbnr; ?>';
var pcbnr = '<?php echo $PCbnr; ?>';
jQuery(document).ready(function() {
    if (w <= x) {//sp
	jQuery(".bnr p").replaceWith(spbnr);
    } else {
	jQuery(".bnr p").replaceWith(pcbnr);
    }
});
jQuery(window).resize(function(){
    w = jQuery(window).width();
    if (w <= x) {//sp
	jQuery(".bnr p").replaceWith(spbnr);
    } else {
	jQuery(".bnr p").replaceWith(pcbnr);
    }
});
</script>

※ついでに仮でバナー用意したい場所は

<div class="bnr"><p></p></div>

としました(ΦωΦ)

※追記2014/10/29:上記は<p>が必ず入ってくるので、pを置換ポイントにしました。何が入ってくるかわからない場合は

var pcbnr = "<div>"+'<?php echo $PCbnr; ?>'+"</div>";

などにして値を囲って置換ポイント(この場合はdiv)を入れるように注意(*´ω`*)です

結果

幅で表示切り替えできました(*´ω`*)+

Chromeの「Network」で見ても、PC用とスマホ用両方でなく表示する方だけ読み込んでる(ΦωΦ)+

重さはよくわからないけど、とりあえずこれでできた…のでφ(*’д’* )メモメモ!!

とりあえずこれで大丈夫なはず。。?なのかな(´・ω・`)。
別途なんかあったら追記します(`・ω・´)ゞ<チカレタゼー=3