子どもの夜泣きで慢性的睡眠不足なひつじさんです。
以前WordPressで作ったダメ系ライブカレンダーの要望に「カレンダー表示機能を付けて欲しい！」とあり、設置してみました。その設置方法のメモです。
かなり強引なやり方だと思いますが、私の知識ではこのやり方でしか実装できませんでした。もっと勉強したいものです。
その点ご留意のうえご覧ください。
１年以上前の記事です。情報が古くなっている可能性があります。
やりたいこと・仕様
・カスタムフィールドで追加してある日付を元にカレンダー表示にしたい
・祝祭日も表示したい
・WordPressのdata.phpは使わない
・同じ日にイベントが表示されることもある
投稿日時は投稿日時で使う場合もあるので、data.phpは使用しないやりかたにしました。
カレンダーの表示は固定ページを一つ設けて、そこで大きく表示させます。
コードサンプル
以下のようなやりかたでカレンダー表示しています。
こんな感じのコードを元に、こんなカレンダーができてます。
（※ 2013.8.2 : リンク先が表組み型のカレンダーになっていましたのでリスト型カレンダーに修正しました）
page-calendar.php
function.php
カレンダー表示用テンプレート内で、表示する月のイベントの情報を扱いやすい配列に一度格納。
function.phpのカレンダー表示用関数を叩いて日付の合う場所に配置、というやり方です。
祝祭日の取得は、
・Googleカレンダーから祝日情報を取得。 | almondlab. | Web Design, Graphic Design, CMS, Drupal, Flash
・phpで日本の祝日や振替休日を出力する。 ::: Toro_Unit
を参考にしました。
fnnction.phpのagv()は連想配列でキーがない場合の警告回避対策です。
・連想配列の存在しないキーにアクセスした際のPHP警告を回避する 15:40 … — Bigegg Lab
少しずつではありますが、ダメ系ライブカレンダー、進化してきております。
今度は検索周りを頑張りたいですね ＠・ェ・＠
[…] 以前、WordPressでリスト型カレンダー表示機能を追加してみたでリスト型カレンダーを制作しましたが「表組みタイプはどうやったらいいですか？」という質問が来ていたので、表組みタ […]
はじめまして。
初心者でして的を射ない質問でしたらすみません。
こちらのページを参考にやってみましたが、カレンダーを表示するところまではできたのですがカレンダー上にイベントを表示する方法が分かりません。
カスタム投稿タイプ ”live”を作って ”ldate”というカスタムフィールドに日付を入力するという風に思うのですがこれでは表示されません。
恐れ入りますが方法をご教授いただけると幸いです。
kuuさん初めまして。
そうですね、ソース等を見ないと分からない部分も多いのですが、考え方としては合っていると思います。
可能性としては、
1) カスタム投稿タイプやカスタムフィールドのデータ自体が上手く取得出来ていない。
2) カスタムフィールドで入力されている日付の形式が違う
の２つが考えられます。
1) はカレンダー表示ではなく、普通にカスタム投稿タイプとカスタムフィールドを表示してみることで、きちんと取得出来ているかどうか確認出来ます。
2) ですが、カスタムフィールドの日付の形式が「2014年04年03日」という形でないと上手く表示ができません。
その辺りを一度チェックしてみてください。
早速のご回答ありがとうございました。
返事が遅くなりまして申し訳ありません。
２番の日付の形式が間違えていました。
ありがとうございました。
これで表示はされるようになったのですが、カレンダー上でタイトルの最後に ()
と表示されてしまいます。
page-calendar.phpの34行目を get_the_excerpt に置き換えてみましたがやはり同様に抜粋の後ろに () が入ってきます。
お示しいただいているソースをそのままコピペでやっていますので、適用しているテーマに問題があるのかもしれませんがどこが間違えているのかお心当たりがありましたらご回答をいただければと思います。
質問ばかりで申し訳ありませんがよろしくお願いいたします。
いえいえ、表示が出来たようで何よりです。
> カレンダー上でタイトルの最後に ()と表示されてしまいます。
これは function.php の 54行めにある
if($eln[0] == $day){$tmp .= '<a href="'.$eln[2].'">'.$eln[1].'('.$eln[3].')</a>';}この部分を
if($eln[0] == $day){$tmp .= '<a href="'.$eln[2].'">'.$eln[1].'</a>';}と修正すると表示されなくなります。
この部分がカレンダーに表示されるタイトルとリンク部分になります。
一度チェックしてみてください。
ご回答ありがとうございます。
教えていただいた修正で思い通りの表示になりました。
ありがとうございました。
重ねての質問で恐縮ですが、カスタムフィールドに入力する日付の形式を
現在 2014年04月22日 となっておりますが、
これを2014/04/22 という形に変更することは可能でしょうか？
返信遅くなってスミマセン。
思い通りの表示が出来たようでよかったです。
カスタムフィールドの日付を2014/04/22にしたいとのことですが、
まず、page-calendar.phpの12〜18行めにある日付の指定４箇所を
$_GET['ey']."年".$_GET['em']."月01日"⇒$_GET['ey']."/".$_GET['em']."/01"というかんじでに変更します。次に37行めの
preg_match('/\d{2}日/' , $eventDate , $matchDate);の正規表現パターンを/\d{2}$/に変更すればできます。実際には試していないですが、これで出来るようになると思いますよ。
ご回答ありがとうございます。
教えていただいたようにやってみたのですが反映されないようです。
現状でも既にほぼ思い通りの使用ができております。
何度もお手数をおかけするのも恐縮なのでもし別バージョンの公開等のタイミンがありましたら一度見ていただければ幸いです。
返信おそくなりました。すみません。
>教えていただいたようにやってみたのですが反映されないようです。
うーん、そうですか。
今はちょっと実際に検証してみることが難しいので、やってみる機会がありましたら、その時にまたお返事しますね。
お力になれずに申し訳ないです。
こんにちわ、横入りでスイマセン。
私も日付のフォーマットがXXXX.XX.XXだったので参考になれば。
Meiさんの表記変更も行ったうえで更に、function.php 51行目の
if($i<10){$day = "0".$i."日";}else{$day = $i."日";}⇒if($i<10){$day = "0".$i";}else{$day = $i;}と変更すれば、いけました！情報共有まで。
上記コードをそのまま記載したら、うまく表示されました。
ありがとうございました。
変更したい点があり、やっていますがうまくいきません。
http://www.rku-bbc.com/schedule/
このサイトのスケジュールのように、内容をリンクなしで表の中にテーブルを使って埋め込みたいです。
Advanced Custom Fields で入力した項目を上記サイトのように表示させたいです。
項目は
日付・カテゴリー・大会名・対戦チーム・勝敗・スコア・場所 です。
それからh4のタイトルの上になぜか入力された分の日付がずらりと記載されてしまいます。
申し訳ないのですが、ご教授いただけると助かります。
よろしくお願いいたします。
ひたちさん
初めまして。返信遅くなって申し訳ありません。
参考サイトのように表示するコンテンツを増やす場合、
まず、page-calendar.phpの32〜40行目で以下のようにデータを格納します。
<?php //イベントスケジュールを配列に格納 $eventID = get_permalink(); //記事のURL $eventTitle = get_the_title(); //記事タイトル $eventDate = get_post_meta($post->ID,'ldate',TRUE); //イベントの日付 $eventCat = get_post_meta($post->ID,'カテゴリーのID',TRUE); //イベントのカテゴリー $eventName = get_post_meta($post->ID,'大会名のID',TRUE); //イベントの大会名 $eventTeam = get_post_meta($post->ID,'対戦チームのID',TRUE); //イベントの対戦チーム $eventIsuue = get_post_meta($post->ID,'勝敗のID',TRUE); //イベントの勝敗 $eventScore = get_post_meta($post->ID,'スコアのID',TRUE); //イベントのスコア $eventPlace = get_post_meta($post->ID,'場所のID',TRUE); //イベントの場所 preg_match('/\d{2}日/' , $eventDate , $matchDate); $eventData = $matchDate[0]."\t".$eventTitle."\t".$eventID."\t".$eventCat."\t".$eventName."\t".$eventTeam."\t".$eventIsuue."\t".$eventScore."\t".$eventPlace."\t"; array_unshift($eventArray, $eventData); ?>そして、function.phpの12〜15行め辺りでリストのヘッダーを作ります。
$tmp = <<<EOM <table class="calendar_list"> <caption>{$year}年{$month}月</caption> <tr><td>日</td><td>曜日</td><td>カテゴリー</td><td>大会名</td><td>対戦チーム</td><td>勝敗</td><td>スコア</td><td>場所</td></tr> EOM;次に、function.phpの52〜56行め辺りを以下のように変更する事で出来るようになると思います。
$dataTitle = ''; $dataID = ''; $dataCat = ''; $dataName = ''; $dataTeam = ''; $dataIsuue = ''; $dataScore = ''; $dataPlace = ''; foreach($eventArray as $eventArrayData) { $eln = explode("\t", $eventArrayData); if($eln[0] == $day){$dataTitle .= $eln[1]; $dataID .= $eln[2]; $dataCat .= $eln[3]; $dataName .= $eln[4]; $dataTeam .= $eln[5]; $dataIsuue .= $eln[6]; $dataScore .= $eln[7]; $dataPlace .= $eln[8];} } $tmp .= $dataCat."</td><td>".$dataName."</td><td>".$dataTeam."</td><td>".$dataIsuue."</td><td>".$dataScore."</td><td>".$dataPlace."</td></tr>\n";カスタムフィールドのデータで必要なものをきちんと格納し、表組の形を整えています。
記事のサンプルと違うのは、eventDataの書き出しです。
それぞれを分かりやすい変数に格納し、必要なセルにはめているので、データがあれば表示されるようになるはずです。
検証していないので分かりませんが、たぶんこの方法でいけると思います。
また、
> h4のタイトルの上になぜか入力された分の日付がずらりと記載されてしまいます。
の部分がどういう状況なのかちょっと分からないので、お答えできないです。すみません。
ご回答ありがとうございました。
上記コードに変更したら、ばっちり表示されました！
回答を待っている間にいろいろと試してみたのですが、全くうまくいかず。
本当に本当に助かりました。
ありがとうございました。
> h4のタイトルの上になぜか入力された分の日付がずらりと記載されてしまいます。
これに関してはいじっていたら表示がいつの間にか消えていました。
すみません。
それでお願いなんですが、もう一点実装させたい部分があります。
リンクはさせないといいましたが、結果が出てスコアを入力したら試合詳細を見れるようにリンクできたらなあと考え、記事内のコードを参考にやってみましたが、これまたうまくいきませんでした。
つまり、スコアの部分をクリックすると詳細ページ（singleページ）が見れるようにしたいです。
また、雨天などで中止になった場合は詳細はいらないので「中止」と入力した場合はリンクさせないということは可能でしょうか？
それぞれ今回教えていただいたコードにどのように追記したらよろしいでしょうか？
お忙しいところ申し訳ないのですが、再度ご教授ください。
よろしくお願いいたします。
質問ばかりで申し訳ないのですが、追加でお願いします。
同じ日に試合が2試合とか3試合とかの時に入力すると、項目がすべて横並びになってしまいます。
例えば
チームA ○ 5-2 グラウンド1
チームB ● 1-2 グラウンド2
と同じ日の欄に表示させたいのですが
チームAチームB ○○ 5-21-2 グラウンド1グラウンド2
というふうに各項目が各td内で横に続けて並んで表示されてしまいます。
あとできれば同日の試合の間に点線が表示されれば見やすいかなと思うのですが、できないでしょうか？
チームA ○ 5-2 グラウンド1
・・・・・・・・・・・・・・・・（←間に点線）
チームB ● 1-2 グラウンド2
本当に申し訳ないのですが、これが実装できないと前に進めず困っています。
どうかよろしくお願いいたします。
ひたちさん
返信遅くなりました。
まず、最初のコメントの試合詳細のリンクですが、Wordpressとはいえ、結局はphpなので、スコアに値がある場合はリンクを貼る、という条件分岐で対処ができます。
前回の返信の55行目で、それぞれのtdに表示する値を変数に格納しているので、そこで条件分岐させれば良いと思います。
また、次のコメントの、同日に複数の試合がある場合に改行させたい時。
それぞれの結果をspanタグなどで囲み、CSSでdisply:block;等すれば良いと思います。
if($eln[0] == $day){ $dataTitle .= '<span>'.$eln[1].'</span>'; $dataID .= '<span>'.$eln[2].'</span>'; $dataCat .= '<span>'.$eln[3].'</span>'; $dataName .= '<span>'.$eln[4].'</span>'; $dataTeam .= '<span>'.$eln[5].'</span>'; $dataIsuue .= '<span>'.$eln[6].'</span>'; if($eln[7]){$dataScore .= '<span><a href="'.$dataID.'">'.$eln[7].'</a></span>';}else{$dataScore .= '<span>'.$eln[7].'</span>';} $dataPlace .= '<span>'.$eln[8].'</span>'; }分かりやすくコードを記載して返信していますが、記事内容とだんだん離れた質問内容になっています。
（phpの条件分岐や、CSSの話になっているので）
先にも書きましたが、wordpressはphpです。
phpやcssについては是非ご自身で勉強なさってください。
それでも分からない場合、ご依頼いただければ有料ですが対応可能ですのでその旨ご連絡ください:)
返信ありがとうございました。
PHPの本などを読んでやっていたのですが、なかなかうまくいかずご迷惑をおかけしました。
教えていただいた内容で実装できそうです。
ありがとうございました。
おっしゃる通りPHPの勉強をもっとしていこうと思います。
この度は本当にありがとうございました。
こんにちは！
以前質問をさせていただき、無事完成してアップすることができました。
ところが急にカレンダーの上にエラーコードが出ていました。
Warning: file_get_contents(http://…@holiday.calendar.google.com/public/full-noattendees?alt=json&start-min=2014-01-01&start-max=2014-12-31) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /home/～～～～/functions.php on line 389
というものです。
調べたのですがよくわかりません。
こちらのサンプルサイトをふとのぞかせてもらったら同じようなエラーコードが出ていました。
対処方法が分かれば教えてください。
よろしくお願いいたします。
返信遅くなってスミマセン。
こちらでも今調べているところなので、分かりましたら記事にて対処方法を追記したいと思います。
多分、グーグルの祝日用データを取得して使っているので、その辺りに変更があったのではないかなーと思っています。
私のサイトにも、12月30日から急にWarningが表示されました。色々やってみたのですが、上手くいかず。同時に制作していたテスト用のサイトのものは何故か大丈夫で、これを参考に、同様に新しいデータベースに「手動のFTP」で「wordpress4.01」をインストールすることで緊急処置として解決しました。自動インストールは、「wordpress4.1」になってダメでした。
リバーさん
返信遅くなりました。コメントありがとうございます。
うーん、ナンバリングが関係しているのでしょうか？
こちらでも色々と試してみたいと思います。情報ありがとうございます！
こんにちは。
以前質問しましたWarningのエラーコード、解決しましたのでご報告します。
下記サイトの「現在使用可能なコード」に書き換えたところ、エラーコードが消え、また問題なくカレンダーも表示されています。
WEB DEVELOPMENTさんの「Googleカレンダー APIから祝日を取得する方法」という記事です。
http://www.unionnet.jp/develop/google%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC-api%E3%81%8B%E3%82%89%E7%A5%9D%E6%97%A5%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
バックアップをとって試してみてください。
Mei Koutsukiさんもリバーさんもありがとうございました。
「Googleカレンダー APIから祝日を取得する方法」の変更に伴い
if($i<10){
$holinum = $year.'-'.$month.'-0'.$i;
}else{
$holinum = $year.'-'.$month.'-'.$i;
}
を
if($i<10){
$holinum = $year'.$month.'0'.$i;
}else{
$holinum = $year.$month.$i;
}
に変更する必要もあるようです。
（まだ不完全だったら他の方報告お願いします）
ちょっとつまづいたので記録を残しておきます。
はじめまして。
コードサンプルと皆様のコメントのおかげで、実装できました。
１つ質問なのですが、イベントが複数日あり、
カスタムフィールドでもう１つ追加（例：ldate2）した場合、
カレンダーに複数日に表示することは可能でしょうか？
‘meta_query’ => array(
‘relation’ => ‘OR’,
array(
‘key’ => ‘mldate’,
‘value’ => array( $min, $max ),
‘compare’ => ‘BETWEEN’
),
array(
‘key’ => ‘ldate2’,
‘value’ => array( $min, $max ),
‘compare’ => ‘BETWEEN’
)
),
で指定するとは思うのですが、
それ以降がさっぱり分からず。。。
もし可能でしたらご教授ください！
こんにちは、はじめまして。
こちらの記事を参考に、自由度の高いカレンダーを作りたくて参考にさせていただいてます。
わたしはカスタムフィールドに「Advanced custom fields pro」を使用していますが、イベント開催日をデイトピッカーで再現しようとしたところ、日付フォーマットがどうもマッチしないようです。
pro版は「Y年m月d日」と表示されるように設定してあって、カレンダー以外の表示は、the_field(‘field_name’);で、設定通りに表示されます。
Mei Koutsukiさんのコードにある
$eventDate = get_post_meta($post->ID,’field_name’,true);
でカレンダーに表示させるには、何かほかに日付のフォーマットに関して加えたほうが良いのでしょうか？