【ワードプレス限定】記事の読み終わりや文章の途中に指定のリンクを自動で差し込む技術

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ワードプレスは導入するテーマによって使い方も変わります。たとえば「CTA(コールトゥアクション)」の扱いもテーマによって違います。記事内にショートコードでCTAを差し込むタイプもあれば、そもそもCTAの管理機能自体がついていないテーマもあるわけです。CTAはウェブサイトを運営するうえではとても重要な役割を果たします。以前に「賢威」でCTAをまとめて入れ替える記事を公開しております。

賢威で「共通コンテンツ(CTA)」をすべてまとめて入れ替える方法

ただ、人によっては「CTAをショートコードで差し込むのも面倒」といった意見もあります。できればショートコードを使わず記事を公開するだけで毎回自動で指定位置へCTAを差し込みたいというご要望です。

PCで記事を更新せずに、スマホアプリで作成している場合はショートコードのタグをコピーするのにも時間がかかるので効率化を追求していくと「自動で設定される」に越したことはありませんよね。

実はワードプレスであればそういったカスタマイズも可能です。本記事では具体的な手順をご紹介すると記事が長くなってしまうので技術的に対応できるという内容をお伝えさせていただきます。

【ワードプレス限定】記事の読み終わりや文章の途中に指定のリンクを自動で差し込む技術

まず第一に「どうやって自動で差し込むの?」という部分ですよね。しかも、記事の終わり箇所だけじゃなくて記事の文中にも自動で差し込む設定の裏側について詳しく知りたい方が多いはずです。

ウェブサイトはカンタンに構造を調べられる

企業向けのホームページ・個人所有のブログ・専門のオウンドメディア、どういったウェブサイトもhtmlがベースで出来上がっているわけです。さらに運営中のウェブサイトにもしシステム(ワードプレスなどのCMS)が入っていれば一定のルールに基づいてPHPテンプレートで構成されます。

カンタンに言えば「htmlソースをjavascriptで解析」すれば、どういった構造で、どこが何番目の段落で、記事が始まる部分はどこか、記事の終わった部分といった細かいデータを分析することができます。

言葉で説明してもイメージがつかみにくいので実際の当ページでチェックしてみましょう。各ブロックで英語の文字と色付きの線が入っている部分が構造を表しています。以下はトップページの構造となります。

トップページの構造

投稿ページの構造

以下が記事の個別ページです。投稿の直前(BEFORE POST)やコンテンツが入る箇所(BEFORE CONTENT)がありますよね。ワードプレスではお決まりのタグで出力するので全部の場所がわかります。

投稿ページの文中構造

画像の枚数もカウントできます。以下では記事内6枚目の画像直前に「BEFORE IMAGE 6」と入っています。

場所を特定できれば差し込みもできる

上記の通りコンテンツの開始箇所・段落文字の総数・表示している画像枚数がわかれば指定のコンテンツを差し込むのは技術的に可能です。コンテンツの終わり部分や文章の途中、お好みの位置に差し込めます。

ちなみにこの方法であればショートコードを使いません。段落の15個目に指定のリンクを差し込む、記事が読み終わる箇所に指定バナーを表示させるなどショートコードを使わずに自動設定も可能です。

もし記事の途中や終わりにショートコードを入れる作業が癖づいていれば、いつも通りショートコードを使ってコンテンツを差し込むのがおすすめですがもっと効率化を図りたい方には自動設定を使いましょう。

実装する方法としては「Javascriptで場所を特定」して希望のhtmlを差し込むだけ。

まとめ

本日はショートコードを使わず場所を指定して特定のリンクや画像を差し込む技術について解説いたしました。

普段から使い慣れている方にとってはショートコードが当たり前ですが、運営初心者さんや作業効率を最大化したいユーザーにとっては「毎回ショートコードをコピーするのが手間」と感じることもあります。

技術的には色々な方法があるのでアイデアの1つとしてぜひ覚えておきましょう。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください