【WordPress】ポップアップを無料で設定する方法。プラグイン不要で作成できます

ホーム
ブログ
WordPress
【WordPress】ポップアップを無料で設定する方法。プラグイン不要で作成できます

WordPress
2024.09.02

訪問すると自動的に広告ポップアップが表示されるWebサイトがありますが、簡単な手順で導入できることはご存知ですか？自社サービスの購入や会員登録を促す有効手段のひとつなので、一度試してみたいと思う方も多いのではないでしょうか。

本記事では、Webサイトにポップアップを設定する方法を、そのままコピー＆ペーストできるコードとともにご紹介します。
導入リスクのあるプラグインを避けて、コーディングでポップアップを設定し、Webサイトを安全にカスタマイズしていきましょう。

WordPressでポップアップを設定するならhtmlがおすすめ
WordPressでポップアップをhtmlで設定する方法
まとめ
小規模企業のホームページ作成なら安岡寺Webワークスへ

WordPressでポップアップを設定するならhtmlがおすすめ

WordPressにポップアップを挿入する場合、プラグインとhtmlの2通りの方法がありますが、安岡寺Webワークスでは以下の理由からhtmlで設定することをおすすめしています。

プラグインによりWebサイトの脆弱性が高まる
プラグインのバージョン管理が必要になる
プラグイン同士の相性を考慮する必要がある
WordPressテーマとの相性を考慮する必要がある

プラグインによりWebサイトの脆弱性が高まる

WordPress自体は最新状態で安全な状態であっても、プラグインにセキュリティ上の脆弱性があるとサイバー攻撃の標的になる可能性が高まります。
Webサイトには攻撃対策を施していても、プラグイン経由で攻撃されるケースはしばしば見られます。
特に最近では、まだ見つかっていない脆弱性や改善が施されていない脆弱性を狙った｢ゼロデイ攻撃｣も増加傾向にあります。
また、プラグインには公式のものと非公式のものがあり、特に個人が作成したような非公式のプラグインは安全チェックが不完全な可能性もあります。
WordPressに関する知識が乏しい人は、安全ではないプラグインを選んでしまう可能性があるため、十分な注意が必要です。

プラグインのバージョン管理が必要になる

ワードプレスだけでなく、プラグインも機能改善や脆弱性対応のアップデートが実施されたら必ず適用しておかなければいけません。
特に、複数のプラグインを導入するとそれぞれのアップデートを常に管理しておく必要があり、管理コストが上昇してしまうでしょう。
導入している全てのプラグインが攻撃の標的となってしまう可能性を秘めているため、必ず全てのプラグインをチェックしておくべきです。さらに、古いプラグインはアップデート提供が停止してしまう場合もあり、安全性を考慮して同機能のプラグインを探しなおすという手間も発生します。

プラグイン同士の相性を考慮する必要がある

プラグインはそれぞれのプログラムによって独立した機能を持っているため、プラグイン同士のプログラムがぶつかり合うケースがあります。
バッティングによって機能が停止した場合、プログラムを確認して解決策を見つけるなど、専門的な知識を持っていないと対応できなくなってしまうでしょう。
ひとつずつ組み合わせを試すなどの策を試しても改善しなければ、開発者への問い合わせやプロへの有償依頼の必要性が出てくるかもしれません。
不要なトラブルを避けるためにも、プラグインの大量導入は控えたいところです。

WordPressテーマとの相性を考慮する必要がある

プラグインの中には独特なコーディングが施されているものも存在し、WordPressのテーマと相性が悪いケースがあります。
相性が悪いとプラグインが正常に作動しないだけでなく、Webサイトのレイアウトが崩れてしまう可能性もあります。
バックアップを取っていれば元に戻しやすいですが、解決しようとして無理に触ってしまうとさらに状況を悪化させてしまうかもしれません。
最悪の場合、専門家による有償作業での復旧が必要になるため、安易にプラグイン導入を行うことは考えものです。

WordPressでポップアップをhtmlで設定する方法

htmlを使えばプラグインのようなトラブルは避けやすいので、ここからはhtmlを用いたポップアップの設定方法を解説していきます。

画像をアップロードする
JavaScriptを追加する
HTMLを追加する

以上の3ステップを理解し、低リスクで理想のポップアップを導入しましょう。

画像をアップロードする

まずは、バナーとして表示させる画像をWordPressにアップロードします。
バナーはサービス広告や離脱防止の目的があるため、ユーザーを誘導するような効果的な文言やデザインにする必要があります。
そのため、自分自身のデザインセンスが不足していると感じる人は、バナー画像作成を外注するのもいいでしょう。
なお、バナー画像作成の依頼は１点数千円〜数万円程度になるため、積極的に投資しても問題ありません。
次に、クリックするとバナーを閉じられる「×」のボタン用画像もアップロードしておきましょう。
ポップアップの端にある小さなボタンでそれほど重要ではないため、自作する必要はありません。
ただし、ネット上にある適当な画像を使用してしまうと著作権に抵触してしまう可能性もあるため、フリー画像サイトからダウンロードしてください。

