サポート » 使い方全般 » スマホ　PCで画像を出し分け表示したい

スマホ　PCで画像を出し分け表示したい

  • outi00

    (@outi00)


    7年、 9ヶ月前

    たとえば
    PCでは　”画像A”　を表示
    スマホでは　”画像B”　を表示
    といったように条件分岐で画像の出し分け表示をしたく思っております。

    function.phpには
    以下のように記述しています。
    // user agent conditional function ———————————————————————
    function is_mobile() {

    $match = 0;

    $ua = array(
    ‘iPhone’, // iPhone
    ‘iPod’, // iPod touch
    ‘Android.*Mobile’, // 1.5+ Android *** Only mobile
    ‘Windows.*Phone’, // *** Windows Phone
    ‘dream’, // Pre 1.5 Android
    ‘CUPCAKE’, // 1.5+ Android
    ‘BlackBerry’, // BlackBerry
    ‘BB10’, // BlackBerry10
    ‘webOS’, // Palm Pre Experimental
    ‘incognito’, // Other iPhone browser
    ‘webmate’ // Other iPhone browser
    );

    $pattern = ‘/’ . implode( ‘|’, $ua ) . ‘/i’;
    $match = preg_match( $pattern, $_SERVER[‘HTTP_USER_AGENT’] );

    if ( $match === 1 ) {
    return TRUE;
    } else {
    return FALSE;
    }

    }

    ——————————————————
    ——————————————————
    if ( wp_is_mobile() ) {

    /* モバイル向けの処理内容 */

    } else {

    /* PC 向けの処理内容 */

    }
    とページには記述しておりますが上手くいきません。

    ご教授願えましたら幸いです。
    何卒宜しくお願いします。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • gblsm

    (@gblsm)

    7年、 9ヶ月前

    「上手くいきません」というのは、何が、どのように、なのか教えてください。
    （phpやhtmlコードを含める時は前後を [code] ボタンを押して囲んでください。）

    もし、自分が定義した関数 is_mobile() のとおりに判定してくれない、という問題なのでしたら

    if ( is_mobile() ) ...

    とすれば良いのではないでしょうか。

    hokutonojikei

    (@hokutonojikei)

    7年、 9ヶ月前

    outi00さんこんにちは。

    wpディレクトリ直下にあるwp-config.phpを編集すると
    デバックモードに切り替えができます。（phpのエラーログなどがブラウザで見れます）
    http://qiita.com/miiitaka/items/9c8ea4e36c78381c3748

    ※wp-config.phpのパーミッション設定は場合によっては
    セキュリティホールになる可能性もありますので
    サーバの推奨設定を確認して適宜設定してください。

    デバックモードにするとエラーログが出てくるかもしれません。

    あとはvar_dump($pattern);や
    var_dump($pattern);などまずは一つ一つ
    変数の確認から進めていくといいかもしれません。
    参考になりましたら幸いです。

    トピック投稿者 outi00

    (@outi00)

    7年、 9ヶ月前

    貴重なお時間を割いてご回答頂きありがとうございます。
    また、わかりにくいところが有り申し訳ございません。

    例えば

    <?php if(is_mobile()): ?>
<img src="画像B.jpg">
<?php else: ?>
<img src="画像A.jpg">
<?php endif; ?>

    と記述すると、PC画面で　画像B、Aが上下に同時に2つとも表示されます。
    PCでは画像Aのみ、スマホになると画像B飲みに切り替わるようにしたいのですが
    2つとも表示されてしまいます。

    gblsm

    (@gblsm)

    7年、 9ヶ月前

    outi00さん、「例えば」のコードが連続して2回実行されている、という可能性がありますよ（1回目と2回目で is_mobile() の結果が違う）。
    そのコードはどこに記述してありますか？（テーマのテンプレートのどれか、ウィジェット、投稿の本文など）

    トピック投稿者 outi00

    (@outi00)

    7年、 9ヶ月前

    ご回答ありがとうございます。
    固定ページのテキストに記入しております

    テンプレートはこちらのレスポンシブ対応のものを使用しています。
    https://hybrid-theme.com/theme/n-zero/

    gblsm

    (@gblsm)

    7年、 9ヶ月前

    すみませんがそのテーマはライセンスがWordPressと合いませんので、このフォーラムでは扱えません。

    例えば WordPress 公式の Twenty Sixteen テーマでも同じ問題が発生するのであれば、続けましょう。固定ページでphpコードを実行可能とするためのプラグインも利用していらっしゃると思いますが、同じ問題が発生する場合はどのプラグインかも教えてください。

    nobita

    (@nobita)

    7年、 9ヶ月前

    こんにちは、

    固定ページのテキストに記入しております

    もし、固定ページの投稿本文に記述しているのであれば　PHPのコードは本文では使えないです。

    もしそうであれば、参考書を購入する等して、どこに書けばPHPとして動作するのか理解してから、カスタマイズ頑張ってみるといいかもしれません。

    配布先のライセンスの問題が指摘されていますが、個人的にちょっと懐かしかったので　書き込みさせていただきます

    販売品の中に、piano blackというテーマがありますが、私がテーマを作り始めたころ

    テーマディレクトリの中の、超人気テーマでした。

    https://wordpress.org/themes/piano-black/

    フリーのものはやめちゃったのかもしれませんが、懐かしいですね…

    トピック投稿者 outi00

    (@outi00)

    7年、 9ヶ月前

    皆さま、色々とご教授くださり
    ありがとうございます。

    色々と参考に試してみて
    下記の方法で成功しました。

    —————————————

    固定ページ内に下記を記載

    <div id="banner01">
    <img src="携帯用画像jpg" alt="" class="mobileHidden">
    <img src="PC用画像.jpg" alt="" class="desktopHidden">
