• パソコンとスマホで表示内容を変える方法【ワードプレス】


    ワードプレスサイトをレスポンシブデザイン化していて、パソコンでは綺麗に表示されているのにスマホだと表示が崩れる・・・現象に陥ったので、パソコンでは表を使って綺麗に表示、スマホでは表は使わずに綺麗に羅列させる表示方法にしたいと思いました。

    そこで、まずやることは、以下のコードをfunction.phpに書き足すこと。

    //PCでのみ表示するコンテンツ
    function if_is_pc($atts, $content = null )
    {
    $content = do_shortcode( $content);
        if(!wp_is_mobile())
            {
            return $content;
            }
    }
    add_shortcode('pc', 'if_is_pc');
    //スマートフォン・タブレットでのみ表示するコンテンツ
    function if_is_mobi($atts, $content = null )
    {
    $content = do_shortcode( $content);
        if(wp_is_mobile())
            {
            return $content;
            }
    }
    add_shortcode('mobi', 'if_is_mobi');

    これを書いてあげれば、あとは記事内で以下のコードで囲んであげればOK!

    [pc]パソコンで表示させたい内容[/pc]
    [mobi]スマホで表示させたい内容[/mobi]

    簡単♪

    Advertisement

    カテゴリー: WPプラグインを使わないシリーズコメント(0)|2021年12月5日7:02 AM

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    トラックバックURL: https://wpcollege.info/no-plugin/%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3%e3%81%a8%e3%82%b9%e3%83%9e%e3%83%9b%e3%81%a7%e8%a1%a8%e7%a4%ba%e5%86%85%e5%ae%b9%e3%82%92%e5%a4%89%e3%81%88%e3%82%8b%e6%96%b9%e6%b3%95%e3%80%90%e3%83%af%e3%83%bc.html/trackback