Web情報配信『Wiwi connect』» Blog Archive » カスタム投稿を使ってWebサイトを作ってみよう！

カスタム投稿を使ってWebサイトを作ってみよう！

2011 * Apr * 6

カテゴリー: Webテクニック
タグ: PCページ制作, wordpress

シェア:
Share on Tumblr
Tweet

wordpress3.0から導入されたカスタム投稿タイプが気になって仕方なかったので、ちょっとずつ触っていたのですが、単発的な知識ではなくて、サイトを作成する上で必要なことを纏めて知りたいなっと思い、サイトを作ってみました！

胸をはって正しい使い方をしているか…というのは言えないのですが、こうしたい時にはこれが使えるよ！ぐらいの豆知識にはなるかもしれませんので、カスタム投稿に関する事以外でのサイトを作っていく過程で必要だった事柄もまとめてレクチャーしようと思います！

今回の制作の流れ

サイト設計をしよう！

注意事項

今回はカスタム投稿を利用することを前提にしているので、それを念頭にサイト設計をします。
また、カスタム投稿の使い方は、下記のような使い方を今回はします。

メニューごとに管理を分けるため
細かくテンプレートを分けるため

サイトの内容を決めよう

春なので和柄サイトをつくろうと思います。どの季節でも良いのですが、春は特に和柄を取り入れたくなります。
ただ和柄のサイトだけでは運営していくのに目標を見失いそうなので、次のようなサイトにしようと思います。

お絵かき文字の展示サイト
日常的な日記の掲載

お絵かき文字というのは…私があまりに字が下手でへにょへにょしていることをカバーしようとした結果、絵のようにしてみたら楽しいかもしれないと書道の時間にしていたことです。
字は綺麗な方が絶対自分の為になるので、今からでもまた習いたいものです…

必要なメニューのあらいだし

今回必要なメニューは下記の通り。

topの挨拶
サイトの説明
制作者についての説明
リンクに付いての説明
お問い合わせフォーム
作品一覧
作品のカテゴリー一覧
作品単体説明
作品そのものの表示
日記一覧
日記個別ページ
新着一覧
検索フォーム
検索ページ

サイトマップ作成！

上記を元に、サイトマップを作成したのが下記です。
ちなみに、サイトマップはmac appで販売されている「MindNode」を使って作成します。
マインドマップを作りながらサイトマップへの変更が簡単にできるので、便利です！

書き損じましたが…検索画面は常に表示させ、検索結果は別に遷移するようにしました。(実はサイトが出来上がった後に検索枠を作ってないことに気づきました、検索テンプレートは作っていたんですが…)

サイトマップから投稿タイプを選定しよう

wordpressの投稿には、通常の投稿、固定ページ、カスタム投稿の3タイプがあります。
この三つのどれが良いか、また、該当するテンプレートが必要になりますので、どこをどのテンプレートにするかなどを考えます。

検索結果はsearch.phpで個別に作ります。上記には書いていませんが、404エラーページは個別に、各ページごとにエラーが出た場合の対策を打ちます。

サイトをデザインしよう！

ここはさくーっと飛ばします。
いつも通り、「紙に下書き」→「cacooでワイヤーフレームをしっかり組む」→「photoshopでごりごり作る！」この流れで作成。
完成したデザインはこんな感じ。

サイト構造を把握してコーディングしていこう！

ここはさくーっと飛ばします。
htmlとcssと必要なjsを組み込みます。
後でごちゃごちゃにならないようにするため、テンプレート分だけhtmlを作ります。その際、名前を付ける時には実際のものを付けるようにします。急いでいるときにはアーカイブにあたるページ分だけ作るということもありますが、大体必要な分だけ作っておきます。

※cssはwordpressのテンプレートタグに置き換える際に楽になるように、あらかじめstyle.cssをindex.htmlなどと同じ階層に置いておき、もし個別に沢山作るときには、このstyle.cssで呼び出しするようにしておきます。

次のテンプレートタグの置き換え時にごちゃごちゃにならないようにメモを作っておきます。↓こんな感じです。

