Loading…

Stinger6 Stinger7 WordPress カスタマイズ スマホ 伝えたいこと 備忘録

スマホファースト用にStinger6Stinger7をカスタマイズ

本日の人気記事BEST10

所要時間目安:5


Stinger6 Stinger7 WordPress カスタマイズ スマホ 伝えたいこと 備忘録

スマホファースト

WordPressはカスタマイズ性が優れているのは周知の事実だと思います。function.php内にしていする関数?などによっていろいろな事が出来るようになります。

また、テーマによってカスタマイズする場所などは変わってきたりしますが、今回はStinger6とStinger7においてスマホファースト用に少しカスタマイズしてみました。

というのもサイドバー右上の一番上のウィジェットのスマホ用アドセンス内にそのまま、アドセンスコードを挿入したままですとスマホで表示される時にどうしても4つ表示されてしまっていたからです。

参考記事)

はぁ…。やっと、できた!!って何がという感じですが、 とても使い勝手の良いテーマStingerの最新版Stinger6を選ばせて頂いて、四苦八苦の日々が続いていたわけですが、アドセ

 

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

 

よく読まれている人気記事一覧

上記にてWidget LogicというプラグインにてカテゴリIDなどを指定して4つ表示されることのないようにした(出来た)わけですが、

もうそのWidget Logicというプラグインは今のところ必要なくなりました。
取り急ぎ簡単にカスタマイズ内容を忘れない内に自分用の備忘録として残しておきたいと思います。

 

まずは、Stinger6および(Stinger7)の親テーマ内のfunction.php内を見ると、

以下のようにショートコードが記載されています。

if ( !function_exists( 'st_showads' ) ) {
 /**
 * アドセンス
 */
 function st_showads() {
 ob_start();

get_template_part( 'st-ad' );

$ads = ob_get_clean();

return $ads;
 }

add_shortcode( 'adsense', 'st_showads' );
 }

 

これは[adsense]と投稿記事に記載した際に、
テンプレートの「st-ad」を読み込みなさい。という命令文です。

そして、
その「st-ad」のテンプレート内を見ると以下のように記載されています。

<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
 <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
 <?php endif; ?>
 <?php
 } else { //PCの時は336pxサイズを
 ?>
 <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
 <?php endif; ?>
 <?php
 }?>

 

このままですと、スマホの場合での表示の際にショートコードにて[adsense]と入力すると、
サイドバーのウィジェットのスマホ用アドセンスというウィジェットの内容が読み込まれます。

なので、これまでの記事を全部修正するのは大変になってしまいます。

ない頭を捻って考慮した結果、スマホーとフォンの場合は300pxをの後の

<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>

 

上記部分のsidebar(4)という読み込むサイドバーウィジェットの数値を変更して、
PCの時は336pxサイズをという部分のsidebar(3)を読み込むようにします。

//PCの時は336pxサイズを
 <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>

 

スマートフォンの場合でもsidebar(3)を読み込むようにします。

なので、
スマートフォンの場合でもPCの場合でも同じウィジェット内を読み込むように設定することになります。
(注意としてPCの場合のウィジェット内のアドセンスコードはスマホでも問題ないように表示される広告サイズにしておきます。例えばレスポンシブにしておくとか…。)

 

そうすることによって、
元のスマホ用アドセンスというウィジェット内に他の忍者AdMAX広告などを入れても、

目次に戻る


スポンサーリンク

PCにおいてもスマホ(スマートフォン)においてもショートコードで呼び出したアドセンスコードはPCの時のウィジェット内容が指定して表示されるようになります。

具体的には以下のようにしました。

 

<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>

<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>

<?php endif; ?>


 <?php
 } else { //PCの時は336pxサイズを
 ?>

<div class="ad_center">
 <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>

</div>

<?php endif; ?>
 <?php
 }?>

 

これで、サイドバー右上には常に別のコードなど何でも挿入してもアドセンス広告がスマホにおいて4つ表示になることはなくなります。

そして、
そのままですとスマホの表示の際に2つしかアドセンス広告が表示されなくなってしまうので、single.phpの任意の表示させたい場所に以下のように分岐条件コードを使って挿入します。

<!--スマホ用アドセンスをここに追加ここから-->
 <div class="clearfix" style="margin-bottom:0px;">
 <?php if ( st_is_mobile() ) { //スマホの場合 ?>
 <div class="ad_center">
 <p>スポンサーリンク</p>
 //ここにスマホの表示の際にひょうじしたいアドセンスコードを記載
 </div>
 <!--スマホ本文下用アドセンスコード-->
 <?php } else { //PCの場合 ?>
 <?php } ?>
 </div>
 <!--スマホ用アドセンスここに追加ここまで-->

 

