yStandardを使っているとカテゴリーページの下がチョットスペースが空いたりする。
ここに広告を入れると少し賑やかになるのかな？ と言う思いで広告を入れてみた。
無料で使うと、投稿とか固定のページは色々やってみるとなんとかなるのだが、カテゴリー一覧だけは中々難しい。
最終的にやったのは「archive.php」に直接記述すること。
yStandardのカテゴリーページはこの「archive.php」で表示されているようだ。
レイアウトを変更
「外観 -> カスタマイズ -> [ys]デザイン -> アーカイブページ」を選択。
ページレイアウトでサイドバーを外した右のレイアウトを選択。
左のサイドバー付きを選択すると広告が、コンテンツとサイドバーを含めた横幅全体に表示されてしまうので広告の位置がおかしくなる、そこでサイドバーを外したレイアウトを選択した。これだと広告の入るレイアウトがうまくいく。
archive.phpを複製して子テーマに入れる
そこでyStandardのお親テーマから複製して子テーマに入れて、そのファイルを修正する。
子テーマの archive.php に広告コードを追加して入れる
子テーマに複製した「archive.php」を以下のように追加修正した。
20〜29行目が追加した分になる。ここに広告を表示するためのスペースを作成しGoogle広告を入れた。
広告のコードは自分で取得したコードを入れること。
以下はXXXXXXXXXXXXXXXと入れているので使えないので注意。
投稿ページの下に入れる広告と同じ「Multiplex広告（レスポンシブ）」を入れるのだが、このカテゴリー一覧では横幅が広すぎるので width を70%にCSSで設定している。
広告表示内容は投稿一覧と全く同じだが、そのためわざわざクラス名を変更している。
<?php
/**
* 記事一覧テンプレート
*
* @package ystandard
* @author yosiakatsuki
* @license GPL-2.0+
*/
get_header(); ?>
<div class="container">
<div class="content__wrap">
<?php if (have_posts()): ?>
<?php ys_get_template_part('template-parts/archive/content'); ?>
<?php else: ?>
<?php ys_get_template_part('template-parts/404/content'); ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<!-- 広告を入れるスペースの作成 -->
<div class="polo-ad-content-one-column">
<div class="polo-ad__title-one-column">スポンサーリンク</div>
<div class="polo-ad__one-block-one-column">
<!-- 広告を入れるコード -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-XXXXXXXXXXXXXXX" data-ad-slot="4751288245"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 広告を入れるコード end -->
</div>
</div>
<!-- 広告を入れるスペースの作成 end -->
</div>
</div><!-- .container -->
<?php get_footer(); ?>CSSでレイアウトを整える
.polo-ad__title-one-column {
display: flex;
align-items: center;
font-size: 10px;
color: #a9a9a9;
}
/*テキストの前と後を同時に指定*/
.polo-ad__title-one-column::before,
.polo-ad__title-one-column::after {
content: "";
height:1px;
flex-grow: 1;
background-color:#a9a9a9;
}
/*テキストの前を指定*/
.polo-ad__title-one-column:before {
margin-right: 10px; /*テキストとラインの右スペース*/
}
/*テキストの後を指定*/
.polo-ad__title-one-column:after { /*テキストとラインの左スペース*/
margin-left: 10px;
}結果、以下のように広告が入ってくる。
上の広告は「Multiplex広告（レスポンシブ）」なので全部で８つの広告が表示されることになる。