WordPress 3.0.x でカスタム投稿を使ったコーポレートサイトを作る

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

最近の案件で「カスタム投稿タイプ」を使ったコーポレートサイトを作ったのですが、
サーバの関係上、WordPress 3.0.1しか使えなかったもので、えらく苦戦しました。

せめて3.1以降なら…と思ったりもしましたが、そこはどうにもならないことですし
どうにかこうにか形にすることができたので、作業の復習も兼ねて記事にしておきます。

自分なりに動かした作業のメモなので、
「ここは間違っているんじゃないの?」とか
「ここはもっとこうすれば楽にできたじゃない」というところがありましたら、是非ともご指摘お願い致します。

ご連絡は「このサイトについて」のページ内、コンタクトフォームから、お気軽に是非!

カスタム投稿タイプを作成する

カスタム投稿設置で参考にしたサイト様や記事の一覧と、作業手順の簡単なメモです。

※今回の作成で実現したかったこと

  • カスタム投稿タイプを使って簡単に入力できるようにする
  • カスタム投稿タイプ内にカスタムフィールドを使って、複数の項目も入力しやすくする
  • カスタム投稿が表示されているときにはヘッダーを変更する
  • カスタム投稿一覧を表示する
  • カスタムタクソノミーごとの一覧を表示する

カスタム投稿タイプの設置

3.0.xに設置する流れとコードの確認

http://kachibito.net/wordpress/custom-post-type-list.html

WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト|かちびと.net

子テーマを作成して functions.php にゴリゴリとコードを追加。
プラグインを使う方法も試してみたのですが、今回のカスタム投稿タイプ追加の場合、私にはコードを書き込む方が性に合ってました。

クライアントが積極的に更新するコンテンツというのもあって、
管理画面メニューに表示される内容もできるだけ噛み砕いた内容にしないといけなかったので。

ちょっと長いコードですが、phpも身につけたいので頑張ります。

ヘッダーを独自のものにする

カスタム投稿タイプを表示させるとき(single-{xxx}.php)、ヘッダーを専用のものにしたかったのですが
(正確には、固定ページ・ポスト・カスタム投稿ごとにヘッダーにそれぞれ違う画像を表示させる)
条件分岐がどうにもうまくいかなかったので、
こちらの記事を参考に。

http://kachibito.net/wordpress/building-new-contents.html

WordPressのカスタム投稿タイプとカスタムタクソノミーを使って新たに別のコンテンツを作ったので、制作プロセスを書きました|かちびと.net

「レイアウトを独自のものにする」のところです。
私は header.php と header-2.php を作り、
header.php には固定ページごとの条件分岐とヘッダーの内容、
header-2.php にはカスタム投稿タイプ個別ページ(single-{xxx}.php)のためのヘッダー内容を記述しました。

single-{xxx}.php には

<?php get_header('2'); ?>

と記述すれば、先程作った header-2.php が読み込まれる訳ですね。

これ便利だなあ…ちゃんと覚えておこう。

archive.php を使わずにアーカイブページをつくる

WordPress 3.0.x では、archive.php とか archive-xxx.phpが使えないのです。
せめて3.1以降なら使えたのになあ…
などと悔やんでも仕方のないことなので、色々探し回ってみました。

http://8bitodyssey.com/archives/1624

カスタム投稿タイプ(Custom Post Type)の導入と使い方 [WordPress 3.0]|8bitOdyssey

こちらのサイトデザインが本当に可愛くてお邪魔するたび和んでしまう…いやいや。
こちらの「カスタム投稿タイプを表示する」のところ。

カスタム投稿タイプの記事一覧を表示するカスタム投稿一覧専用の固定ページテンプレートを作り、(xxxxx-page.php とか)

<?php
/*
Template Name: カスタム投稿タイプの一覧を表示させる固定ページのテンプレート
*/
?>

ページテンプレートの名前をつけて。
固定ページを作成して、読み込む。

8bitOdyssey さんの記事にある 「loop.php の後あたりに追加したコード」を自分なりに書き換えて、

<!-- 8bitOdyssey さんの記事のコードを一部書き換えたもの -->
<?php $loop = new WP_Query( array( 'post_type' => 'xxx', 'posts_per_page' => 9 ) ); ?>
 
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
 
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
            <div class="entry-meta">
                <?php twentyten_posted_on(); ?>
            </div><!-- .entry-meta -->
             
            <div class="entry-content">
            <?php the_content(); ?>
            </div>
        </div>
