PR

【WordPress】ステマ規制対策でCocoonのタイトル上部に「広告・PR」を表示

WordPress

ステルスマーケティング規制」が 2023年10月1日より施行されることになりました。

広告であるにもかかわらず、広告であることを隠すことがいわゆる「ステルスマーケティング」です。

アフィリエイト会社からは、「広告」「PR」「アフィリエイト広告」「AD」「プロモーション」「アフィリエイト広告を利用しています」「本ページはプロモーションが含まれています」 「A社から商品の提供を受けて投稿しています」などを表示するよう依頼がきています。

今はまだ、どのような対策が正解かわかりませんが、とりあえず、タイトル上部に「PR」または「広告」を表示してみました。


アフィリエイト関連記事を判別するプログラム

投稿ページには、アフィリエイト関連記事である場合とアフィリエイトに関係ない記事があります。

なので、投稿ページ内のURLを検索し、アフィリエイトURLが存在した場合は表示し、それ以外は表示しないプログラムを利用します。

プログラムは、NJさんの以下のブログを参考にしています。


投稿ページ内を検索するURLは指定できます。以下が検索するアフィリエイトURLの例です。

  検索するアフィリエイトURLの例
 ・affi id(アフィリエイトタグ ※)
 ・px.a8.net (A8.net )
 ・amzn.to (Amazon)
 ・r10.to, afl.rakuten.co.jp (楽天)
 ・ap.valuecommerce.com (バリューコマース)
 ・af.moshimo.com (もしもアフリエイト)
 ・linksynargy.com (リンクシェア)
 ・trafficgate.net (TG)
 ・h.accesstrade.net (アクセストレード)
 ・t.afi-b.com (afb)

※:「アフィリエイトタグ」は、Cocoonの「アフィリエイトタグ管理」でできる広告管理タグのことです。「アフィリエイトタグ」については、以下を参照してください。


今回は、以下のプログラムを使用しますので、これをコピーします。
上から4行目以降のURL部分と、下から4行目の「PR」部分は、お好みで変更してください。

<?php
//投稿に特定のURLがあるか調べる
$target_url = array(
'affi id',
'px.a8.net',
'amzn.to',
'r10.to',
'afl.rakuten.co.jp',
'ap.valuecommerce.com',
'af.moshimo.com',
'linksynargy.com',
'trafficgate.net',
'h.accesstrade.net',
't.afi-b.com'
);
// 正規表現用にパターン化
$searchPattern = '/('.str_replace( '.', '\.', implode( "|", $target_url ) ).')/';
if ( preg_match( $searchPattern , $post->post_content ) ) {
?>
<div class="pr">PR</div>
<?php
}
?>


プログラムを貼り付け

(1)FTPソフトなどを使って、Cocoonの親テーマから以下のcontent.phpを取得します。

/public_html/wp-content/themes/cocoon-master/tmp/content.php

FTPに関しては、以下を参照願います。


(2)「content.php」ファイル内を「header」で検索すると以下のようなコードがあります。
①の「h1」タグ(タイトル)の上に先ほどコピーしたプログラムを貼り付け、保存します。

stealth_marketing-1-01


(3)貼り付けた状態が以下です。

stealth_marketing-1-02


(4)FTPで子テーマの以下フォルダに「content.php」を保存します。
自動更新でテーマがバージョンアップされた場合、親テーマのphpファイルは更新されますので、子テーマの方に保存します。「tmp」フォルダが無い場合は作成します。

/public_html/wp-content/themes/cocoon-child-master/tmp/content.php

「PR」部分のスタイル変更

スタイル変更

現状のままでは、PRと表示するだけですので、スタイルを変更します。
以下は、スタイル例です。PRのまわりを四角で囲んでいます。
この部分はお好みで変更お願いします。

.pr{
    padding: 3px;
    border: 1px solid #333;
    background: #ffffff;
    width:40px;
    text-align: center;
}


CSSに追加

(1)以下の手順で上記のスタイルをCSSに追加します。

(2)ダッシュボードから「外観」をクリックし、「追加CSS」を選択します。

mokuji-1-04


(3)「追加CSS」をクリックします。

css-1-03


(4)行の最後にコピーしたCSSを貼り付け、「公開」をクリックします。

css-1-04


表示結果

以下が表示した結果です。

stealth_marketing-1-03