【SANGOカスタマイズ】h2見出し前広告の前に指定の広告を表示する方法

こんにちは。

ゆうや（@yuyaphotograph）です！

本記事では、WordPress有料テーマの「SANGO」でh2見出し前広告の前に指定の広告を表示するカスタマイズ方法をご紹介します。

完成イメージです

なぜ僕が今回のカスタマイズをするに至ったかをお話させていただくと、

Amazonアフィリエイトのリンクつき画像を以下のようなコードでテキストエディタに貼り付けて表示させたかったんですね。

テキストエディタ

<a href="AmazonアフィリエイトURL">
  <div style="background: url('バナー画像URL') no-repeat center; background-size: cover; background-position: center;"
</a>

しかししかし、なんとWordPressさんが悪さをしてテキストエディタからビジュアルエディタに切り替えたタイミングでaタグが消えるもしくは、勝手に意図しない所でaタグの閉じタグを入れられるせいでリンクが機能しない、という問題が発生したんです…

なんとか解決しようとググってみたものの対処法が見つからず…考え抜いた末、本記事で紹介する方法にたどり着いたというわけです。

すごく参考になったけど惜しかった記事

参考【WordPress】ビジュアルモードでspanタグが消えたら、TinyMCEエディタの設定をしようYohei Isokawa

それでは参りましょう!!

MEMO

今回紹介するのは「本は、耳で聴こう。」のAudibleの300px × 250pxのバナー画像です。

【SANGOカスタマイズ】h2見出し前広告の前に指定の広告を表示させてみよう！
- sng-function.phpに追記
- style.cssにバナー画像用のCSS追記
まとめ
SANGOカスタマイズ記事まとめ

【SANGOカスタマイズ】h2見出し前広告の前に指定の広告を表示させてみよう！

sng-function.phpに追記

親テーマのsng-function.phpの344行目から374行目あたりのコードを上書きしていきます。

下記記述が目印です。

sng-function.php

/*********************
記事中の1番目のh2見出し下に広告を配置
*********************/

以下コードで上書きしましょう。

sng-function.php

function ads_before_headline($the_content) {
  global $post;
  if ( is_single() && is_active_sidebar('ads_in_contents') && !get_post_meta( $post->ID, 'disable_ads', true )) {//見出し前広告のウィジェットがアクティブのとき
    if( !defined('H2S') ){
      define('H2S', '/<h2.*?>/i');
    }
    preg_match_all( H2S, $the_content, $matches );

    //ウィジェットを$adに格納
    ob_start();
      dynamic_sidebar('ads_in_contents');
    $ad = ob_get_contents();
    ob_end_clean();
    ob_start();
    ?>
    <a href="AmazonURL" class="Audible300" target="_blank" rel="noopener noreferrer">
      <div class="Audible300-Img" style="background: url('バナー画像URL') no-repeat center; background-size: cover; background-position: center;"></div>
    </a>
    <?php
      $ad2 = ob_get_contents();
      ob_end_clean();
      if($matches) {//H2見出しが本文中にあるかどうか
          if ( isset($matches[0][0]) ) {//1番目のH2見出し手前に指定の広告と広告を挿入
            $the_content = preg_replace( H2S, $ad2.$ad.$matches[0][0], $the_content, 1);
          }
      }
  }
  return $the_content;
}
add_filter('the_content','ads_before_headline');

style.cssにバナー画像用のCSS追記

子テーマのstyle.cssにバナー画像用のcssを追加します。

style.css

.Audible300{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 300px;
  display: block;
}
.Audible300-Img{
  padding-top: 83.33%;
  width: 100%;
}

padding-topに指定している値がバナー画像の縦横比率となります。

画像の縦横比率は「縦幅 / 横幅 * 100」で求められます。

まとめ

以上、WordPress有料テーマの「SANGO」でh2見出し前広告の前に指定の広告を表示するカスタマイズ方法をご紹介しました。

「指定したカテゴリーの記事のh2見出し前広告の前に出すにはどうしたらいいですか?」

という方もいると思うので後日記事また出したいと思います。

今回ご紹介した方法でSANGOのカスタマイズにチャレンジデビューしていただければ幸いです！

SANGOカスタマイズ記事まとめ

SANGOカスタマイズに役立つ記事まとめ