いつまで経ってもわからない、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用

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

■スマホ用

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

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

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

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

PHPの変数をここで代入

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

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

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

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

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

としました(ΦωΦ)

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

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

結果

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

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

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

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