WordPressの横型カレンダープラグイン – その2

横型のカレンダー紹介でHorizontalCalendarを設置しましたが前回の投稿のやり方はindex.phpにソースを追加するやり方をしたのでソースが書き込まれてなかったカテゴリーやアーカイブなど別のページに飛べば当然表示されなくなる。


AfroNamiHeiの箱 : WordPressの横型カレンダープラグイン

関連するphpファイル全部を編集すればいいだけですが面倒のもあってプラグイン配布元がやってる通りやっぱりheader.phpファイルを編集し反映させてみます。

横型カレンダープラグイン for WordPress(WP2.3/2.5対応版) – The blog of H.Fujimoto

HorizontalCalendar配布サイトの設置方法はWordPress標準テンプレートを例に説明してます。

標準のテンプレートだとheader.phpファイルの最後の方に追加すれば問題なく表示されますがWPTP-Chocolateテーマで追加するだけだと・・・。

yoko-calendar-03背景画像に溶け込んで文字が見え難かったのでカレンダー部分は指定で反転させてます。

themesディレクトリにあるwptp-chocolateディレクトリheader.phpにソースを追加です。

Afroはheader.phpファイルの最後にある/divタグの後ろに追加です。

スタイルシートはまだ使ってない状態だと文字もみえにくくヘッダーとボディ部分が分断されてて崩れてしまう。

これを修正するにはカレンダーにもボディと同じ画像を使いたい。
ボディ内の記事で使われてるdivタグIDcontentっぽいので使われてるソースをそのまま使ってみます。

  • IDcontentの見つけ方はブログを表示してマウスの右クリックのメニューから「ソースを表示する」で見つけることができます。

あ、ちなみにスタイルシートはプラグインサイトで紹介されてるコードをそのまま使い直してます。

#wp-calendar-horizontal {
float: left;
width: 922px;
background: url(images/content.jpg) repeat-y;
position: relative;
margin : 0;
padding : 3px 0;
text-align : center;
}

赤い部分が追加ソース。

上手く画像がハマッたので後は位置と文字の色ぐらい。

yoko-calendar-04フォントや色で似合いそうなものを・・・

Afroは以下のようにスタイルシートを編集。

themesディレクトリにあるwptp-chocolateディレクトリstyle.cssファイルの一番最後に追加。

#wp-calendar-horizontal {
float: left;
width: 922px;
background: url(images/content.jpg) repeat-y;
position: relative;
margin : 0;
padding : 3px 0;
font-family: Comic Sans MS, Impact, sans-serif;
text-align : center;
font-size: 18px;
}
#wp-calendar-horizontal a:hover {
color : #ffffff;
text-decoration : underline overline;
background-color : #393328;
}
#wp-calendar-horizontal .saturday,
#wp-calendar-horizontal .saturday a {
color : #0000ff;
}
#wp-calendar-horizontal .sunday,
#wp-calendar-horizontal .sunday a {
color : #ff0000;
}
#today {
background-color : #debb87;
border : 1px solid #ff9900;
}
#wp-calendar-horizontal a:link {
background: #f3f3f3;
color: #666666;
}

後は徐々に少しずつ直していくことにする。

yoko-calendar-05前回の投稿ですでにスタイルシートを編集してる人は注意

引用、参考サイトは以下です

横型カレンダープラグイン for WordPress(WP2.3/2.5対応版) – The blog of H.Fujimoto

コメントを残す

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