カスタム投稿タイプを使ってカメラ専用のページを作る②

カスタム投稿タイプを使ってカメラ専用のページを作る①では、専用のプラグインをインストールし、設定するところまでを説明しました。

今回はカメラ専用のテンプレートの作り方について説明したいと思います。
※実際に作成したページはこちら(Olympus PEN miniの部屋

用意するテンプレートは3つ

用意するテンプレートは下記の3つです。

  1. カスタム投稿タイプのTOPページ・・・・オリンパス PEN mini
  2. カスタム分類(タクソノミー)のアーカイブページ・・・・例:日常
  3. カスタムポスト・・・・カスタム投稿の投稿ページ(シングルページ)

①カスタム投稿タイプのTOPページを作る

WordPressではカスタム投稿タイプのTOPページのテンプレート名は、archive-○○○.phpと名前をつけられます。○○○にはカスタム投稿タイプのスラッグ名が入ります。
(既存のarchive.phpをコピーして複製して作ってもOKです。)

例ではラベル「オリンパス PEN mini」、スラッグが「olympus_pen_mini」となっていますので、archive-olympus_pen_mini.phpという名前で作ります。

作ったテンプレートはサーバーのテンプレートファイルが保存されているフォルダにアップロードします。(archive.phpなどが入っているところです。)
2013-01-31_11h24_36

これでカメラ専用ページが(TOP)表示されるようになりました!
2013-01-31_11h02_59

②カスタム分類で表示させるアーカイブのページを作る

カスタム分類とはタグやカテゴリページの代わりになるページです。
WordPressではtaxonomy.phpと名前をつければ、カスタム分類のページはこのテンプレートで表示されます。

カスタム投稿タイプのテンプレートと同様にtaxonomy.phpもサーバーにアップロードします。

2013-01-31_11h16_15

③カスタムポストのシングルページを作る

カスタムポストのシングルページは実際に投稿した内容が表示される所です。
WordPressではsingle-○○○.phpと名前をつけるようになっていますが、○○○にはカスタム投稿タイプのスラッグ名が入ります。(①と同じですね!)

スラッグはolympus_pen_miniですので、テンプレートはsingle-olympus_pen_mini.phpと名前をつけます。

テンプレートは①②と同様にサーバーにアップロードします。

2013-01-31_11h29_50

これでカスタム投稿タイプのページすべてが表示されるようになります!

鬼門のパンくずリスト

2013-01-31_11h54_50

カスタム投稿タイプでテンプレートを作った時に一番ハマりにハマッたのがパンくずリストでした。出来るのに半日かかりました(^^ゞ

まずカスタム投稿タイプのパーマリンクを変更させるプラグインをインストールします。

Custom Post Type Permalinks

プラグインを有効にしたら設定>パーマリンク設定で、カスタム投稿タイプのURLを変更できるようになりますので、/%postname%/と入力したら、変更を保存をクリックします。

2013-01-31_12h14_58

そして①~③のテンプレートでパンくずリストを表示させる部分に以下コードを書きます。

①archive-olympus_pen_mini.php

<ol>
<li class="first"><a href="<?php bloginfo('url'); ?>">HOME</a></li>
<li><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></li>
</ol>

②taxonomy.php

<ol>
<li class="first"><a href="<?php bloginfo('url'); ?>">HOME</a></li>
<li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
<li><?php single_tag_title(); ?></li>
</ol>

③single-olympus_pen_mini.php

<ol>
<li class="first"><a href="<?php bloginfo('url'); ?>">HOME</a></li>
<li><a href="<?php echo get_post_type_archive_link(get_post_type()); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li>
<li><?php the_title(); ?></li>
</ol>

別館ページのように運営したい!

私の場合、カスタム投稿タイプで作ったカメラ専用のページは、別館のようにしたかったのでスタイルシートやサイドバー、フッターなども変更しています。

用意したテンプレートは

  • style-2.css(スタイルシート)
  • header-2.php(ヘッダー)
  • sidebar-2.php(サイドバー)
  • footer-2.php(フッター)

まず、header-2.phpにstyle-2.cssを読み込ませるように書きます。

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-2.css" type="text/css" media="screen,tv,print" />

①~③のテンプレートで、ヘッダーを読みこむ部分にそれぞれ

<?php include (TEMPLATEPATH . "/header-2.php"); ?>

と書きます。

サイドバー、フッターも同様に①~③のテンプレートを変更していきます。

<?php include (TEMPLATEPATH . "/sidebar-2.php"); ?>
<?php include (TEMPLATEPATH . "/footer-2.php"); ?>

サイドバーにカスタム分類のみ表示させる

カスタム投稿タイプで使っているサイトバーは今のところカスタム分類のみ表示させるようにしています。

<div class="contents">
<h3>ギャラリー</h3>
<div class="textwidget">
<?php wp_list_categories('title_li=&taxonomy=gallery'); ?>
</div>
</div>

taxonomy=○○○の部分にカスタム分類のスラッグ(gallery)を書きます。

Googleサイトマップを更新する

カスタム投稿タイプを作ったら、ダッシュボードの設定>XML-sitemapを開きます。
Custom post typesのところにチェックをいれます。
2013-01-31_16h16_57

index.phpに表示させる

カスタム投稿タイプを作っただけでは、index.phpに表示させている「最新ページ」には表示されません。

まず、カスタム投稿タイプを作るページでオプションを開き、Advanced OptionsでHas ArchiveをTrueに変更します。
2013-01-31_16h38_13

それでもindex.phpに表示されない場合は、PHPコードを記入します。

<?php
$my_query = new WP_Query( array(
'post_type' => 'olympus_pen_mini',
'posts_per_page' => '3',
'orderby' => 'date',
'order' => 'DESC'
));
if( $my_query->have_posts() ) :
?>
<div id="taxonomy">
<h3>Olympus PEN mini</h3>
<ul>
<?php while( $my_query->have_posts() ) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; wp_reset_query();?>
</ul>
</div>
<?php else : ?>
no posts!
<?php endif; ?>

feedを変更する

通常のfeedにはカスタム投稿タイプの投稿が表示されませんので、function.phpにコードを追加します。

今までのものと一緒に表示させたい場合
例:http://○○○/feed

function myfeed_request($qv) {
if (isset($qv['feed']))
$qv['post_type'] = get_post_types();
return $qv;
}
add_filter('request', 'myfeed_request');

カスタム投稿タイプのみのfeedを取得したい場合
例:http://○○○/olympus_pen_mini/feed

function mysite_feed_request($vars) {
    if ( isset( $vars['feed'] ) && !isset( $vars['post_type'] ) ) {
        $vars['post_type'] = array( 'post', 'news', 'videos' );
    }
    return $vars;
}
add_filter( 'request', 'mysite_feed_request' );

これで最低限の表示が出来るようになりました!(たぶん)
またカスタマイズなどしましたら書いてみたいと思います!

参考サイト:ありがとうございましたm(_ _)m

関連記事リスト

WordPressで特定のカテゴリ(タグ)記事だけを表示させる方法
WordPressで特定のカテゴリやタグ内の記事を表示させる方法。アイ...

WordPressでサイトアドレス(URL)を変更する方法について
WordPressでサイトアドレス(URL)を変更する方法について(バ...

カスタム投稿タイプを使ってカメラ専用のページを作る①
カスタム投稿タイプを使ってカメラ専用のページを作りました。プラグインの...

WordPressで精度の高い関連記事を表示させるプラグインYARPPの設定方法
ブログの記事が増えてきたらPVを増やすためにも、より精度の高い関連記事...

WordPressの固定ページでカスタムフィールドを使って関連記事を表示させる方法
WordPressの固定ページでカスタムフィールドを使って関連記事を表...

カテゴリごとに異なる画像やテキストを表示させるWordPressプラグイン(Category Meta plugin)
カテゴリページごとに違う画像やテキストを挿入したい場合に使えるプラグイ...

wordpressのデータベース(mySQL)に独自テーブルを作りデータを取り出す方法まとめ
WordpressのMySQLデータベースに独自テーブルを追加して、そ...

WordPress関連のコンテンツ移転
WordPressのカスタマイズ関連の情報がこれから多くなりそうなので...

【覚書】WPの固定ページを使ってサイトを作る
WordPressの固定ページを使ってブログではなく、サイトのように使...

【覚書】ポスト記事の下に同カテゴリ内の関連記事をサムネイルつきで表示させる
個別ポスト記事(single.php)で、記事下に同カテゴリ内の関連記...

コメントを残す

このページの先頭へ