tontotakumi.com

web制作、Wordpress、料理、書評などを中心に、web制作初心者「tontotakumi」が作るブログ

wordpressの各記事に、公開日と最終更新日を表示する方法

   

前から気になっていたwordpressの各記事に、公開日と最終更新日を入れてみる

わからないことをGoogleで検索して、新しい情報を得る時にいつも気になってみていたのが、この情報はいつの情報?!っていうことがよくありました。大体はこのブログのように、いろいろな情報の公開をしているものなんですが、やっと見つけた~!!!と思って読んでみると最後に出てくる日付が数年前の情報だったって感じで・・・。で、以前からこのブログの日付表示も気になっていたのですが、ある程度記事ができてきたので手を加えてみることにしました。備忘録的にアップしておこうと思います。


とはいえ、自分で作ったりできるレベルではないので、とりあえず「wordpress 公開日と最終更新日をつける方法」ってググってみると、結構出てきました。
いくつか見てみたのですが、その中でいつも参考に(勉強)させていただいている、パシさんのブログがあったのでこれを参考にして挑戦してみました!!
WordPressで最終更新日を表示する方法-パシのSEOブログ

wordpressの使い方のほか、SEOやアフィリエイトのサイトも運営されており、いつも勉強させていただいているサイトなので、ぜひ見てみてください!!(パシさん、いつもありがとうございます!!)

まずは、functions.phpとsingle.phpを修正する

パシさんのブログを読んでみると、予約投稿にも対応できるコードを公開されていたので、それを使わせていただくことにしました。
ちなみにそのコードがこちらです。

/*
  get_the_modified_time()の結果がget_the_time()より古い場合はget_the_time()を返す。
  同じ場合はnullをかえす。
  それ以外はget_the_modified_time()をかえす。
*/

function get_mtime($format) {
    $mtime = get_the_modified_time('Ymd');
    $ptime = get_the_time('Ymd');
    if ($ptime > $mtime) {
        return get_the_time($format);
    } elseif ($ptime === $mtime) {
        return null;
    } else {
        return get_the_modified_time($format);
    }
}

このコードを、wordpressの管理画面から「外観>テーマ編集>テーマのための関数(functions.php)」を選択して、一番下に追加します。

コードをfunctions.phpに追加する

コードをfunctions.phpに追加する


こんな感じです。で、入れ終わったらちゃんと「ファイルを更新」を押しましょう!!

自分の好みの場所に、表示するためのコードを入れる

こちらに関してもわからないことだらけなので、パシさんのコードを利用させていただきました。

公開日:<?php the_time('Y年n月j日') ;?><br />
<?php if ($mtime = get_mtime('Y年n月j日')) echo '最終更新日:', $mtime; ?>

これをsingle.phpの任意の場所に入れるとのことです。で、そのままsingle.phpの中に入れようとしたのですが、ど~見ても内容が少ないんですね。。でなんとなくそれっぽいところで、「」の直前に入れてみたんですが、こんな感じに・・・。

single.phpに入れたらこんなんに

single.phpに入れたらこんなんに


まぁ~見当違いにもほどがありますよね。。。でも、日付がちゃんと表示されていることは確認することができました!!

公開日のソースコードを入れる場所を探す

single.phpに入れてみたらおかしい感じになったので、またググってみたところ、「content.php」に入れるって案が出てきました!!
なので、とりあえず開いてみるとなんとなぁ~く実際のページと同じ感じのソースが並んでいたので、ソースコードとにらめっこしていたら、

<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>
</div><!-- .comments-link -->

っていうところがあり、実際のページのタイトル下の「コメントをどうぞ」のとこっぽかったので、最後の「/div」で閉じるところの前にコードを入れてみたら、こうなりました!!!!!

content.phpに入れてみた

content.phpに入れてみた


おしい。。。。実際に入れたソースコードはこんな感じ。

<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>

公開日:<?php the_time('Y年n月j日') ;?><br />
<?php if ($mtime = get_mtime('Y年n月j日')) echo '最終更新日:', $mtime; ?>

左側に表示されてしまっているのですが、出来れば右側がよかったので、CSSに追加するために、下記のように「content.php」に書き込んで、

<div class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentytwelve' ) . '</span>', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>

<div class="date-of-post">公開日:<?php the_time('Y年n月j日') ;?><br />
<?php if ($mtime = get_mtime('Y年n月j日')) echo '最終更新日:', $mtime; ?>
</div>

スタイルシートの中の一番最後に、こうやって入れたらうまく右側に表示されました!!

/* date-of-post */
.date-of-post {
	text-align: right;
}

ただぁ~、今の状態を見てもらうと分かると思うのですが、「コメントをどうぞ」の行の下から始まって、公開日と最終更新日が表示されているので、今後修正しないとですよね。。。もうちょっと頑張ります!!

もう一つついでに:
ソースコードをwordpress内で表示するために(表示番号付きプラグイン)

上記で表示しているソースコードなんですが、そのままコピーしてもってきて、記事を作ろうとしたんですが、そのままの場合普通に処理されてしまい、ソースコードが全く見えなくなってしまいました。で、どうしようかとまたググってみたらプラグインで対応できるってことで「SyntaxHighlighter Evolved」っていうのを追加してみました!!

ショートコードを追加するだけでソースコードを表示できるだけでなく、簡単に見た目のデザインも変更できるし、管理画面も日本語なので結構使いやすそうです。ぜひぜひ、検索してみてください!!

 - web制作, 備忘録(wordpress)

広告

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

Identity Mask(Chromeウェブストア)
Googleアカウントなどを複数同時に見たいときに使える拡張機能「Identity Mask」

スマフォで時間があるときによくGunosyを見ているんですが、昨日見た記事で以前 …

Role追加
WordPressで複数の会員が独自のページを作成し、内容を管理・更新できるようにする方法。→プラグイン「User Role Editor」を使う

WordPressで情報サイトを作ることになったんですが、会員が自分でログインし …

AmazonJS
「AmazonJS」プラグインの設置・使い方(画像で説明)

このブログでも「AmazonJS」というプラグインを使って、Amazonアソシエ …

WordPress
[初心者向け] WordPressでテーマをカスタマイズする前に、子テーマを作ってから作業すべし!!

自分でサイトを作るようになってから、なんだかんだで1年が経とうとしています。これ …

「Duplicator」でWordPressサイトをデータベースも含めて全部引っ越し(移設)する方法

WordPress(ワードプレス)でサイトを運営していると、「あっ!サーバを変え …

Poeditの使い方 [WordPressのテーマやプラグインを日本語化(多言語)する方法]

WordPressを使っていると、様々なテーマやプラグインを使うことになると思う …

アコーディオンメニュー
WordPressで、CSS3とhtmlだけでアコーディオンメニューを作る方法

アコーディオンのように、クリックするとコンテンツが開いて表示される「アコーディオ …

加工後の状態
YoutubeやGoogleMapの埋め込みをWordPressのレスポンシブデザインに最適化する方法

Youtubeの動画やGoogleMapをブログに掲載するときに、インライン(i …

デフォルトのアイキャッチ
wordpressのアイキャッチ画像をリサイズする方法(初心者向け)

これも前から気になっていたものの一つで、トップページに表示されるアイキャッチ画像 …

Advanced Custom Fields
Advanced Custom Fieldsを使って、wordpressの記事入力項目を作り替える

前回の記事(WordPressで複数の会員が独自のページを作成し、内容を管理・更 …