「スマホにだけ表示」「タブレット以上で表示」のショートコードを追加する。

shortcodeを追加

SANGO」には、沢山の便利なショートコードがありますよね。

その中に、「モバイルだけで表示」「パソコンだけで表示」というのもあります。

ココで言う”モバイル”には、スマートフォンとタブレットが含まれています。

なので、この二つに加えて、「スマホにだけ表示」と「タブレット以上にだけ表示」の二つを加えるカスタマイズです。

勿論、「SANGO」に限らず使えますよ~

ショートコードを追加

もともとある、「モバイルだけで表示」「パソコンだけで表示」は、

SANGO」テーマの

sango-theme
├library(フォルダ) – functions(フォルダ) – style-shortcode.php
├parts
├・・・

↑ココで設定されてました。

見てみると・・・

style-shortcode.php

/*********************
モバイルでのみ表示
*********************/
function only_mobile($atts , $content = null) {
if($content && wp_is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) );
return $content;
}
}
/*********************
PCでのみ表示
*********************/
function only_pc($atts , $content = null) {
if($content && !wp_is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) );
return $content;
}
}

こんなかんじです♪

なるほど~このままコピって使えるね♪

モバイルを定義

注意
まずは、モバイルの定義をしておく必要があります。

ヘッダーアイキャッチ上の文字が見にくいフッター固定メニューをスマホにだけ表示させる。

こちらを参考に、モバイルを定義してください。

functions.phpに追記

親テーマでは、style-shortcode.phpにあったのですが、今回は書き換える(上書き)わけではないので、子テーマのfunctions.phpに追記します。

子テーマのfunctions.phpはここです。
sango-theme-child
functions.php
└style.css

注意
functions.phpは、とても大切なファイルです。
最後に空白スペースなどが入ってたりすると、サイトも管理画面も真っ白になってしまいます。
アタマも真っ白になるよ( *´艸`)
このカスタマイズを行って、不具合が生じても責任は負えません、、、くれぐれも、バックアップをお忘れなく。
functions.php

add_shortcode('phone','only_phone');//スマホでのみ表示
add_shortcode('tabpc','only_tabpc');//タブレット以上でのみ表示
/*********************
スマホでのみ表示
*********************/
function only_phone($atts , $content = null) {
if($content && is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) );
return $content;
}
}
/*********************
タブレット以上でのみ表示
*********************/
function only_tabpc($atts , $content = null) {
if($content && !is_mobile()) {
$content = do_shortcode( shortcode_unautop( $content ) );
return $content;
}
}

できたショートコードの使い方

スマホでのみ表示
[phone]スマホでのみ表示[/phone]

ココ↓には、↑のショートコードを使って「これが表示されていたらスマホ」と入力されています。

タイトル
タブレット」&PCで表示
[tabpc]タブレット&PCで表示[/tabpc]

ココ↓には、↑のショートコードを使って「これが表示されていたらタブレットかPC」と入力されています。

タイトル
これが表示されていたらタブレットかPC

プラグインAddQuicktag | WordPress.orgをお使いの場合は、登録して使われると便利ですね。

SANGO」のショートコードをお使いの場合は、もともとある「モバイルだけで表示」「パソコンだけで表示」の表示順が”15”になってるので、同じように”15”にしたら、その前後あたりに表示されますよ♪

あとがき

このショートコード、「SANGO」ではウイジェットでも使えるので、

デバイスによって表示を変えることができると、いろいろ使い道がありそうです。

その他のテーマの方は↓をfunctions.phpに追記するとウイジェットでショートコードが使えるようになります。

コード
/*ショートコードをウイジェットでも使えるように*/
add_filter('widget_text', 'do_shortcode');
注意
設定済みのテーマもあると思いますのでご確認を。

スマホにだけ表示したい内容、スマホとタブレット、タブレットだけ、タブレットとパソコンだけ、パソコンだけと、

より、ターゲットを絞り込んで訴求できるようになるのでお勧めです♪

 

コメントを残す

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