スポンサーリンク

stinger5ウィジェットで記事下にアフィリエイト広告の作成

stinger 5stinger5, アフィリエイト, ウィジェット, 広告, 記事下

stinger5

 

stinger5でウィジェットを作成して記事下にアドセンス広告以外のアフ
ィリエイト広告を設置してみた。

 

スポンサーリンク

stinger5記事下にアフィリエイト広告を設置

各投稿記事下にアフィリエイト広告を駆る理由と設置の仕方は、前回の
記事で紹介しました。

stinger5 記事下にアフィリエイト広告を貼る

今回はそれの別のやり方を紹介します。

こちらの方がおすすめだと思います。

 

ウィジェットを新たに追加します

テーマのための関数 (functions.php)を開く

 
親テーマ内に追記する場合は、「//ウイジェット追加」項目にある
「if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar
(4) )」のコードを探します。

見つけたら「!dynamic_sidebar(4) )」の(4)を(5)に変更する。

ここでは、デフォルトではウィジェットの数が4個あることを示してい
ます。

 
なので新たにウィジェットを1つ追加する事なので、先ほどの「!dynami
c_sidebar(4) )」の(4)を(5)に変更する。以前ウィジェットを追
加してる方は、それにプラス1してください。

 
私の場合は子テーマの「functions.php」内の

「if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar
(7) )」のコードを探します。
その中の「dynamic_sidebar(7) )」の(7)を(8)に変更した。

 

 

記事下用CTAとしてウィジェット追加コードを追記

同じ「functions.php」内に「register_sidebars(1,」と書かれている
コードがあると思います。

私の場合の親テーマの「functions.php」内に4個ほどあります。

その最後の項目の下に、新たに記事下用CTAとしてウィジェット追加
コードを追記するわけですが、
私の場合最後の「register_sidebars(1,」項目は以下のようになってい
ます。

 

 

上記コード内にある「//更新日の追加」の上に下記コードを追記します。

 

 

私の場合子テーマを作成しているので、子テーマの「functions.php」
内の下記コードを探す。

 

 

上記コード内にある「//ここにコードを追記した」箇所に下記コードを
追記した。

 

 

 

ウィジェットが追加されたか確認

 

ワードプレス⇒ダッシュボード⇒ウィジェットを開いてウィジェットが
記事下用CTA」として追加されているか確認する。

 

 

cta001

 

 

投稿記事下に用意した広告を表示させる

新たにウィジェットを作成した「記事下用CTA」に記述されたコードを、
記事下に表示させる為に、「単一記事の投稿 (single.php)」を開きま
す。

下記コードを探す。

 

 

<?php the_content(); //本文 ?>」の下に下記コードを追記する。

 

 

上記コード内「dynamic_sidebar(8)」の数値は、あなた様によって違う
ので変更する。

 
私の場合上記コードを子テーマの「単一記事の投稿 (single.php)」に
追記した。

 
この時点で投稿記事を確認したら、記事本文の下に「記事下CTAウィジ
ェットが入るよ」と表示されるはずです。

 

cta002

 

 

確認できたら、ウィジェットを開きます。

 

① 左側にある各ウィジェットに「追加」ボタンがなかったら

記事下用CTA」をクリックする。

 
次に左側にある「利用できるウィジェット」欄から「テキスト」を「記
事下用CTA」にドラックして放り込む。

 
タイトルのところはそのまま
「内容」のところにコードを記述する
「保存」をクリックする。

 
② 左側にある各ウィジェットに「追加」ボタンがあったら

「テキスト」のウィジェット「追加」ボタンをクリックする

タイトルのところはそのまま
「内容」のところにコードを記述する

次に下の方にある「記事下用CAT」をクリック後、位置を「1」を選択
してから「ウィジェットを保存」をクリックする。

 

広告用コードの記述例

これは私が使用した広告を表示させるためのコードの一例です。

 

 

上記コード内にあるアフィリエイトコードは、私専用のコードです。

このコードを参考にして、自分なりのアフィリエイトコードを取得して
から、商品の広告および誘導させるページのURLに置き換えて使用し
てください。

 
詳細は下記ページを参考にしてください。

 
stinger5 記事下にアフィリエイト広告を貼る

 

 

スタイルシート(style.css)に追記

 
次にまだスタイルシートに追記していなかったら、「スタイルシートst
yle.css」のスマホ~PC共通領域に、以下のコードを追記する。

 

 

ボックスの背景色やテキストの装飾はそれぞれ変更してください。
「.rankst-box」でボックスの外枠の装飾をしています。

ブログによって表示される位置や、リンクボタンがずれる時などは、
「margin」や「padding」の変更が必要と思われます。

私の場合これでできました。

 

完成画像
cta003

 

 

まとめ

前回紹介した「stinger5 記事下にアフィリエイト広告を貼る」は

広告コードを「単一記事の投稿 (single.php)」に記述するやり方でし
た。

これだと子テーマを持っていない人だと、テーマ更新時は不便だったり
新たに広告を作成しなおす時、ウィジェットで作成した方が、作成しや
すいと思います。

 
最後にウィジェットでビジュアルエディタが使えるワードプレスプラグ
インがあるようです。

 

Black Studio TinyMCE Widget」は、ウィジェットの中でビジュアル
エディタが使えるプラグインです。

通常の場合、ウィジェットにテキストやHTMLを記述する際は、テキスト
ウィジェットを利用して直接記述しますが、このプラグインを利用する
と、記事編集画面と同じビジュアルエディタをウィジェットの中で利用
できるようになります。ビジュアルエディタからテキストエディタ(HT
MLモード)に切り替えることもできます。

このプラグインを活用すると、ウィジェットに登録したコンテンツの更
新がやりやすくなります。もし、ウィジェットの中身を頻繁に更新する
場合は、便利なプラグインなので活用しましょう。
引用元 Black Studio TinyMCE Widget – ウィジェットでビジュアルエ
ディタが使えるWordPressプラグイン

 

 

 

 

今度機会があったらこのプラグイン使って、アフィリエイト広告の更新
に使えるか試してみたいと思っています。
その時はこのブログで紹介したいと思っています。

 

 

 

スポンサーリンク