Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでブラウザータブ通知を簡単に追加する方法

訪問者がタブを切り替えてもコンテンツに興味を持ち続けられるクリエイティブな方法をお探しなら、WordPressにブラウザのタブ通知を追加するのは素晴らしいアイデアです。

ブラウザタブ通知は、ブラウザのタブ自体に表示される動的なメッセージやアラートです。人々の注意を引き、サイトに戻ってきてもらうことができます。このさりげない機能は、エンゲージメントを高め、目標達成に役立ちます。

私たちはWPFormsのようないくつかのパートナーブランドでブラウザタブ通知を使用してきました。私たちの経験から、ブラウザタブの通知を見た後にウェブサイトを離れる多くのユーザーが戻ってくる傾向があることに気づきました。

この投稿では、WordPressでブラウザータブ通知を簡単に追加する方法を紹介します。

How to Add Browser Tab Notification in WordPress

ブラウザータブ通知とは?

ブラウザータブ通知とは、訪問者がブラウザーで別のサイトを見ているときに、あなたのサイトのタブに表示されるメッセージです。

WordPressのウェブサイトにブラウザのタブ通知機能を追加することで、ユーザーが別のタブを開いてページを離れた瞬間に注意を引くことができます。

例えば、サイトのファビコンを変更したり、アニメーション化したり、カスタマイザーメッセージを書いたり、タブを点滅させたりすることができます。

オンラインストアを運営している場合、ブラウザータブ通知は本当に役立ちます。このような通知は、気が散った顧客を呼び戻し、お買い物カゴの放棄率を下げ、顧客エンゲージメントを高めます。

この機能を使えば、お買い物カゴの放棄についてカスタマイザーに警告を出したり、カスタマイザーがあなたのサイトに再度アクセスした場合に割引を提供することもできます。

以下はブラウザータブ通知の例である。

Browser tab notification example gif

そこで今回は、WordPressで様々な種類のブラウザータブ通知を簡単に追加する方法をご紹介します。

以下のリンクからお好きな方法にジャンプできます:

WPCodeをインストールしてブラウザータブ通知を追加する

WordPressのカスタムコードを追加することで、サイトにブラウザータブ通知を簡単に追加することができます。通常、テーマのfunctions.phpファイルを編集する必要がありますが、ちょっとしたエラーでもサイトが壊れてしまう可能性があります。

そのため、市場で最高のWordPressコードスニペットプラグインであるWPCodeの使用をお勧めします。サイトにカスタムコードを追加する最も安全で簡単な方法です。

まず、WPCodeプラグインをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

注: WPCodeには、このチュートリアルで使用できる無料版もあります。しかし、有料プランにアップグレードすることで、より多くの機能にアクセスできるようになります。

有効化した後、WordPress管理サイドバーからCode Snippets ” + Add Snippetページにアクセスしてください。

カスタムコードを追加(新規スニペット)」設定にマウスオーバーし、その下にある「+カスタム・スニペットを追加」ボタンをクリックします。

Add custom snippet in WPCode

次に、画面に表示されるオプションリストからコードタイプを選択します。

Select 'HTML Snippet' in WPCode

その後、「カスタム・スニペットの作成」ページに移動します。

どのタイプのブラウザー・タブ通知であっても、ここにコードを入力する。

Create Custom Snippet page

タイプ1:新規更新をブラウザータブの通知として表示する

この方法は、ユーザーにサイトに投稿される更新を通知したい場合に使用します。タブに数字が表示され、見逃している新項目の数を知らせます。

例えば、WooCommerceストアがあり、在庫に新しい商品を追加した場合、ユーザーはブラウザータブの通知に新しい商品がいくつ追加されたかを示す数字を見ることができます。

下の画像をご覧いただきたい:

New Updates as browser tab notification

カスタマイザー作成」ページに移動したら、スニペットに名前を付ける必要があります。コードを識別するのに役立つものであれば何でも構いません。

