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

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

今回はカメラ専用のテンプレートの作り方について説明したいと思います。
※実際に作成したページはこちら(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のカスタマイズ関連の情報がこれから多くなりそうなので...

2013-07-01_09h50_49

サイトの読み込みページを早くするWordPressプラグイン「Quick Cache」
Googleのスコアカードでサイトの状況の「ページ読み込み時間のパフォ...

WordPress親固定ページで子ページの記事一覧を表示させる方法
サイト型アフィリエイトサイトを作る時に便利なのが固定ページの利用です。...

2013-08-22_14h32_15-540x4081

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

2013-01-28_16h13_53

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

2013-02-21_15h44_16

WordPressにCSV Importerを使ってWeb APIデータをインポートする
Web APIで取得したXMLデータをCSVで保存をし、そのデータをW...

2012-07-27_00h01_13

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

2012-07-06_12h28_56

WordPressにソーシャルボタンを設置するプラグイン「WP Social Bookmarking Light」
WordPressにソーシャルボタンを設置するプラグイン「WP Soc...

image-size

投稿する画像を任意のサイズに変更するワザ
WordPressでブログを投稿していると何かと面倒になってくるのが、...

2012-05-10_1003

WordPressデータベースバックアップに必須のプラグインWP-DBManager
WordPressデータベースバックアッププラグインのWP-DBMan...

コメントを残す

このページの先頭へ