WordPressWebサイトに日付と時刻のウィジェットを追加する5つの方法

公開: 2017-07-15

日付と時刻のウィジェットの表示は、新聞のWebサイトから始まったものです。彼らの新聞から今日の日付を取得することは、常に人々の生活の一部であったものです。印刷ジャーナリズムがウェブに移行したとき、それは変わりませんでした。

ただし、現在の日付と時刻を表示するのはニュースWebサイトだけではありません。他のサイトが同じことを考えるべき理由はたくさんあります。

タイムゾーンに現在の時刻を表示して、カスタマーサポートにいつ連絡できるかを顧客に知らせることができます
コンテンツが少し古い場合でも、サイトが生き生きと関連しているように見えます。私たちのほとんどは最新の最新情報を探しているので、これは重要です。
ページに今後のイベントがある場合、現在の日時は、訪問者がそれらを待つ必要がある時間を理解するのに役立ちます（または、Diviテーマに含まれているようなカウントダウンタイマーモジュールを使用します）

つまり、日付と時刻のウィジェットを表示すると、視聴者を拘束し、サイトをより魅力的にし、最新のニュースや情報のプロバイダーとして位置付けることができます。 WordPressサイトに実装する方法を学ぶのに十分な理由。

次の記事では、Webサイトの日付と時刻のウィジェットを作成するいくつかの方法を紹介します。まず、手動で行う方法について説明し、次に、コーディングなしで同じことを実行できるプラグインソリューションについて説明します。

いいですね？それでは、愚かなことではなく、それを正しく理解しましょう。

WordPressで日付と時刻のウィジェットを手動で作成する方法

サイトに現在の日時を含める1つの方法は、ソリューションを自分でコーディングすることです。これが私たちが最初に行うことです。サイトのどこかに入力すると、訪問者に日時を表示する簡単なショートコードを作成します。

ショートコードを作成する

最初のステップは、実際のショートコードを設定することです。そのために、まず現在のテーマのfunctions.phpを開きます。親テーマが更新されたときに変更が失われないように、そのために子テーマを使用することを強くお勧めします。

ファイルを開いたら、次のコードをファイルの最後に貼り付けます。

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

それに関するいくつかの情報：上記のコードは、現在の日付と時刻を吐き出し、それを[time_date]と呼ばれるショートコードに割り当てる関数です。サイトでショートコードを入力すると、関数が呼び出されて動作します。

上記で使用した形式では、日時は次の形式で出力されます：2017年7月6日12:35:41。ただし、ここで学習できるさまざまな形式を使用できます。

ここで、コードをテストするには、サイトのどこかにショートコードをコピーするだけです。ただし、デフォルトでは、ショートコードはウィジェット内では機能しないことに注意してください。それらを使用するには、Shortcode Widgetプラグインをインストールするか、この行をfunctions.phpに追加する必要があります。

add_filter('widget_text','do_shortcode');

その後、結果は次のとおりです。

日付と時刻ウィジェットphp

JavaScriptに切り替えます

今のところ良さそうですね。ただし、上記の手順を実行すると、時計が自動的に更新されていないことがすぐにわかります。代わりに、ページが読み込まれたときに、現在の時刻を1回だけ吐き出します。その後は静止したままですが、どちらが目的をやや損なうのでしょうか。

これは、PHPがサーバー側の言語であるためです。つまり、情報を更新するには、サーバーに対して追加の呼び出しを行う必要があります。そのため、JavaScriptなどのクライアント側言語を使用することをお勧めします。

幸いなことに、ネット上で利用可能なロードJavaScriptクロックがあります。短いグーグル検索はたくさんの例を表示します。このサービスを使用して、目的の形式のJavaScriptコードを生成しました。その後、テーマフォルダにコピーしたclock.jsというファイルにコードを入力しました。

スクリプトは、 clockboxという名前のdivを呼び出します。そのため、以前の機能を次のように変更しました。

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

あとは、新しいJavaScriptファイルを呼び出すだけです。

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

そして出来上がり：

日付と時刻ウィジェットのJavaScript

