Release 2017.6.18 / Update 2017.12.10

WordPress備忘録 公開日・更新日の表示

主に自分のためのWordpressカスタマイズ情報。

スポンサーリンク

記事上に、公開日、更新日を表示させるようにする。ただし、htmlタグで1記事ごとに書き足していくのは大変だし、面倒なので、phpファイル等の変更で自動的に書き出されるよう設定する。

下準備

公開日は単純に、

対して、状況に応じた「更新日表示」は一手間あるので、function.php内に関数を作ると勝手がいい。

ところが、使っているテーマがアップデートされると、そのfunction.phpは上書きされてしまう。そうならないよう、子テーマを作り、そこへ関数を書き足す。

jumbleat – 子テーマを作る

function.php

有効にした子テーマ内へ、「変更があればその更新日を吐き出す」関数を追記。

コードはこちらを流用させてもらいました

状況で表示が変わるコード

基本「公開日」のみで、if分岐で「更新日」があれば、それも表示するコード。ついでにCSSでレイアウト出来るよう“date-of-post”クラス属性も追加。これを任意の場所に書き足す。

テーマにコードを追記

上記コードを、以下のテーマphpファイル内へ追加。

  • content.php(個別投稿用)
  • content-page.php(固定ページ用)

サムネイル画像直下に表示させたいので、以下の場所へ。

この追記は親テーマのアップデートで消されてしまうが、コードのコピペだけで復帰できる。

だったが、Wordpressのアップデートからか、ダッシュボード上からの「テーマの編集」ではphpのコードを書き換える事は出来なくなった。なので、子テーマを使って、ロリポップのFTPからコードを書き足すようにする(2017/12/10 追記)。

子テーマへコード追加

子テーマ内に同名のファイルをコピーし、そこへ日付表記用のコードを追記する。上記どおり、ダッシュボード上からは編集が出来ないので、ロリポップFTP上でファイル操作・編集をする。

ログイン後、wp-content/theme/内の親テーマから、「content.php(個別投稿用)」と、「content-page.php(固定ページ用)」をチェック。

ツールアイコンの「ファイルのコピー」をクリック。

子テーマである「twentyfifteen-child」フォルダへ移動し、これのラジオボタンを有効にして、

「このフォルダにコピーする」を実行。

コピーした2ファイルを編集。日付表示コードを前述通りに追記する。

このやり方だと、テーマやWordpressがアップデートされても影響を受けない。ただし、本来書き換えられないといけないアップデートにも引っかからなくなるのでよろしくない。アップデートがかかる度に、一連の作業をし直す心がけが必要!

CSSレイアウト

「外観」の追加CSSで、表示のレイアウトを設定。画像との行間を詰めるため、“post-thumbnail”も設定。

こちらも子function.phpと同様に、アップデートには影響を受けないので一回書き込めばいい。

参考リンク

コメントを残す

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

CAPTCHA