本記事にはアフィリエイトリンク広告が含まれています。
2023年の10月からステマ規制と呼ばれるルールが景品表示法に適応されることになりました。端的に書くと「広告は広告であると明示せよ」というルールなわけですが、いちいち過去の記事にフラグを立てるが面倒なのでPHPでプログラムを組んで対応してみました。ついでにChat-GPTを使ってコーディングにしてみたので、使った印象と完成したコードをまとめておきます。
そろそろステマ規制対策をちゃんとやろう
ステマ規制とは
普段から広告の仕事をしていると当たり前の知識として「広告主との関係性を明示せずに第三者から広告的情報発信をしてはいけない」というルールがあって、YouTuberやInstagramerの方に案件のお願いをするときは「PR案件」であるということを動画内で言及することが必須とされています。ただし、代理店や手法によっては結構ゆるゆる運用なのが現状。特にリンクアフィリエイト領域だと広告であることをちゃんと明示してある比較サイトなんかは少なかったりします。
何が必要か
で、この度、景品表示法の運用として「明示しない広告=不当表示」というルールが適用されることに。このルールを適用すると、広告であることを明示していないアフィリエイト広告などの第三者広告系メディアは対応が求められています。
ただ、具体的に何すれば良いの？という話だと、明示すれば良いというだけで、左の画像のように、視認性が高い位置かつ冒頭で広告であるということがわかればひとまずOKの模様。当ブログはただのブログなので、それぞれの記事の冒頭に「これは広告ですよ」という表示を自動的に挿入していけば問題はなさそう。
まずキーワードを拾ってPR表記するプログラムの叩きを作成
全部の記事には表示させたくないので、自動で表示判定するプログラムにしたい
ただし、「これは広告です」という表記は広告が含まれる記事だけに表示したい。広告というのは当ブログでは具体的にはAmazonへのリンクとかが該当するわけですが、そういったアフィリエイトリンクを利用していない記事もあるわけで、全然関係ない記事には表示したくない。それでは広告リンクが含まれる記事を一つずつピックアップして対応するか？と言われると、さすがにそれは面倒くさい。
というわけで、何かプログラム的に対応できないか？というのがこの記事の発端です。具体的には下記のような挙動をするPHPコードを動かして、楽に対応したい。
- WordPressの子テーマ内のfunctions.phpファイルに追記して動かす前提
- 記事内の情報を読み取ってアマゾンへのリンクを見つける
- リンクを発見した場合、記事の冒頭にPR表記を追加して表示させる
- アマゾン以外の販売系リンクに関しても上記動作を繰り返す仕組みに
- 記事の地の文と区別するために、背景や余白を含めて変更しやすいものにする
ざっくり書くと上記ですが、自分はプログラマーではないので、実際に記事にどうやって挿入するのか？という部分が結構大変そう。PHPの関数やサンプルコードを調べまくってみました。
ひとまずシンプルなコードを作成
記事本文に提携テキストを挿入するコードというのは結構ブログにまとめられていて、結論から書くと下記のコードで動きます。
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
if ( is_single() && in_the_loop() ) {
// 「amazon.co.jp」があればPR表記を出力
if ( false !== strpos( $content, 'amazon.co.jp' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
return $content;
}うろ覚えですが、
- the_contentを使ってコンテンツに要素を追加する命令を出す
- is_single()関数で、追加する場所は投稿詳細ページのみに絞り込む
- in_the_loop()」関数で、記事本文を表示した場合(メインループ)のみに絞り込み
- ifとstrposでキーワードが含まれた場合に出力する命令に
という仕組みです。
とりあえず複数KWに反応して動くコードをつくる
上記コードは記事内に「amazon.co.jp」つまりリンクが貼られていたらPR表記を出力するという仕組みなわけですが、本ブログは楽天とその他の提携サイトがあるため、複数のキーワードに対応する必要があります。そこで無理やりKWごとに出力させるコードに変換したのが下記。
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
if ( is_single() && in_the_loop() ) {
// 「amazon.co.jp」があればPR表記を出力
if ( false !== strpos( $content, 'amazon.co.jp' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
// 「rakuten」があればPR表記を出力
if ( false !== strpos( $content, 'rakuten' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
// 「accesstrade」があればPR表記を出力
if ( false !== strpos( $content, 'accesstrade' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
return $content;
}これで実装してみた結果、動いたので問題なさそうだなとは思ったんですが、キーワードが増えたりデザイン的に目立たせたいと思ったときに、対応が面倒臭そう。ここから先はなかなか参考ウェブサイトがなかったので、Chat-GPT4に書き直してもらうことにしました。
Chat-GPTでスマートにコードをリライトしてもらう
ひとまず短縮できるかトライ
普段あんまり使ってないんですが、とりあえずChat-GPTに聞いてみて分からないところがあったり、動かなかったら適宜修正すれば良いかな、ぐらいのテンションで聞いてみました。結論は一発で解決。
こんにちは。あなたはWordpress開発者です。下記のPHPコードは特定の文字列を含む場合に「本記事にはアフィリエイトリンク広告が含まれています。」というテキストを挿入するコードです。このコードをよりスマートに短縮してください
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
if ( is_single() && in_the_loop() ) {
// 本文内に「amazon」があれば表示する
if ( false !== strpos( $content, 'amazon' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
// 本文内に「rakuten」があれば表示する
if ( false !== strpos( $content, 'rakuten' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
// 本文内に「accesstrade」があれば表示する
if ( false !== strpos( $content, 'accesstrade' ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
return $content;
}あなたの要求に基づくと、以下のようにコードを短縮してみた。
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
$keywords = array('amazon.co.jp', 'rak', 'accesstrade');
if ( is_single() && in_the_loop() ) {
foreach ( $keywords as $keyword ) {
if ( false !== strpos( $content, $keyword ) ) {
return '<p>本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
}
return $content;
}ここでは、$keywordsという配列を使って、“amazon”、“rakuten”、“accesstrade”というそれぞれのキーワードを一つずつチェックしています。これにより、コードがよりコンパクトになり、多くのキーワードをチェックすることも容易になります。
補足説明までバッチリだったので、試しに実装してみることに。上記のコードをWordpressの子テーマに設定してあるfunctions.phpファイルに追記してみたところ、、、動くぞ、、、これはすごい。いったん完成したら自分で書き直したり、微修正したりしようかなと思いましたが、そのまま修正もお願いできるのでは？と思い質問を続けます。
そのまま対話してテキストのスタイルを整える
主に修正したかったポイントはPR表記部分のデザイン。上記のコードだとテキストが挿入されるだけなので、地の文で「本記事にはアフィリエイトリンク広告が含まれています。」というのが表示されるだけです。そこで背景色とフォント色を変更して、より目立つように修正したい。
ありがとうございます！しっかり動きました。 次は「<p>本記事にはアフィリエイトリンク広告が含まれています。</p>」という部分を整えたいです。この部分について
・テキストを中央に揃える
・背景をグレイ色にする
という2点の変更を加えてください。
CSSを使ってその要件に応えることができます。
以下のように変更してみてください：
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
$keywords = array('amazon.co.jp',rak', 'accesstrade');
if ( is_single() && in_the_loop() ) {
foreach ( $keywords as $keyword ) {
if ( false !== strpos( $content, $keyword ) ) {
return '<p style="text-align:center; background-color:gray;">本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
}
return $content;
}この変更で、<p>要素（パラグラフ）に対するインラインスタイルが追加されます。 text-align:center; はテキストを中央に揃え、background-color:gray; は背景をグレイ色にします。
ただし、この方法はパフォーマンスの理由からCSSファイルへのスタイルの追加を推奨していません。代わりにクラスを使用することをお勧めしますが、その場合は添加するクラスがあなたのCSSファイル（通常は style.css）に定義されていることを確認してください。
これでも良さそうですが、Chat-GPTくんの言う通りスタイルシートと分けたほうが良いぞと。黙って従うために、追加でその方法を確認してみました。
スタイルシートと分割して保守運用をやりやすく
Chat-GPTを使うコツとして「具体的に聞く」というのがあるらしくって、今回の場合でもスタイルシートも出力して変更する方法を教えてくれ、という聞き方をしてみました。
それでは、クラスを利用する方法へ変更したい場合の対応をお伺いしたいです。Style.cssファイルのサンプルも一緒にお願いします。
一般的に、WordPressにはあなたが定義したカスタムCSSクラスを適用するためのstyles.cssファイルが含まれています。これを活用しましょう。まずPHPの部分から編集します。
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
$keywords = array('amazon.co.jp','rakuten','accesstrade');
if ( is_single() && in_the_loop() ) {
foreach ( $keywords as $keyword ) {
if ( false !== strpos( $content, $keyword ) ) {
return '<p class="affiliate_warning">本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
}
return $content;
}次に、あなたのstyle.cssファイルを開き、以下のCSSを追加します。
.affiliate_warning {
text-align: center;
background-color: gray;
}このコードでは、テキストを中央に揃え、背景をグレイに設定するための新しいCSSクラスaffiliate_warningを定義しています。そして、PHPのコードの中でこれを<p>要素に適用しています。
これによって、これらのスタイルを適用するための再利用可能なCSSクラスができ、コード全体がより整理され、保守性が向上します。また、スタイルの変更をするときもCSSファイル内で変更をすれば適用できるため、柔軟性が向上します。
このスタイルシートの切り出すためのクラス名まで勝手に命名してくれる部分に驚き。しかも名前も適当なクラスAとかではなく、「こういうアフィリエイトの警告を入れようとしているな」ということを察して、affiliate_warningというクラス名をつくってくれています。
スタイルシートの使い方を聞いて、細かい変更を加えていく
あとは微修正。コード自体は動くので、スタイルシートに切り出したデザイン部分の微修正を続けます。フォント色に加えて、上下の余白なども指示してみました。
ありがとうございます。表示できました。フォントの色を変更したい場合はどうすれば良いですか？
フォントの色を変更するためには、colorプロパティをスタイルシートに追加すれば良いです。
例えば、フォントの色を白にしたい場合、styles.cssファイルの.affiliate_warningクラスに以下のような行を追加します：
.affiliate_warning {
text-align: center;
background-color: gray;
color: white;
}ここで、color: white;という行がフォントの色を白に設定しています。また、もし特定のRGBカラーコードを指定して色を設定したい場合は、例えばcolor: #FFFFFF;のように指定することができます。
このCSSを保存し、ページをリロードすると、「本記事にはアフィリエイトリンク広告が含まれています。」というテキストのフォント色が白に変わるはずです。
フォントのサイズや上下の余白も変更したい場合にはどうすれば良いですか？
フォントのサイズと上下の余白は font-size プロパティと padding プロパティを使って調整することができます。
例えば、フォントサイズを16px、上下の余白を10pxに設定したい場合、次のように記述します：
.affiliate_warning {
text-align: center;
background-color: gray;
color: white;
font-size: 16px;
padding: 10px 0;
}この設定で、.affiliate_warning クラスにスタイルが適用されたテキストのサイズが16pxに設定され、そのテキストの上下(padding: 10px 0; の部分）に10pxの余白が追加されます。
設定の適用を確認するためには、styles.cssを保存した後でページをリロードしてください。
というわけでこれで完成。最初のタタキは自分で作ったので上手くいったのかもしれませんが、対話形式で空気を読んで修正したりしてくれるのはとても便利。非プログラマーとして、これまでWordpressを修正するときは毎回四苦八苦していたので、今後もWordpressの改修はこの方式でコードを書いていこうかなと思います。
判定プログラムとスタイルシートへの追記内容が完成!
完成したコードはこちら。Wordpressをお使いの方は、下記のコードを子テーマ内のfunctions.phpファイルに追記すればPR表記を出力できます。
/* ----------------------------------------------------------------------------
PR表記の自動挿入
*/
add_filter( 'the_content', 'my_blog_the_content' );
function my_blog_the_content( $content ) {
$keywords = array('amazon.co.jp','rakuten','accesstrade');
if ( is_single() && in_the_loop() ) {
foreach ( $keywords as $keyword ) {
if ( false !== strpos( $content, $keyword ) ) {
return '<p class="affiliate_warning">本記事にはアフィリエイトリンク広告が含まれています。</p>' . $content;
}
}
}
return $content;
}合わせて上記のコードは地の文に追加されてしまうだけなので、表示する際のデザインを変更する際は下記をStyle.cssファイルに追記ください。
/* ----------------------------------------------------------------------------
PR表記のスタイル
*/
.affiliate_warning {
text-align: center;
background-color: #CFCFCF;
color: white;
padding: 10px 0;
}いろいろ試した結果、Wordpress以外にもMac上で動くスクリプトを書かせたり、面倒な作業を自動でやってもらったり、いろいろ使い出がありそう。ちょこちょこ使ってはいましたが、こんなに便利だとは思ってませんでした。
近年プログラミングスクールでウェブサイト制作を教えたりしてフリーランスとして独立させるみたいなビジネスがむっちゃ流行ってますが、かなりの数が淘汰されるなと感じました。というのも、こんなに一瞬で対応できるなら、たぶん一人あたりで作業できる量が格段に上がるはず。ディレクション能力があるひとだったら、同時並行で何サイトも制作開発を進めるとかも余裕なのでは？
今後も積極的に活用していこうかなと思います。