スタイリングを追加

最後に、全体的なブランディングに合うように、時刻と日付のウィジェットのスタイルを設定できるようにする必要があります。幸い、使用した関数はCSS IDを作成したので、次のように日付と時刻ウィジェットに独自のスタイルを追加できます。

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

結果は次のとおりです。

スタイリング付きの日付と時刻ウィジェット

今はそんなに難しくありませんでしたね。簡単だと言った。ただし、これは独自の日付と時刻ウィジェットを作成する1つの方法にすぎません。追加のコーディングチョップを使用すると、さらに多くのことを実現できます。

ただし、手動ルートを使用していない場合は、WordPressプラグインを使用して同様の結果を得ることができます。

あなたのウェブサイトの時間と日付のウィジェットを作成するためのプラグイン

WordPressディレクトリで利用可能なプラグインの数は圧倒的ではありませんが、十分に機能するいくつかの標本があります。

ライブクロック日付

ライブクロック日付プラグイン

私たちの最初の候補はこのプラグインです。名前が示すように、それはあなたがあなたのワードプレスのウェブサイトに時計と日付を追加することを可能にします。

彼らの日時ウィジェットは多くのカスタマイズオプションを提供します。時計を1分または1秒ごとに更新するか、日付を表示または非表示にして順序を決定するか、12時間または24時間のサイクルから選択できます。ウィジェットにはカスタムCSSのセクションもあるので、Webサイトなどと同じフォントを使用できます。

ライブクロック日付ウィジェットオプション

残念ながら、フォーマットオプションはそれ以外の点では多少制限されています。たとえば、日付から平日を削除することはできません。ただし、それとは別に、プラグインは想定どおりの動作をします。

日付と時刻ウィジェット

まず、ちょっとした警告。このプラグインは少し古く、2年前に最後に更新されました。結果として、それがすべての最新のテーマと最新バージョンのWordPressで動作するという保証はありません。ただし、WordPress 4.8を使用したテストでは正常に機能し、優れたオプションセットが提供されているため、含める価値があると思いました。

インストール後、プラグインは新しい日付と時刻ウィジェットをウィジェットメニューに追加します。ウィジェット化された領域に追加すると、さまざまな方法でカスタマイズできます。

日付と時刻のウィジェットオプション

ご覧のとおり、時刻と日付の形式を構成（または完全に無効）したり、フォントファミリーとサイズ、テキストの色と背景色（16進コードを含む）を変更したりできます。そうすれば、ウィジェットをテーマに合わせるのは簡単です。それだけでは不十分な場合は、ウィジェットに十分なHTMLクラスがあるため、独自のカスタムCSSルールを簡単に実装できます。

現在の日時

現在の日付と時刻のプラグイン

このリストの最後のプラグインは十分に単純です。インストールしてアクティブ化すると、現在の日付と時刻という新しいウィジェットが表示され、任意のウィジェット領域にドラッグできます。終わり。

結果はまともなように見え、テーマのスタイルに自動的に調整されます。また、モバイル対応であり、最近ではなくてはならないものです。一方、それは何かを調整するためのオプションを提供していません。利用できる時間形式は1つだけです。それ以上の場合は、プロバージョンを購入する必要があります。

結論

WordPressサイトに日時ウィジェットを表示する理由はたくさんあります。これは、クライアントがいつあなたに連絡できるか、あなたのコンテンツがどれだけ最新であるかなどをクライアントに知らせる良い方法です。

上記から見てきたように、WordPressでこれを実装する方法はいくつかあります。 1つは、独自のショートコードを設定して、ウィジェットを任意の場所に実装することです。もちろん、あなたのために同じことをすることができるプラグインもあります。圧倒的ではありませんが、そこにはいくつかの確固たる競争相手がいます。

さあ、あなたに。 以前にサイトで日時ウィジェットを使用したことがありますか？ もしそうなら、あなたはそれを何のために必要とし、どのようにそれを実装しましたか？ 以下のコメントセクションでお知らせください。

Jane Kelly /shutterstock.comによる記事のサムネイル画像