add %post_date% and %modified_date%

Author: pitolick

README.md

@@ -46,6 +46,11 @@ HTMLを使用した場合、そのまま出力されるように構築されて
 | `%year%` | 基準日と現在の年差 |
 | `%monthnum%` | 基準日と現在の月差（1ヶ月あたり30日で計算のため多少ブレあり） |
 | `%day%` | 基準日と現在の日差 |
+| `%post_date%` | 記事の投稿日 |
+| `%modified_date%` | 記事の最終更新日 |
+
+「`%post_date%` `%modified_date%` で使用する日付フォーマットをカスタマイズする」にチェックを入れると、その隣にあるテキストボックスに入力された日付フォーマットに沿って `%post_date%` `%modified_date%` が表示されます。  
+チェックが入っていないときは `設定 > 一般設定 > 日付のフォーマット` 項目で設定された日付フォーマットで表示されます。
 
 ## CSS設定
 表示されるメッセージに適用するCSSを設定します。  

dist/js/jcm.js

@@ -3,10 +3,14 @@ var jcm_content = document.getElementById('jcm_content_message');
 var jcm_post_time = document.getElementById('jcm_content_time');
 var jcm_reference_date = document.getElementById('jcm_reference_date');
 var jcm_reference_type = document.getElementById('jcm_reference_type');
