アマゾン広告下のスペース削除に成功

2020/06/20

子どもたちが生まれるタイミングで

何か新しいことをしようと思い

このブログを開設し、日々の生活を綴ってきました。

それまでブログ何て取り組んだことありませんでしたし、

どうせ取り組むなら勉強がてら

サーバ借りてドメイン取って、ブログサイトセットアップして

自分で Google とか Amazon の広告を張ってみよう

と思い立ち、調べながら立ち上げたのでした。

一応、学生時代に情報科学を専攻していたことと

仕事も SE ということもあり

Google で調べながら進めると

割と困ることも少なく、すっと成功していました。

が、ずっと解決していなかった点が残っていました。

Amazon の広告を張った後、

下部に過剰な余白が生まれていたのです。

これが何とこの都度、解決させることが出来ました !

おさらい : function.php は親テーマ

このブログサイト、2020.6 時点では

STINGER6 という親テーマで、子テーマを更に使っている状態です。

そんなことすらさっぱり忘れ去っていましたが

今回の事象を調べていくと

どうやら Amazon の広告を張り付ける際にコピペするタグの

“iframe” とやらが関わってそうなことが分かりました。

で、iframe で同様の困り事を抱えている人を

Google で検索して調べていましたが

それらしい情報が見つかり、

対処方法を見ると、

function.php ファイルを編集する必要があるとのこと。

で、過去にもこのファイルを編集したことがありましたが

もはや記憶になかったため

編集方法を調べたところ、

ブログの管理画面から編集可能そうな方法を見つけました。

がしかし、私のブログで選定しているテーマの編集ビューアでは

function.php が存在せず、css のみ…。

何か違和感を持ちながら調べていくと

前述のように、使っているものは子テーマだとわかりました。

子テーマは親テーマにぶら下がる形ですので

親テーマの function.php を探せば良いことがわかりました。

がしかし、親テーマが何かわからない…。

仕方ないので子テーマの css ファイルを見ていると

親テーマの記載を発見。

無事、親テーマは STINGER6 というモノだとわかり、

STINGER6 のテーマに function.php があることも確認出来ました。

youtube 用のデフォルト設定を回避

同じような困り事に直面している人を

Google で検索して見つけることが出来ました。

Amazon の広告を張った後の

下部の余白は何だったのかというと

どうやら iframe のタグを挿入すると

テーマのデフォルトの function.php の記法により

全て youtube 向けの設定が反映されてしまっていたようです。

で、これを解決する方法が、youtube のモノかどうか判定し

youtube のモノであればデフォルトの設定に従い、

youtube で無ければデフォルトの記法に従わない

といった分岐を入れるやり方です。

STINGER6 の場合、function.php に以下の記載があると思います。

function st_wrap_iframe_in_div( $the_content ) {
    if ( is_singular() ) {
        $the_content = preg_replace(
            '!(<\s*?iframe(?:\s+[^>]*>)?)(.*?)(</\s*?iframe\s*?>)!is',
            '<div class="youtube-container">$1$2$3</div>',
             $the_content
        );
    }

    return $the_content;
}

↑のものを↓に差し替えます。

function st_wrap_iframe_in_div( $the_content ) {
    if ( is_singular() ) {
    //YouTube動画にラッパーを装着
        $the_content = preg_replace(
            '/<iframe[^>]+?youtube.com[^<]+?&lt;\/iframe>/is',
            '<div class="youtube-container">${0}</div>',
            $the_content
        );
    }

    return $the_content;
}

すると過剰な余白が消えました !

がしかし、これを実施するうえで注意点が 2 点あります。

注意点 1 : コピペで全角が紛れ込む
‘ (クォーテーション) と ” (ダブルクォーテーション) が
張り付けた後に全角になっていないか要注意です

注意点 2 : 必ず FTP で function.php を更新
前述の通りブログの管理画面から function.php を見つけられ、
修正も可能ですが、更新時にクラッシュして、
一時、ブログへのアクセスが不可能になりました。
その後、大人しく FTP 使って function.php を更新したら直りました。
必ず FTP 使いましょう…。

という訳で記念に Amazon の広告を張ってみます。