</div>

    css内に下記を記載

    .desktopHidden { width: 100%;}
.mobileHidden { display:none;}

@media screen and (max-width:400px) {
  .desktopHidden {
  display:none;
}
  .mobileHidden {
  display:inline;
}
}

    —————————————

    下記ページも参考にしました。
    http://sole-color-blog.com/blog/php/72/
    この方法は
    CSSで非表示にした場合でもブラウザは画像を読み込んでいるので
    厳密には重さや速度で問題が出る
    可能性があるそうで、ページ下のjQueryプラグイン「Breakpoints.js」を使う
    方法がベストのようですが
    今回は、そんなに大した容量でないのでこちらの方法にしました。

    ＞nobita様

    テンプレートは無料のものは有害なタグが仕込まれたり、色々と心配があると言う事で
    今回有料のものを始めて使ってみましたが安価でありますし
    やはり無料のものより良かったです。
    他のデザインも魅了的ですね

    Hinaloe

    (@hnle)

    7年、 9ヶ月前

    テンプレートは無料のものは有害なタグが仕込まれたり、色々と心配があると言う事で

    この点ですが、(他のセキュリティ的問題も含め)有料だから安心といったものは無いかと思います。もちろん得体の知れないよくわからないものを使うのが怖いのはあるのですが、例えばモラル的な面から見ても有料テーマにしろ無料テーマにしろ意図的にセキュリティホールを含んでいるのは問題ですし、有料のものでも作者が気付かずに生み出している可能性は変わりません。
    (場合によってはその対応が面倒な場合もありますが……)

    どのテーマだから安心といったものはありませんが、WordPress.orgのテーマディレクトリにあるものはコミュニティによりコードレビューがなされたもので、一定の信頼度があります。また、このフォーラムでサポート出来ます。

    トピック投稿者 outi00

    (@outi00)

    7年、 9ヶ月前

    Hinaloe様

    WordPress.orgのテーマディレクトリにあるものはコミュニティによりコードレビューがなされたもので、一定の信頼度があります。また、このフォーラムでサポート出来ます。

    情報ありがとうございます。
    今後はこちらから探してみます。

    nobita

    (@nobita)

    7年、 9ヶ月前

    こんにちは、

    テンプレートは無料のものは有害なタグが仕込まれたり、色々と心配があると言う事で
    今回有料のものを始めて使ってみましたが安価でありますし

    if( 有料 ) {
   echo 'あんしんー';
   echo '株式会社だし信頼度アップ―;
}else{
   echo '無料には裏がある';
   echo '誰が作ったかわかなない―';
}

    という事で、「とりあえず、高いやつ買っておけば間違いないだろう。」的な発想は、とても危ないです。

    有料テーマっていうのは、ソースコードを購入するまで確認できないことが多く、使えるかどうかの当たりはずれが大きいですよー。

    ただのやつは、大抵ソースは公開されているので、むしろ堂々と変なことする勇気は有償テーマより大きいです。有償テーマは、良い事も悪い事もどちらもやりやすい

    ところで、outi00さんがやっている事についてですが、最新バージョンのワードプレスと、最新の無償テーマtwentysixteenを使うと、既に srcset属性を使って画像は表示されるので、何にもしなくてOKだと思うのですが、そのテーマは、srcsetを使って表示されないのでしょうか？

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「スマホ　PCで画像を出し分け表示したい」には新たに返信することはできません。

トピックタグ

表示