JavaScriptを追加する

次に、Webページに関する説明を行うエリアであるheadエリアに情報を追加して、ポップアップを導入する準備を行います。
「外観」→「テーマ編集（または編集）」→「header.php」の順にアクセスし、「header.php」の最下部に以下のコードを追加します。

<!--- ポップアップスクリプト!--->
	 
<script>
    const TIMER = 1000;
    const FLAG_NUMBER = 2;
    jQuery(()=>{

        setTimeout(function () {
            showBanner();
        }, TIMER);

        jQuery('.close_btn').click(()=>{
            jQuery('#hidden_wall').hide();
        });
        
        function showBanner(){
            if(sessionStorage.first_time_flag != FLAG_NUMBER){
                jQuery('#hidden_wall').fadeIn();
                sessionStorage.first_time_flag = FLAG_NUMBER;
            }
        }
    });
</script>

注意点は、

・バックアップをとること
・子テーマの作成がおすすめ

操作ミスをしてしまうとレイアウトが狂ってしまう可能性があり、後から戻すのも大変です。そのため、操作前には必ず元データのバックアップを取っておき、修正が効く状態は保っておきましょう。
また、親テーマに支障を与えずにカスタマイズを行うため、子テーマを作成するのがおすすめです。親テーマにカスタマイズを施すと、アップデートによって上書きされてしまう可能性があるためです。

HTMLを追加する

最後に、header.phpに以下のコードを追加すればポップアップが追加されます。
以下のコードをコピー＆ペーストして流用していただけます。

・リンク先URL
・画像URL
・バナーを閉じる画像URL
の３箇所を書き換えてください。

<div id="hidden_wall" style="display:none;color:white;background-color:rgba(1,1,1,0.7);position:fixed;top:0;bottom:0;left:0;right:0;z-index: 8888;">
    <div id="href" style="width:300px;background-color:white;height:240px;position:absolute;left:50%;top:50%;transform: translate(-150px, -120px);z-index: 8889;">
        <a href="リンク先URL"><img src="画像URL" width="300px" height="240px" alt=""></a>
    </div>
    <div class="close_btn" style="width:30px;height:30px;position:absolute;left:50%;top:50%;transform: translate(150px, -150px);z-index: 8890;">
        <img src="バナーを閉じる画像URL" width="30px" height="30px" alt="">
    </div>
</div>

「画像URL」と「バナーを閉じる画像URL」には、最初のステップで追加した画像のURLを挿入してください。
操作が完了したらプレビューを確認し、正常にバナーが表示されるか確認しておきましょう。

まとめ

WordPressのポップアップは離脱防止やサービス拡販など、Webサイトを利用した売上拡大に対して非常に効果的です。
ポップアップはプラグインでもhtmlコーディングでも追加できますが、できればhtmlコーディングで導入したいところ。
プラグインは管理が煩雑なうえ、脆弱性を狙ったサイバー攻撃の対象になってしまう可能性も。

本記事で解説している内容を参考にすれば、リスクを抑えてポップアップを導入できますよ。
自社サイトを効果的にカスタマイズし、より高い売り上げを目指していきましょう。

小規模企業のホームページ作成なら安岡寺Webワークスへ

安岡寺Web（アンコウジウェブ）ワークスは、Web集客を得意とした企画・制作を行うホームページ制作会社です。
「Webのことを誰に相談したらいいかわからない」とお悩みの小規模事業者様のホームページ相談（無料）を行なっております。

【安岡寺Web（アンコウジウェブ）ワークスのサービス】

→ずっと寄り添う・コンサルティング
ホームページの小さな悩みからITツールの使いこなしまで相談できる

→結果につながる・Web制作
アクセス数アップのSEO対策や簡単更新できるホームページへ。システム開発・アプリ開発も行なっております

→差別化になる・　動画制作
ビジネスにつながる動画企画から制作サポートまで

Webマーケティング、システムエンジニア、YouTuber、グラフィックデザイナーとして活躍するプロのWeb制作集団が、持続的なweb集客のノウハウをご提案いたします。
初めての方もご安心ください。プランナーとエンジニアが直接お客様と対話をして寄り添いながら制作します。
大阪・京都を拠点に全国のお客様からのご依頼を承っております。お気軽にご相談ください。

お問い合わせ・ご相談はこちらから

投稿者: 安岡寺Webワークス合同会社
WordPress

【小規模企業】集客につながる会社概要の書き方、事例紹介