© wordbonch.org

WordPress カスタム投稿

WordBench宮崎

ver.1.0.0【WordBench宮崎勉強会】

© wordbonch.org

自己紹介

1

高見 和也（Takami Kazuya）

Twitter@miiitaka

Facebook@miiitaka

株式会社アラタナフロントエンドエンジニア

JavaScriptと友達です。

© wordbonch.org

まずは基本

2

カスタム投稿とは？(説明内容はWordPress4.1ベースです)

© wordbonch.org

カスタム投稿とは？

3

◆カスタム投稿のメリット

・投稿ページが分離できる

→投稿の種類でテンプレートを変更することが可能

・通常の投稿に加えて独自のフィールドを追加できる

・管理画面で通常の投稿メニューと分離できる

→カテゴリなどで起こる設定ミスがなくなる

・管理画面でメニューを分けられるので権限毎に投稿できる内容を変えられる

・カテゴリ階層が深くならずにすむ

◆カスタム投稿のデメリット

・カスタマイズの能力が必要

© wordbonch.org

Let’s Programming !!

4

カスタム投稿のプログラムを記述

© wordbonch.org

WordPressの基本階層は以下のとおりです。大きく3つのフォルダがあります。

WordPressの基本構造を理解（主要ディレクトリ）

5

/wp-admin/

管理画面で使用するファイルあれこれがある。基本触らない。

/wp-content/

基本、このフォルダの中をさわりましょう。

/wp-include/

WP全体で使用するJSやCSS、コアファイルがある。これも基本触らない。

/

ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信用の

ファイルなどなど

© 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/管理画面からアップロードしたメディアファイルが保存されている場所。年→月でいい感じに保存されています。

© 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があります。そこに追記。

© wordbonch.org

管理画面からも編集できる

8

ここで直接編集できる

© wordbonch.org

注意！

9

管理画面からfunctions.phpを編集する場合...

・そもそもテーマディレクトリにfunctions.phpがあること

・functions.phpのパーミッションに書込編集権限があること

・レンタルサーバーなどは編集できないようにしていることが多い（-_-;）

・PHPのエラーが出ると最悪画面が真っ白になってどうしようもなくなる（-_-;）

バックアップをとって、FTPなどで作業することをオススメします

© wordbonch.org

何はともあれカスタム投稿

10

管理画面でカスタム投稿できるようにしてみる

© 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^)

© wordbonch.org

何はともあれテーマを作る（外観→テーマ）

12

でた！＼(^o^)／

© 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 で管理画面で編集が可能になります。

© 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^)

© 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文字以内です。

© wordbonch.org

カスタム投稿（管理画面）

16

メニューの表示位置を変える

© wordbonch.org

$params = array(

'public' => true,

'menu_position' => 5

);

register_post_type('faq', $params);

コード解説

17

パラメータはカンマで区切るメニューの位置をセット

デフォルトはコメントの下（値はnull）

© wordbonch.org

でた！

18

投稿の下にでた！＼(^o^)／

© wordbonch.org

メニューのセット

19

5 - 投稿の下

10 - メディアの下

20 - 固定ページの下

25 - コメントの下

60 - 最初の区切りの下（コメントの下に区切りがある）

65 - プラグインの下

70 - ユーザーの下

75 - ツールの下

80 - 設定の下

100 - 二つ目の区切りの下（設定の下に区切りがある）

‘menu_position’ => ？？セットできる値は以下の通り

( . _ . )

© wordbonch.org

カスタム投稿（管理画面）

20

メニューの見た目を変える

© wordbonch.org

投稿、投稿………

21

投稿、投稿……

(･ω･)

© wordbonch.org

$params = array(

'public' => true,

'menu_position' => 5,

'labels' => array(

'name' => 'FAQ'

)

);

register_post_type('faq', $params);

コード解説

22

labelパラメータを設定します。

文字を変える箇所はたくさんあるので、まとめて配列で定義します。

labelsパラメータにまとめて定義

© wordbonch.org

やった！

23

FAQになった！＼(^o^)／

© 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');

© wordbonch.org

もう少し

25

もう少しアレンジ

(^o^)

© 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に導入されているアイコンを設定してみま

しょう。

© wordbonch.org

もう少し

27

かわった！かわった！＼(^o^)／

© wordbonch.org

カスタム投稿（管理画面）

28

カスタム投稿してみる

© wordbonch.org

はじめてのカスタム投稿

29

タイトルと本文を入力して公開しましょう。

公開！

© wordbonch.org

DBを見てみる

30

post（通常投稿）,page（固定ページ）に加えて、faq（カスタム投稿）が増

えた！

投稿タイプの文字列

投稿記事の情報が保存されている wp_posts を確認

© wordbonch.org

カスタム投稿（表示）

31

カスタム投稿の表示

© wordbonch.org

カスタム投稿（表示）

32

投稿したのに出てこない(･ω･)

© wordbonch.org

<?php query_posts( array(

'post_type' => array( 'post', 'faq' )

)); ?>

<?php if ( have_posts() ) : ?>

コード解説

33

通常投稿：post

カスタム投稿：faq

have_post() で投稿記事をループする前にカスタム投稿も取得できるようにします。

（index.phpを例に記述）

© wordbonch.org

カスタム投稿（表示）

34

投稿したのが出てきた！＼(^o^)／

© wordbonch.org

カスタム投稿（表示）

35

カスタム投稿の表示（記事）

© wordbonch.org

テーマの基本構成

36

ヘッダー

コンテンツ

フッター

サイドバー

通常のこういうレイアウト

© 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を読む優先順位

付けができるのが特徴

© 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

低 高

© 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

低 高

最低限作るべきテンプレート

© 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を作っておけばそちらが優先

© 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

© wordbonch.org

ご清聴ありがとうございました。

42

ありがとうございました。次回は2ヶ月後の3月開催です。

© wordbonch.org

WordPress関数リファレンス／register post type

http://codex.wordpress.org/Function_Reference/register_post_type

参考URL

43