WordPressで相対的な日付を表示する方法（3つの方法）

アマチュアWordPressサイトとプロフェッショナルサイトを分ける小さなディテールは、日付の表示方法です。

Twitter や Medium のような主要なプラットフォームは、コンテンツの鮮度を読者にすぐに伝えることができるため、相対日付（「5分前」や「2週間前」など）を使用しています。

これで、この同じ機能をWordPressサイトに追加できます。

多くのWordPressサイトに相対日付を追加した経験から、この簡単な変更は、訪問者が最新のコンテンツをすばやく特定できるため、エンゲージメントが向上することがよくあります。

良いニュースは、この機能を追加することは、ほとんどの人が考えるよりもはるかに簡単であるということです。

このガイドでは、WordPress で相対日付を実装するための 2 つの実証済みの方法を共有します。

💡クイックアンサー：WordPressで相対日付を表示する方法

お急ぎですか？WordPressで相対日付を表示する最も簡単な方法をいくつかご紹介します。

方法1：WordPress日付ブロック – セットアップが最小限で済む、無料ですぐに使えるソリューションが必要で、キャッシュの問題を気にしない場合に最適です。
方法2：Meks Time Ago プラグイン – キャッシュされたサイトでも正確な相対日付を表示したい場合、簡単なカスタマイズと最小限の技術セットアップで済みます。
方法3：カスタムコード – テーマファイルを編集することに慣れており、日付の表示方法を完全に制御したい場合に最適です。

WordPressで相対日付を使用する理由

相対日付を使用すると、読者はコンテンツの鮮度を一目で把握でき、正確な日付を使用するよりもサイトが魅力的でナビゲートしやすくなります。

相対日付が役立つ方法は次のとおりです。

鮮度を即座に表示：「2025年11月25日」の代わりに、「2日前」と表示することで、訪問者はコンテンツが最近のものであることをすぐに知ることができます。
ユーザーエクスペリエンスを向上：読者は、日付を自分で計算する必要なく、新しい投稿をすばやく見つけることができます。
使い慣れた形式：FacebookやTwitterなどのソーシャルメディアプラットフォームはすでに相対日付を使用しているため、視聴者はこのスタイルに慣れています。

ただし、相対日付があらゆる種類のウェブサイトに適しているわけではないことに注意する価値があります。

たとえば、歴史的なブログや正確な日付が重要なサイトを実行している場合は、絶対日付に固執する方が良いかもしれません。重要なのは、相対日付をWordPressサイトに追加するかどうかを決定する際に、コンテンツの種類と読者の好みを考慮することです。

それでは、WordPressに相対日付を追加する3つの方法を見てみましょう。

方法1：WordPress日付ブロックを使用する（簡単で無料）
方法 2: Meks Time Ago プラグインの使用（無料かつカスタマイズ可能）
Method 3: Using Custom Code (Advanced but More Customizable)
- ブロックテーマに相対日付フォーマットを追加する方法
- クラシックテーマに相対日付フォーマットを追加する方法
WordPressブログをカスタマイズするためのボーナスのヒント

💡注意: サイトでキャッシュプラグインやホストレベルのキャッシュを使用している場合、サーバーレンダリングされた相対日付（方法1および3）は、訪問者ごとに正しく更新されない可能性があることに注意してください。

「1分前」と表示されている日付が、実際には数時間前のものになっている可能性があります。この制限が気にならない場合は、方法1または方法3を使用できます。

それ以外の場合、方法2（Meks Time Agoプラグイン）は、クライアント側で日付を更新し、キャッシュされたページとうまく連携するため、通常はこの問題を回避できます。

方法1：WordPress日付ブロックを使用する（簡単で無料）

WordPressの日付ブロックを相対日付を使用するように設定できることを知っていましたか？これは、プラグインをインストールしたり、WordPressサイトにカスタムコードを追加したりせずに、相対日付を表示する最も簡単な方法です。

しかし、この方法には2つの欠点が見つかりました。まず、カスタマイズ性がそれほど高くありません。たとえば、日付を「X分前」や「X時間前」の代わりに「今日」や「昨日」として表示することはできません。

第二に、WordPress の日付ブロックは、ブロックテーマのテンプレートで使用できますが、クラシックテーマのテンプレートでは使用できません。クラシックテーマを使用している場合は、方法 2 または方法 3 に従うことをお勧めします。

このチュートリアルでは、ブロックテーマの「投稿メタ」テンプレートパーツでWordPressの日付ブロックをカスタマイズして相対日付を表示する方法を説明します。フルサイトエディターを使用します。

このテンプレートパーツは、著者、カテゴリ、公開日などのブログ投稿に関する情報を表示する役割を担っています。

とはいえ、日付ブロックは、ブロックエディターの任意の投稿またはページに追加した場合でも機能します。

プロのヒント：WordPress管理画面にテーマカスタマイザーメニューが表示されない場合、ブロックテーマを使用している可能性があります。

まず、外観 » エディターに移動して、サイトエディター全体を開きます。

これで、WordPressテーマをカスタマイズするためのいくつかのオプションが表示されます。

ここで、「パターン」をクリックします。

次のページでは、テーマに含まれるすべてのパターンとテンプレートパーツが表示されます。

「投稿メタ」オプションを選択するだけです。

これで、投稿メタテンプレートパーツが表示されるはずです。

ここで、「投稿日」というブロック、つまりWordPressの日付ブロックをクリックします。これをクリックすると、右側にブロック設定サイドバーが開きます。

「デフォルトフォーマット」設定を無効にし、「3ヶ月前」フォーマットを選択します。

「投稿へのリンク」設定を有効にして、日付ブロックが掲載されているブログ投稿にリンクさせることも、無効にすることもできます。また、最初に公開された日時ではなく、投稿が最後に更新された日時を表示したい場合は、「最終更新日を表示」を有効にすることもできます。

完了したら、「保存」をクリックするだけです。

これで、ウェブサイト全体で「投稿メタ」テンプレートのすべてのインスタンスが相対日付を使用していることがわかります。

方法 2: Meks Time Ago プラグインの使用（無料かつカスタマイズ可能）

WordPressで相対的な時間と日付を表示するための簡単なプラグインを探しているなら、素晴らしい選択肢があります。

私たちが試した相対日付プラグインの中で、Meks Time Ago は初心者にとって最も簡単なものの1つです。さらに、無料であり、クラシックテーマとブロックテーマの両方で動作します。

とはいえ、この方法では、「〇秒前」や「〇日前」ではなく、「今日」や「昨日」のように日付を表示したい場合にも機能しません。ただし、相対日付を追加する投稿の選択や、「前」という単語の置き換えなど、カスタマイズは可能です。

Meks Time Agoを使用するには、管理エリアでWordPressプラグインをインストールして有効化できます。

その後、ダッシュボードで設定 » 一般に移動します。下にスクロールすると、Meks Time Agoのプラグイン設定が見つかります。

まず有効にする必要がある設定は、「〇〇前」フォーマットを適用する場所です。ここでは、「日付」と「時刻」を選択して、投稿が最初に公開された相対的な日付を表示します。

または、投稿が最初に公開された日時ではなく、最後に更新された日時を表示したい場合は、「更新日」または「更新時刻」を選択することもできます。

また、この日付フォーマットを、特定の分数、時間、日数、月数よりも新しくない投稿に適用するかどうかを選択することもできます。

12ヶ月を選択しました。

次に、日付フォーマットで「前」という単語を配置する場所を変更できます。

相対日付の後ろにこれを含めることにしたのは、ほとんどの人がこの表現に慣れているからです。

Meks Time Agoプラグインページで「ago」という単語をどこに配置するかを選択する

最後に、「前」という単語を必要に応じて別の用語に置き換えることができます。空白のままにすることもできます。

それが完了したら、「変更を保存」をクリックするだけです。

これで完了です！これで、すべての投稿日付が相対日付になります。変更が正しく表示されているか、モバイル、デスクトップ、タブレットで変更を確認できます。

例を挙げます。

方法3：カスタムコードを使用する（高度ですが、よりカスタマイズ可能）

この方法にはカスタムコードが含まれており、以前に説明したように、「X分前」や「X時間前」ではなく、「今日」または「昨日」として日付を表示したい場合は、こちらの方が良い選択肢となります。

しかし、怖がる必要はありません！手順を追ってご説明します。さらに、WPCodeというコードスニペットプラグインを使用します。これにより、ウェブサイトを壊すことなくカスタムコードを安全かつ簡単に追加できます。

プラグインを徹底的にテストした結果、非常に信頼性が高いことがわかりました。プラグインの詳細については、WPCode レビューをご覧ください。

まず、管理画面でWordPressプラグインをインストールして有効化してください。

注意: WPCode には無料プランもありますが、プロバージョンにアップグレードすると、コードスニペットのクラウドライブラリ、スマート条件付きロジックなどの機能にアクセスできるようになります。

