2015-01-31 WordBench宮崎　第8回勉強会資料

1. © wordbonch.org
WordPress カスタム投稿
WordBench宮崎
ver.1.0.0【WordBench宮崎勉強会】

2. © wordbonch.org
自己紹介
1
高見 和也（Takami Kazuya）
Twitter@miiitaka
Facebook@miiitaka
株式会社アラタナ
フロントエンドエンジニア
JavaScriptと友達です。

3. © wordbonch.org
まずは基本
2
カスタム投稿とは？
(説明内容はWordPress4.1ベースです)

4. © wordbonch.org
カスタム投稿とは？
3
◆カスタム投稿のメリット
・投稿ページが分離できる
→投稿の種類でテンプレートを変更することが可能
・通常の投稿に加えて独自のフィールドを追加できる
・管理画面で通常の投稿メニューと分離できる
→カテゴリなどで起こる設定ミスがなくなる
・管理画面でメニューを分けられるので権限毎に投稿できる内容を変えられる
・カテゴリ階層が深くならずにすむ
◆カスタム投稿のデメリット
・カスタマイズの能力が必要

5. © wordbonch.org
Let’s Programming !!
4
カスタム投稿のプログラムを記述

6. © wordbonch.org
WordPressの基本階層は以下のとおりです。大きく3つのフォルダがあります。
WordPressの基本構造を理解（主要ディレクトリ）
5
/wp-admin/
管理画面で使用するファイルあれこれがある。基本触らない。
/wp-content/
基本、このフォルダの中をさわりましょう。
/wp-include/
WP全体で使用するJSやCSS、コアファイルがある。これも基本触らない。
/
ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信用の
ファイルなどなど

7. © wordbonch.org
wp-contentフォルダのさらに中のお話。
WordPressの基本構造を理解（wp-contentフォルダ）
6
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。

8. © wordbonch.org
今回は/wp-content/themes/のtwentyfifteenのテーマを編集します。
WordPressの基本構造を理解（今回の主役）
7
/wp-content/
/wp-content/language/
言語パック
/wp-content/plugin/
インストールしたプラグインが保存されている場所
/wp-content/themes/
各種テーマのテンプレートが保存されている場所
/wp-content/upgrade/
バージョンアップ時に使用。
/wp-content/upload/
管理画面からアップロードしたメディアファイルが保存されている場所。
年→月でいい感じに保存されています。
テーマ毎に
functions.phpがありま
す。そこに追記。

9. © wordbonch.org
管理画面からも編集できる
8
ここで直接編集できる

10. © wordbonch.org
注意！
9
管理画面からfunctions.phpを編集する場合...
・そもそもテーマディレクトリにfunctions.phpがあること
・functions.phpのパーミッションに書込編集権限があること
・レンタルサーバーなどは編集できないようにしていることが多い（-_-;）
・PHPのエラーが出ると最悪画面が真っ白になってどうしようもなくなる（-_-;）
バックアップをとって、FTPなどで作業することをオススメします

11. © wordbonch.org
何はともあれカスタム投稿
10
管理画面でカスタム投稿
できるようにしてみる

12. © wordbonch.org
とりあえず、functions.php に以下のコードを書いてみましょう。
functions.phpに記述
11
function add_post_type() {
$params = array(
'public' => true
);
register_post_type(‘faq’, $params);
}
add_action('init', 'add_post_type');
書いたら管理画面をリロードしてみましょう(^o^)

13. © wordbonch.org
何はともあれテーマを作る（外観→テーマ）
12
でた！＼(^o^)／

14. © wordbonch.org
コード解説
13
add_action('init', 'add_post_type');
add_action() でWP管理
画面をフックします。そ
の値がinit
function add_post_type() {
$params = array(
'public' => true
);
register_post_type('faq', $params);
}
add_action()の第二引数
で関数呼び出し。
register_post_type() 関数でカスタム投稿追加！(^o^)
第一引数：POST TYPE
第二引数：オプションパラメータ群
連想配列でパラメータ設定
‘public’ => true で管理画面で
編集が可能になります。

15. © wordbonch.org
コード解説
14
add_action('init', 'add_post_type');
add_action() でWP管理
画面をフックします。そ
の値がinit
function add_post_type() {
$params = array(
'public' => true
);
register_post_type('faq', $params);
}
add_action()の第二引数
で関数呼び出し。
register_post_type() 関数でカスタム投稿追加！(^o^)
第一引数：POST TYPE
第二引数：オプションパラメータ群
パラメータを色々設定して機
能を追加しましょう(^o^)

