WordPress制作、カスタマイズ、Webシステム開発とSEO対策

WordPressのカスタム投稿タイプで独立コンテンツを作る方法まとめ #wacja2012

さて今回、会社のサイトに『WordPressテクニック』というWordPressのTips、技術情報を投稿していくコンテンツを新設するにあたり、会社情報とは独立した扱いにするために、カスタム投稿タイプを使用しました。
そこで、WordPressテクニックの一発目として、そのプロセスを記録して公開しておきます。

基本方針

  1. 元々のコンテンツ(通常ページ、投稿等)に影響を与えないように追加する
  2. なるべくプラグインを使わない
  3. デザインは別にする
  4. RSSフィードも独立

1については、既に運営中の会社サイトに併設するので気をつけたいところです。クライアント企業のサイトに設置することもありますからね。
2については、カスタム投稿タイプを管理する便利なプラグインも色々出ているんですが、まずは自分でマネージしてみないと構造の理解が進まないので。
3、4は、せっかく独立コンテンツなので、デザインもフィードも独立させる方針です。

プラグインは使わず、すべて使用テーマのfunctions.phpに記述していきます。

目次

  1. ▼カスタム投稿タイプを登録する
  2. ▼カスタム投稿タイプ用のカテゴリー(カスタムタクソノミー)を作成する
  3. ▼カスタム投稿タイプのパーマリンクを記事IDにする
  4. ▼デザインを独立させる
  5. ▼RSSフィードを独立させる
  6. ▼プラグイン化する

1.カスタム投稿タイプを登録する

↑目次に戻る

add_action('init', 'my_technic_init');
function my_technic_init()
{
  $labels = array(
    'name' => _x('WordPress技術情報', 'post type general name'),
    'singular_name' => _x('WordPress技術情報', 'post type singular name'),
    'add_new' => _x('新しくWordPress技術の記事を書く', 'wptech'),
    'add_new_item' => __('WordPress技術の記事を書く'),
    'edit_item' => __('WordPress技術の記事を編集'),
    'new_item' => __('新しい記事'),
    'view_item' => __('記事を見てみる'),
    'search_items' => __('記事を探す'),
    'not_found' =>  __('記事はありません'),
    'not_found_in_trash' => __('ゴミ箱に記事はありません'),
    'parent_item_colon' => ''
  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => 5,
    'supports' => array('title','editor','thumbnail','custom-fields','excerpt','revisions','page-attributes','comments'),
    'has_archive' => true
  );
  register_post_type('wptech',$args);
}

$labelsでは、管理画面のメニュー欄等に表示された時の出力を設定します。
$argsは、追加するカスタム投稿タイプの挙動を規定しています。

今回は、
カスタム投稿タイプ名=WordPress技術情報
カスタム投稿タイプのスラッグ=wptech
で作成しましたので、参考にされる場合は適宜書き換えてください。

ちなみに、
登録時の引数で似たようなのがあります。

