【AMP対応】Multi Device HTML Swicherでデバイスごとに記事中の表示を切り替え

【AMP対応】Multi Device HTML Swicherでデバイスごとに記事中の表示を切り替え

この記事は2 分 50.5 秒で読めます。

Multi Device HTML Swicher

AMP(Accelerated Mobile Pages)対応のデバイスごとに広告や画像など記事中のHTML等を自動的に切り替えることができる便利なショートコード(Multi Device HTML Swicher)を公開しました。
ASPなどの広告や画像などのHTMLコードをPCやAMP、PC/モバイル/AMPなどで自動的に指定されたものを切り替え表示できます。
指定されたコードをそのまま出力するので、さまざまな使い方できます。
アフィリエイターには特に便利かと思います。

このショートコードの目的

記事中の画像などをPCやモバイル、AMPなどデバイス単位で切り替えたい時、
紹介するアフィリエイト広告などで、PCとAMPで切り替えたい時はよくある話です。

これは!というものがネット上で見つからなかったので、ショートコードとして作成しました。

出力サンプル

組み合わせが多いので、よく使うであろうパターンの一部を紹介します。

Multi Device HTML Swicher samples

下のサンプルは、実際にデバイスごとに表示が変わります。

(1) PC,モバイル,AMPで個別表示

1
[ad_changer1 kind=7 join=0]<span style="color:blue;">PCで表示</span>|||<span style="color:green;">モバイルで表示</span>|||AMPで表示[/ad_changer1]
PCで表示

(2) PC (モバイル共用),AMPで個別表示

1
[ad_changer1 kind=5 join=3]<span style="color:blue;">PCを共有表示</span>|||AMPで表示[/ad_changer1]
PCを共有表示

(3) PC (モバイル,AMP共用)で表示

1
[ad_changer1 kind=1 join=7]<span style="color:blue;">PCを共有表示</span>[/ad_changer1]
PCを共有表示

使い方と注意事項

書式

1
[ad_changer1 kind=n join=n]出力1(|||出力2|||出力3)[/ad_changer1]

パラメータ – kind

kind表示出力HTML
1PCのみPC用出力
2モバイルのみモバイル用出力
3PCとモバイルPC用出力|||モバイル用出力
4AMPのみAMP用出力
5PCとAMPPC用出力|||AMP用出力
6モバイルとAMPモバイル用|||AMP用出力
7PCとモバイルとAMPPC用出力|||モバイル用|||AMP用出力

パラメータ – join

join共用パターン
0共用なし
3PC用出力をモバイル用出力にも適用
6モバイル用出力をAMP用出力にも適用
7PC用出力をモバイル用出力とAMP用出力にも適用

出力文字列

・出力文字列間の文字列は “|||”(パイプライン3つ)です。
・出力文字列はそのままHTMLコードとして出力されます。
・AMPなど特殊なコードもそのまま出力されるので、AMP出力時は”img”タグは”amp-img”にしないとAMPテストでエラーになりますので、注意してください。

使用時の注意

例えば、PCのみの表示指定時では、モバイルやAMPで表示した際はなにも出力されません。
公開する前に、必ずプレビューでご確認ください。

ソースの取扱(守って下さい)
(1) このソースっコードは自由に使用することができます。
(2) 必須ではありませんが、リンクウェアとして配布します。
リンクまたは、何かのタイミングで紹介・リンクして頂けるとありがたいです。
(3) バージョンアップ等があった時など利用者に不便をかけないためにも、ソースコードを無断配布するを禁止します。

組み込み・外し方

(1) 組み込み方
下のソースコードを、使用するテーマのカスタマイズで function.php最後の “?>” の前にコピペします。

(2) 外し方
コピペしたソースコードを削除します。
記事中の該当するショートコードを削除します。

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/////////////////////////////////////////
// 記事中の表示をデバイス毎に切り替えるショートコード(AMP対応)
// Multi Device HTML Swicher
//
// A short code to toggle the display of parts of an article on each device.
//
// Multi Device HTML Swicher
// version 1.0
//
// created 2019/06/16 Saki https://funfanfun.jo
//
// 書式
// [ad_changer1 kind=n join=n]出力1(|||出力2|||出力3)[/ad_changer1]
//
// 設定の種類 (kind)
// kind=1 PCのみ            出力 1=PC
// kind=2 Mobileのみ        出力 1=Mobile
// kind=3 PC & Mobile       出力 1=PC 2=Mobile
// kind=4 AMPのみ           出力 1=AMP
// kind=5 PC & AMP          出力 1=PC 2=AMP
// kind=6 Mobile & AMP      出力 1=Mobile 2=AMP
// kind=7 PC & Mobile & AMP 出力 1=PC 2=Mobile 3=AMP
//
// 設定の共用 (join)
// join=0 代替えなし
// join=3 PCをMobileにも適用
// join=6 MobileをAMPにも適用
// join=7 PCをMobileとAMPにも適用
//
// 各出力の分離文字列 "|||"
//
// ex.
// [ad_changer1 kind=1 join=0]出力1[/ad_changer1]
// [ad_changer1 kind=5 join=0]出力1|||出力2[/ad_changer1]
// [ad_changer1 kind=7 join=0]出力1|||出力2|||出力3[/ad_changer1]
/////////////////////////////////////////
function shortcode_ad_changer1($atts, $content = null) {

  extract(shortcode_atts(array(
    'kind' => '0',
    'join' => '0',
  ), $atts));

  $myAmp = false;
  if(get_option('fit_anp_check') == 'value2' && is_single() && @$_GET['amp'] === '1'){
    $myAmp = true;
  }
   
  $out_html = "";

  if ( $kind == '0' || ( $join != '0' && $join != '3' && $join != '6' && $join != '7' ) )
    //return $out_html;
    return "not data";

  $content_array = explode('|||', $content);
  $content_array_cnt = count($content_array);

  if ( $content_array_cnt == 0) return $out_html;
  else if ( $content_array_cnt < 2 && ( $kind == 3 || $kind == 5 || $kind == 6 )) return $out_html;
  else if ( $content_array_cnt < 3 && $kind == 7) return $out_html;

  $content_normal = "";
  $content_mobile = "";
  $content_amp = "";

  switch ($kind){
  case 1: $content_normal = $content_array[0]; break;
  case 2: $content_mobile = $content_array[0]; break;
  case 3: $content_normal = $content_array[0];
          $content_mobile = $content_array[1]; break;
  case 4: $content_amp = $content_array[0]; break;
  case 5: $content_normal = $content_array[0];
          $content_amp = $content_array[1]; break;
  case 6: $content_mobile = $content_array[0];
          $content_amp = $content_array[1]; break;
  case 7: $content_normal = $content_array[0];
          $content_mobile = $content_array[1];
          $content_amp = $content_array[2]; break;
  default: return $out_html;
  }

  switch ($join){
  case 3: $content_mobile = $content_normal; break;
  case 6: $content_amp = $content_mobile; break;
  case 7: $content_mobile = $content_normal; $content_amp = $content_mobile; break;
  }

  if ( $myAmp )
    return $content_amp;
  if ( wp_is_mobile() )
    return $content_mobile;
  return $content_normal;
}

add_shortcode('ad_changer1', 'shortcode_ad_changer1');

ご質問・動作不良等はTwitterにてお願いします。
非公開にされたい方、返信をご希望される方は、Twitterをフォローした後、DMにてお願いします。
スパムや関係のないDMはご遠慮下さい。

If you have questions or dysfunction, please use Twitter.
If you want to make it private or reply, please contact us via DM after following Twitter.
Please refrain from spam and irrelevant DM.

WordPressカテゴリの最新記事