制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPressカレンダーにタイトル表示[WordPress]

カレンダーにタイトル表示[WordPress]

2013年11月27日WordPress 便利コード 
カレンダーにタイトル表示[WordPress]記事のアイキャッチ画像

WordPressのカレンダーに、ただただリンク付きのタイトルを表示したいだけという人の夢を叶えるコードを紹介します。function.phpにコードを書くだけです。

まえがき

プラグインとかじゃなくてWordPressのカレンダーにただタイトルを表示してリンクを張る方法が無いか探してて、実現するまでに結構苦労したので覚え書きも兼ねてエントリーします!因みにfunction.phpにコードを追加するスタイルです。

タイトル付きのカレンダー

タイトル付きのカレンダーの関数

WordPressでイベントカレンダー』を参考にして作った下のコードを自分のfunction.phpに追加します。
参考サイトに載っているコードをそのままコピペすると「id=”today”」の日付のセルにタイトルが表示されんとです笑

function my_get_calendar(){
  ob_start();
  get_calendar();
  $output = ob_get_contents();
  ob_end_clean();
  if(preg_match_all('@<td( id="today")?><a href="' . get_option('home') . '/(\?m=)?([^"]*?)" title="[^"]*?">([0-9]+?)</a>@i',$output, $matches)){ 
	foreach($matches[0] as $key => $match){
		$date  = preg_replace('@/@', '', $matches[3][$key]);
		$year  = substr($date, 0, 4);
		$month = substr($date, 4, 2);
		$day   = substr($date, 6, 2);
		
		global $wpdb;
		$posts = $wpdb->get_results("SELECT ID, post_title "
		. "FROM $wpdb->posts "
		. "WHERE YEAR(post_date) = '$year' "
		. "AND MONTH(post_date) = '$month' "
		. "AND DAY(post_date) = '$day' "
		. "AND post_type = 'post' AND post_status = 'publish' "
		. "ORDER BY post_date DESC"
		);

		$link = '';
		foreach($posts as $post)
		$link .= '<div><a href="'. get_permalink($post->ID) . '">' . $post->post_title . '</a></div>';

		$output = preg_replace('@' . preg_quote($match) . '@', $match . $link, $output);
		}
	}
	return $output;
}

カレンダーの出力

出力は簡単で、上で追加した関数「my_get_calendar()」をechoしてやるだけです。

<?php echo my_get_calendar(); ?>

記事の本文をカレンダーに出力

改行とか入れたいときとかは、タイトルの入力エリアじゃ役不足なので記事本文を表示するコードも載せておきます。

function my_get_calendar(){
  ob_start();
  get_calendar();
  $output = ob_get_contents();
  ob_end_clean();

  if(preg_match_all('@<td( id="today")?><a href="' . get_option('home') . '/(\?m=)?([^"]*?)" title="[^"]*?">([0-9]+?)</a>@i', 
    $output, $matches)){
    foreach($matches[0] as $key => $match){
      $date  = preg_replace('@/@', '', $matches[3][$key]);
      $year  = substr($date, 0, 4);
      $month = substr($date, 4, 2);
      $day   = substr($date, 6, 2);

      global $wpdb;
      $posts = $wpdb->get_results("SELECT ID, post_content "
        . "FROM $wpdb->posts "
        . "WHERE YEAR(post_date) = '$year' "
        . "AND MONTH(post_date) = '$month' "
        . "AND DAY(post_date) = '$day' "
        . "AND post_type = 'post' AND post_status = 'publish' "
        . "ORDER BY post_date DESC"
      );

      $link = '';
      foreach($posts as $post)
     	$link .= '<div><a href="'. get_permalink($post->ID) . '">' . wpautop($post->post_content) . '</a></div>';
      $output = preg_replace('@' . preg_quote($match) . '@', $match . $link, $output);
    }
  }
  return $output;
}

ハイライトにしてある行が変更箇所です。「post_title」を「post_content」に変更しています。
また、「$post->post_content」で本文を取得すると、改行やpタグが一切入らない状態で出力されるので、「wpautop()」関数で自動整形するようにします。

     	$link .= '<div><a href="'. get_permalink($post->ID) . '">' . wpautop($post->post_content) . '</a></div>';

2014年2月2日 追記

営業日カレンダー等だと日付にリンクがはられているのが不都合になることもありますね。
実際KoToRiも経験しました。
なのでWordPressから出力したカレンダーの日付のリンクを消す方法を紹介します。
かなりの力技ですが笑

jqueryを使います。
カレンダーを表示するページのjquery読み込みタグの後にこのようにfunctionを追記してください。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() { 
$("#wp-calendar tbody td").children("a").each(function(){
   $(this).contents().unwrap();
});
});
</script>

「$(“#wp-calendar tbody td”).children(“a”)」でテーブルセルの最初のa要素(=日付テキスト)を参照。
「$(this).contents().unwrap();」で日付テキストのaタグのみをピンポイントで削除しています。

この関数はカレンダーに表示するタイトルや本文を「div」で囲っている場合を想定しています。
それ以外の場合は関数のセレクタ部分を適宜変更してください。

まとめ

WordPressのカレンダーのプラグインは高機能なものも多いのですが、高機能すぎて設定が良く分からない><
こっちはただカレンダーにタイトルを表示したいだけなのにムキー!みたいなことになってなのですが解決できてよかったです。
ずっとシンプルにタイトルだけカレンダーに表示してくれる方法ないかな~と思ってました。
参考サイト様ありがとうございました。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • Naoya

    お世話になっています。

    こちらのカレンダーでも試してみました。

    記事タイトル、月の前後表示されるようになりました。
    月の前後も無事動きます。

    指定のカテゴリーだけ表示(複数)にする場合どうすればいいでしょうか?

    ご指示よろしくお願いします。

  • Naoya

    度々、質問すいません。

    ローカルではカレダー上手くタイトルが表示されるのですが、
    サーバーに上げると表示カレンダーが表示されません。

    「$output = preg_replace(‘@’ . preg_quote($match) . ‘@’, $match . $link, $output);」
    を削除してUPすると、カレンダーは表示しますが、記事タイトルがでず、日付だけリンクになります。

    対応策はあるんでしょうか?
    よろしくお願いします。

    • kotoriblog

      Naoyaさん

      お返事遅れてしまってすみません。ぎっくり腰をやってしまいPCに向かえませんでした。

      まず、カレンダーで指定のカテゴリー(複数)をソートする機能ですが結論からいいますと、私では分かりません。

      . “FROM $wpdb->posts ”
      . “WHERE YEAR(post_date) = ‘$year’ ”
      . “AND MONTH(post_date) = ‘$month’ ”
      . “AND DAY(post_date) = ‘$day’ ”
      . “AND post_type = ‘post’ AND post_status = ‘publish’ ”
      . “ORDER BY post_date DESC”

      この辺に、カテゴリー指定のコードを追記する形となると思うのですが、データベースに余り詳しくなくお力になれず申し訳ありません。

      次に
      >ローカルではカレダー上手くタイトルが表示されるのですが、
      >サーバーに上げると表示カレンダーが表示されません。
      これって何かしらphpのエラーって出てますか?(デバックモードでも試してみてください)
      そのエラーが解決のヒントになるかもしれません。

      • Naoya

        KOTORIさん

        返事ありがとうございます。腰の方は大丈夫でしょうか?私も経験ありますので分かります(汗)

        ソートの件は了解しました。

        やはり、表示が上手くいきまん・・・
        PHPエラーもでないです・・・・・WPのバーションのせい? 4.3.2です。
        さくらサーバーにアップはしています。

        表示がとても困っていて・・・解決策うかばないでしょうか?

      • Naoya

        KOTORIさん 度々すいません。

        よくわからないですが、サーバー上で表示されました。が、

        月送りは表示されてるんですが、月送りをクリックするとカレンダーが表示されないです・・・

        archive.phpには「」はいっています。

        ※ローカルでは上手く動いているんですが、サーバー上では月送りのページは動いてないです。

        • Naoya

          KOTORIさん お世話になってます。
          前月送りのカレンダーが表示しない件わかりました。

          タイトルに「@」が入るとダメだったみたいです。

          お騒がせしました。 これからも記事、楽しみにしています。

  • anma

    KoToRiさん
    ソースをそのままコピペで使わせていただきましたがタイトルが表示されず数字のままです。
    WordPressのバージョンなど関係ありますでしょうか?
    因みにWordPress 4.4.1を使用しています。

    • kotoriblog

      anmaさん
      こんにちは。お返事遅れてごめんなさい。
      コード的にバージョン関係ないような気がしますが。。。
      バージョン確認までしていないのでもしかすると最新バージョンだと動かなかったりするかもしれません。
      因みに本文表示のコードでもダメですか?