※2行目4行目5行目7行目はなくても良いのですが当ブログではこのように指定しています。

 

また、Stinger7においては以下のようにレクタングル大を記事下に横並びに出来るようになっている為、ちょっと違うようなので各々で確認してみてください。

Stinger7のデフォルトのsingle.php内の記述内容

<!-- 広告枠 -->
 <div class="adbox">
 <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
 <?php if ( st_is_mobile() ) { //スマホの場合 ?>
 <div class="adsbygoogle" style="padding-top:10px;">
 <?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
 </div>
 <?php } else { //PCの場合 ?>
 <div style="padding-top:10px;">
 <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
 </div>
 <?php } ?>
 </div>
 <!-- /広告枠 -->

読み込むテンプレートが「ad」と「st-smartad」になっています。

 

また、Stinger6においてもデフォルトのsingle.php内の記述は以下のようになっていました。

 

<div style="padding:20px 0px;">
 <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
 <?php if ( st_is_mobile() ) { //スマホの場合 ?>
 <?php } else { //PCの場合 ?>
 <div class="smanone" style="padding-top:10px;">
 <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
 </div>
 <?php } ?>
 </div>

なので、
デフォルトの場合はテンプレート「ad」の内容をスマホの場合sidebar(4)という所をsidebar(3)編集すれば良いのかと思われます。

デフォルトのテンプレート「ad」の内容は以下のようになっています。

<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
 <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
 <?php endif; ?>
 <?php
 } else { //PCの時は336pxサイズを
 ?>
 <?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
 <?php endif; ?>
 <?php
 }

 

注意)この記事ではショートコードを使う為に、何度かカスタマイズしてきたので参考程度に考えてください。

他参考)

この度、 これまではBloggerにてブログ運営をしてきて、 カスタマイズもそれなりにして、 アクセス数もまずまずとなっています。ですが、WordPressにて

 

ショートコードを使用しない場合はデフォルトのままで何も問題ないかもしれません。

 

私の場合は、カスタマイズしていく内にどこかで変わってしまったのかもしれません…。

自分の備忘録として残しているのですべての皆さんに当てはまることではないかもしれませんが、
コードの記述方法や読み込むテンプレートなどは参考になるのではないかと思います。

万人に通用するカスタマイズの備忘録内容ではないかもしれませんが、
参考になれば幸いです。

 

スポンサーリンク

追記)こんなこともしていました。

 

前回、 右サイドバー上部にStinger6(Stinger5でもほぼ共通)でWidgetLogicプラグインにて異なる広告が表示されるように設定したのに、 なぜか表示される記事とさ


アドセンス336pxPC閲覧記事下表示1つ目コード

同じカテゴリーの記事一覧


Stinger6, Stinger7, WordPress, カスタマイズ, スマホ, 伝えたいこと, 備忘録

同じカテゴリ人気記事

おすすめの記事一部広告

関連記事

ブログカード

Stinger6 Stinger7 WordPress カスタマイズ

WordPressブログカード作成方法

昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、 WordPressやはてなブログにおいてはブログカードなるものが出てきました。 サイト内リンクや外部サイトリンクのサイトがカードみた…

もっと読む

ショートコード

WordPress カスタマイズ 伝えたいこと 備忘録

ショートコード作り方テンプレートから呼び出す方法などいろいろ

ショートコードって学べば学ぶほど色々な活用方法があるんだなぁ。と実感している毎日です。 もちろん、他にも様々な関数を使ってもっともっと多くのカスタマイズなどができると思います。 今の私には、 そこまで…

もっと読む

ツイッター10年日本公式サイトスクショ

PC 伝えたいこと 備忘録 時事ネタ

Twitter10年!!はじめてのツイッター投稿からちょうど10年の日

上記画像は、 日本Twitterの公式サイトのスクショです。 (サイトを訪れると10年を祝って風船があがっていきます。。)   今日2016年3月21日は、 よく読まれている人気記事一覧 人…

もっと読む

FTPツールWinSCPにてサーバー上の削除できないファイルやフォルダ削除方法

PC WordPress 伝えたいこと 備忘録 設定

サーバ上のファイルやフォルダ削除できない時に削除する方法

えーっ、(汗)。この度WordPressのバージョンアップ後にjetpackが連携できなくなってしまいまして…。 その詳細は次回にしますが、結果しっかりと連携できました。(#^.^#) そして、その連…

もっと読む

目次に戻る

よろしかったらシェアよろしくお願いします。

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

-Stinger6, Stinger7, WordPress, カスタマイズ, スマホ, 伝えたいこと, 備忘録



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサーリンク