SlideShare a Scribd company logo
© 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

More Related Content

PPTX
20160610 mtsaga handson_public
PDF
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
PPTX
20160720 okubo mt_cloud_handson
KEY
ブログの枠を超える?ためのWordPressカスタマイズ入門
PDF
Web development fundamental_v2
PDF
⑯jQueryをおぼえよう!その2
PDF
WordPressで作るポートフォリオサイト
PPTX
2016年版 フロントエンド開発フォーマット
20160610 mtsaga handson_public
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
20160720 okubo mt_cloud_handson
ブログの枠を超える?ためのWordPressカスタマイズ入門
Web development fundamental_v2
⑯jQueryをおぼえよう!その2
WordPressで作るポートフォリオサイト
2016年版 フロントエンド開発フォーマット

What's hot (20)

PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
PDF
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
PDF
Launch a Web Service in 3 Days Using WordPress
PDF
第3回WordPress Cafe プラグイン紹介
PDF
⑳CSSでアニメーション!その1
PDF
ブラウザにやさしいHTML/CSS
PDF
JavaScriptで出来る、あんなことこんなこと
PDF
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
PDF
⑮jQueryをおぼえよう!その1
KEY
コーディングが上達するコツ
PPTX
プラグイン作者脳になろう ~実案件で学ぶプラグイン開発フロー~
PDF
Web制作勉強会 #2
KEY
EC-CUBEプラグイン講義
PPTX
JavaScriptテンプレートエンジンで活かすData API
PDF
CSS の歩き方
PDF
Dreamweaver
コードヒントHowTo
PDF
使いやすいWordPressのためのCSSのつくりかた
PDF
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
PDF
XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
WordPressでウェブサービスを作ろう! #wbNagoya
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Launch a Web Service in 3 Days Using WordPress
第3回WordPress Cafe プラグイン紹介
⑳CSSでアニメーション!その1
ブラウザにやさしいHTML/CSS
JavaScriptで出来る、あんなことこんなこと
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
⑮jQueryをおぼえよう!その1
コーディングが上達するコツ
プラグイン作者脳になろう ~実案件で学ぶプラグイン開発フロー~
Web制作勉強会 #2
EC-CUBEプラグイン講義
JavaScriptテンプレートエンジンで活かすData API
CSS の歩き方
Dreamweaver
コードヒントHowTo
使いやすいWordPressのためのCSSのつくりかた
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論
Ad

Similar to Wordpress カスタム投稿 (20)

PDF
脱コピペ!デザイナーにもわかるPHPとWP_Query
PDF
Webteko 20090925
PPTX
WordBench熊本第3回勉強会
PDF
パララックス効果を使ったWordPressサイト
PDF
20130225 pronet study
PDF
WordPressテーマ作成
PDF
WordPress実践 導入からカスタマイズまで
PDF
WordPress基礎講座6 テーマの作成実習
PDF
WordPressのテーマ制作ライブ授業
PDF
愛と涙のWordPress無理やりカスタマイズ事例集
PDF
Wp html5
PDF
7/7 WordBench kobe dreamweaver seminar
PDF
コードビュー中心で開発するDreamweaverテンプレート
PPT
WordPressのCSSを 理解しよう!
PDF
SaCSS vol.24
PDF
SaCSS vol. 24
PDF
WordPressプラグイン考察
PDF
リリース直前WordPress3.5をみてみよう
PDF
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
PDF
DW テンプレートをマスターして 楽々サイトメンテナンス
脱コピペ!デザイナーにもわかるPHPとWP_Query
Webteko 20090925
WordBench熊本第3回勉強会
パララックス効果を使ったWordPressサイト
20130225 pronet study
WordPressテーマ作成
WordPress実践 導入からカスタマイズまで
WordPress基礎講座6 テーマの作成実習
WordPressのテーマ制作ライブ授業
愛と涙のWordPress無理やりカスタマイズ事例集
Wp html5
7/7 WordBench kobe dreamweaver seminar
コードビュー中心で開発するDreamweaverテンプレート
WordPressのCSSを 理解しよう!
SaCSS vol.24
SaCSS vol. 24
WordPressプラグイン考察
リリース直前WordPress3.5をみてみよう
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
DW テンプレートをマスターして 楽々サイトメンテナンス
Ad

More from Takami Kazuya (20)

PDF
HTML栄枯盛衰は世の習い
PDF
Google Apps Script 入門
PDF
GoogleAppsScript入門
PDF
Googleデータポータルで見える化に挑戦vol.2
PDF
WordPressで考えるこれからのコンテンツ制作
PDF
WordPressをこれから始める人のためのテーマ講座
PDF
WordPress+AMP
PDF
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
PDF
WordPress + JSON-LDで構造化するこれからのマークアップ
PDF
jQuery3.0-beta1-point
PDF
プラグイン公開までの道のり
PDF
History api
PDF
JSON-LD schema.org定義によるデータ構造化のススメ
PDF
WordPress widget api
PDF
Miyazaki.js vol.2
PDF
React Facebook JavaScript Library
PDF
WordPressプラグインの作り方
PDF
【WordBench宮崎】第3回・4回アンケート報告
PPT
WordPress×jQueryMobile
PPTX
EC-CUBEプラグイン制作のポイント
HTML栄枯盛衰は世の習い
Google Apps Script 入門
GoogleAppsScript入門
Googleデータポータルで見える化に挑戦vol.2
WordPressで考えるこれからのコンテンツ制作
WordPressをこれから始める人のためのテーマ講座
WordPress+AMP
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress + JSON-LDで構造化するこれからのマークアップ
jQuery3.0-beta1-point
プラグイン公開までの道のり
History api
JSON-LD schema.org定義によるデータ構造化のススメ
WordPress widget api
Miyazaki.js vol.2
React Facebook JavaScript Library
WordPressプラグインの作り方
【WordBench宮崎】第3回・4回アンケート報告
WordPress×jQueryMobile
EC-CUBEプラグイン制作のポイント

Wordpress カスタム投稿