ウイジェット記事下記事上広告もスマホとタブレット&パソコンで振り分ける

タブレットもモバイルと同じ広告が表示される

前回、「SANGO」のフッター固定メニューをスマホだけに表示させるようにカスタマイズした。

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

ねこもりや的にはとってもしっくり来て大満足なんだけど、

もうひとつ、同じようにスマホとタブレットの表示を切り替えたい部分がある。

モバイルとパソコンでのウイジェットの表示をスマホとタブレット&パソコンで振り分ける

それは、アドセンス広告の表示。

正確には、個別投稿ページ(シングルページ)のタイトル下と記事下のウイジェット部分ですね。

記事上記事下広告ウイジェット(パソコンとモバイル別)

 

ウイジェットで、広告だけでなく、モバイルに表示させたい内容パソコンで表示させたい内容を分けることができる便利な機能。

こんなところも「SANGO」は気が利いてますよね~(^^)v

ただし、前回のフッター固定メニュー同様、モバイルにはタブレットも含まれるわけです。

タブレットって、やっぱり結構大きいので、サイドバーも表示されるし

見た目は、パソコンの表示とほぼ同じなので、

やはり、タブレットはパソコンと同じで良いんじゃないかと・・・

ipad縦

タブレットもモバイルと同じ広告が表示される

ipad横

タブレットもモバイルと同じ広告が表示される

カスタマイズするファイルの在りか

そこで、「SANGO」テーマのどこにその部分があるのか見てみると、

sango-theme-child
├parts(フォルダ)─ single(フォルダ)─ entry-content.php
├functions.php
└style.css

ココでした。

以下がentry-content.phpの中身。

entry-content.php
<section class="entry-content cf">
<?php
$show_ads = (get_post_meta( $post->ID, 'disable_ads', true )) ? null : "1";
//タイトル下広告(ウィジェットで設定)
if( wp_is_mobile() && is_active_sidebar('ads_below_title_mb') && $show_ads) {
dynamic_sidebar('ads_below_title_mb');
} elseif( !wp_is_mobile() && is_active_sidebar('ads_below_title_pc') && $show_ads) {
dynamic_sidebar('ads_below_title_pc');
}
//記事の中身
the_content();
//分割ページのページネイション
wp_link_pages( array(
'before' => '<div class="page-links dfont">',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
//記事下広告(ウィジェットで設定)
if( wp_is_mobile() && is_active_sidebar('ads_below_contents_mb') && $show_ads ) {
dynamic_sidebar('ads_below_contents_mb');
} elseif( !wp_is_mobile() && is_active_sidebar('ads_below_contents_pc') && $show_ads ) {
dynamic_sidebar('ads_below_contents_pc');
}
?>
</section>

やはり、フッター固定メニューの時同様、”wp_is_mobile”で切り分けてあるようです。

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

カスタマイズの方法

なので、”wp_is_mobile”を”is_mobile”にすればいいというのは、前回の記事と同じですね。

では、早速やってみます。

やり方は、新規に作成する方法と、親テーマのファイルを修正して子テーマに保存する方法。

注意
注意するのは、親テーマと同じディレクトリに置くということ。

モバイルを定義

追記:すみません、、、↓こちらが抜けてました!

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

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

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

新規にファイルを作成する場合

entry-content.phpというファイルを新規で作って

以下のコードを貼り付け、

”文字コードを指定して保存”でUTF-8N(BOMなし)で保存します。

保存場所は↓
sango-theme-child
├parts(フォルダ)─ single(フォルダ)─entry-content.php
├functions.php
└style.css

文字コード指定保存↓

文字コードを指定して保存

 

entry-content.php
<section class="entry-content cf">
<?php
$show_ads = (get_post_meta( $post->ID, 'disable_ads', true )) ? null : "1";
//タイトル下広告(ウィジェットで設定)
if( is_mobile() && is_active_sidebar('ads_below_title_mb') && $show_ads) {
dynamic_sidebar('ads_below_title_mb');
} elseif( !is_mobile() && is_active_sidebar('ads_below_title_pc') && $show_ads) {
dynamic_sidebar('ads_below_title_pc');
}
//記事の中身
the_content();
//分割ページのページネイション
wp_link_pages( array(
'before' => '<div class="page-links dfont">',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
//記事下広告(ウィジェットで設定)
if( is_mobile() && is_active_sidebar('ads_below_contents_mb') && $show_ads ) {
dynamic_sidebar('ads_below_contents_mb');
} elseif( !is_mobile() && is_active_sidebar('ads_below_contents_pc') && $show_ads ) {
dynamic_sidebar('ads_below_contents_pc');
}
?>
</section>

FTPソフトでアップロードしますが、アップロード場所も同じようにフォルダを作ってアップロードします。

├parts(フォルダ)─ single(フォルダ)─ entry-content.php
├functions.php
└style.css

注意
親テーマと同じディレクトリに置くこと。

親テーマのファイルを編集して子テーマフォルダに保存する方法

SANGO」親テーマのparts – singleフォルダの中のentry-content.phpファイルを開き、

赤字の”wp_is_mobile()”を”is_mobile()”に4カ所変更する。

entry-content.php
<section class="entry-content cf">
<?php
$show_ads = (get_post_meta( $post->ID, 'disable_ads', true )) ? null : "1";
//タイトル下広告(ウィジェットで設定)
if( is_mobile() && is_active_sidebar('ads_below_title_mb') && $show_ads) {
dynamic_sidebar('ads_below_title_mb');
} elseif( !is_mobile() && is_active_sidebar('ads_below_title_pc') && $show_ads) {
dynamic_sidebar('ads_below_title_pc');
}
//記事の中身
the_content();
//分割ページのページネイション
wp_link_pages( array(
'before' => '<div class="page-links dfont">',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
//記事下広告(ウィジェットで設定)
if( is_mobile() && is_active_sidebar('ads_below_contents_mb') && $show_ads ) {
dynamic_sidebar('ads_below_contents_mb');
} elseif( !is_mobile() && is_active_sidebar('ads_below_contents_pc') && $show_ads ) {
dynamic_sidebar('ads_below_contents_pc');
}
?>
</section>

変更したら、子テーマに保存します。

保存場所は↓
├parts(フォルダ)─ single(フォルダ)─ entry-content.php
├functions.php
└style.css

FTPソフトでアップロードして、スマホとタブレットでの表示を確認してみてください。

注意
親テーマと同じディレクトリに置くこと。

ちゃんと切り替わってるかわかりにくい場合は、

なにかスマホにだけ表示させるものを加えてテストしてみるとか・・・

例えば、ウイジェットのタイトル部分に「スポンサー」(ねこもりやは広告と分かるように入れてます)と入れる時に、スマホは「★スポンサー」としてみるなど。

あとがき

SANGO」はほんとに素敵なテーマです。

デフォルトでも十分使いやすく、魅力いっぱいですが、

ちょっと気になった部分は、自分でもカスタマイズしやすいように

わかり易い構造になってるというのも、また魅力の一つだと思います。

コメントを残す

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