wordpressテンプレートタグへ変更しよう！

カスタム投稿の注意事項

カスタム投稿はこの投稿の括りそのものが管理画面を見るに、一つの器になっているようですが、そうではなく、あくまで分けているだけなのです。整列してるけれど色分けなどはされてないような感じです。
なので何も設定しなければ、http://インデックスのアドレス/カスタム投稿タイプ名/記事アドレス、とはならず、http://インデックスのアドレス/記事アドレス、となってしまいます。記事固有のアドレスだけが唯一通常の投稿との差だからです。これは通常の投稿記事同士もそうですね。

カスタム投稿をはっきり区別させる、ディレクトリーを分けていくには、大雑把に言うとテンプレートを作成するしかあります。
イメージとしては、より細かいテンプレートを作ればつくるほど、タクソノミー名のディレクトリーが生まれ、ターム名をつけることで更に下層にディレクトリーができる感じです。
もちろん、その前にタクソノミー名をちゃんと設定して、それぞれの投稿の設定内でカテゴリーまたはタグを作っていく必要はあるのですが…これだけだとうまくいきません。

カスタム投稿も通常の投稿のようにカテゴリーならcategory.phpのように大まかなテンプレだけでも十分表示できるはずなのですが…何故か上手く出来なくて、それを解決するために、こうかなっと私の中で結論づけただけなので、ほんとうの意味では違うのですが、ディレクトリ分けがうまくいかない時には上記のように考えるとスムーズに作業が進むかもしれません。

functions.phpで各種設定

wordpressテーマファイル内に置いておけるfunctions.phpはショートコードや動的な設定をまとめて記入できる便利なファイルです。functions.phpはテーマのindex.phpと同じディレクトリに置きます。
このfunctions.phpに下記のことを書いていきます。

アイキャッチ画像の設定(作品集ページ一覧で使います)
記事の抜粋の[…]の表記の変更
バージョンの非表示設定(バージョンによって危険なものもあるので表示を隠します)
カスタム投稿の設定
上記に伴う管理画面の表示設定(ターム名を管理画面の記事一覧で表示させます)

上記の設定を<?php ■ ?>の■の中に下記のコードを書いていきます。

1.アイキャッチ画像の設定

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(178, 119, true ); // 幅178px、高さ 119px、切り抜きモードの設定、です。

2.記事の抜粋の[…]の表記の変更

function new_excerpt_more($more) {
    global $post;
    return '…';
}
add_filter('excerpt_more', 'new_excerpt_more');

3.バージョンの非表示設定

remove_action('wp_head','wp_generator');

4.カスタム投稿の設定

例えばこんなコード。細かい設定はイメージに纏めました。

add_action( 'init', 'create_post_type' );
function create_post_type() {
 register_post_type( 'info',  //  post-type *
    array(
      'labels' => array(
        'name' => __( '頁について' ),　// 管理画面での名前
        'singular_name' => __( '頁について' )
      ),
      'public' => true,
      'menu_position' => 5,
      'supports' => array('title','editor','thumbnail',
      'custom-fields','excerpt','author','trackbacks',
      'comments','revisions','page-attributes')
    )
  );
  register_taxonomy(
    'about', // タクソノミーの名前
    'info', // 投稿タイプ設定する
    array(
      'hierarchical' => true,  // 親子関係が必要なければ false
      'update_count_callback' => '_update_post_term_count',
      'label' => 'カテゴリー',
      'singular_label' => 'カテゴリー',
      'public' => true,
      'show_ui' => true
    )
  );
}

上記のように設定していくと、テーマファイルをアップした際に下記のようになります。

5.上記に伴う管理画面の表示設定

