WordPressのカレンダーのスタイル

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

もうすぐ WordPress 3.1がリリースされそうですね。
試していないので何とも言えないですが、新機能のひとつ『投稿フォーマット』が楽しみ。
テーマが投稿フォーマットをサポートしていないと、フォーマットの選択ボックスも表示しないらしい。
また、このサイトのようにオリジナルの場合は自ら実装しなければいけませんよね。
標準以外には、

  • aside(アサイド)
  • gallery(ギャラリー)
  • link(リンク)
  • image(画像)
  • quote(引用)
  • status(近況)
  • video(動画)
  • audio(音声)
  • chat(チャット)

の9種類が設定されています。
でも、基本的なレイアウト(構造)は決まってるんですよね?
あとは、「CSS でスタイリングしなさい。」という解釈であってます?
だとしたら、もうちょっと自由度が欲しいなぁ…

あと、『管理バー』も便利かも知れない。
MODx に同じような機能があったような気がする。

で、昨年11月末から年末にかけて WordPress のアップデートが数回ありました。
WordPress のバージョン2.7から搭載された『自動で更新(以前は自動アップグレードって名前じゃなかったっけ…)』があるので、アップグレードはとても簡単になりました。
もちろん、データベースのバックアップは必要だと思いますが…

以前にも書きましたが、このサイトのカレンダーにスタイルを設定しています。
WordPress のノーマルカレンダーがあまりにも味気ないのでちょこっと飾ってるだけなのですが、CSS だけではどうしても対応しきれずに “general-template.php” の一部を書き換えていました。
“general-template.php” のカレンダー部分を変更していたのですが、アップグレード毎に書き換えないといけないので以外と面倒くさい。 🙂

なので、この際 jQuery を利用してスタイリングしてみようと…

まず、WordPress が書き出すカレンダー部分のソースで変更したいところというのは、

[html]
<table id=”wp-calendar” summary=”Calendar”>
 <caption>January 2011</caption>
 <thead>
 <tr>
  <th scope=”col” title=”Sunday”>S</th>
  <th scope=”col” title=”Monday”>M</th>
  <th scope=”col” title=”Tuesday”>T</th>
  <th scope=”col” title=”Wednesday”>W</th>
  <th scope=”col” title=”Thursday”>T</th>
  <th scope=”col” title=”Friday”>F</th>
  <th scope=”col” title=”Saturday”>S</th>
 </tr>
 </thead>
[/html]

この『日曜日』と『土曜日』にクラスを与えたい。
今までは、”general-template.php” の対応部分を

[html]
 <tr>
  <th scope=”col” title=”Sunday” class=”sun”>S</th>
  <th scope=”col” title=”Monday”>M</th>
  <th scope=”col” title=”Tuesday”>T</th>
  <th scope=”col” title=”Wednesday”>W</th>
  <th scope=”col” title=”Thursday”>T</th>
  <th scope=”col” title=”Friday”>F</th>
  <th scope=”col” title=”Saturday” class=”sat”>S</th>
 </tr>
[/html]

という風に書き換えていました。

それを今回からは、”general-template.php” に手を付けずに

[javascript]
 $(‘#wp-calendar thead th:eq(0)’).addClass(‘sun’);
 $(‘#wp-calendar thead th:eq(6)’).addClass(‘sat’);
[/javascript]

と、jQuery にて対処しました。
簡単に説明すると、『ID が “wp-calendar” のテーブルの “thead” 部分の “th” の1番目に “sun” というクラス、7番目に “sat” といクラスを付加(追加?)しなさい。』ということ。
とても簡単。 😀
何故今までしなかったのか不思議なくらい簡単…
まぁ、JavaScript がオフになっているとスタイルが利きませんが、それ以前に jQuery 使いまくりなので今更ソコを気にしてもね。

ということで、あらためて『 jQuery を使えば色々と便利だなぁ』と感じた今日この頃です。

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。