WordPressで再訪問者向けに新しい投稿を強調表示する方法

リピーターは最も価値のあるオーディエンスです。彼らはすでにあなたのコンテンツに興味を示しており、さらに多くのものを求めて戻ってきています。

しかし、重要なのは、訪問者がホームページにアクセスしたとき、彼らは特定のものを探しているということです。それは、前回訪問してから何が新しくなったか、ということです。

良いニュースは、復帰した訪問者のために新しい投稿をハイライト表示することは、あなたが思うよりも簡単であり、大きな違いを生むということです。

私たちは、数十のWordPressサイトでさまざまな方法をテストし、見事に機能する2つのアプローチを見つけました。このガイドでは、リピーターのために新しい投稿を強調する最も効果的な方法を順を追って説明します。

WordPressサイトで新しい投稿をハイライトする理由

WordPressサイトで新しい投稿をハイライトすると、リピーターが新しいコンテンツを簡単に見つけられるようになります。これにより、ブログに追加した最新の情報や更新を見逃すことがなくなります。

新しい投稿にラベルを付けることで、WordPressウェブサイトでのユーザーエクスペリエンスが向上します。再訪問者があなたのウェブサイトにアクセスしたとき、まだ読んでいない投稿を簡単に見つけることができ、多くの時間を節約し、ページビューを増やすことができます。

サイトでの優れたユーザーエクスペリエンスは、再訪問者を引き付けるだけでなく、WordPress SEOにも役立ちます。サイトが使いやすいと、検索エンジンのランキングが向上し、訪問者がコンテンツを見つけやすくなります。

それを踏まえて、WordPressでリピーター向けに新しい投稿をハイライト表示する方法を見ていきましょう。

WordPressプラグインを使用する方法とコードを使用する方法の2つの方法を紹介します。以下のクイックリンクを使用して特定のメソッドにジャンプできます。

方法1：WordPressプラグインで新しいWordPress投稿をハイライト表示する

この最初の方法は、Mark New Postsプラグインを使用します。非常にシンプルなので、初心者ブロガーにおすすめです。このプラグインは、サイト訪問者がまだ見ていないWordPressの投稿を示すラベルを追加します。

まず、Mark New Postsプラグインをインストールして有効化する必要があります。ガイダンスが必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

その後、WordPress管理画面から設定 » Mark New Postsに移動します。これでプラグインの設定ページが表示されます。

次に、「新着」ラベルを表示する場所を選択します。「投稿タイトルの後」、「投稿タイトルの前」、または「投稿タイトルの前と後」を選択できます。

ラベルを投稿タイトルの後に付けると、通知のように見え、ユーザーの注意を最も引くことがわかったため、それを選択しました。

次に、マーカータイプの設定で、マーカーがどのように表示されるかを選択する必要があります。オプションには、「新規」テキスト、「新規」テキストレガシー、オレンジ色の円、フラグ、画像、またはなしが含まれます。

各オプションを調べて、ウェブサイトのデザインに最も合うものを見つけてください。

設定できるもう1つの設定は、新しい投稿タイトルの背景色です。これを有効にすると、読者が新しい投稿にアクセスしたときに、投稿タイトルのセクションに背景色が表示されます。この設定は必要ないと感じたため、無効にしました。

「投稿を既読とみなす」設定では、新しい投稿ラベルをいつオフにするかを選択できます。開封後、リストに表示された後、またはブログのいずれかのウェブページが開かれた後です。

「開かれた後」を選択することをお勧めします。これは、訪問者がいくつかの投稿を読んでいない状態で1つの投稿を開いた場合でも、他の記事の新しい投稿ラベルが消えないことを意味します。

次に、投稿が新しいものとして強調表示される日数を選択したり、新しい訪問者にすべての既存の投稿を新しいものとして表示したり、カスタム投稿タイプの新しいラベルを無効にしたりできます。

最後の2つの設定はかなり高度です。

1つは「投稿リストの外側を許可する」で、これはウィジェット対応のサイドバーエリアのような、ループの外側の投稿を強調表示できることを意味します。この設定を有効にすると、望ましくないWordPressエラーが発生する可能性があるため、注意してください。

もう1つは「マーカー表示にJavaScriptを使用する」ですが、これはプラグインがブログで使用されているテーマや他のプラグインと互換性がない場合にのみ推奨されます。ほとんどの場合、この設定は無効にしておくことをお勧めします。

プラグインの設定が完了したら、「保存」をクリックするだけです。

これで完了です！インコグニートモードでウェブサイトにアクセスして、最近の投稿の新しいラベルがライブになっているか確認してください。

デモウェブサイトでの表示は次のとおりです。

方法2：カスタムコードを追加して新しい投稿をハイライト表示する

前のプラグインで提供される新しい投稿ラベルのオプションに満足していませんか？その場合は、代わりにカスタムコードを使用して新しい投稿を強調表示できます。

初心者にとって、この方法は intimidating に見えるかもしれません。しかし、心配しないでください。なぜなら、私たちはWPCodeプラグインを使用して、ウェブサイトを壊すことなくWordPressにコードスニペットを安全に挿入するからです。

WPCode は、複数のカスタムコードスニペットを簡単に管理できるため、今回は複数のコードを使用するため便利です。

このツールはデモ環境で徹底的にテストされており、カスタムコードを追加する最も信頼性の高い方法であることがわかりました。

私たちの経験に関する詳細については、WPCodeレビューをご覧ください。

まず、WordPressにWPCodeをインストールする必要があります。セットアップ手順については、WordPressプラグインのインストール方法に関する記事をご覧ください。

プラグインを有効化したら、WordPressダッシュボードから Code Snippets » + Add Snippet に移動します。

そこから、「カスタムコードを追加（新規スニペット）」を見つけ、その下にある「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストからコードの種類として「PHPスニペット」を選択します。

さて、後で見つけやすいように、コードスニペットにタイトルを追加しましょう。

このために、「WordPress Last Visit Title Modifier」のような名前を付けることができます。

その後、以下のコードスニペットをコピーして貼り付けることができます。

// Define a function to modify post titles based on the last visit
function wpb_lastvisit_the_title($title, $id) {

    // Check if not in the loop, a singular page, or a page post type; if true, return the original title
    if (!in_the_loop() || is_singular() || get_post_type($id) == 'page') return $title;

    // Check if no 'lastvisit' cookie is set or if it is empty; if true, set the cookie with the current timestamp
    if (!isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '') {
        $current = current_time('timestamp', 1);
        setcookie('lastvisit', $current, time() + 60 * 60 * 24 * 7, COOKIEPATH, COOKIE_DOMAIN);
    }

    // Retrieve the 'lastvisit' cookie value
    $lastvisit = $_COOKIE['lastvisit'];

    // Get the publish date of the post (in Unix timestamp format)
    $publish_date = get_post_time('U', true, $id);

    // If the post was published after the last visit, append a new span to the title
    if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>';

    // Return the modified or original title
    return $title;
}

// Add a filter to apply the 'wpb_lastvisit_the_title' function to 'the_title' hook with priority 10 and 2 parameters
add_filter('the_title', 'wpb_lastvisit_the_title', 10, 2);

このスニペットは、ユーザーの最後の訪問に基づいてWordPressの投稿タイトルを変更します。

これはページがブログ投稿であるかどうかをチェックし、そうでない場合は元のタイトルをそのまま表示します。しかし、ブログ投稿の場合はタイトルが変更されます。

次に、スニペットは lastvisit クッキーが存在することを確認します。存在しない場合は、コードがそれを生成し、現在の時間に設定します。その後、関数はこの lastvisit 時間を投稿の公開日と比較し、投稿が最後の訪問よりも新しい場合はタイトルに「新規」ラベルを追加します。

コードスニペットを挿入したら、下にスクロールして挿入方法として「自動挿入」を選択するだけです。

それ以外は、場所で「フロントエンドのみ」を選択するようにしてください。これは、コードが訪問者が操作するWordPressブログの部分でのみ実行され、管理パネルやその他の場所では実行されないことを意味します。

これが完了したら、コードを「アクティブ」にして「スニペットを保存」をクリックできます。

次に、新しいカスタムコードスニペットを追加する手順を繰り返します。今回は、ユーザーの最後の訪問に基づいて、最近の投稿タイトルの横に追加される「New」ラベルをスタイル設定するコードになります。

そのため、「投稿タイトル新規ラベルのスタイル」のような名前を付け、コードの種類は「CSSスニペット」にすることができます。

次に、以下のコード行をコードプレビューボックスにコピー＆ペーストできます。

/* CSS to style the "New" label in blog post titles */
.new-article {
    background-color: #4CAF50; /* Green background color */
    color: #ffffff; /* White text color */
    padding: 2px 5px; /* Padding around the label */
    margin-left: 5px; /* Adjust the margin to your preference */
    border-radius: 3px; /* Rounded corners for the label */
    font-size: 12px; /* Adjust the font size to your preference */
}

このコードスニペットは、カスタムの背景色、文字色、パディング、マージン、境界線の半径、フォントサイズを使用して、「新規」投稿ラベルを実質的にカスタマイズします。

これらの要素は、必要に応じて自由に調整してください。背景色と文字色には、16進数のカラーコードまたはRGB値を使用してください。

