【TwentyFourteen】サイトのトップページ上部にアドセンス広告を配置するように修正（初心者向け）

デフォルトのTwentyFourteenテーマではWordpress管理画面でウィジェット編集でサイドバーに広告を配置することはできますが、メインコンテンツの上部に広告を配置することはウィジェット編集ではできません。

直接PHPファイルを編集する必要があります。今回はその方法を備忘録として残しておきます。

WordPressデフォルトテーマ TwentyFourteenについて僕が行った修正箇所。

サイトのメインコンテンツ上部にアドセンス広告を配置するようにテーマファイルを編集

アドセンス広告は通常であれば、1つのページで3つまで配置可能です。

僕はエントリー内に2つ配置させています。プラスサイドバーに1つ配置していますので、エントリーのページを開いた時には3つの広告が表示されています。

ですが、トップページやアーカイブ（月毎のコンテンツ一覧）ページではコンテンツ一覧部分にアドセンス広告を配置していなかったので、コンテンツ一覧ページでは広告が1つだけという表示になっていました。

今回はコンテンツ一覧ページの上部にも広告を配置するようにテーマファイルを編集してみました。

下記が変更後のサイト表示イメージです。この変更でトップページにもアドセンス広告を2つ配置させることができました。

TwentyFourteenのテーマファイルの構成について

まずはTwentyFourteenのテーマファイルの構成について理解しておく必要があります。

僕は冒頭でも載せている参考サイトを参考にしました。

⇒TwentyFourteenのテーマファイルを眺めてみたよ

TwentyFourteenはかなりのファイル数で構成されていますが、編集するのはほんの少しなので、初心者でも大丈夫です。（PHP言語についてほぼ知識なしの僕でもできました♪(´ε｀ )”）

今回編集するテーマファイルは下記です。

index.php ⇒ トップページ
archive.php ⇒ アーカイブページ
category.php ⇒ カテゴリーアーカイブ
tag.php ⇒ タグアーカイブ
search.php ⇒ 検索結果

要はコンテンツの個別ページ以外のコンテンツ一覧上部に広告を配置します。

これにプラスコンテンツの個別ページや固定ページにも広告を配置したい場合は下記のテーマファイルも編集します。

page.php ⇒ 固定ページ
single.php ⇒ コンテンツの個別ページ

例としてindex.php（トップページ）を編集

編集後のindex.php＞＞

get_header(); ?>

<div id="main-content" class="main-content">

<?php
	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	}
?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

                    <?php if ( wp_is_mobile()) :?> /*ここが追加した部分*/
		　　　　　　　　　/*ここにモバイル表示用のアドセンス広告コードを入れる*/
                    <?php else:?>
		　　　　　　　　　/*ここにPC表示用のアドセンス広告コードを入れる*/
                    <?php endif; ?> /*追加コードここまで*/

		<?php
			if ( have_posts() ) :
				// Start the Loop.
				while ( have_posts() ) : the_post();

					/*
					 * Include the post format-specific template for the content. If you want to
					 * use this in a child theme, then include a file called called content-___.php
					 * (where ___ is the post format) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );

				endwhile;
				// Previous/next post navigation.
				twentyfourteen_paging_nav();

			else :
				// If no content, include the "No posts found" template.
				get_template_part( 'content', 'none' );

			endif;
		?>

		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();

上記と同じようにアーカイブ、カテゴリ、タグ、検索結果のPHPファイルも変更すれば、それぞれのコンテンツ一覧が表示されるページでアドセンス広告を配置できます。

これらのPHPファイルはほとんど同じようなプログラムになっていますので、index.phpが変更できれば、他のPHPファイルも変更できるはずです。

必要であれば、single.php（コンテンツ個別ページ）、page.php（固定ページ）にも同じ変更をすれば、コンテンツと固定ページ上にもアドセンス広告を配置可能です。

（僕の場合、コンテンツ内に2つ、サイドバーに1つをすでに配置していますので、single.phpとpage.phpは編集していません。）

今回はPC表示とモバイル表示で分岐させていて、PC表示の部分は「728×90 ビッグバナー」を、モバイル表示は「320×100 ラージモバイルバナー」を配置させてみました。

PC表示の場合は下記のようにアドセンス広告を追加できました。