写真 > AMAZING TOYAMA写真部 > WordPressに日めくりカレンダー表示

WordPressに日めくりカレンダー表示

投稿日時: 投稿者:

はじめに

ワードプレスサイトのサイドバーに日めくりカレンダーを表示できないか検討した。
表示する画像を自由に指定出来る機能付きが良いのだが，WordPressのプラグインは仕様を見た限りでは修正が必要なので，とりあえず手っ取り早く出来る方法で表示してみた。が
遠回りして最終的にはプラグインを使用した。
WordPress管理外のリサイズ画像をそのまま表示させる方法とWordpressのメディアライブラリ登録画像を表示させる二通りが簡単にできそう。

リサイズ画像表示(ケース1)

一番簡単な方法はWordpressのメディアライブラリ以外で適当なフォルダーにリサイズ画像を準備する。
リサイズは横260でファイル名をcal1.jpg～cal31.jpgの31日分作成して「wordpress\wp-content\daily_calendar\r」等に保存。リサイズ値は実表示させてみて決定。

phpファイル

表示用のphpは下記で「\wp-content\daily_calendar\」等に保存。

<?php
// 表示当日の日を取得して対応した画像(日めくりカレンダー)を表示 daily_calendar.php
$today = date("j");
// 同一フォルダーの配下rから取得してそのまま表示　0埋めなしの「日」は「j」
// カレンダー画像ファイル名 1日:cal1.jpg ～ 10日:cal10.jpg ～ 31日:cal31.jpg
$url = "r/cal" . $today . ".jpg";

    echo '<img src="' . $url . '" alt="AMAZING TOYAMA DAILY CALENDAR">';

?>

iframeで埋込

次の手順でWordpressにiframeで埋込する。
外観－ウィジェット－サイドバーエリア　を開く
ブロックを追加でタイトルを入力してオプションから「グループ化」を選択。
カスタムHTMLから下記のiframeコードを入力する。

<iframe src="https://ドメイン名/wordpress/wp-content/daily_calendar/daily_calendar.php" title="daily_calendar" width=300 height=280>
</iframe>

サイドバーエリア登録

タイトルとリサイズ画像表示・キャッチコピー表示を1グループとして登録例

リサイズ画像表示例

この方法は，画像クリックで拡大表示できない。拡大表示用画像を準備すれば別だが。

メディアライブラリ画像表示(ケース2)

WordPressの管理下のメディアライブラリの画像を表示させるので，Easy Fancyboxといった画像表示プラグインが使用できる利点がある。
しかし画像を表示の都度，当日分をコピーしているので無駄な処理を行っている。
画像はメディアライブラリに31日分登録して，表示用の画像を追加で1枚フアイル名を「today.jpg」等にして登録後，サイドバーエリアに表示させる。

コピー用画像の準備

31枚の画像の中から当日分の画像を表示用の「today.jpg」にコピーする必要があるが，メディアライブラリからリネーム処理してコピーする方法と日毎のフォルダーを31日分別途準備して全て「today.jpg」で保存させたものからコピーする方法がある。
メディアライブラリには数種類のサイズの画像が登録されているが，全て使用するわけではないので必要分のみコピーさせる必要がある。ワイルドカードでコピーさせる方法が簡単だがメディアライブラリ間のコピーはサイズ毎のコピーが必要となるので，今回は31日分のコピー元保存フオルダーを準備してその中にファイル名を「today.jpg」として必要分のみ保存して，フォルダー単位でコピーさせる方法をとった。

使用する画像サイズ

メディアライブラリに登録した際に作成される各サイズの全画像をコピーするには無駄なので，実際に使用する画像のみをコピー元フォルダー「\wp-content\daily_calendar\cal1～cal31」等に保存する。
メディアライブラリに登録の際に作成される画像は，元画像サイズや使用するテーマで異なってくるので，どれを使用するのか確認して使用する画像のみ保存する。

テーマ「Catch Evolution Pro」の場合はとりあえず6枚保存。
today.jpg（元画像）を登録すると下記のリサイズ画像がWordpressによって自動作成される。
today-150×150.jpg　　　記事内サムネイル表示用
today-300×261.jpg　　　メディアファイルサムネイル・記事内中表示用
today-754×400.jpg
today-768×668.jpg　　　記事内表示用(タブレット)
today-1024×890.jpg　　サイドバー表示用(ノートPC)
today-1190×500.jpg
today-1536×1336.jpg　　サイドバー表示用
today-1920×480.jpg
today-2048×1781.jpg　　サイドバー表示用(タブレット)
today-2355×2048.jpg
today-scaled.jpg (2560×2226)　　　ポップアップ拡大用

テーマ「THE THOR」の場合はサイドバーのみ表示で1024×890の1枚でOK
today.jpg（元画像）を登録すると下記のリサイズ画像がWordpressによって自動作成される。
today-150×150.jpg　　　　記事内サムネイル表示用
today-300×261.jpg　　　メディアファイルサムネイル・記事内中表示用
today-375×326.jpg
today-768×668.jpg
today-1024×890.jpg　　サイドバー表示用，ポップアップ拡大用
today-1280×1113.jpg
today-1536×1336.jpg
today-2048×1781.jpg
today-scaled.jpg (2560×2226)　　　記事内表示ポップアップ拡大用

「THE THOR」はテーマの機能で画像の拡大縮小を行っているもよう。
WordPressが作成する画像サイズは微妙に異なる場合があるので，ファイル名を31枚揃える。

phpファイル

コピー用のphpは下記で「\wp-content\daily_calendar\」等に保存。
dosコマンドのcopyで当日画像をコピーする。