「挿入」セクションで、「場所」として「サイト全体ヘッダー」を選択します。その後、コードを「アクティブ」にして、「スニペットを保存」をクリックします。

これで完了です！コードが機能するかどうかを確認するには、新しいブログ投稿を公開し、シークレットモードでモバイルまたはデスクトップで投稿を表示できます。

コードが成功すると、最近の投稿タイトルの横に「新規」というラベルが表示されるはずです。

WordPressブログを最適化するその他の方法を学ぶ

リピーター向けに注目の投稿をハイライト表示する以外にも、ブログを改善してサイトに長く滞在してもらう方法は他にもあります。

たとえば、訪問者が現在読んでいる投稿に関連する投稿を表示できます。このようにして、興味に合ったコンテンツを提示することで、エンゲージメントを維持できます。

または、メールアドレスをキャプチャしたり、特別オファーを宣伝したりするために、粘着性のあるフローティングフッターバーを作成することもできます。このバーは、訪問者がページをスクロールしても表示されたままになります。購読を常にリマインドしたり、オファーを活用したりするために使用でき、コンバージョン率を高めることができます。

アクセシビリティのためにフォントリサイザーを追加することも検討してください。これにより、訪問者はウェブサイトのフォントサイズを好みに合わせて調整でき、コンテンツを読みやすくなります。

ブログコンテンツが多い場合は、特定のカスタムフィールドを持つ投稿を表示するカスタムページを作成することを検討してください。

例えば、「レシピの難易度」というカスタムフィールドがあるとします。「レシピ」というタグが付いていて、かつカスタムフィールドの値が「簡単」であるすべてのブログ投稿を表示するページを作成できます。

このようにすれば、簡単なレシピを探している訪問者はすべてを1か所で見つけることができます。

WordPressブログをさらに最適化するためにチェックできるその他のヒントを以下に示します。

• WordPressで相対日付を表示する方法
• WordPressでカスタムスクロールバーを構築する方法
• WordPressテーマで投稿抜粋を表示する方法
• モバイルフレンドリーなWordPressサイトを作成する方法（専門家のアドバイス）
• WordPressでテキストをハイライトする方法（初心者向けガイド）
• WordPress投稿に読了進捗バーを追加する方法

よくある質問：再訪問者向けの新しい投稿のハイライト

WordPressで、再訪問者向けに新しい投稿をハイライトする方法について、読者からよく寄せられる質問を以下に示します。

復帰した訪問者にとって、投稿はどれくらいの期間「新規」としてマークされるべきですか？

コンテンツの公開頻度と、ユーザーがサイトに戻ってくる頻度によって異なります。目安として、「新規」として投稿をハイライトする期間は次のとおりです。

• 公開から7日後
• または、訪問者が投稿を表示するまで

コードまたはプラグイン設定を使用して期間をカスタマイズできます。「新規」ラベルを永遠に表示しないようにしてください。それは目的を損ない、訪問者を混乱させる可能性があります。

ユーザーフレンドリーに保つために、控えめなバッジやアニメーションの表示を検討してください。

クッキーを使用して新着投稿をハイライトすることは、サイトのパフォーマンスに影響しますか？

いいえ、再訪問者向けに新しい投稿を強調表示するためにCookieを使用しても、パフォーマンスへの影響は通常最小限です。Cookieはユーザーのブラウザに保存され、リクエストとともに送信されるため、サーバーに追加の負荷はかかりません。

効率を保つために：

• 必要なデータのみを保存します（例：単一のタイムスタンプ）。
• 軽量な JavaScript と最小限の CSS を使用してください。
• ブログまたはアーカイブページでのみ必要なロジックをすべてのページに適用することは避けてください。

最適化について懸念がある場合は、WP Rocketのような動的コンテンツをサポートするキャッシュプラグインと組み合わせてください。

ログインユーザーのみに新しい投稿をハイライト表示できますか？

はい、サイトでユーザーのログインが必要な場合（メンバーシップやコミュニティサイトなど）、最後のログイン時間に基づいて新しい投稿を強調表示できます。

WordPressは各ユーザーの最後のログインをメタデータとして保存します。これは、次を使用して取得できます。

$last_login = get_user_meta(get_current_user_id(), 'last_login', true);

次に、この値を投稿の公開日と比較できます。

この方法は、ユーザーのブラウザに依存しないため、Cookie よりも信頼性が高くなります。特に、コンテンツが定期的に更新されるメンバーダッシュボードや学習ポータルに役立ちます。

この記事が、WordPressで再訪問者向けに新しい投稿を強調表示する方法を学ぶのに役立ったことを願っています。また、最高のWordPressドラッグアンドドロップページビルダープラグインの専門家による厳選リストや、最も効果的なWordPressウェブサイトデザイン要素の完全ガイドもチェックすることをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。