<?php endwhile; ?>

表示させたい内容を xxxxx-page.php に html と php であれこれ書き込んで、えいやー!
っとすると記事の一覧が表示されました。

しかし、先に20件くらいカスタム投稿タイプで記事を作成していた訳なんですが
何故かページ送りができない。
1ページで終わっちゃうんです。

これは困るよーという訳で

http://cat-speak.net/2011/07/05/225/

固定ページにカスタム投稿タイプのアーカイブを表示する|Cat Speak

こちらにたどり着きましたが、うまくいかず。

※カスタム投稿タイプのスラッグ(post-type-name?)と固定ページのスラッグを同じものにしてしまうと
 そのせいでページ送りがうまくいかなくなるらしいです。
 (こちらの記事の最後、「その他」参照)
 今回私はスラッグ名を別にしていたので、これが原因ではなかったようでした。

新しくループを設定してやればいい、ということが分かったので、またぐるぐるしつつ

http://www.petitec.com/2010/11/customposttype-using-paginatio/

WordPressのカスタム投稿タイプの一覧ページでページ送りを利用する|ちいさな創々

こちらのコードを参考にして書いたら、うまくいきました!

私は以下のように書いてみました。

<!-- ページ送りを有効にするための新規ループ名を設定 -->
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('post_type=xxx' . '&amp;paged=' . $paged . '$posts_per_page=9');
?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

<!-- ここから表示内容 -->
	<!-- 表示させたいループ内容を記述 -->
<!-- 表示内容ここまで -->

<?php endwhile; ?>

<?php get_template_part('pagenation'); ?><!-- ページナビゲーションを呼び出す -->
<?php $wp_query = null; $wp_query = $temp; ?>
<!-- ループここまで -->

ページナビゲーションは 別に pagenation.php を作成し、
それを読み込む形にしています。

カスタム投稿とカスタムフィールド

今回のカスタム投稿タイプの中では、カスタムフィールドを多く使用しました。
そこで、一覧ページにも カスタムフィールドの値を表示させたく、

http://8works-web.com/2011/06/29/wordpress_register_post_type_custom_field_template/

WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」|8works

こちらの記事を参考に。
というか、やるべきことを実現するためにぐるぐるしてて、一番最初に辿り着いたのがこちらの記事だったのですが
こちらの記事に辿り着けなかったら間違いなくここまで頑張れませんでした…ありがとうございます。
すごくわかりやすくて素敵。

カスタム投稿内でのカスタムフィールドの活用法は、ほぼ 8works さんの記事を参考にして作らせていただきました。

カスタムタクソノミー(分類)ごとの一覧をつくる

http://webdesignrecipes.com/wordpress-corporate-website/

WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)|Webデザインレシピ

こちらの「11. カスタム分類(タクソノミー)」から
taxonomy.php を作成しました。

ループの内容って一般的な?ループと変わったことはしなくて良かったんですね…何故かやたらめんどくさいことをしてました。

書いたループはこんな具合。

<?php if(have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?><!-- ループ開始 -->

<!-- ここから表示内容 -->
	<!-- 表示させたいループ内容を記述 -->
<!-- 表示内容ここまで -->

	<?php endwhile; ?><!-- ループ終了 -->
<?php else : ?>
	<div class="">
		<p>該当するものがありませんでした。</p>
	</div>
<?php endif; ?>

今回の場合、2種類の分類を作成したのですが、
表示するレイアウトはどちらも同じで良かったので、 taxonomy.php ひとつで作っています。

だいたいこんな感じで

おおよそこんな流れでどうにかこうにか形にできました!
(他にもあれやこれややってますが、カスタム投稿タイプ関係はこのあたりで)

2012年に WordPress3.0.x の作業まとめなんか役に立たないだろうと思いつつ、
しかもカスタム投稿タイプなんてもっともっと楽に導入できるようになってるのでなおのこと需要無いでしょうが、
自分のために記事にしておきました。
WordPressやるぞー、的な。
うん。

参考にさせていただいたサイト・ブログの著者様、本当にありがとうございました!

参考サイト・参考書籍まとめ

参考書籍(※リンク先アフィリエイト)

参考サイト(順不同・敬称略)
かちびと.net
8bitOdyssey
Cat Speak
ちいさな創々
8works
Webデザインレシピ

ありがとうございました!!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。