16. © wordbonch.org
カスタム名のルール
15
function add_post_type() {
$params = array(
'public' => true
);
register_post_type('faq', $params);
}
＜予約されている投稿＞
・post - 投稿
・page - 固定ページ
・attachment - 添付ファイル
・revision - リビジョン
・nav_menu_item - ナビゲーションメニュー
＜使用してはいけない投稿タイプ ＞
・action
・order
・theme
・（-）ダッシュを含むとカスタム投稿タイプの管理画面に列を追加できません。
・文字列は20文字以内です。

17. © wordbonch.org
カスタム投稿（管理画面）
16
メニューの表示位置を変える

18. © wordbonch.org
$params = array(
'public' => true,
'menu_position' => 5
);
register_post_type('faq', $params);
コード解説
17
パラメータはカンマで区切る
メニューの位置をセット
デフォルトはコメントの下
（値はnull）

19. © wordbonch.org
でた！
18
投稿の下にでた！
＼(^o^)／

20. © wordbonch.org
メニューのセット
19
5 - 投稿の下
10 - メディアの下
20 - 固定ページの下
25 - コメントの下
60 - 最初の区切りの下（コメントの下に区切りがある）
65 - プラグインの下
70 - ユーザーの下
75 - ツールの下
80 - 設定の下
100 - 二つ目の区切りの下（設定の下に区切りがある）
‘menu_position’ => ？？
セットできる値は以下の通り
( . _ . )

21. © wordbonch.org
カスタム投稿（管理画面）
20
メニューの見た目を変える

22. © wordbonch.org
投稿、投稿………
21
投稿、投稿……
(･ω･)

23. © wordbonch.org
$params = array(
'public' => true,
'menu_position' => 5,
'labels' => array(
'name' => 'FAQ'
)
);
register_post_type('faq', $params);
コード解説
22
labelパラメータを設定します。
文字を変える箇所はたくさんあるので、まとめて配列で定義します。
labelsパラメータに
まとめて定義

24. © wordbonch.org
やった！
23
FAQになった！
＼(^o^)／

25. © wordbonch.org
labelsパラメータ一覧
24
パラメータ 変わるところ 初期値
name 投稿タイプの一般名、通常は複数形。 label
singular_name この投稿タイプのオブジェクト 1 個の名前（単数形）。 name
menu_name メニュー名のテキスト。メニュー項目の名前を決める文字列です。 name
name_admin_bar 管理バーの「新規追加」ドロップダウンに入れる名前。 singular_name > name
all_items メニューの「すべての〜」に使うテキスト。 name
add_new 「新規追加」のテキスト。 “Add New” ※
add_new_item 「新規〜を追加」のテキスト。 “Add New Post”
edit_item
「〜を編集」のテキスト。管理画面で、このラベルはカスタム投稿の
編集パネルのメインヘッダーに表示されます。
階層なし "Edit Post“
階層あり "Edit Page"
new_item 「新規〜」のテキスト。
階層なし "New Post“
階層あり "New Page"
view_item 「〜を表示」のテキスト。 "View Post" "View Page"
search_items 「〜を検索」のテキスト。
"Search Posts"
"Search Pages"
not_found 「〜が見つかりませんでした」のテキスト。
"No posts found" または "No
pages found"
not_found_in_trash 「ゴミ箱内に〜が見つかりませんでした」のテキスト。
"No posts found in Trash" または
"No pages found in Trash"
parent_item_colon 「親〜：」のテキスト。階層あり投稿タイプのときのみ使われる。 "Parent Page"
※この文字列を国際化対応にするには、gettext context を使って、投稿タイプをマッチさせてください。
例： _x('Add New', 'product');

26. © wordbonch.org
もう少し
25
もう少しアレンジ
(^o^)

27. © wordbonch.org
$params = array(
'public' => true,
'menu_position' => 5,
'menu_icon' => 'dashicons-format-aside‘,
'labels' => array(
'name' => 'FAQ'
)
);
register_post_type('faq', $params);
コード解説
26
アイコン一覧
https://developer.wordpress.org/resource/dashicons/
labelsパラメータに
まとめて定義
menu_iconパラメータを設定します。
オリジナルの画像を設定もできますが、WordPressに導入されているアイコンを設定してみま
しょう。

