【WordPress】レスポンシブテーマに必須なコード、プラグインまとめ

8145106535_4519061bc6_b_min

過去記事にもレスポンシブテーマ関連の記事は書いていますが、バラバラですので備忘録としてまとめです。


レスポンシブテーマに必要なプラグイン


【BJ Lazy Load】:

スマホで見るサイトとパソコンで見るサイトの容量は同じですので、少しでも快適にスマホで閲覧するために、スクロールしていけばその度に画像を表示させる、いわゆる遅延ロードさせる「BJ Lazy Load」は必須です。


【Smooth Scroll Links [SSL] 】:

レスポンシブテーマはサイドバー、フッターもスマホでは表示させるため、1ページがとても長くなります。
長い記事の場合は、目次などを付けて目的の場所までショートカットさせるのも必要だと思います。

■出発
<a href="#1">リンク1に移動</a>

■到着
<div id="1">リンク1</div>


【Display Widgets】:

サイドバーのウィジェットを表示、非表示の設定ができる「Display Widgets」は、HaLPosTでは記事中にGoogleアドセンスを2つ挿入しています。よってサイドバーには必然的に1つしか設置できません。しかし、TOPで2つ表示させています。

レスポンシブテーマに必要なコード


【Googleアドセンスをレスポンシブテーマ用に表示させる】:

<script type="text/javascript">
    google_ad_client = "pub-123456789";
   /* ↑自分のAdsenseのIDを入れましょう */
    width = document.documentElement.clientWidth;
   /* ↑これを書き忘れると機能しません。よく分からなくても記載しましょう */
    google_ad_slot = "123456789";
   /* ↑デフォルトとなるad_slotのIDを入れましょう */
    google_ad_width = 250;
   /* ↑デフォルトとなるad_slotの幅を入れましょう */
    google_ad_height = 250;
   /* ↑デフォルトとなるad_slotの高さを入れましょう */
   /* ↓ここから分岐が始まります。この例だと幅500以上ならif以下で指定されたad_slotを表示 */
        if (width > 500) {
        google_ad_slot = "123456789";
        google_ad_width = 300;
        google_ad_height = 250;
    }
   /* ↓更に分岐。自分のサイトにあわせてどぞ。この例だと800以上なら次のif以下で指定されたad_slotを表示 */
    if (width > 800) {
        google_ad_slot = "123456789";
        google_ad_width = 336;
       google_ad_height = 280;
    }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

■参考サイト

■関連記事


【Googleアドセンス以外の広告などレスポンシブテーマ用に表示させる】:

<?php if (wp_is_mobile()): ?>
	/*スマートフォンで表示したい要素Aを記載*/
<?php else: ?>
	/*それ以外(PC)で表示したい要素Bを記載*/
<?php endif; ?>

■スマートフォンのみ表示させる
<?php if (wp_is_mobile()): ?>
	/*スマートフォンで表示したい要素を記載*/
<?php endif; ?>

■PCのみ
<?php if (!wp_is_mobile()): ?>
	/*モバイル(PC)で表示したい要素を記載*/
<?php endif; ?>

■参考サイト

■関連記事

HaLPosTではFacebook Like Boxも出し分けしています。


【Yet Another Related Posts Pluginを使用したとき】:

Yet Another Related Posts PluginのCSSの中の
.related-post{
     width:100%;
     overflow:hidden;
    margin-top:5px;
}
width:500pxを100%に変更する。

■参考サイト


【レスポンシブテーマにYouTube動画をはみ出さずに表示させる】:

■テーマのCSSに以下のコードを追加
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

■本文に以下のコードを追加
<div class="video-container">
	youtubeの再生されている動画のアドレス
</div>

■参考サイト

■関連記事


【投稿記事下にタブメニューを設置】:

HaLPosTではサイドバーに人気記事、おすすめ記事、新着記事を表示させていますが、レスポンシブだとかなり下までスクロールさせないと表示されません。

HaLPosTの見解ですが、レスポンシブテーマはまだそんなに浸透していないと思うので、コメントまで見てこの記事は終了だと思ってサイトを離れてしまうおそれがあるのではないかと思います。

そこで関連記事のところにタブメニューを使ってすべて表示させることにしました。

■表示させたい記事中、またはsingle.phpに以下を挿入
≫<a href="javascript:void(0);" class="btn_act active">MENU【1】</a>
≫<a href="javascript:void(0);" class="btn_act">MENU【2】</a>
≫<a href="javascript:void(0);" class="btn_act">MENU【3】</a>

<div id="motion_area1" class="motion">
~MENU【1】クリックでオープンとなるタブエリア要素。~
</div><!--/tab_area1-->

<div id="motion_area2" class="motion">
~MENU【2】クリックでオープンとなるタブエリア要素。~
<img src="img/photo.jpg" />
</div><!--/tab_area2-->

<div id="motion_area3" class="motion">
~MENU【3】クリックでオープンとなるタブエリア要素。~
</div><!--/tab_area3-->

■基本CSSです。
.motion {
	width: 500px;
	display: none;
}
#motion_area1 {
	display: block;
}
a.active {
	font-weight: bold;
	background: #ddd;
}

■head内に記入
<script type="text/javascript">
$(function(){
	$("a.btn_act").click(function(){
		var connectCont = $("a.btn_act").index(this);
		var showCont = connectCont+1;
		$('.motion').css({display:'none'});
		$('#motion_area'+(showCont)).slideDown('normal');

		$('a.btn_act').removeClass('active');
		$(this).addClass('active');
	});
});
</script>

■参考サイト

■関連記事



今後も追加があったら書いていこうと思っています。

シェアする

フォローする

コメントをどうぞ

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