[Ha-Basic] The widget structure below the text is divided into PC and mobile

【ha-Basic】本文下ウィジェットの構成をパソコン用・モバイル用に分けました

公開日: 更新情報
Knowledge Base Wordpress ha-Basic テーマ

このエリアにはアドセンスの広告をダブルレクタングル(2列表示)表示する機会が多いことから

で機能追加についての紹介記事を公開しました。

が、紹介記事の内容ではモバイル表示時に右側の広告をCSSで非表示にしているため、もしかすると何等かの規約に違反する可能性がある(表示すべき内容をわざと非表示にしていると判断されかねない)ことから、パソコンとモバイルでアクセスされた時に表示するウィジェットが自動で切り替わるように設定変更しました。

この機能は次期バージョンの1.1では標準搭載する予定ですが、1.0でも修正しておきたいという方のために紹介しておきます。

変更したコードやファイルの内容は以下の「【ha-Basic】バージョン1.0にこの機能を追加するには」をご覧ください。今使っているテーマへ独自のウィジェットエリアを追加したい場合の参考にもなると思います。
※別のテーマの場合はウィジェットエリアのIDが重なってエラーとなったりしないように確認しつつ行ってください。また、ウィジェットエリアの内容を表示する場所についてはテーマによってソースコードが異なりますのでコピペでは対応できません。

今回のカスタマイズの流れは

  • 新しくモバイル用のウィジェットエリアを追加する
  • モバイル表示・パソコン表示用それぞれのウィジェットを表示する

の2つです。

【ha-Basic】バージョン1.0にこの機能を追加するには

【ha-Basic】バージョン1.0にこの機能を追加するには以下のカスタマイズが必要です。

  • テーマのfunctions.phpのコード変更
  • テーマのsingle.phpの変更

初心者の方にはちょっと敷居が高い作業かと思いますが基本的にコピペでできますので頑張ってカスタマイズしましょう!!

テーマのfunctions.phpの変更

functions.phpの62行目付近にある【変更前】のコードを【変更後】のコードに置き換えます
※間違いがあるといけないのでウィジェットエリアの部分すべてを置き換えるようにしましょう

変更前

//サイドバーにウィジェット追加
function widgetarea_init() {
register_sidebar(array(
    'name'=>'サイドバー',
    'id' => 'side-widget',
    'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="sidebar-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'widgetarea_init' );
//記事タイトル下にウィジェット追加
function title_bottom_widgetarea_init() {
register_sidebar(array(
    'name'=>'記事タイトル下',
    'id' => 'titlebottom-widget',
    'before_widget'=>'<div id="post-top-widget" class="top-widget">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="topwidget-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'title_bottom_widgetarea_init' );
//投稿本文下にウィジェット追加
function post_bottom_widgetarea_init() {
register_sidebar(array(
    'name'=>'記事本文下',
    'id' => 'postbottom-widget',
    'before_widget'=>'<div id="post-bottom-widget" class="bottom-widget">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="bottomwidget-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'post_bottom_widgetarea_init' );

変更後

//サイドバーにウィジェット追加
function widgetarea_init() {
register_sidebar(array(
    'name'=>'サイドバー',
    'id' => 'side-widget',
    'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="sidebar-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'widgetarea_init' );
//記事タイトル下にウィジェット追加
function title_bottom_widgetarea_init() {
register_sidebar(array(
    'name'=>'記事タイトル下',
    'id' => 'titlebottom-widget',
    'before_widget'=>'<div id="post-top-widget" class="top-widget">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="topwidget-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'title_bottom_widgetarea_init' );
//投稿本文下にウィジェット追加
function post_bottom_widgetarea_init() {
register_sidebar(array(
    'name'=>'記事本文下(パソコン用)',
    'id' => 'postbottom-widget',
    'before_widget'=>'<div id="post-bottom-widget" class="bottom-widget">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="bottomwidget-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'post_bottom_widgetarea_init' );
//投稿本文下にモバイル用ウィジェット追加
function post_bottom_mob_widgetarea_init() {
register_sidebar(array(
	'name'=>'記事本文下(モバイル用)',
    'id' => 'postbottom-widget-mob',
    'before_widget'=>'<div id="post-bottom-widget-mob" class="bottom-widget-mob">',
    'after_widget'=>'</div>',
    'before_title' => '<h4 class="bottomwidget-mob-title">',
    'after_title' => '</h4>'
    ));
}
add_action( 'widgets_init', 'post_bottom_mob_widgetarea_init' );

テーマのsingle.phpの変更

single.phpの49行目付近にある【変更前】のコードを【変更後】のコードに置き換えます
※変更内容には関連記事の部分も含まれていますが、関連記事でモバイルとパソコン表示の条件分岐を使用していますのでそのまま使うことにしています。

変更前

	<?php dynamic_sidebar( 'postbottom-widget' ); ?>
	<?php if(wp_is_mobile()): ?>
		<div id="related-entries-mob">
			<h3>関連記事</h3>
			<?php include( TEMPLATEPATH . '/related-entry-mobile.php' ); ?>
		</div><!– #related-entries –>
	<?php else: ?>
		<div id="related-entries">
			<h3>関連記事</h3>
			<?php include( TEMPLATEPATH . '/related-entries.php' ); ?>
		</div><!– #related-entries –>
	<?php endif; ?>

変更後

	<?php if(wp_is_mobile()): ?>
	<?php dynamic_sidebar( 'postbottom-widget-mob' ); ?>
			<div id="related-entries-mob">
			<h3>関連記事</h3>
			<?php include( TEMPLATEPATH . '/related-entry-mobile.php' ); ?>
		</div><!– #related-entries –>
	<?php else: ?>
	<?php dynamic_sidebar( 'postbottom-widget' ); ?>
			<div id="related-entries">
			<h3>関連記事</h3>
			<?php include( TEMPLATEPATH . '/related-entries.php' ); ?>
		</div><!– #related-entries –>
	<?php endif; ?>

これでこの機能を実装できます。あとは
で書いている通り左右の広告を設定したウィジェットを「パソコン用」に、「モバイル用」には広告を1つだけそのまま入れたテキストウィジェットを入れればアクセスした人の環境に応じて広告の出し分けをしてくれます。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報