Submit Search
Wordpress カスタム投稿
3 likes
1,155 views
Takami Kazuya
2015-01-31 WordBench宮崎 第8回勉強会資料
Software
Read more
1 of 44
Download now
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
More Related Content
PPTX
20160610 mtsaga handson_public
Six Apart
PDF
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
PPTX
20160720 okubo mt_cloud_handson
Six Apart
KEY
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
PDF
Web development fundamental_v2
Takuya Kumagai
PDF
⑯jQueryをおぼえよう!その2
Nishida Kansuke
PDF
WordPressで作るポートフォリオサイト
Takuma Nishiyama
PPTX
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
20160610 mtsaga handson_public
Six Apart
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
20160720 okubo mt_cloud_handson
Six Apart
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
Web development fundamental_v2
Takuya Kumagai
⑯jQueryをおぼえよう!その2
Nishida Kansuke
WordPressで作るポートフォリオサイト
Takuma Nishiyama
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
What's hot
(20)
PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
PDF
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
PDF
Launch a Web Service in 3 Days Using WordPress
Kite Koga
PDF
第3回WordPress Cafe プラグイン紹介
foom_in
PDF
⑳CSSでアニメーション!その1
Nishida Kansuke
PDF
ブラウザにやさしいHTML/CSS
Takeharu Igari
PDF
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
PDF
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
PDF
⑮jQueryをおぼえよう!その1
Nishida Kansuke
KEY
コーディングが上達するコツ
evol-ni
PPTX
プラグイン作者脳になろう ~実案件で学ぶプラグイン開発フロー~
Takeuchi Yuichi
PDF
Web制作勉強会 #2
Moto Yan
KEY
EC-CUBEプラグイン講義
ria1201
PPTX
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
PDF
CSS の歩き方
Seiichiro Mishiba
PDF
Dreamweaver コードヒントHowTo
Akira Maruyama
PDF
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
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カスタマイズ
rie05
WordPressでウェブサービスを作ろう! #wbNagoya
Shinichi Nishikawa
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
Launch a Web Service in 3 Days Using WordPress
Kite Koga
第3回WordPress Cafe プラグイン紹介
foom_in
⑳CSSでアニメーション!その1
Nishida Kansuke
ブラウザにやさしいHTML/CSS
Takeharu Igari
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑮jQueryをおぼえよう!その1
Nishida Kansuke
コーディングが上達するコツ
evol-ni
プラグイン作者脳になろう ~実案件で学ぶプラグイン開発フロー~
Takeuchi Yuichi
Web制作勉強会 #2
Moto Yan
EC-CUBEプラグイン講義
ria1201
JavaScriptテンプレートエンジンで活かすData API
Hajime Fujimoto
CSS の歩き方
Seiichiro Mishiba
Dreamweaver コードヒントHowTo
Akira Maruyama
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
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
Hidekazu Ishikawa
PDF
Webteko 20090925
だいすけ ふるかわ
PPTX
WordBench熊本第3回勉強会
Akinori Tateyama
PDF
パララックス効果を使ったWordPressサイト
Takuma Nishiyama
PDF
20130225 pronet study
Six Apart
PDF
WordPressテーマ作成
Takami Kazuya
PDF
WordPress実践 導入からカスタマイズまで
Takashi Uemura
PDF
WordPress基礎講座6 テーマの作成実習
Akinori Kawamitsu
PDF
WordPressのテーマ制作ライブ授業
webcampusschoo
PDF
愛と涙のWordPress無理やりカスタマイズ事例集
Hidekazu Ishikawa
PDF
Wp html5
regret raym
PDF
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
PDF
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
PPT
WordPressのCSSを 理解しよう!
BREN
PDF
SaCSS vol.24
jun sugimoto
PDF
SaCSS vol. 24
jun sugimoto
PDF
WordPressプラグイン考察
Takami Kazuya
PDF
リリース直前WordPress3.5をみてみよう
Seto Takahiro
PDF
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
PDF
DW テンプレートをマスターして 楽々サイトメンテナンス
Akira Maruyama
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
Webteko 20090925
だいすけ ふるかわ
WordBench熊本第3回勉強会
Akinori Tateyama
パララックス効果を使ったWordPressサイト
Takuma Nishiyama
20130225 pronet study
Six Apart
WordPressテーマ作成
Takami Kazuya
WordPress実践 導入からカスタマイズまで
Takashi Uemura
WordPress基礎講座6 テーマの作成実習
Akinori Kawamitsu
WordPressのテーマ制作ライブ授業
webcampusschoo
愛と涙のWordPress無理やりカスタマイズ事例集
Hidekazu Ishikawa
Wp html5
regret raym
7/7 WordBench kobe dreamweaver seminar
Atushi Sugiyama
コードビュー中心で開発するDreamweaverテンプレート
Akira Maruyama
WordPressのCSSを 理解しよう!
BREN
SaCSS vol.24
jun sugimoto
SaCSS vol. 24
jun sugimoto
WordPressプラグイン考察
Takami Kazuya
リリース直前WordPress3.5をみてみよう
Seto Takahiro
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
DW テンプレートをマスターして 楽々サイトメンテナンス
Akira Maruyama
Ad
More from Takami Kazuya
(20)
PDF
HTML栄枯盛衰は世の習い
Takami Kazuya
PDF
Google Apps Script 入門
Takami Kazuya
PDF
GoogleAppsScript入門
Takami Kazuya
PDF
Googleデータポータルで見える化に挑戦vol.2
Takami Kazuya
PDF
WordPressで考えるこれからのコンテンツ制作
Takami Kazuya
PDF
WordPressをこれから始める人のためのテーマ講座
Takami Kazuya
PDF
WordPress+AMP
Takami Kazuya
PDF
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
Takami Kazuya
PDF
WordPress + JSON-LDで構造化するこれからのマークアップ
Takami Kazuya
PDF
jQuery3.0-beta1-point
Takami Kazuya
PDF
プラグイン公開までの道のり
Takami Kazuya
PDF
History api
Takami Kazuya
PDF
JSON-LD schema.org定義によるデータ構造化のススメ
Takami Kazuya
PDF
WordPress widget api
Takami Kazuya
PDF
Miyazaki.js vol.2
Takami Kazuya
PDF
React Facebook JavaScript Library
Takami Kazuya
PDF
WordPressプラグインの作り方
Takami Kazuya
PDF
【WordBench宮崎】第3回・4回アンケート報告
Takami Kazuya
PPT
WordPress×jQueryMobile
Takami Kazuya
PPTX
EC-CUBEプラグイン制作のポイント
Takami Kazuya
HTML栄枯盛衰は世の習い
Takami Kazuya
Google Apps Script 入門
Takami Kazuya
GoogleAppsScript入門
Takami Kazuya
Googleデータポータルで見える化に挑戦vol.2
Takami Kazuya
WordPressで考えるこれからのコンテンツ制作
Takami Kazuya
WordPressをこれから始める人のためのテーマ講座
Takami Kazuya
WordPress+AMP
Takami Kazuya
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
Takami Kazuya
WordPress + JSON-LDで構造化するこれからのマークアップ
Takami Kazuya
jQuery3.0-beta1-point
Takami Kazuya
プラグイン公開までの道のり
Takami Kazuya
History api
Takami Kazuya
JSON-LD schema.org定義によるデータ構造化のススメ
Takami Kazuya
WordPress widget api
Takami Kazuya
Miyazaki.js vol.2
Takami Kazuya
React Facebook JavaScript Library
Takami Kazuya
WordPressプラグインの作り方
Takami Kazuya
【WordBench宮崎】第3回・4回アンケート報告
Takami Kazuya
WordPress×jQueryMobile
Takami Kazuya
EC-CUBEプラグイン制作のポイント
Takami Kazuya
Wordpress カスタム投稿
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
Download