<?php
//本日のカレンダーフアイルを表示ファイルへコピー    daily_calendar_copy.php
// 表示当日の日を取得して対応した画像(日めくりカレンダー)を表示ファイルへコピー
$source = 'D:\www\public_html\wordpress\wp-content\daily_calendar\cal';
$target = 'D:\www\public_html\wordpress\wp-content\uploads\2024\10';
$day = date("j");
$cmd = "copy  /Y " . $source . $day . "\*.jpg " . $target;
exec($cmd);
?>

iframeで埋込

コピーのみで表示がないので，枠は不要。
サイドバーに埋込して，同一ブロック内でグループ化してタイトルと画像を登録する。

<iframe src="https://ドメイン名/wordpress/wp-content/daily_calendar/daily_calendar_copy.php" title="daily_calendar" width=0 height=0>
</iframe>

画像強制リロードと遅延読み込み

日替わり時にブラウザのキャッシュの影響で日付画像が変わらない時がある。「Ctrl」+「F5」の画面再表示でも変化しないのでブラウザを閉じる際に「画像とファイルをクリア」に設定すれば良いのだが，サイト側対策として該当画像を強制的にリロードさせる指定を追加する。その分読み込みが遅くなるのだが・・・
あと，画像コピー後に表示させたいので，遅延読み込み指定も追加する。(loading=”lazy”)
画像の埋め込み後に「HTMLとして編集」から，画像ファイル名に続けて下記の指定を追加する。

img src="today-1024×890.jpg?<?php echo date('YmdHis'); ?>" loading="lazy"
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

登録後PHPのタグコードが表記変換される。がTHE THORの場合は後ろのコード「?>」を付加すると画像左上に「’>」が表示されるので記入しない。
上記追加しても変化しない時は「Ctrl」+「F5」と組み合わせれば画面更新される。はずだが，まだキャッシュが残ることがある(-_-;)汗

サイドバーエリア登録

タイトルと画像コピー・画像表示・キャッチコピー表示を1グループとして登録例

メディアライブラリ画像表示例

画像のコメント表示

日替わりのコメント(画像のキャッチコピー)を表示させるには丁度よいコードが紹介されたサイトが見つかったのでありがたく使わせてもらいます。_(._.)_
日替わりメッセージ
 試作版のブログ公開版で機能は十分なのでこちらを使用
 ＰＨＰで日替わりメッセージ表示 | そろそろホンキ出す

phpファイル

「$datafile」はキャッチコピーのファイル「cat.txt」を指定
「$msg_type」は”4″で日一致を指定。
その他は変更なしで動作した。

<?php
// 設定 daily_calendar_cat.php
$datafile=  "cat.txt"; // メッセージ用データベースファイル
$default_msg= '該当データがない'; // 該当データがないとき表示
$msg_type= 4; // 1:年月日一致, 2:月日一致, 3:月一致, 4:日一致（デフォルト）, 5:全部
$tate= 0; // メッセージを縦読みに変換

// 設定に基づいて抽出パターンを生成

～～～～～～　以下省略　～～～～～～

?>

データベース

キャッチコピーは31日分用意。改行挿入可能
1レコード目にダミーレコードを入れないと毎月1日にエラーが発生して表示されない。
下記は記載例　年-月-日:1行目コメント，<br>2行目コメント

0000-00-00:ダミーレコード
yyyy-mm-01:あいうえお，かきくけこ，<br>さしすせそ，たちつてと。<br><font size="1">撮影場所</font>
　　　　　　　　　　　￤
　　　　　　　　　　　￤
yyyy-mm-31:なにぬねの，はひふへほ，<br>まみむめも，らりるれろ。<br><font size="1">撮影場所</font>

iframeで埋込

サイドバーのタイトル・画像と同じブロック内でグループ化する。

<iframe src="https://ドメイン名/wordpress/wp-content/daily_calendar/daily_calendar_cat.php" title="daily_calendar" width=300 height=120>
</iframe>

　

キャッチコピー表示例

あとがき

表示させるカレンダー画像は卓上カレンダーをカメラ撮影したものにしたが，別途スキャナーで画像取得したものもある。スキャナー取得は画像が綺麗でスッキリしているが，著作権等の問題もあるし，卓上カレンダーのほうが味があるのでそちらを表示させた。
今回の日替わり表示方法は短期間でかなり無理やりの方法で実現させたが，希望にあったプラグインがあれば良かったのだが・・・
日めくりカレンダープラグイン（自作） (p56.biz)
これを少し修正すればできるかも・・・・・ ・・　　
・・・・・・　当初ソースコードを詳細に見ていなかったが数箇所の修正でできた。_(._.)_
アメイジングトヤマ写真部（個人サイト） – 個人の活動情報メモ (na-3.jp)


この画像表示はJavaScriptで毎日異なるファイル名を指定しているのでキャッシュの影響がない。

このブログを書くほうが時間がかかってる。(-_-;)汗　やっていることは大したこと無いのに
サイトに日めくりカレンダーを表示する方法 (p56.biz)
プラグインを有難く修正して使わせてもらいます。_(._.)_

追加（プラグインの変更箇所）

my_script.jsの変更箇所　3行

コメント
//    month2.textContent = myYear2 + "年 " + myMonth2 + "月";

コメント
//    date2.textContent = myDate2 + "日 " + myDay2 + "曜";

ファイルパス変更
hmimgb2.innerHTML ="<a href='/wordpressルート/wp-content/cal" + dayb2 + "-scaled.jpg'><img src='/wordpressルート/wp-content/cal" + dayb2 + "-300x261.jpg' alt='' width=100% />";

my_style.cssの変更箇所　1行　　マージンを0

#hmcenter2{/* 日めくりカレンダーをセンターに */
   margin: 0em auto;
}