暇つぶしタイムズ

社会・エンタメ中心の時事ニュース情報サイト

wordpressカレンダーウィジェットの前月、翌月へのリンクを下から上にレイアウト変更するカスタマイズ方法

   

おススメの記事

wordpressカレンダーウィジェットの前月、翌月へのリンクを下から上にレイアウト変更するカスタマイズ方法

wordpressで構築されたブログでよく見るサイドバーに表示されているカレンダーウィジェット。
ビジュアルで投稿された月日が一発で分かるのでとっても便利です。
(当サイトでは使っておりませんが・・・汗)

1.jpg

こんなヤツです。

基本的にここをイジるってことはそうそうないかと思いますし、カスタマイズするとしてもCSSをゴニョゴニョしてデザインをかっこ良くする!程度かと思います。
とはいえ、最近このカレンダーの月送りのリンク(カレンダーの下に表示されている前月、翌月へのリンク)をカレンダーの上に持ってきたい!という要望がありまして実装しましたので、その方法をご紹介したいと思います。

[こんな感じにしたい!!]
2.jpg

wordpressのカレンダー表示の関数を定義しているファイルは「general-template.php」

wordPressの標準カレンダーを呼びだす関数というのは、「wp-includes/general-template.php」にかかれております。
で、ここで定義されている「get_calendar()」という関数でカレンダーを呼び出している感じ。

よって、「general-template.php」の中身を書き換えればイイのですがこれだとwordpress本体をアップデートする度にこのファイルを書き換えなければならない可能性があり、かなり面倒くさい。
ということで、今回はfunctions.phpに新たに関数を定義して、レイアウトをカスタマイズしたカレンダーを呼び出すことにしよう!

wordpressのカレンダーウィジェットの前月、翌月へのリンクを下から上に変更するコード

まずはコードから。
基本的には「general-template.php」の「get_calendar()」関数をちょこっと変更してあげます。
以下をfunctions.phpに追加してあげて下さい。

変更した箇所は以下の通り。
・カレンダーの下にあった前月、翌月へのリンクをカレンダーの上に移動し、リンクを記号のみにした。
・ついでに「xxxx年x月」という表示を前月、翌月へのリンクの真ん中に表示させた。

カスタマイズしたカレンダーを表示する

カレンダーを表示するには表示させたい箇所に以下コードを書くだけ。


get_cpt_calendar()の引数はポストタイプを指定してあげてください。例では「post」にしております。

で、完成したカレンダーがこちら。

ca2.jpg

無事に翌月、前月へのリンクがカレンダーの上に移動し、リンクが記号だけになっています!
めでたし、めでたし。

 - web制作, テクノロジー, 体験談・やってみた