【WordPress】ショートコードを使って広告を記事内の好きな位置に表示する方法

以前、広告を”一つ目の見出しの直前”に自動挿入する方法を解説しました。

【WordPress】広告を一つ目の見出しの直前(記事本文中)に自動表示する関数

今回は、WordPressの「ショートコード」機能を使って、広告(Google AdSense、アフィリエイト広告)を記事内の好きな位置に表示させる方法を解説します。

つい最近、Google AdSenseの利用規約が改定され、「広告は3つまで!」という広告設置数の上限が撤廃されました。これにより、Google AdSense広告を4つ以上設置できるようになりました。

あまりに内容の薄い記事に広告を4つ、5つ、6つとペタペタ貼っていると、Googleに怒られてしまうようですが、一生懸命書いた「内容の濃い記事」に広告を増やしても問題ありません。

今回紹介する方法を使えば、簡単に記事内に広告を挿入できます。Google AdSense広告を内容の濃い記事に貼り付けて、ブログの収益を増やしてみましょう。

WordPressでショートコードを作成する方法

Google AdSense広告のショートコードを作成してみましょう。

目的は、「ショートコードを使って広告を記事内の好きな位置に表示する」です。一緒にやってみてください。

functions.phpファイルを開く

まず、WordPressの左メニューから「外観」→「テーマの編集」の順に進みます。

wordpress-ad-shortcode

「テーマのための編集(functions.php)」を開きます。

wordpress-ad-shortcode

Google AdSense広告のコードを貼り付ける

functions.phpファイルに次のコードを貼り付け、「ショートコード」を作成します。

//Google AdSense広告のショートコード
function gaFunc() {
return'

GoogleAdSenseの広告コードを貼り付ける!!!

';
}
add_shortcode('ga1', 'gaFunc');
add_shortcodeでショートコード名を設定しています。上記のショートコードの場合、「ga1」がショートコード名になります。
僕もよくやってしまうことですが、「functions.php」の記述を間違えるとブログ全体の画面が真っ白になってしまいます。

必ず、バックアップを取った上で、FTPを起動しておき、いつでも元に戻せるように準備しておきましょう。

wordpress-ad-shortcode

「GoogleAdSenseの広告コードを貼り付ける!!!」の部分に自分の「Google AdSenseアカウント」の広告コードを貼り付けてください。

僕の場合は、次のようにGoogleAdSenseの広告コードを貼り付けました。

wordpress-ad-shortcode

赤色の線で囲った部分が「ショートコード」の内容になります。これで、ショートコードの作成は完了です。

記事内に広告を挿入する

では、記事内で「ショートコード」を呼び出してみましょう。とても簡単です!

広告を表示させたい部分にこんな感じに記述するだけです。

wordpress-ad-shortcode

ショートコード名を[]で囲うことで、ショートコードの内容を呼び出せます。

無事にGoogle AdSense広告が表示されました。

wordpress-ad-shortcode

最後に

WordPressの「ショートコード」機能を使えば、Google AdSense広告だけではなく、HTMLやPHP、JavaScriptなどのプラグラムなど、呼び出すことができます。もっと上級者になれば、ショートコードで複雑な数学の計算も可能になります。

今後の作業効率化のために「ショートコードっていう便利な機能がある」と覚えておいて損はないでしょう。



3 件のコメント

  • とても参考になりました。
    さっそく記事通りにしましたところ、無事に表示することができました。
    私もハミングバードを使っていたのでとてもわかりやすかったです。本当に有難うございます。

    もし、よろしければ、【スポンサーリンク】のところのスタイルシートの記述について教えて頂けると大変嬉しく思います。(どうやればいいのかわからなくて、、、)

    ご検討いただければ幸いです。
    何卒よろしくお願いいたします。

    • コメントありがとうございます!
      そう言っていただけると励みになります^^

      スポンサーリンクについては、CSSで調整する必要があります。
      「外観」>「テーマの編集」>「スタイルシート(style.css)」に「.entry-content .ad-link{margin-bottom:5px;font-size: 14px;color: #a6a6a6;}」をコピペしてから、ファイルを更新すればOKです。

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    サラリーマンをしながら、当ブログを運営していましたが、2018年に独立し現在はフリーランスとして活動しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信。また、ファイナンシャル・プランナー技能士の資格を活かして金融関係の情報も発信しています。