このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

“WordPress” カテゴリの記事(52件)

カスタム投稿タイプの日付ベースアーカイブとパンくずリスト

この記事は2015年1月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress のカスタム投稿タイプをブログのように使う場合、月別アーカイブページを表示させたい場合があります。この時のパンくずリストについて、自分でパンくずリストを実装する場合は何とでもなると思いますが、Breadcrumb NavXT などのプラグインを利用している場合はなかなか思うように表示されません。

例えば、カスタム投稿タイプ “blog” の2015年1月のアーカイブページの URL は、http://example.com/blog/date/2015/01/ となりますが、このページのパンくずリストが本来ならば、

Home > ブログ > 2015年 > 1月

と表示させたくても

Home > 2015 > 1月

のように、カスタム投稿タイプのアーカイブページへのリンクが表示されず、さらに2015年のリンク先が、通常の投稿の年別アーカイブページ http://example.com/2015/ になってしまいます。

これは、そもそもカスタム投稿タイプの日付アーカイブは WordPress に標準装備されていない機能らしく、パンくずリストを自分で実装する必要があるようです。

今回このブログの月別アーカブページのパンくずリストを、Breadcrumb NavXT を使ったまま、テンプレートで書き替えてみました。

“カスタム投稿タイプの日付ベースアーカイブとパンくずリスト” の続きを読む »

カスタムメニューにアイキャッチ画像を表示

この記事は2015年1月2日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress のカスタムメニューを使って、任意の固定ページをリストアップし、それぞれに登録したアイキャッチ画像を表示する方法を考えてみました。

通常、カスタムメニューの出力には wp_nav_menu 関数を使いますが、これでは固定ページに関連付けられている情報を取得することができません。

そこで、一旦 wp_get_nav_menu_items 関数でカスタムメニュー項目の配列を取得します。そこから各メニュー項目に設定した固定ページのアイキャッチ画像の属性を取得し、タイトルや URL などと共に自由なスタイルで出力します。

<ul>
<?php
$menu_items = wp_get_nav_menu_items('menu_name');  // menu_name: カスタムメニューの名前
foreach ($menu_items as $menu):
  $page_id = $menu->object_id;
  $thumbnail_id = get_post_thumbnail_id($page_id);
  $image_attributes = wp_get_attachment_image_src($thumbnail_id); 
  $content = get_page($page_id);
?>
  <li class="<?php echo $content->post_name; ?>">
    <a href="<?php echo get_permalink($page_id); ?>">
      <img src="<?php echo $image_attributes[0]; ?>" alt="" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
      <?php echo $content->post_title; ?>
    </a>
  </li>
<?php
endforeach;
?>
</ul>

上記では、wp_get_attachment_image_src 関数の初期値で thumbnail サイズの画像を取得していますが、異なるサイズの画像を取得する場合は、”medium”, “large”, “full” あるいは “array(32,32)” という形でオプションを指定します。

また、アイキャッチ画像だけでなく、<?php echo $content->custom_field_name; ?> のようにして、カスタムフィールドの値も表示させることができます。

この方法で、このサイトのトップページの3つのコンテンツを表示しています。実際は、更にアイキャッチ画像が無い場合に代替画像を表示するための条件分岐とか入れています。

1 4 5 6