function manage_posts_columns($columns) {
        $columns['itemcategory'] = "カテゴリー"; //項目名
        return $columns;
}
function add_column($column_name, $post_id){
	//カテゴリー名取得
    if( 'itemcategory' == $column_name ) {
        $fcategory = get_the_term_list($post_id, 'item'); //itemはタクソノミー名
    }
    //該当カテゴリーがない場合「なし」を表示
    if ( isset($fcategory) && $fcategory ) {
        echo $fcategory;
    } else {
        echo __('None');
    }
}
add_filter('manage_edit-photo_columns', 'manage_posts_columns');
add_action('manage_posts_custom_column',  'add_column', 10, 2);

共通部分を分けていく

各ページで共通になる部分を分けて記述していきます。

DOCTYPEから表向き表示されるタグまで(の直後ぐらい)までをheader.phpへ
表向き表示されている最終タグからをfooter.phpへ
サイドメニュー部分をsidebar.phpへ
サーチフォーム部分をsearchform.phpへ

SSIの要領で、それぞれのファイルを読み込んでいきます。読み込む際には下記のように記述します。

<?php get_header(); ?> //header.phpの呼び出し
<?php get_footer(); ?> //footer.phpの呼び出し
<?php get_sidebar(); ?> //sidebar.phpの呼び出し
<?php get_search_form(); ?> //searchform.phpの呼び出し

カスタム投稿の記事を表示させる

カスタム投稿タイプを利用した記事の表示は設定が必要になります。
A.単体の記事を表示させるには、通常の投稿のようにsingle.phpを作ります。
一覧を表示させるには…
B.ひとつは通常のアーカイブやカテゴリーのようなphpを作る方法
C.ひとつは固定ページでアーカイブを表示させる用のテンプレートを選択して新規ページを作る方法
の2通りの方法があります。
また、D.index.phpに表示させる場合の方法があります。(何もしないとindexには表示されません…)

A.単体記事の表示方法

通常の投稿ではsingle.phpを作りますが、カスタム投稿タイプではこの要領でsingle-{投稿タイプ名}.phpを作ります。投稿タイプ名というのはfunctions.phpでカスタム投稿を設定した分です。
例えば、上記のfunctions.phpの設定であれば、投稿タイプ名は”info”なのでsingle-info.phpとなります。追加した投稿タイプ分だけ作ります。

テンプレートファイルができたところで、中身に入ります。
単体の記事の表示は通常の投稿と同じ書き方でOKです。

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
ここに表示部分のタグ
<?php endwhile; ?>
<?php else : ?>
もし記事がなかった場合の表示タグ
<?php endif; ?>

B.アーカイブやカテゴリーのようなphpを作る方法

この方法ではタームを割り当てていることが前提です。
タームというのは通常の投稿で言うとカテゴリーやタグ部分のことです。今回の設定ではtaxonomyのすべてに親子関係をつくるようにしたので、通常投稿のカテゴリーと同様のものが作成できるようになります。
画像で見たように、管理画面のカスタム投稿メニュー内の「カテゴリー」でカテゴリーを作成していきます。ここで設定したカテゴリー名がターム名になります。このターム名が大事です！

なぜタームを割り当てていることが前提かというと…そうしないと表示できなかったからです。としか言えないくらい、私はよくわかっていません。本当にお恥ずかしい限りです。
私が作っているコードに問題があったのかもなのですが、ターム設定がない場合には表示できないのでした…。

さて、タームを例えば、「cute」と設定した場合に、一覧を表示する際にwordpressは下記の順番にテンプレートを探しに行きます。

taxonomy-about-cute.php（概要：taxonomy-{taxonomy名}-{term名}.php）
taxonomy-about.php（概要：taxonomy-{taxonomy名}.php）
taxonomy.php
archive.php
index.php

赤字の部分が個々で設定しなければならない部分です。
上記の流れから、タクソノミー名がabout（投稿タイプ名とごちゃごちゃにならないようにしておきましょう！）ターム名がcuteなので、それを代入します。

タームに該当する記事のみの一覧を表示（taxonomy-about-cute.php）させるためには下記のようなコードで呼び出します。
例えば、サムネイルを表示させる場合には下記のように書きます。