array(
    'add_new' => _x('新しくWordPress技術の記事を書く', 'wptech'),
    'add_new_item' => __('WordPress技術の記事を書く'),

この二つの違いは、’add_new’は編集画面の上部に表示される文字、’add_new_item’はサイドバーのメニューで表示される文字、です。
なので共通でも問題ありません。

もっと言うと、まるまる省略しちゃっても大丈夫です。

$labelsは、作成しなくてもデフォルトの表示が採用されるので、動作に影響はないんです。
(例:’add_new’の設定がないと「新規追加」になる。)
しかし、実際の用途では、例えば実績紹介、物件紹介など、操作に慣れてないクライアントさんに、ご自分で情報を登録してもらうシーンなどが考えられます。そういった場合は、極力親切な表示にしたほうがいいでしょう。

さてこれで、管理画面のサイドバーにカスタム投稿タイプの投稿メニューが表示されるはずです。

投稿の下に登場

2.カスタムタクソノミー(カスタム投稿タイプ用のカテゴリー)を作成する

↑目次

1でカスタム投稿タイプは有効になりますが、独立コンテンツとしては、ここにさらにカテゴリー分けを追加したいところ。
元々の「ポスト」で使ってる「カテゴリー」のような機能ですね。カスタム投稿タイプでは、「カスタムタクソノミー」でこれを実現します。

先ほどのfunctionの最後に(register_post_type(‘wptech’,$args);の後に)、以下のコードを追加します。

// カスタムタクソノミーを作成

//カテゴリータイプ
$args = array(
'label' => 'WPテックカテゴリー',
'public' => true,
'show_ui' => true,
'hierarchical' => true
);
register_taxonomy('wptech_category','wptech',$args);

//タグタイプ
$args = array(
'label' => 'WPテックタグ',
'public' => true,
'show_ui' => true,
'hierarchical' => false
);
register_taxonomy('wptech_tag','wptech',$args);

ついでにタグも用意しました。
これで管理画面を見てみると、投稿のしたに「WordPress技術情報」なるカスタム投稿タイプが、そのメニューの中に「WPテックカテゴリー」「WPテックタグ」というサブメニューが増えてます。

3.カスタム投稿タイプのパーマリンクをIDにする

↑目次

カスタム投稿タイプのパーマリンクは、通常
http://ドメイン/カスタム投稿タイプスラッグ/ページネーム/
の形式になります。
このブログの場合、
/wptech/%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%…/
です。
英語圏ならいいんでしょうけど、日本語だとちょっと見苦しいので、ここをpage_idに変更します。
(URLは定型的なものより、別別のものを用意したほうがSEO的にはいい、という話もありますが、企業サイトの運用とかで、いちいちお客さんに毎回「英数字でスラッグを入れてくださいね」と要求するのも難しいですし)

/* post_id.htmlにRewrite */
function myposttype_rewrite() {
    global $wp_rewrite;

    $queryarg = 'post_type=wptech&p=';
    $wp_rewrite->add_rewrite_tag('%wptech_id%', '([^/]+)',$queryarg);
    $wp_rewrite->add_permastruct('wptech', '/wptech/entry-%wptech_id%/', false);
}
add_action('init', 'myposttype_rewrite');

function myposttype_permalink($post_link, $id = 0, $leavename) {
    global $wp_rewrite;
    $post = &get_post($id);
    if ( is_wp_error( $post ) )
        return $post;
    $newlink = $wp_rewrite->get_extra_permastruct($post->post_type);
    $newlink = str_replace('%'.$post->post_type.'_id%', $post->ID, $newlink);
    $newlink = home_url(user_trailingslashit($newlink));
    return $newlink;
}
add_filter('post_type_link', 'myposttype_permalink', 1, 3);

これで、パーマリンクが
/wptech/entry-81.html
という形式になりました。

この部分の記述は、株式会社エクストさんのスタッフブログを完全に参照させていただきました。他社……もとい多謝!!

4.デザインを独立させる

↑目次

カスタム投稿タイプでは、single-カスタム投稿タイプスラッグ.phparchive-カスタム投稿タイプスラッグ.phpという名前のファイルを作れば、自動的に読み込んでくれます。
しかし同じように、header-カスタム投稿タイプスラッグ.php、footer-カスタム投稿タイプスラッグ.phpというファイルを作っても読み込んでくれません。

今回は完全独立コンテンツなので、ヘッダーやサイドバーも別にしたいので、singleやarchiveのテンプレートは


の代わりに


と記述し、ファイルを別途用意します。

header-wptech.php では、

  wp_nav_menu(array(
    'container' => 'nav',
    'container_id' => 'wptech_nav',
    'theme_location'=> 'place_wptech',
  ));

と入れておいて、独立したグローバルメニューを出せるようにしておきます。

5.RSSフィードを独立させる

↑目次

フェイスブックと連動させたり、RSSリーダーに登録してもらったりするときのために、RSSフィードも独立して出力させるようにしたいですね。

//RSSを独自出力
function custom_post_rss_set( $query ) {
    if ( is_feed() ) {
        $post_type = $query->get( 'post_type' );
        if ( empty( $post_type ) ) {
            $query->set( 'post_type', array( 'post', 'wptech' ) );
        }
        return $query;
    }
}
add_filter( 'pre_get_posts', 'custom_post_rss_set' );

このコードはモンキーレンチさんの記事を参考にさせていただきました。多謝!

6.ここまでの記述をプラグイン化する

↑目次

さて、冒頭で「プラグインを使わず、functions.phpに記述する」と書きましたが、ここまで書いてくると結構コードが多くなっています。他のサイトで使いまわしたりする場合も考えて、プラグインにしてしまいましょう。
適当な名前のphpファイル(例:my_custom_post.php)を作って、/wp-content/plugins/ に保存します。

このファイルでは、最初にプラグイン用のコメントを記述します。


この下に、ここまで書いたコードをfunctions.phpから移動させたら、プラグインの管理画面から有効化させればOKです。
そう、プラグインって実はこれだけでできちゃうんですよ!

まとめ

ここまでの手順で、カスタム投稿タイプの設置、カスタム記事の投稿がひと通りできるようになりました。ブログスタイルでない場合はひとまずこれで実現できました。
このコーナーのように、企業サイトに後から追加したブログコンテンツの場合は、サイドバー周りの調整(カスタム投稿タイプのアーカイブリストを設置したり、カスタム投稿タイプ内の人気記事リストを出力したりなど)をしたくなりますが、それはまた次回ということで。

それにしても、カスタム投稿タイプって使うまでがちょっと面倒臭いですよね。今後のアップデートで、もっと普通の設定項目として使えるようになるといいなぁ、とも思うんですが、そうすると機能が肥大化していって、WordPressのとっつきやすさが薄れてしまう恐れもあります。
まあ多分、使いたい人はこうしてコードを書いたり、プラグインを使ったりして導入してくれ、という方針でこのまま行くんじゃないでしょうか? (そうでなくなるとこのエントリーが意味をなさなくなるので…)

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

編集後記

WordPressネタをリレーしていくWordPress Advent Calendar2012。
12月20日は、@kurudriveさんによる「ホームページだけじゃない!管理システムとしてのWordPress」です!期待!

本記事は、WordPress Advent Calendar2012という、クリスマスまで毎日WordPressを題材としたブログでリレーしていこう!という素敵なWeb企画に参加しています。

勝手に作ったバナー

すでに12月も半ばを過ぎているわけなんですが、主催者の高橋(@yaemonsan)さんに頼みこんで、19日の2人目にねじ込んでいただきました。よろしくお願いいたします。
本日のメインアクトは、ヌカガさんですので、あわせてどうぞ!→(しょんぼりとにっこり。 ~WordPress Advent Calendarによせて。#wacja2012 | 僕等は人生における幾つかの事柄において祈ることしかできない

“WordPressのカスタム投稿タイプで独立コンテンツを作る方法まとめ #wacja2012” への2件のフィードバック

  1. no より:

    $wp_rewrite->add_permastruct('wptech', '/wptech/entry-%wptech_id%/', false);

    これで、パーマリンクが
    /wptech/entry-81.html
    という形式になりました。

    ほんとに?

    • 株式会社ウェブロジー より:

      すみません、
      /wptech/entry-%wptech_id%/
      だと
      /wptech/entry-81/
      でしたね。(例:このページ)

      /wptech/entry-%wptech_id%.html
      にすれば
      /wptech/entry-81.html
      になるはずです。

コメントを残す