Lan's note

高速HUGOブログで脱WordPress!静的ブログでもココまでできるを実証中!

2020-04-12

HUGOブログでのアドセンスコードはshortcodesで挿入しよう!

はじめに

本講は副業として静的ブログHUGOを使って安定的にアドセンス収入を稼ぐことを目標としています。

アドセンスで稼ぐには、最初のうちは多くの記事を投稿していかなければなりません。

大量の記事を書いていく上で、効率化できるところは効率化してガンガン記事を投稿したいところです。

今回は記事の執筆において非常に便利かつ効率的なshortcodes(ショートコード)について解説していきます。

shortcodesとは

shortcodesとはマークダウン記法でブログ記事を書く際に、何度も出現するような文字列やHTMLソースを予め定義しておき、簡単にマークダウン内(ブログ記事内)で呼び出せる機能です。

本講では、アドセンスコードをshortcodesとして予め登録しておき、登録したアドセンスコードをマークダウン内から呼び出してみます。

shortcodesの場所は、下記の位置にあります。

HUGOブログのフォルダ
 └ /archetypes
 └ /content
 └ /data
 └ /layouts
 └ /static
 └ /themes
   └ テーマ名ディレクトリ
    └ /layouts
    └ /shortcodes

このshortcodesディレクトリ内にアドセンスコードを定義したファイルを置きます。

※テーマによってはshortcodesディレクトリがない場合がありますので、その場合は新規作成してください。

shortcodesにアドセンスコードを書く方法

shortcodesの書き方は難しくありません。

shortcode名(任意).htmlというファイルを作成し、記事内で呼び出したい文字列やHTMLソース、スタイルシート、javascriptなどを記述するだけです。

ここではアドセンスコードを定義しますので、adsense.htmlという名前のファイルを用意します。(ファイル名はマークダウンから呼び出す名前になります。)

次にadsense.htmlにアドセンスコードを記述します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

アドセンスコードを定義したshortcodesファイルの準備ができたら、shortcodesをマークダウン(ブログ記事)から呼び出してみましょう。

アドセンスを表示させたい位置に

{{< adsense >}}

を記述するだけです。このadsenseとはshortcodesのファイル名から.htmlを削除したものです。

実に簡単ですね。

まとめ

今回はHUGOブログの記事の中にアドセンスコードを簡単に挿入する方法を解説しました。

個別の記事に直接アドセンスコードを記述することもできますが、記事を書くたびにアドセンスコードをコピペしてきて貼り付けるのは作業効率が悪いです。

そこで、GoogleAdsenseで発行した広告ユニットのコードを予めshortcodesファイルに記述しておき、必要なところで、

{{< adsense >}}

と呼び出すと効率よく記事を書き続けることができます。

さていかがでしょうか?

アドセンスで稼ぐために必要な継続的な記事の執筆の効率化のお役に立ちましたでしょうか?

shortcodesは他にも複雑な定義もできますので、折を見てご紹介したいと思います。

次回はHUGOブログにおけるアドセンスとSEOの関係について書いてみたいと思います。