その後、コードスニペット » + スニペットを追加 に移動する必要があります。次に、「カスタムコードを追加（新規スニペット）」を選択し、「+ カスタムスニペットを追加」ボタンをクリックします。

次に、新しいカスタムコードに名前を付けます。たとえば、「相対日付（時間付きフォーマット）」のような簡単な名前でも構いません。

また、「コードタイプ」を「PHPスニペット」に変更します。

WPCodeカスタムコードを使用して相対日付を表示するためのカスタムコードを作成する

それが完了したら、以下のコードスニペットをコードプレビューボックスにコピー＆ペーストするだけです。

/**
 * Converts a timestamp into a human-readable relative date string.
 *
 * @param int $timestamp The timestamp to convert
 * @return string The human-readable relative date string
 */
function human_readable_relative_date( $timestamp ) {
    $time_difference = time() - $timest  // Calculate the time difference between now and the timestamp
    $seconds_in_a_day = 86400;  // Number of seconds in a day


    if ( $time_difference < 0 ) {
        return 'Date is in the future';  // Handle future dates
    } elseif ( $time_difference < $seconds_in_a_day ) {
        return 'Today at ' . date( 'H:i', $timestamp );  // Handle same-day dates
    } elseif ( $time_difference < 2 * $seconds_in_a_day ) {
        return 'Yesterday at ' . date( 'H:i', $timestamp );  // Handle one-day-old dates
    } elseif ( $time_difference < 7 * $seconds_in_a_day ) {
        $days = floor( $time_difference / $seconds_in_a_day );  // Calculate full days ago
        return $days . ($days == 1 ? ' day' : ' days') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last week
    } elseif ( $time_difference < 30 * $seconds_in_a_day ) {
        $weeks = floor( $time_difference / ( 7 * $seconds_in_a_day ) );  // Calculate full weeks ago
        return $weeks . ($weeks == 1 ? ' week' : ' weeks') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last month
    } elseif ( $time_difference < 365 * $seconds_in_a_day ) {
        $months = floor( $time_difference / ( 30 * $seconds_in_a_day ) );  // Calculate full months ago
        return $months . ($months == 1 ? ' month' : ' months') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last year
    } else {
        $years = floor( $time_difference / ( 365 * $seconds_in_a_day ) );  // Calculate full years ago
        return $years . ($years == 1 ? ' year' : ' years') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates older than a year
    }
}


/**
 * Shortcode function to convert a given timestamp or date to a human-readable relative date string.
 *
 * @param array $atts Shortcode attributes
 * @return string The human-readable relative date string
 */
function relative_date_shortcode( $atts ) {
    $attributes = shortcode_atts(
        array(
            'timestamp' => '',  // Default value for 'timestamp' attribute
            'date' => '',       // Default value for 'date' attribute
        ),
        $atts
    );


    // If no timestamp or date attribute provided, use the post's published date
    if ( empty($attributes['timestamp']) && empty($attributes['date']) ) {
        global $post;
        if ( !is_null($post) ) {
            $attributes['timestamp'] = get_the_time('U', $post->ID);  // Get the post's timestamp
        }
    } elseif ( !empty($attributes['date']) ) {
        $attributes['timestamp'] = strtotime($attributes['date']);  // Convert 'date' attribute to timestamp
    }
    
    // Validate the timestamp
    if ( !empty($attributes['timestamp']) && is_numeric($attributes['timestamp']) ) {
        return human_readable_relative_date( $attributes['timestamp'] );  // Return the human-readable relative date
    } else {
        return 'Invalid timestamp or date';  // Return an error message if the timestamp is invalid
    }
}
add_shortcode( 'relative_date', 'relative_date_shortcode' );  // Register the shortcode

最初の関数 human_readable_relative_date は、日付を受け取り、ユーザーフレンドリーな形式に変更します。

たとえば、「今日 2:30 PM」や「3日前 10:15 AM」のように表示できます。これにより、読者は投稿の古さを理解しやすくなります。

2 番目の関数 relative_date_shortcode は、WordPress で使用できるショートコードを作成します。このショートコードを使用すると、テーマファイルを変更せずに、コンテンツに相対日付を簡単に追加できます。

このコードを使用すると、投稿の日付をよりユーザーフレンドリーにすることができます。読者はコンテンツの新規性をすばやく確認できるため、サイトがより最新で魅力的に感じられます。

次に、「挿入」セクションまでスクロールします。「挿入方法」で「自動挿入」、「場所」で「フロントエンドのみ」を選択します。