次に、右側のドロップダウンメニューから「コードタイプ」として「JavaScript Snippet」を選択します。

Select JavaScript as Code Type

あとはすべて、以下のコード・スニペットをコピー&ペーストして「コード・プレビュー」ボックスに入れるだけだ:

1
2
3
4
5
6
7
8
9
10
11
let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

そうしたら、「インサーター」セクションまでスクロールダウンしてください。2つのオプションがあります:自動挿入」と「ショートコード」です。

Auto Insert」オプションを設定するだけで、あなたのサイトにコードが自動的に挿入され、実行されます。

ショートコードを追加した特定のページにのみ更新を表示したい場合は、「ショートコード」メソッドを使用できます。

Choose an insertion method

その後、ページの一番上までスクロールして戻り、「Inactive」スイッチを「Active」に切り替える。

最後に「Save Snippet」ボタンをクリックして、設定を保存します。

Save your code snippet

これでカスタム・コード・スニペットがサイトに追加され、機能するようになります。

タイプ2:ブラウザータブの通知としてファビコンを変更する

この方法では、ユーザーが別のタブに移動したときに、サイトのブラウザータブに別のファビコンを表示します。

ファビコンはウェブブラウザに表示される小さな画像です。ほとんどの企業はロゴの縮小版を使用しています。

Favicon as web browser notification

ブラウザータブのファビコンを変更するには、WPCodeプラグインを使用します。

まず、WordPress管理画面の「Code Snippets ” + Add Snippets」ページにアクセスし、「Add Your Custom Code (New Snippet)」設定の下にある「Use Snippet」ボタンをクリックします。

カスタムスニペットの作成」ページが表示されますので、まずはコードスニペットのタイトルを入力してください。

ここで、右側のドロップダウンメニューから「コードタイプ」として「HTMLスニペット」を選択します。

Choose HTML as your Code Type

そうしたら、次のコードをコピー&ペーストして「コード・プレビュー」ボックスに入れてください:

1
2
3
4
5
6
7
8
9
10
11
12
13
<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>
 
<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';
 
function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() {
        clearInterval( update );
    }, 3100);
}

コードを貼り付けたら、コードから例のファビコンリンクを削除し、独自の画像リンクに置き換えるだけです。

私たちのコードで強調されているリンクは以下の通り。

Paste the HTML code and remove the example favicon image links

ファビコンとして選ぶ画像は、すでにWordPressサイトのメディアライブラリにアップロードされている必要があります。

そうでなければ、コードは機能せず、ファビコンは変更されません。

Change favicon image links

そうしたら、「インサーター」セクションまでスクロールダウンする。

すべてのページに自動的にコードを埋め込みたい場合は、「自動インサート」オプションを選択できます。

Choose an insertion method

特定のページのみファビコンを変更するには、「ショートコード」オプションを選択し、サイドバーウィジェットやコンテンツエディターの下部など、ショートコードが有効化されたエリアに貼り付けます。

次に、ページの上部に行き、右上のスイッチを「非有効化」から「有効化」に切り替え、「スニペットを保存」ボタンをクリックする。

その後、あなたのファビコンはブラウザータブの通知として変わり始めます。

タイプ3:ブラウザータブ通知としてサイトタイトルを変更する

この方法は、サイトタイトルを変更して訪問者の注意を引きたい場合に適している。

このコード・スニペットを使用すると、ユーザーがブラウザーで別のタブに切り替えたときに、サイトのタイトルが変わり、目を引くメッセージが表示されます。

Changing site title in a browser

WPCodeプラグインを使用して、ブラウザータブ通知としてサイトタイトルを変更します。

カスタム・スニペットの作成」ページにアクセスするには、管理サイドバーから「コード・スニペット ” +スニペットの追加」ページにアクセスし、「カスタム・コードの追加(新規スニペット)」設定の下にある「+カスタム・スニペットの追加」をクリックします。

Add custom snippet in WPCode

