WordPress で Web サイト構築試行錯誤: サイドバーに日めくりカレンダーを表示させたい

お寺のサイトを作成しているので、「今日のことば」のような日めくりカレンダーをサイドバーに表示させてみたいと思います。

管理画面から「外観」「ヴィジェット」の「メインサイドバー」に「テキスト」を追加し、任意の HTML の入力ボックスに以下のコードを加えます。

<script language="javascript">
//<![CDATA[
myDate=new Date();
num=myDate.getDate();
document.write("<img src='https://yoursite.com/uploads/img_" + num + ".png' alt='today-word' width=100% />");
//]]>
</script>

この例では、「img_xx.png」という日めくり用の画像ファイルを一ヶ月分の31枚 http://yoursite.com/uploads/ 以下に用意しています (img_xx.pngxx は 1 から 31 までの数字)。

表示は以下のようになります。

https://ryogan.org/blog/wp-content/uploads/2012/05/wpid-himekuri_sample.png

WP jQuery Lightbox を利用する場合、例えば次のように書けるでしょう。

<script language="javascript">
//<![CDATA[
myDate=new Date();
num=myDate.getDate();
document.write("<a href='http://yoursite.com/uploads/img_" + num + ".png' rel='lightbox'><img src='https://yoursite.com/uploads/img_" + num + ".png' alt='today-word' width='100%' />");
//]]>
</script></a>

「WP jQuery Lightbox」プラグインは、Lightbox 効果を得るために、画像をマークアップする <a> タグに、

rel="lightbox[ID番号]"

の属性を追加します。この属性のない画像ではこの効果は得られません。したがって、画像のアップロードは、FTP クライアントソフト等ではなく、必ず WP の設定画面から行なって、この属性を付与する必要があります。

表示例は以下のようになります。

https://ryogan.org/blog/wp-content/uploads/2012/05/wpid-himekuri_lightbox.png

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください