[WORDPRESS]自作ショートコードがモバイル環境で実行されない時の対応方法

広告

WORDPRESSで作ったページで、スマホから見るとショートコードが実行されない問題に直面しました。結果として、自作ショートコードをプラグイン化することで無事問題を回避することができました(他にいい方法があるのかもしれませんが)

モバイルでアイキャッチが表示されない!!

WORDPRESSに演劇感想文リンクを移行し、細かい改造をしてきたのですがついつい画面の確認がPC上で行ってしまいます

そのため、気づくのが遅くなったのですが、実は過去に色々行ったショートコードが、スマートフォンでページを見たときに実行されていないことに気づきました

劇団や公演のページのトップについて、アイキャッチがある場合とない場合でアドセンスの出し方を変えています。それをショートコードで実装していました

以下のような感じ

上記のように、adsenseの表示数をアイキャッチ画像の有無が制御されるようなスクリプトをfunction.phpに書きました

function.phpでショートコードで実装したコード

/**記事内のadsense**/
function show_ad_under_title(){
    if (has_post_thumbnail()) {
		$image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
		if(strpos($image_url[0],"kansolink_header-1") !== false){
			get_template_part( 'st-ad-on' ); //広告

		} else{
			$ret="<img src='";
			$ret.=$image_url[0];
			$ret.="' alt=''  class='alignleft size-full wp-image-60500' />";
         $ret.="<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>";
         $ret.="<!-- engek-right-of-eyecatch-rect -->";
         $ret.="<ins class='adsbygoogle'";
			$ret.="style='display:inline-block;width:300px;height:250px'";
			$ret.="data-ad-client='ca-pub-XXXXXXXXXXXXXXX'";
			$ret.="data-ad-slot='XXXXXXXXXX'></ins>";
			$ret.="<script>";
			$ret.="(adsbygoogle = window.adsbygoogle || []).push({});";
			$ret.="</script>";	
			
			return $ret;
		}
		//get_the_post_thumbnail();
		return '<div class="clearfix"></div>';
  	} else {  
		get_template_part( 'st-ad-on' ); //広告
		return '<div class="clearfix"></div>'; 
  	};
}
add_shortcode('ad_under_title','show_ad_under_title');

やっていることは、大したことではなくthumbnail(アイキャッチ)のURL文字列の中に、kansolink_header-1という文字列の有無で分岐しています

しかし、このショートコードがスマートフォンでは実行されません

左記のように、ショートコードがそのまま表示されるだけで実行されていないようです

WPtouch Mobile Pluginの仕業?

色々検索したところ、WPtouch Mobile Pluginというプラグインの仕業ではないかという記事を発見しました

どうやら、モバイルのときに自動的に別のテーマが適用されて、本来のテーマのfunction.phpが実行されないということがあるようです

とはいえ、自分のサイトでは上記のプラグインはインストールしていません。ただ、スマートフォンの時だけ、function.phpが実行されていないというのはありそうです

その為、実装していたショートコードのコードをプラグイン化することにしました

function.php上のショートコードをプラグイン化する全手順

以下のページを参考にしました

ほぼ、そのままですが少し図解をいれつつ詳しく解説します

pluginのフォルダを作る

ワードプレスのプラグインの作成のためのフォルダを作成をします。FTPソフトを利用して以下のフォルダ配下にプラグインフォルダを作成します

ワードプレスのルート/wp-content/plugins

他のプラグインの名称とぶつかるわけには行かないので、自分の名前を一部いれてフォルダ名にしました

pluginのphpファイルを作成します

プラグインを作成するためには、上記のショートコードを別のファイルに保存して、その上に以下の「呪文」を記述します。

<?php
/*
Plugin Name: ks-control-adsense
Plugin URI: プラグインの説明を書いたページURL
Description: adsenseとアイキャッチをコントロール 
Author: kseikaku
Version: 0.9
Author URI: 作者のページURL
*/

ここには、元々function.phpに書いていたコードを記載

?>

記載する必要があるのは、Descriptionのところと、Plugn Name,Authorのところくらい(Versionも適当です)

プラグインファイルをアップロード

最初のステップで作ったフォルダにアップロードします(ファイル名は他のプラグインと被らないように、やはり自分の名前を頭にいれました

成功すれば、WORDPRESSのインストール済みプラグインの一覧にプラグインが表示されます

上記のファイルで書いたDescription、Author,Versionが表示されているのがわかります

この時点では、このプラグインを有効化はしません

function.phpから、当該コードを削除

このまま、プラグインを有効化してしまうと、function.php上に元々実装していた関数とぶつかってしまいます。その為、このタイミングで、function.phpの該当関数の部分を削除しました(こわいので、/*と*/で囲んでコメントアウトしました

プラグイン有効化。そしてスマホで実行


上手く動きました!!

以上 「WORDPRESSのショートコードがスマホで実行されないときの対処法」についての記事でした。

広告

コメントを残す

メールアドレスが公開されることはありません。