次に、画面にポップアップ表示されるオプションのリストから、コードタイプとして「JavaScript Snippet」を選択する必要がある。

Select 'JavaScript Snippet' as the code type

カスタマイザーの作成」ページに移動したら、まずコード・スニペットのタイトルを入力します。これは、何のためのコードかを覚えておくのに役立つものであれば何でもかまいません。

Add title for your snippet

あとはすべて、以下のコード・スニペットをコピー&ペーストして「コード・プレビュー」ボックスに入れるだけだ:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changeTitleOnBlur() {
    var timer     = null;
    var title     = document.title;
    var altTitle  = 'Return to this page!';
    window.onblur = function() {
        timer = window.setInterval( function() {
            document.title = altTitle === document.title ? title : altTitle;
        }, 1500 );
    }
    window.onfocus = function() {
        document.title = title;
        clearInterval(timer);
    }
}
 
changeTitleOnBlur();

コードを貼り付けたら、それを編集し、ブラウザータブに表示させたいメッセージをコードに書くだけだ。

希望のメッセージを書くには、var altTitle = 'Return to this page!'; の行に行き、ブラウザータブ通知用のメッセージのプレースホルダーテキストを削除するだけです。

Type a sentence of your choosing

次に、「挿入」セクションまでスクロールダウンし、「自動挿入」モードを選択すると、すべてのページでブラウザータブ通知が有効化されます。

ただし、特定のページにのみアイキャッチメッセージを掲載したい場合は、「ショートコード」オプションを設定することができます。

例えば、「カートに入れる」ページだけにこのコードを追加して、サイトのカート放棄率を下げることができます。

その場合は、ショートコード設定を選択することができます。

Choose an insertion mode

その後、「場所」オプションまでスクロールダウンし、その横にあるドロップダウンメニューをクリックする。

ここから、「サイト全体のフッター」オプションを選択します。

Choose Site Wide Footer as location

最後に、ページの一番上までスクロールして戻り、スイッチを「非活性化」から「有効化」に切り替える。

その後、「Save Snippet」ボタンをクリックして設定を保存します。

Click on the Save Snippet button

これで完了です!これで、ブラウザータブ通知はあなたのサイトを離れたユーザーに警告を発します。

ボーナス:WordPressサイトにWebプッシュ通知を追加する

訪問者を呼び戻し、お買い物カゴの放棄率を下げるもう一つの方法は、ユーザーにWebプッシュ通知を送ることです。このプッシュ通知は、クリック可能なショートメッセージで、サイトにアクセスしていないときでも訪問者に送信されます。

市場で最高のプッシュ通知ソフトウェアであるPushEngageを使えば、これを簡単に行うことができます。

PushEngage

ブログの新着記事やカスタムメッセージを自動送信したり、コードなしでDripキャンペーンを設定することができます。

このプラグインは、テンプレート、A/Bテスト、ユーザーセグメンテーション、スマートオプトインリマインダー、カスタマトリガーキャンペーン、インタラクティブメッセージオプションなどの機能も提供しています。

これらの機能をすべて使って、お買い物カゴの通知、メッセージのスケジュール設定、値下がりアラートの送信などを行い、サイトトラフィックの増加につなげることができます。

Toggle auto push switch

詳しくは、WordPressでWebプッシュ通知を追加する方法の初心者ガイドをご覧ください。

WordPressでブラウザのタブ通知を追加する方法について、この記事がお役に立てれば幸いです。WordPress でアイコン付きの機能ボックスを追加する方法のチュートリアルや、サイトを成長させる最高の WordPress jQuery プラグインのトップピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2件のコメントLeave a Reply

  1. Carole

    Is it possible to make the alternate tabs have a longer time between changes? I think that constant flashing would get annoying and people might just close out the tab.

    • WPBeginner Support

      Yes, it would depend on the methods you were using, you would change the numbers that are in the thousands for the code snippets as those determine how many milliseconds to wait for the code.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.