-if (jcm_post_time !== null && jcm_reference_date !== null && jcm_reference_type !== null) {
+var jcm_modified_date = document.getElementById('jcm_modified_date');
+var jcm_post_date = document.getElementById('jcm_post_date');
+if (jcm_post_time !== null && jcm_reference_date !== null && jcm_reference_type !== null && jcm_modified_date !== null && jcm_post_date !== null) {
     var jcm_post_time_text = jcm_post_time.value;
     var jcm_reference_date_text = Number(jcm_reference_date.value);
     var jcm_reference_type_text = jcm_reference_type.value;
+    var jcm_modified_date_text = jcm_modified_date.value;
+    var jcm_post_date_text = jcm_post_date.value;
     if (jcm_post_time_text !== null) {
         // 記事の日付
         var post_date = new Date(jcm_post_time_text.toString());
@@ -28,6 +32,8 @@ if (jcm_post_time !== null && jcm_reference_date !== null && jcm_reference_type
                     jcm_text = jcm_text.replace(/%year%/, diff_year.toString());
                     jcm_text = jcm_text.replace(/%monthnum%/, diff_month.toString());
                     jcm_text = jcm_text.replace(/%day%/, diff_day.toString());
+                    jcm_text = jcm_text.replace(/%post_date%/, jcm_modified_date_text.toString());
+                    jcm_text = jcm_text.replace(/%modified_date%/, jcm_post_date_text.toString());
                     // DOM書き換え
                     jcm_content.innerText = '';
                     jcm_content.insertAdjacentHTML('afterbegin', jcm_text);

index.php

@@ -47,6 +47,8 @@ function jcm_load_scripts() {
  * %year%:記事と現在の年差
  * %monthnum%:記事と現在の月差（1ヶ月あたり30日で計算のため多少ブレあり）
  * %day%:記事と現在の日差
+ * %post_date%:記事の投稿日
+ * %modified_date%:記事の最終更新日
  */
 function jcm_add_content($content) {
 	// 比較基準タイプ設定
@@ -73,11 +75,26 @@ function jcm_add_content($content) {
 	} else {
 		$message_text = 'この記事は%year%年以上前に書かれたものです。<br>情報が古い可能性があります。';
 	}
+	// 日付フォーマット設定
+	if (get_option( 'jcm_date_format_check' ) ==='custom' && get_option( 'jcm_date_format' )) {
+		$date_format = get_option( 'jcm_date_format' );
+	} else {
+		$date_format = get_option( 'date_format' );;
+	}
+
 
-	// DOM構築
+	/* DOM構築 */
+	// 比較基準タイプ
 	$message = '<input type="hidden" id="jcm_content_time" value="'.$content_time.'" style="display:none;">';
+	// 比較基準日数
 	$message .= '<input type="hidden" id="jcm_reference_date" value="'.$reference_date.'" style="display:none;">';
+	// 比較基準日or年
 	$message .= '<input type="hidden" id="jcm_reference_type" value="'.$reference_type.'" style="display:none;">';
+	// 最終更新日
+	$message .= '<input type="hidden" id="jcm_modified_date" value="'.get_the_modified_date($date_format).'" style="display:none;">';
+	// 投稿日
+	$message .= '<input type="hidden" id="jcm_post_date" value="'.get_the_date($date_format).'" style="display:none;">';
+	// メッセージDOM
 	$message .= '<div id="jcm_content_message" style="display:none;">'.$message_text.'</div>';
 	if (get_option('jcm_option_css') === 'custom') {
 		$message .= '<style>'.get_option('jcm_option_css_custom').'</style>';
@@ -107,6 +124,8 @@ function jcm_field() {
 	// 表示メッセージ
 	add_settings_field( 'jcm_option_message', '表示メッセージ', 'jcm_option_message', 'writing', 'jcm_option_section' );
 	register_setting( 'writing', 'jcm_option_message' );
+	register_setting( 'writing', 'jcm_date_format_check' );
+	register_setting( 'writing', 'jcm_date_format' );
 	// CSS設定
 	add_settings_field( 'jcm_option_css', 'CSS設定', 'jcm_option_css', 'writing', 'jcm_option_section' );
 	register_setting( 'writing', 'jcm_option_css' );
@@ -149,7 +168,10 @@ function jcm_option_message() {
 			<li><code>%year%</code>：記事と現在の年差</li>
 			<li><code>%monthnum%</code>：記事と現在の月差（1ヶ月あたり30日で計算のため多少ブレあり）</li>
 			<li><code>%day%</code>：記事と現在の日差</li>
+			<li><code>%post_date%</code>：記事の投稿日</li>
+			<li><code>%modified_date%</code>：記事の最終更新日</li>
 		</ul>
+		<label><input name="jcm_date_format_check" type="checkbox" value="custom" <?php echo checked( 'custom', get_option( 'jcm_date_format_check' ) ); ?> /><code>%post_date%</code><code>%modified_date%</code>で使用する日付フォーマットをカスタマイズする</label><input type="text" name="jcm_date_format" id="jcm_date_format" value="<?php echo get_option( 'jcm_date_format' ) === false ? get_option( 'date_format' ) : get_option( 'jcm_date_format' ); ?>">
 	</fieldset>
   <?php
 }

src/ts/jcm.ts

@@ -2,10 +2,14 @@ let jcm_content = document.getElementById('jcm_content_message');
 let jcm_post_time = (<HTMLInputElement>document.getElementById('jcm_content_time'));
 let jcm_reference_date = (<HTMLInputElement>document.getElementById('jcm_reference_date'));
 let jcm_reference_type = (<HTMLInputElement>document.getElementById('jcm_reference_type'));
-if(jcm_post_time !== null && jcm_reference_date !== null && jcm_reference_type !== null) {
+let jcm_modified_date = (<HTMLInputElement>document.getElementById('jcm_modified_date'));
+let jcm_post_date = (<HTMLInputElement>document.getElementById('jcm_post_date'));
+if(jcm_post_time !== null && jcm_reference_date !== null && jcm_reference_type !== null && jcm_modified_date !== null && jcm_post_date !== null) {
 	const jcm_post_time_text = jcm_post_time.value;
 	const jcm_reference_date_text:number = Number(jcm_reference_date.value);
 	const jcm_reference_type_text:string = jcm_reference_type.value;
+	const jcm_modified_date_text:string = jcm_modified_date.value;
+	const jcm_post_date_text:string = jcm_post_date.value;
 	if(jcm_post_time_text !== null) {
 		// 記事の日付
 		const post_date = new Date(jcm_post_time_text.toString());
@@ -28,6 +32,8 @@ if(jcm_post_time !== null && jcm_reference_date !== null && jcm_reference_type !
 					jcm_text = jcm_text.replace(/%year%/,diff_year.toString());
 					jcm_text = jcm_text.replace(/%monthnum%/,diff_month.toString());
 					jcm_text = jcm_text.replace(/%day%/,diff_day.toString());
+					jcm_text = jcm_text.replace(/%post_date%/,jcm_modified_date_text.toString());
+					jcm_text = jcm_text.replace(/%modified_date%/,jcm_post_date_text.toString());
 
 					// DOM書き換え
 					jcm_content.innerText = '';