28. © wordbonch.org
もう少し
27
かわった！かわった！
＼(^o^)／

29. © wordbonch.org
カスタム投稿（管理画面）
28
カスタム投稿してみる

30. © wordbonch.org
はじめてのカスタム投稿
29
タイトルと本文を入力し
て公開しましょう。
公開！

31. © wordbonch.org
DBを見てみる
30
post（通常投稿）,page（
固定ページ）に加えて、
faq（カスタム投稿）が増
えた！
投稿タイプの
文字列
投稿記事の情報が保存されている wp_posts を確認

32. © wordbonch.org
カスタム投稿（表示）
31
カスタム投稿の表示

33. © wordbonch.org
カスタム投稿（表示）
32
投稿したのに出てこない
(･ω･)

34. © wordbonch.org
<?php query_posts( array(
'post_type' => array( 'post', 'faq' )
)); ?>
<?php if ( have_posts() ) : ?>
コード解説
33
通常投稿：post
カスタム投稿：faq
have_post() で投稿記事をループする前にカスタム投稿も取得できるようにします。
（index.phpを例に記述）

35. © wordbonch.org
カスタム投稿（表示）
34
投稿したのが出てきた！
＼(^o^)／

36. © wordbonch.org
カスタム投稿（表示）
35
カスタム投稿の表示（記事）

37. © wordbonch.org
テーマの基本構成
36
ヘッダー
コンテンツ
フッター
サイドバー
通常のこういう
レイアウト

38. © wordbonch.org
テーマの基本構成（パーツテンプレートを理解する）
37
パーツ パーツテンプレート テンプレートタグ
ヘッダー header.php <?php get_header(); ?>
フッター footer.php <?php get_footer(); ?>
サイドバー
sidebar.php
sidebar-content.php
<?php get_sidebar(); ?>
<?php get_sidebar(‘content’); ?>
コメント comments.php <?php comments_template(); ?>
検索フォーム searchform.php <?php get_search_form(); ?>
※カスタム
main.php
main-sub.php
<?php get_template_part(‘main’); ?>
<?php get_template_part(‘main’,’sub’); ?>
※ カスタムパーツテンプレートは、main-sub.phpがなかったら、main.phpを読む優先順位
付けができるのが特徴

39. © wordbonch.org
テーマの基本構成（テンプレートを理解する）
38
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php category-id.php category-slug.php
タグページ tag.php tag-id.php tag-slug.php
タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php author-id.php author-nicename.php
メディアページ
single.php
attachment.php MIME_type.php
記事ページ single-posttype.php
固定ページ page.php page-id.php page-slug.php custom.php
検索結果ページ search.php
404ページ 404.php
低 高

40. © wordbonch.org
テーマの基本構成（テンプレートを理解する）
39
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php category-id.php category-slug.php
タグページ tag.php tag-id.php tag-slug.php
タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php author-id.php author-nicename.php
メディアページ
single.php
attachment.php MIME_type.php
記事ページ single-posttype.php
固定ページ page.php page-id.php page-slug.php custom.php
検索結果ページ search.php
404ページ 404.php
低 高
最低限作るべき
テンプレート

41. © wordbonch.org
テーマの基本構成（テンプレートを理解する）
40
該当ページ 優先度
TOPページ
index.php
home.php
月別ページ
archive.php
date.php
カテゴリーページ category.php category-id.php category-slug.php
タグページ tag.php tag-id.php tag-slug.php
タクソノミーページ taxonomy.php taxonomy-tax.php taxonomy-tax-term.php
投稿タイプページ archive-posttype.php
ユーザーページ author.php author-id.php author-nicename.php
メディアページ
single.php
attachment.php MIME_type.php
記事ページ single-posttype.php
固定ページ page.php page-id.php page-slug.php custom.php
検索結果ページ search.php
404ページ 404.php
低 高
single-faq.phpを
作っておけばそち
らが優先
archive-faq.phpを
作っておけばそち
らが優先

42. © wordbonch.org
テーマの基本構成（配置）
41
header.php
index.php
archive.php
archive-faq.php
single.php
single-faq.php
page.php
search.php
404.php
・
・
・
etc…
footer.php
sidebar.php

43. © wordbonch.org
ご清聴ありがとうございました。
42
ありがとうございました。
次回は2ヶ月後の3月開催です。

44. © wordbonch.org
WordPress関数リファレンス／register post type
http://codex.wordpress.org/Function_Reference/register_post_type
参考URL
43