<?php $tax_posts = get_posts('post_type=info&taxonomy=about&term=cute'); if($tax_posts): ?>
//post_type=投稿タイプ名&taxonomy=タクソノミー名&term=ターム名
	<div>
		<?php foreach($tax_posts as $tax_post): ?>
		<a href="<?php echo get_permalink($tax_post->ID); ?>"> //パーマリンク呼び出し
			<?php  if ( has_post_thumbnail()) { echo get_the_post_thumbnail($tax_post->ID); }?>
			//投稿タイプ、タクソノミー、タームに該当するサムネールの表示
		</a>
		<?php endforeach; ?>
	</div>
<?php endif; ?>

※今回この方法を使ったのがサムネイル一覧になる「作品集」ページのみだったので、サムネイルを一覧にさせる方法しか調べていないので、記事の抜粋を載せる方法はわかりません。すみません。恐らく<?php the_excerpt(); ?>を編集するのではないかと思います。

では、次に指定したカスタム投稿内のタームの一覧も表示させたくなりますよね。
そんな時には下記のようなコードを入れます。

<?php wp_list_categories('title_li=&taxonomy=about'); ?>
//about部分はタクソノミー名を代入します。

※今回は上記の次の次にwordpressが探しに行ってくれる（taxonomy.php）に書きました。
何故か、本来探しに行ってくれるはずの（taxonomy-about.php）を探してくれないんです…。
どうしてなのかは、現在調べ中です。わかり次第記述します！

さて、次にタームに関係なく、投稿タイプすべての記事の一覧が表示させたくなるはず！
そんな時には下記のようなコードを書きます。
これも（taxonomy.php）に書きました。

<?php
$loop = new WP_Query( array( 'post_type' => 'info', 'posts_per_page' => 20 ) );
//infoが投稿タイプ名、20は表示させたい数です。
while ( $loop->have_posts() ) : $loop->the_post();
?>
//ここから繰り返しの部分
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
<?php the_excerpt(); ?>
//ここまでが繰り返しの部分
<?php endwhile; ?>

C.固定ページでアーカイブ表示用のテンプレを選択して新規ページを作る方法

これはタームを割り当てなかった場合の方法です。
タームを割り当てていても使用可能ですが、割り当てていない場合にはこの方法でないと表示できません。

方法は下記のように行います。

固定ページ用のテンプレを作成（今回はpage-about.phpというのを作成しました）
上記テンプレに投稿タイプすべての一覧を表示させるためのタグを書きます。
固定ページで新規作成します。その際に上記のテンプレを選択します。
固定ページのアドレスは投稿タイプ名やタクソノミー名やターム名とは違うものにする

固定ページの記事は記述しなくて空っぽで大丈夫です。
固定ページをどうして作るの？っと不思議でしょうがないときには、カスタム投稿用のアドレスを配布するためと思っていると飲み込みやすいかもしれません。

固定ページのテンプレを追加するにはテンプレのphpファイルの先頭に下記コードを追加します。

<?php
/*
Template Name: page-about
*/ ?>

2の方法は上（さて、次にタームに関係なく、投稿タイプすべての記事の一覧が表示させたくなるはず！）部に書いているとおりです。
また、4にある通り、設定した名前にしないのが重要です。一緒の名前にするとアドレスが大変なことになるので…！

テンプレートがやたらと増えてしまいますが、Cのやり方が一番簡単で管理もしやすいかもです。

D.index.phpにカスタム投稿記事を表示させる方法

通常の投稿のように何もしなくても記事表示のコードを書けばindexに表示されるかというと…そうではなく、カスタム投稿も入れてね！っというコードを書いておかなければなりません。

表示させるコードはC.-2の方法と一緒です。
管理画面の表示件数設定とは別になりますので、ページナビが使えません…。（使える方法を知りません、なのでもしかしたらあるかもしれません）

特定のカスタム投稿の新着情報の一覧を表示させる

これもC.-2の方法の応用で、繰り返し部分の内容を、リンクとタイトルにするだけです。
表示させたい数をphpのコードで設定すればいけます。
何日間だけ限定で表示というのはこれではできませんので、他の方法を探します。（今回は必要ないので、また別の機会に調べてみます！）