右上の「非アクティブ」トグルを「アクティブ」に変更し、「スニペットを保存」ボタンをクリックします。

コードが有効になったら、WordPressブログで相対日付を有効にする方法を見てみましょう。プロセスは、使用しているテーマの種類によって異なります。

ブロックテーマに相対日付フォーマットを追加する方法

ブロックテーマを使用している場合は、作成したショートコードを投稿メタテンプレートパーツのWordPress日付ブロックと単純に置き換えることができます。

まず、外観 » エディターに移動します。

これで、フルサイトエディターのメインメニューが表示されます。

「パターン」をクリックしてください。

これで、ブロックテーマが提供するすべてのパターンとテンプレートパーツが表示されるはずです。

ここで、「投稿メタ」オプションを選択します。

まず、既存の日付ブロックを削除する必要があります。これにより、ショートコードに置き換えることができます。

これを行うには、日付ブロックをクリックします。

クリックするのが難しい場合は、「リスト表示」ボタンをトップでクリックして「日付」ブロックを選択するだけです。次に、3つのドットのメニューをクリックして「削除」を選択します。

日付ブロックを削除したら、投稿メタに「ショートコード」ブロックを追加してください。

これを行うには、ページ上の「+」ボタンをクリックし、ショートコードブロックをそこにドラッグアンドドロップします。

その後、ブロックに次のショートコードを入力します。

[relative_date]

それが完了したら、「保存」をクリックするだけです。

これで、投稿テンプレートは相対日付を使用するようになります。

デモサイトではこのようになります：

クラシックテーマに相対日付フォーマットを追加する方法

WordPressのクラシックテーマに相対日付を追加するプロセスは、少し異なり、より技術的です。これは、すべてのクラシックテーマが異なる構成を持っているためです。

しかし、もう少しお付き合いください。例を挙げますので、無料または有料のWordPressテーマのいずれを使用していても、ご自身で簡単に実装する方法を理解できます。

クラシックテーマファイルをカスタマイズするのが初めての場合は、ステージングサイトまたはWordPressサイトのローカル版で行うことをお勧めします。これにより、コードの編集によって発生する予期しないエラーがライブウェブサイトに影響を与えることはありません。

投稿メタデータを表示するテーマファイルを特定することが最初のステップです。それは以下のいずれかになります：

通常 single.php という名前の単一投稿ファイル
投稿コンテンツを表示するテンプレートパーツ（content.phpのようなもの）
投稿情報を表示するための関数が含まれているテンプレートタグファイル（一般的にtemplate-tags.phpという名前）

一般的なルールとして、投稿日付を表示するコード行を探してください。これらの行は通常、the_date()、the_time()、get_the_date()、get_the_time()、get_the_modified_date()、またはget_the_modified_time()のようなWordPress関数を呼び出しています。

ヘルプが必要な場合は、簡単なプラグインを使用してWordPressテーマの編集対象ファイルを見つける方法に関するステップバイステップガイドがあります。または、WordPressテーマの開発者に連絡するか、ドキュメントを確認してさらにサポートを受けてください。

私たちの場合は、投稿日付を表示する責任のあるファイルはtemplate-tags.phpです。テーマが正確な公開日を表示するために使用していた元のコード全体は次のとおりです。

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}

		$time_string = sprintf(
			$time_string,
			esc_attr( get_the_date( 'c' ) ),
			get_the_date(),
			esc_attr( get_the_modified_date( 'c' ) ),
			get_the_modified_date()
		);

		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$time_string
		);
	}
endif;

ファイル自体を編集するには、FTP経由でファイルを開くか、WordPressホスティングプロバイダーのファイルマネージャーを使用できます。

Bluehost ユーザーの場合、ウェブホスティングアカウントにログインすることでファイルマネージャーを使用できます。次に、ダッシュボードで「Webサイト」タブをクリックし、カスタマイズしようとしているサイトの「設定」を選択します。

これで、サイトの設定ページが開きます。

「詳細」タブに切り替え、「ファイルマネージャー」セクションの「管理」ボタンをクリックします。

これで、Bluehostのファイルマネージャーにいるはずです。

ファイル名は template-tags.php なので、public_html » wp-content » theme-name » inc に移動する必要がありました。

ここで、いくつかのファイルを選択できます。

ここで、template-tags.php を選択します。ファイルを右クリックして「編集」を選択してください。

ファイルマネージャーを使用してテンプレートタグのクラシックテーマファイルを編集する

