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

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

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

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

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

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

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

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

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

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

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

• 方法1：WordPressプラグインで新しいWordPress投稿をハイライト表示する
• 方法2：カスタムコードを追加して新しい投稿をハイライト表示する
• WordPressブログを最適化するその他の方法を学ぶ
• よくある質問：再訪問者向けの新しい投稿のハイライト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方法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 時間を投稿の公開日と比較し、投稿が最後の訪問よりも新しい場合はタイトルに「新規」ラベルを追加します。

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

それ以外は、Location を「Frontend only」に選択するようにしてください。これは、コードが訪問者が操作する 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日後
• または、訪問者が投稿を表示するまで

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

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

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

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

効率を保つために：

• 必要なデータのみを保存します（例：単一のタイムスタンプ）。
• 軽量な 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でもフォローできます。