Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ブログの枠を超える?ためのWordPressカスタマイズ入門

  • Login to see the comments

ブログの枠を超える?ためのWordPressカスタマイズ入門

  1. 1. ブログの枠を超えるためのWORDPRESSカスタマイズ入門 2012.6.23  WordBench 大阪
  2. 2. 自己紹介 WEBデザイナー ムラッチmuracchi_n_n_ ・制作会社勤務の5年目muracchi ・Wordpressは3年目
  3. 3. がんばって、しゃべりますが...@rie05さんから「やる気ありそう」という理由で、ご指名いただいた “普通の人”です。お手柔らかに!
  4. 4. そんな私ですが、お仕事でWordPress案件をよくやります!
  5. 5. WordPressをブログではなく、WEBサイトのCMSとして使う時に、使用している機能とプラグインについてお話します!
  6. 6. これからお話する機能を使うと!・自由度が高い・手間が少ない・シンプルなCMSを実現できちゃいます。
  7. 7. 目次・デフォルトのままだと不便?・カスタムポストタイプについて・カスタムタクソノミーについて・カスタムフィールドについて・管理画面をわかりやすくする
  8. 8. デフォルトのままだと不便?
  9. 9. 下記のような「新着情報」欄を用意する場合。 お知らせ 2012.06.23 IR 第 〇〇 期 報告書 2012.06.23 News a 「〇〇」ブランドの中国展開について 2012.06.23 CSR 〇〇の発展に向けたCSR活動開始 2012.06.23 News 〇〇社の株式取得について
  10. 10. テーマのカスタマイズ次第では、「投稿」と「カテゴリー」で実現できたりします。投稿日時 カテゴリー 記事タイトル 2012.06.23 IR 第 〇〇 期 報告書 2012.06.23 News a 「〇〇」ブランドの中国展開について 2012.06.23 CSR 〇〇の発展に向けたCSR活動開始 2012.06.23 News 〇〇社の株式取得について
  11. 11. でも、「投稿」や「カテゴリー」は、“ ブログ”を管理するための項目です。 無理してない?企業サイトでCMS化を求められるのは、トピックスだけじゃないですよね。
  12. 12. 一般サイトのCMSとして使うとなると、色々な内容を、管理する必要があります。 製品案内 採用情報 お知らせ スタッフ紹介 店舗案内
  13. 13. これだけじゃ....足りない。
  14. 14. 一般サイトのCMSとして使用する場合デフォルトのままだと不便か? 不便です。
  15. 15. でも、それは、デフォルトのままならのお話!WordPressのポテンシャルはメチャ高いです。
  16. 16. なぜならWordPressは、・カスタムポストタイプ・カスタムタクソノミー・カスタムフィールドこの3つの機能で、管理画面を自由にできるからです。
  17. 17. この3つはなに?
  18. 18. 管理画面を構成している要素は、大きく分けて3つ。
  19. 19. 管理項目 入力欄 記事の分類
  20. 20. 管理項目 これをWordpress的?に言い直すと。 入力欄 記事の分類
  21. 21. ポストタイプ 入力欄 記事の分類
  22. 22. ポストタイプ フィールド 記事の分類
  23. 23. ポストタイプ フィールド タクソノミー
  24. 24. この3つを、それぞれカスタマイズできる機能!カスタム 管理項目をカスタマイズできる機能ポストタイプカスタム 記事の分類をカスタマイズできる機能タクソノミーカスタム 入力欄をカスタマイズできる機能フィールド
  25. 25. 管理画面を自由にできる! に近いさあ、管理画面を自由に作り替えましょう!
  26. 26. カスタムポストタイプについて
  27. 27. 「カスタムポストタイプ」使い方!下記のコードを、テーマのfunctions.phpに追加してもOKですし、phpが苦手な方は、プラグイン「Custom Post Type UI」など使えば管理画面から手軽に追加できます。 add_action( init, create_post_type_staff ); function create_post_type_staff() { register_post_type(staff-post, array( label => スタッフ,description => ,public => true,show_ui => true,show_in_menu => true,capability_type => post,hierarchical => false,rewrite => array(slug => ),query_var => true,has_archive => true,supports => array(title),labels => array ( name => スタッフ, singular_name => スタッフ, menu_name => スタッフ, add_new => 新規スタッフ, add_new_item => 新規項目追加, edit => 編集, edit_item => 項目を編集, new_item => 新規項目, view => 表示, view_item => 項目を表示, search_items => 項目検索, not_found => 見つかりません, not_found_in_trash => ゴミ箱にはありません。, parent => 親, ),) ); }
  28. 28. 「カスタムポストタイプ」使い方!下記のコードは、「スタッフ」という管理項目を足すものです。こちらを試してみると。 add_action( init, create_post_type_staff ); function create_post_type_staff() { register_post_type(staff-post, array( label => スタッフ,description => ,public => true,show_ui => true,show_in_menu => true,capability_type => post,hierarchical => false,rewrite => array(slug => ),query_var => true,has_archive => true,supports => array(title),labels => array ( name => スタッフ, singular_name => スタッフ, menu_name => スタッフ, add_new => 新規スタッフ, add_new_item => 新規項目追加, edit => 編集, edit_item => 項目を編集, new_item => 新規項目, view => 表示, view_item => 項目を表示, search_items => 項目検索, not_found => 見つかりません, not_found_in_trash => ゴミ箱にはありません。, parent => 親, ),) ); }
  29. 29. 「カスタムポストタイプ」使い方!管理画面、コメントの下あたりに「スタッフ」という、管理項目が足されます。
  30. 30. 「カスタムポストタイプ」使い方! オプションの設定次第で、 カスタムポストタイプは、投稿のようにも、 固定ページのようにも設定できます。
  31. 31. 「カスタムポストタイプ」使い方!出力について、ざっくりと。テンプレート 個別ページ single-***.php アーカイブページ archive-***.php ***の部分にポストタイプ名を入れればOK。その他のページ <?php query_posts( Array( post_type => staff-post, サブループで、 orderby => date, paged => get_query_var(paged) ) 書いてください。 ); if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- 出力用の記述 --> <?php endwhile; endif; wp_reset_query(); ?>
  32. 32. カスタムタクソノミーについて
  33. 33. 「カスタムタクソノミー」使い方!下記のコードを、テーマのfunctions.phpに追加してもOKですし、phpが苦手な方は、プラグイン「Custom Post Type UI」など使えば管理画面から手軽に追加できます。 $args = array( label => 勤務地, labels => array( name => 勤務地, singular_name => 勤務地, search_items => 勤務地を検索, popular_items => よく使われている勤務地, all_items => すべての勤務地, parent_item => 親勤務地, edit_item => 勤務地の編集, update_item => 更新, add_new_item => 新規勤務地を追加, new_item_name => 新しい分類, ), public => true, show_ui => true, hierarchical => true ); register_taxonomy(staffcat,staff-post,$args);
  34. 34. 「カスタムタクソノミー」使い方!下記のコードは、さきほど足した管理項目に、「勤務地」という分類を追加するコードです。 $args = array( label => 勤務地, labels => array( name => 勤務地, singular_name => 勤務地, search_items => 勤務地を検索, popular_items => よく使われている勤務地, all_items => すべての勤務地, parent_item => 親勤務地, edit_item => 勤務地の編集, update_item => 更新, add_new_item => 新規勤務地を追加, new_item_name => 新しい分類, ), public => true, show_ui => true, hierarchical => true ); register_taxonomy(staffcat,staff-post,$args);
  35. 35. 「カスタムタクソノミー」使い方!さきほど足した「スタッフ」の管理項目に、「勤務地」が足されます。
  36. 36. オプションの設定次第で、カスタムタクソノミーは、カテゴリーのようにも、タグのようにも、設定できます。
  37. 37. 「カスタムタクソノミー」使い方!出力について、ざっくりと。テンプレート taxonomy-***.php ***の部分にポストタイプのスラッグを入れればOK。その他のページ <?php query_posts( Array( post_type => staff-post, サブループで、 orderby => date, paged => get_query_var(paged), staffcat => ‘umeda’ 書いてください。 ); ) if (have_posts()) : while (have_posts()) : the_post(); ?> <!-- 出力用の記述 --> <?php endwhile; endif; wp_reset_query(); ?> 黄色の箇所が、タクソノミーの指定部分。
  38. 38. カスタムフィールドについて
  39. 39. 使い方!はじめから、新規作成ページでメタボックスが用意されてますが、 ちょっと使いにくい(^^;
  40. 40. おすすめの使い方!使いにくい、カスタムフィールドを使いやすくしてくれる、プラグイン「Custom Field Template」をおすすめします。 http://wordpress.org/extend/plugins/custom-field-template/
  41. 41. おすすめの使い方!試しに、スタッフの管理項目に足してみると、下図のように!・テキストフィールド・セレクトボックス・ラジオボックス・プルダウンメニュー・ビジュアルエディタ・ファイルアップロードと、いった項目が足せちゃいます!
  42. 42. なぜ、おすすめか?カスタムフィールドを補助してくれるプラグインは、ほかにも多数ありますが、なぜ「Custom Field Template」なのか?1.グループ化機能 入力項目をグループ化し、複製できる。 増える! クリックすると...
  43. 43. なぜ、おすすめか?カスタムフィールドを補助してくれるプラグインは、ほかにも多数ありますが、なぜ「Custom Field Template」なのか?2.複数テンプレート機能 記事入力で、テンプレートを切り替えれる。 選択すると... 入力内容が切り替わります。
  44. 44. 「Custom Field Template」 は、 メチャ、便利!
  45. 45. 管理画面を分かりやすくする
  46. 46. これまで、機能を足してばかりでした。
  47. 47. 管理画面ごちゃごちゃ
  48. 48. CMSを使う方が、WordPressに詳しい事は少ないので、管理画面を整理して、分かりやすくしましょう!
  49. 49. 更新用のユーザを作る。 管理者アカウントとは別に、 更新専用のアカウントを 作成しましょう。
  50. 50. 更新用のユーザを作る。これで、ずいぶんと必要の無い項目が減りました。 更新用のアカウントの 管理画面 最高権限の アカウントの管理画面
  51. 51. おすすめプラグイン 「Admin Menu Editor」 http://wordpress.org/extend/plugins/admin-menu-editor/
  52. 52. Admin Menu Editor管理項目名や並び順を調整できるプラグイン。不要な項目を非表示にもできます。 管理画面で設定すれば... スッキリしました!
  53. 53. おすすめプラグイン 「TinyMCE Advanced」 http://wordpress.org/extend/plugins/tinymce-advanced/
  54. 54. TinyMCE Advancedビジュアルエディタをカスタマイズできるプラグイン。 標準の、 ビジュアルエディタ スッキリしました!
  55. 55. ご清聴、ありがとうございました。

×