プラグインの設定

今回はトップヘのスクロールボタンとお問い合わせフォームをプラグインで設定しました。
テーマをインストする前に設定すると楽なので先に設定していきます。

使用したのは、スクロールボタン「Scroll to Top Button」、お問い合わせフォーム「Contact Form 7」です。

Scroll to Top Buttonの設定

表示させるボタン画像とスピードと表示開始位置を設定します。

Scroll to Top Buttonの設定

Contact Form 7の設定

フォームで必要な項目を選択＆記述、実際に届くメールの設定、そして配布されたコードを表示させたい記事にそのまま書き込みます。
もし、記事にではなく、テーマに埋め込みたい時には、一度表向きリンクのつながっていない(アドレスを知らないと見れない状態)固定ページを作り、その記事内にコード書き込み、固定ページを表示させたいテンプレートに呼び出します。

プラグインの説明を細かく書くととても長くなるので、それは別の機会にしたいと思います。

実際に投稿＆運営しよう！

テーマのインストール

「管理画面」→「外観」→「テーマ」→「テーマのインストール」
上記の流れでテーマをインストールします。テーマフォルダは圧縮しておいてくださいね！
もちろん、普通にFTPを繋げてアップロードで大丈夫ですが、念のため分かりやすいように。

テーマのインストール

テーマの説明に出てきている文言はstyle.cssの先頭に記述しているものが出てきます。
下記のようにstyle.cssに記載すると画像のような表示になります。

/*
Theme Name: 描文字桜
Theme URI: http://wiwiconnect.marulab.net/
Description: A theme by <a href="http://wiwiconnect.marulab.net/">Wiwi-connect</a>.
Version: 1
Author: Tantan
Author URI: http://wiwiconnect.marulab.net/
*/

また、テーマフォルダ内にテーマのイメージファイル（screenshot.png）を入れておくと、それが表示されて分かりやすくなります！

ログイン中の設定

wordpress3.1からログイン中にページを閲覧すると上部に管理用のメニューが表示されるようになりました。
これ、とても便利なのですが…実際ユーザーの方に見えている表示を確認したいので設定を変更します。

ログイン中の設定

投稿画面の設定

今回は全体的に長い記事を書きそうにないので（この記事のように）、投稿欄の長さと、それから顔文字を使いたいのでその設定をします。

そして、投稿に必要なhtmlタグを投稿画面上に追加できる「AddQuicktag」というプラグインを今回は入れました。

では実際に、投稿してみましょう！

特に特別なことはしていません。単純に記事しか書いていませんので…省略します。

そしてついに…完成です！

http://kakimojisakura.marulab.net/

後はコツコツ更新して運営していくのみ！
こちらではWEB情報や技術ブログのみですので、前までしていた食ブログなどをこちらで復活させようかなっと思います。

今回の制作で知恵をお借りした記事

非常にありがたい記事です。この記事がなかったら到底無理でした！本当に感謝です。

さて、非常に長くなりましたが、カスタム投稿タイプを使ってサイトを作る！いかがだったでしょうか？
作成してみて、記事の管理をどこまで細かく分散させたいかを焦点に導入の検討をしたらいいかもしれないと感じました。
便利そうではあるのですが、実際に、ひとつの記事でどれほどのカテゴライズが必要か考えた場合には沢山思いつくと思いますが、管理する視点で考えた場合にどこまで分ける必要があるかを整理することが見えてないと、導入しても意味がなかったかもっということが起きました。

カスタム投稿、タクソノミーは使い方によって便利な方向性がかなり変わってきますので、wordpressを導入する際、新しくテーマを作る際には、しっかりとサイト構成を考えてから進むと失敗せずに「カスタム投稿と仲良く」過ごせそうです。

途中に調べ追えていない部分がありますので、引き続き調べ終わりましたら更新していきます！
この記事と共に、新規サイト「描文字桜」をどうぞよろしくお願い致します。

お好みのソーシャルブックマークをどうぞ