わーぷれCollege

Tweet

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

そこで、まずやることは、以下のコードを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]

簡単♪

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