次に、公開日を表示する責任のあるコードを見つけます。

これを行うには、CTRL / CommandキーとFキーを使用できます。

ファイルマネージャーを使用して WordPress テーマファイルに投稿日付を表示するコードを見つける

さて、先ほどWPCodeを使用して追加したhuman_readable_relative_date関数を呼び出すように、この特定のコードを編集する必要があります。

ここでは、元のコードをif ( ! function_exists( 'twentysixteen_entry_date' ) ) :からendif;に置き換える方法を示します。

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		// Get the post's published timestamp
		$published_timestamp = get_the_time('U');


		// Generate the human-readable relative date
		$relative_date = human_readable_relative_date( $published_timestamp );


		// Output the relative date
		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$relative_date
		);
	}
endif;

コードを変更したら、「変更を保存」ボタンをクリックします。

コードが機能せず、この分野の完全な初心者である場合は、OpenAIのChatGPTのようなAIツールを使用して、コードのどこが間違っているのかを特定することをお勧めします。

「こんにちは、以下のコード[ここにコードを貼り付け]を使ってXをしようとしていますが、うまくいきません。何が間違っているか教えてもらえませんか？」のような簡単な質問をすることができます。

それでも、コードが機能する場合、シングル投稿テンプレートで表示されるのは次のようになります。

WordPressブログをカスタマイズするためのボーナスのヒント

WordPress の投稿に相対日付を追加する以外にも、ブログをカスタマイズする方法はたくさんあります。いくつかアイデアをご紹介します。

この記事がWordPressで相対日付を表示する方法を学ぶのに役立ったことを願っています。また、WordPressのベストドラッグアンドドロップページビルダーの専門家のおすすめや、WordPressウェブサイトの編集方法に関する究極のガイドも確認したいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

4 CommentsLeave a Reply

デニス・ムトミ

2024年8月29日 13:04

WordPressサイトのニュース（エンターテイメント分野）で、同様のカスタムコードアプローチで相対日付を使用しており、ユーザーエンゲージメントを高めるのに非常に効果的です。
追加したい小さなヒントが1つあります。特定のしきい値（例：1年）よりも古い投稿には絶対日付を表示するために条件付きロジックの使用を検討してください。
これにより、最新の投稿には相対日付を使用しながら、エバーグリーンコンテンツにコンテキストが与えられます。
ぜひ共有したかったことです！

Ziaul Hai

2019年6月8日午前3時50分

相対日付を削除する方法を知りたいです。私のWordPressテーマはデフォルトで相対日付を表示しますが、それを変更できません。

- WPBeginnerサポート
  
  2019年6月10日午前11時57分
  
  この記事のPHPを relative_post_the_date に置き換えることができます。表示方法によりますが、テーマのサポートに問い合わせれば、このスタイルの日付を無効にする組み込みの方法があるかもしれません。
  
  
  管理者
Sreeharsh

2016年12月20日午前9時28分

こんにちは、ホーム画面でMeks Time Agoプラグインを使用すると、間違ったタイムスタンプが表示されます。9時間前の投稿が、2週間前と表示されています。解決のお手伝いをしてください。
ありがとうございます。

WordPressで相対的な日付を表示する方法（3つの方法）

💡クイックアンサー：WordPressで相対日付を表示する方法

WordPressで相対日付を使用する理由

方法1：WordPress日付ブロックを使用する（簡単で無料）

方法 2: Meks Time Ago プラグインの使用（無料かつカスタマイズ可能）

方法3：カスタムコードを使用する（高度ですが、よりカスタマイズ可能）

ブロックテーマに相対日付フォーマットを追加する方法

クラシックテーマに相対日付フォーマットを追加する方法

WordPressブログをカスタマイズするためのボーナスのヒント

編集スタッフについて

4 CommentsLeave a Reply

返信する返信をキャンセル

WPBeginner®について

💡クイックアンサー：WordPressで相対日付を表示する方法

WordPressで相対日付を使用する理由

方法1：WordPress日付ブロックを使用する（簡単で無料）

方法 2: Meks Time Ago プラグインの使用（無料かつカスタマイズ可能）

方法3：カスタムコードを使用する（高度ですが、よりカスタマイズ可能）

ブロックテーマに相対日付フォーマットを追加する方法

クラシックテーマに相対日付フォーマットを追加する方法

WordPressブログをカスタマイズするためのボーナスのヒント

編集スタッフについて

読者とのインタラクション

4 CommentsLeave a Reply

返信する 返信をキャンセル

返信する返信をキャンセル