Your SlideShare is downloading. ×
デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜【セーフ!】
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜【セーフ!】

4,101

Published on

WordCamp Osaka 2012で「デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜」というセッションにて登壇した資料です。 …

WordCamp Osaka 2012で「デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜」というセッションにて登壇した資料です。

当日はデモとしてブラウザで操作した部分のあるため、それを加えたものになります。
コードで見にくい部分に関してはブログ [ http://blog.gouten.net/ ] にて補填いたします。

なお、焼き直しした部分があるため、以前アップロードした「うぇぶろっこりーに学ぶサイト構築と言う名の悪巧み」は削除させていただきました。

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,101
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
39
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. デザイン重視で構築する WordPress ! サイトのすゝめ セ ーフ このスライドはWordCamp Osaka 2012のセッションで実際に披露した内容に 当日デモで動かした部分を加え、危ない橋を渡らないように改変を加えたものです2012.11.03 - WordCamp Osaka 2012 GOUTEN(@gouten5010)
  • 2. 自己紹介 お前誰やねん デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 3. 自己紹介GOUTEN Webデザイナーとかフロントエンジニアとか 普段は某IT企業の社畜 小劇場系の舞台まわりでも活動中 gouten5010 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 4. 自己紹介 - 自分のサイト GOUTEN.NET http://blog.gouten.net デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 5. 自己紹介 - 自分のサイト 5010 WORKS 一時閉鎖中 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 6. 自己紹介 - 悪巧みサイト うぇぶろっこりー協会 稼働準備中 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 7. 自己紹介 属性:IT土方 稼働準備中 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 8. 自己紹介 - WordCamp Osaka 2012 実行委員ですが何か WordCamp Osaka 2012 公式サイト 主にCSSでデザインカスタマイズしました デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 9. 自己紹介 - WordCamp Osaka 2012 実行委員ですが何か WordCamp Osaka 2012 登録サイト デザイン・構築全般をしました デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 10. 自己紹介 - WordCamp Osaka 2012 実行委員ですが何か WordCamp Osaka 2012 登録サイト デザイン・構築全般に 特に力入れた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 11. 自己紹介 - いますぐフォロー ソーシャルアカウント @gouten5010 www.facebook.com/gouten5010 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 12. 自己紹介GOUTEN Webデザイナーとかフロントエンジニアとか よろしくな!普段は某IT企業の社畜 小劇場系の舞台まわりでも活動中 gouten5010 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 13. アジェンダ一体お前は何をやりたいんだ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 14. 一体お前は何をやりたいんだ 第1話: デザイン重視っていったいどういうことなの… 第2話: カスタム投稿タイプで投稿を種類別に管理したい 第3話: カスタムフィールドで更新を楽にしたい 第3.5話: カスタムフィールドを自由に出力したい 最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 15. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿種類別にを管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 16. デザイン重視って一体どういうことなの… デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 17. デザイン重視って一体どういうことなの… デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 18. デザイン重視って一体どういうことなの… WordPressは はやい (個人差があります) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 19. デザイン重視って一体どういうことなの… WordPressは やすい (個人差があります) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 20. デザイン重視って一体どういうことなの… WordPressは うまい (個人差があります) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 21. デザイン重視って一体どういうことなの… WordPressは「はやい」「やすい」「うまい」 はやい ・比較的簡単にインストールできて やすい ・そんなに初期コストかからなくて ・あわよくば儲けることも出来る うまい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 22. デザイン重視って一体どういうことなの… どうせやるなら 良いデザインがいい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 23. デザイン重視って一体どういうことなの… GOUTEN的、デザインできないと 思っている人が悩みがち!(偏見含む) ・良いテーマが見つからない。 ・コストを抑えたいけど  外注したくない。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 24. デザイン重視って一体どういうことなの… 思ったような テーマがなければ 作ればいいじゃない マリーアントワネットも言ってた(ウソです) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 25. デザイン重視って一体どういうことなの… GOUTEN的デザイン3箇条 ・完成図をイメージする ・完全オリジナルにしない ・どういう動きになるかを  考える デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 26. デザイン重視って一体どういうことなの… 完成図をイメージする 方向性が見えていることでコーディング時に迷わない サイト制作の目標が見えているので、早い ワイヤーフレームの作成が重要 どこに何を配置するかということを考えることでサイト訪問者の動線も 考えることができ、ユーザビリティの向上になる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 27. デザイン重視って一体どういうことなの… 完全オリジナルにしない「全くのオリジナルデザイン」を目指しがちの人は(そうでない人はごめんなさい) まずは パクりましょう真似することは恥ではないWebサイトに限らず、自分が見て「いいな」と思ったものはどんどん真似していくことで、自分のスキルは確実に上がる ※真似するときは敬意を持って デザイン重視で構築する ※ライセンス等には気をつけましょう WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 28. デザイン重視って一体どういうことなの… どういう動きになるかを考える 投稿やカスタムフィールド、またプラグインやfunctions.php等で設定するものが どういう出力をしてどういう動きをするかを把握することで、 デザイン時に配置する項目や表示の方法を精査できる 逆の考え方もできる デザインを見たうえで動かす場所を考えることも出来る 先に言った完成図と動きをイメージすることでより柔軟な作り方ができる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 29. デザイン重視って一体どういうことなの… Twenty Eleven テーマディレクトリの中身 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 30. デザイン重視って一体どういうことなの… Twenty Eleven テーマディレクトリの中身 ( ゚д゚)ポカーン・・・ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 31. デザイン重視って一体どういうことなの… 忘れましょう。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 32. デザイン重視って一体どういうことなの… WordPress Codex(http://wpdocs.sourceforge.jp/)の デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 33. デザイン重視って一体どういうことなの…テンプレート階層の項目の呼び出し順がわかりやすい。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 34. デザイン重視って一体どういうことなの… ワイヤーフレームも大事 3箇条の1番目 「完成図をイメージする」 に通じます。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 35. デザイン重視って一体どういうことなの… 共通のものはパーツで分割たぶんheader.php→ ←たぶんsidebar.php たぶんfooter.php→ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 36. デザイン重視って一体どういうことなの… Twenty Elevenのindex.php <?get_header(); ?> <div id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <?php twentyeleven_content_nav( nav-above ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( content, get_post_format() ); ?> <?php endwhile; ?> <?php twentyeleven_content_nav( nav-below ); ?> <?php else : ?> <article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( Nothing Found, twentyeleven ); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <p><?php _e( Apologies, but no results were found for the requested archive. Perhaps searching will help <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> デザイン重視で構築する <?php get_sidebar(); ?> WordPressサイトのすゝめ <?php get_footer(); ?> 俺達のやりたいことがWordPressでできないわけがない
  • 37. デザイン重視って一体どういうことなの… ここで呼び出しタグやループがあったりする。 c <?get_header(); ?> <div id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <?php twentyeleven_content_nav( nav-above ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( content, get_post_format() ); ?> <?php endwhile; ?> <?php twentyeleven_content_nav( nav-below ); ?> <?php else : ?> <article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( Nothing Found, twentyeleven ); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <p><?php _e( Apologies, but no results were found for the requested archive. Perhaps searching will help <?php get_search_form(); ?> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> デザイン重視で構築する <?php get_sidebar(); ?> WordPressサイトのすゝめ <?php get_footer(); ?> 俺達のやりたいことがWordPressでできないわけがない
  • 38. デザイン重視って一体どういうことなの… 詳しくは 「WordPress テンプレートタグ」や 「WordPress ループタグ」で検索! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 39. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 40. カスタム投稿タイプで投稿を種類別に管理したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 41. カスタム投稿タイプで投稿を種類別に管理したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 42. カスタム投稿タイプで投稿を種類別に管理したい カスタム投稿タイプ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 43. カスタム投稿タイプで投稿を種類別に管理したい 投稿とは別の投稿のメニュー を作ることができる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 44. カスタム投稿タイプで投稿を種類別に管理したい プラグインあります Custom Post Type UI http://wordpress.org/extend/plugins/custom-post-type-ui/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 45. カスタム投稿タイプで投稿を種類別に管理したい プラグインあります CMS Press http://wordpress.org/extend/plugins/cms-press/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 46. カスタム投稿タイプで投稿を種類別に管理したい プラグインあります Types http://wordpress.org/extend/plugins/types/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 47. カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() { $labels = array( name => _x(イベント情報, post type general name), singular_name => _x(イベント情報一覧, post type singular name), add_new => _x(新規追加, book), add_new_item => __(新規項目追加), edit_item => __(編集), new_item => __(項目編集), view_item => __(項目をプレビュー), search_items => __(項目を検索), not_found => __(項目はありません), not_found_in_trash => __(ゴミ箱に項目はありません), 僕はfunctions.phpに ); parent_item_colon => 書いちゃう人 $args = array( labels => $labels, public => true, publicly_queryable => true, show_ui => true, query_var => true, rewrite => true, has_archive => true, capability_type => post, hierarchical => false, menu_position => 4, supports => array(title,editor) ); register_post_type(eventinfo,$args); デザイン重視で構築する}add_action(init, custom_post_type_eventinfo); WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 48. カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() { $labels = array( name => _x(イベント情報, post type general name), singular_name => _x(イベント情報一覧, post type singular name), add_new => _x(新規追加, book), add_new_item => __(新規項目追加), edit_item => __(編集), new_item => __(項目編集), view_item => __(項目をプレビュー), search_items => __(項目を検索), not_found => __(項目はありません), not_found_in_trash => __(ゴミ箱に項目はありません), custom_post_type_eventinfoで parent_item_colon => ); 管理画面にメニューを追加する記述 $args = array( labels => $labels, public => true, publicly_queryable => true, show_ui => true, query_var => true, rewrite => true, has_archive => true, capability_type => post, hierarchical => false, menu_position => 4, supports => array(title,editor) ); register_post_type(eventinfo,$args); デザイン重視で構築する}add_action(init, custom_post_type_eventinfo); WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 49. カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() { $labels = array( name => _x(イベント情報, post type general name), singular_name => _x(イベント情報一覧, post type singular name), add_new => _x(新規追加, book), add_new_item => __(新規項目追加), edit_item => __(編集), new_item => __(項目編集), view_item => __(項目をプレビュー), search_items => __(項目を検索), not_found => __(項目はありません), eventinfoが not_found_in_trash => __(ゴミ箱に項目はありません), parent_item_colon => カスタム投稿タイプの名前 ); $args = array( labels => $labels, public => true, publicly_queryable => true, show_ui => true, query_var => true, rewrite => true, has_archive => true, capability_type => post, hierarchical => false, menu_position => 4, supports => array(title,editor) ); register_post_type(eventinfo,$args); デザイン重視で構築する}add_action(init, custom_post_type_eventinfo); WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 50. カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() { $labels = array( name => _x(イベント情報, post type general name), singular_name => _x(イベント情報一覧, post type singular name), add_new => _x(新規追加, book), add_new_item => __(新規項目追加), edit_item => __(編集), そうだ、あとでアップされる new_item => __(項目編集), view_item => __(項目をプレビュー), search_items => __(項目を検索), 資料を見てコピペしよう not_found => __(項目はありません), not_found_in_trash => __(ゴミ箱に項目はありません), parent_item_colon => ググるのも ); いいね! $args = array( labels => $labels, または僕のブログ記事とか参照 public => true, http://blog.gouten.net/article/my-wordpress-demo-tutorial/ publicly_queryable => true, show_ui => true, query_var => true, rewrite => true, has_archive => true, capability_type => post, hierarchical => false, menu_position => 4, supports => array(title,editor) ); register_post_type(eventinfo,$args); デザイン重視で構築する}add_action(init, custom_post_type_eventinfo); WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 51. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:シングルページ・アーカイブページ single-「post_type名」.php archive-「post_type名」.php ループタグは普通に書いてOK デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 52. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:シングルページ・アーカイブページ single-「post_type名」.php archive-「post_type名」.php 今回はポストタイプeventinfoを入れる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 53. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:カテゴリページとか <?php $paged = get_query_var(paged); query_posts( array( post_type => eventinfo, 投稿タイプ名 posts_per_page => 5, paged => $paged を入れる )); ?> デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 54. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:カテゴリ/アーカイブページ <?php $paged = get_query_var(paged); query_posts( array( ループタグの post_type => eventinfo, posts_per_page => 5, 前に入れる paged => $paged )); ?> <?php if(have_posts()): while(have_posts()): the_post(); ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php the_contant(); ?> <?php endwhile; endif; ?> デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 55. カスタム投稿タイプで投稿を種類別に管理したい カスタム分類に関しては 「WordPress カスタムタクソノミー」 で検索すれば多分わかる! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 56. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 57. カスタムフィールドで更新を楽にしたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 58. カスタムフィールドで更新を楽にしたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 59. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ イベントページを作りたいとか思ったら ・主催者・団体の名前 ・日時 イベントページで ・会場名 ・住所 必要な入力項目例 ・参加費 ・お問い合わせ先メールアドレス ・参加を受け付けているかどうかの判定 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 60. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ イベントページを作りたいとか思ったら ・主催者・団体の名前 ・日時 イベントページで ・会場名 必要な入力項目例 ( A`)マンドクセ ・住所 ・参加費 ・お問い合わせ先メールアドレス ・参加を受け付けているかどうかの判定 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 61. カスタムフィールドで更新を楽にしたい そんなときにはカスタムフィールド デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 62. カスタムフィールドで更新を楽にしたい でも… デフォルトは、よくワカンネ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 63. カスタムフィールドで更新を楽にしたい プラグインあります カスタムフィールドテンプレート http://wordpress.org/extend/plugins/custom-field-template/ カスタムフィールドテンプレートに関しては僕のブログ記事とか参照 デザイン重視で構築する http://blog.gouten.net/article/my-wordpress-demo-tutorial/ WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 64. カスタムフィールドで更新を楽にしたい プラグインあります Types http://wordpress.org/extend/plugins/types/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 65. カスタムフィールドで更新を楽にしたい おすすめ 奇跡のプラグイン Advance Custom Fields http://wordpress.org/extend/plugins/advanced-custom-fields/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 66. カスタムフィールドで更新を楽にしたい ここからデモです デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 67. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 有効化するとメニューに 「カスタムフィールド」が追加される デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 68. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 設定画面 フィールドグループを新規追加 ここから デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 69. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 設定画面 新規フィールド作成はここから デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 70. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 設定画面:フィールド追加 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 71. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールドのラベル名を入力 任意の文字列でOK 実際の表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 72. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールド名を入力 半角英数字で設定 出力コードの記述で使用 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 73. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールドタイプを設定 選べるオプション テキスト テキストエリア Wysiwyg エディタ 画像 Number セレクトボックス チェックボックス 真/偽 投稿オブジェクト カスタムフィールドテンプレートで 関連 このへんはあまり見かけない デイトピッカー デザイン重視で構築する カラーピッカー WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 74. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールドの説明を入力 任意で入力 入れても入れなくてもOK 実際の表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 75. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 必須かどうかを選択 実際の表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 76. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ その他の設定 フィールドタイプによって 項目が変わります (例)チェックボックスやラジオボタン だと選択肢が入力できるようになる等 …触ってみるのがいちばん早い デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 77. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 入れ替えもできる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 78. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ カスタムフィールドの差し込み箇所設定 投稿タイプや特定のカテゴリー・タグ、特定の記事や ユーザー等、さまざまな条件でカスタムフィールドを 出す/出さないの設定ができる。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 79. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ カスタムフィールドの差し込み箇所設定 カスタムフィールドのグループに 枠(メタボックス)をつけるかつけないか デフォルトのメタボックスを非表示にします コンテンツエディタが 非表示にできるのは神! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 80. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 実際のメタボックスの表示(例の一部) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 81. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 実際のメタボックスの表示(例の一部) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 82. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 83. カスタムフィールドを自由に出力したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 84. カスタムフィールドを自由に出力したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 85. カスタムフィールドを自由に出力したい おそらく最も簡単な カスタムフィールドの出力コード カスタムフィールドの値を普通に出力 <?php the_meta(); ?><ul class=post-meta> <li><span class=post-meta-key>今読んでいる本: </span> 星の王子様</li> <li><span class=post-meta-key>今日の天気:</span> 晴れ</li></ul> デザイン重視で構築する WordPressサイトのすゝめ引用:http://wpdocs.sourceforge.jp/カスタムフィールドの使い方 俺達のやりたいことがWordPressでできないわけがない
  • 86. カスタムフィールドを自由に出力したい 簡単なカスタムフィールドの出力コードカスタムフィールドの値を普通にテンプレートに出力 ここで入れたものが カスタムフィールドの キー になります デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 87. カスタムフィールドを自由に出力したい 簡単な カスタムフィールドの出力コードカスタムフィールドの値を普通にテンプレートに出力 <?php $key="キーの名前"; echo get_post_meta($post->ID, $key, true); ?> ちょっと省略 <?php echo get_post_meta($post->ID, "キーの名前", true); ?> 寄り道 Thanks for @jim912 カスタムフィールドに入力した文字を表示させる場合、HTMLタグを表示する必要性がなければ esc_html で エスケープ処理をかけておくと、セキュリティホールを未然に防ぐことができます。 <?php echo esc_html(get_post_meta($post->ID, "キーの名前", true)); ?>(※上記は一例です) デザイン重視で構築する WordPressサイトのすゝめ引用:http://wpdocs.sourceforge.jp/カスタムフィールドの使い方 俺達のやりたいことがWordPressでできないわけがない
  • 88. カスタムフィールドを自由に出力したい 簡単な カスタムフィールドの出力コードカスタムフィールドでアップした画像を出力 wp_get_attachment_imageを応用 <?php echo wp_get_attachment_image(   get_post_meta( $post->ID,キーの名前,true), サイズ ); ?> thumbnail / small / middle / large / full デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 89. カスタムフィールドを自由に出力したい 簡単な カスタムフィールドの出力コードカスタムフィールドの値で条件分岐 入力されているかどうかで分岐 <?php if(get_post_meta($post->ID,キーの名前,true)) : ?>   出力したいもの <?php endif; ?> 画像があるかどうかで分岐 <?php if(wp_get_attachment_image(   get_post_meta( $post->ID,キーの名前,true)) : ?>   出力したいもの デザイン重視で構築する <?php endif; ?> WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 90. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 91. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ テキストエリアで ç 入力したものを出力 ç デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 92. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ 画像をアップしていれば表示 していなければダミー画像を表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 93. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ テキストエリアで入力すれば表示 ç 入力しなければ非表示 ç デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 94. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ チェックボックスで チェックしていれば表示 チェックしていなければ非表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 95. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 96. とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 97. とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 98. とりあえずまとめてみた 適当にざっくりと超簡単にまとめ ・いいものはどんどん真似て 見た目から入って  構造をしっかり考えながらデザイン ・投稿を柔軟に分けて カスタム投稿 ・入力項目を固定して効率よく カスタムフィールド  更新できるようにつくる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 99. とりあえずまとめてみた これでだいたいできる! (※個人の感想です) できなかったらゴメンナサイ(́・ω:;.:... デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 100. とりあえずまとめてみた フォーラムでも聞けるし! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 101. とりあえずまとめてみた つまり WordPress いじると楽しいよ! \(^o^)/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 102. ご清聴ありがとうござ……?
  • 103.                   ヘ(^o^)ヘ いいぜ                   ¦                    / /               (^o^)/ てめえが俺のセッションを              /(  )    終わりだって思ってるんなら      (^o^) 三  / / >         \     (\\ 三              (/o^)  < \ 三                ( / / く  まずはそのふざけた                幻想をぶち殺す!!
  • 104. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい NEW!最終話: とりあえずまとめてみた番外編: 登録サイトをつくってみたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 105. 登録サイトをつくってみたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 106. 登録サイトをつくってみたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 107. 登録サイトをつくってみたい WordCamp Osaka 2012 登録ありがとう 登録者数 1149人でした デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 108. 登録サイトをつくってみたい WordCamp Osaka 2012 登録サイトの秘密 固定ページに ログイン画面が ある…だと… デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 109. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login 固定ページにログイン画面を置くことが可能になります http://wordpress.org/extend/plugins/theme-my-login/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 110. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login:固定ページの作成 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 111. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login:設定画面 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 112. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) 通常のログイン画面 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 113. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) theme-my-login.cssで整形後 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 114. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) お気づきだろうか… これ、 なに? デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 115. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Gianism FacebookやTwitterでサイト登録/ログインをできるようにします http://wordpress.org/extend/plugins/gianism/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 116. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Developersサイトでアプリを作る TwitterアカウントでTwitter Developersに サインインしてAPIキーを作る デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 117. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Developersサイトでアプリを作る Facebookアカウントでfacebook DEVELOPERSに サインインしてアプリケーションをを作ります デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 118. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Gianism:設定 各アプリケーションで取得したキーを項目に入力 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 119. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) ログイン画面に出力されます ボタンはこのとおりには出ません。CSSで整形してください。 ココが 増える デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 120. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Gianismプロフィール画面 プロフィールに外部サービス連携項目が出現 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 121. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) JstPackの統計情報で特定のページの おまけ アクセスを収集させないようにする functions.phpに以下のコードを記述 function remove_stats_action_hooks() { ! if ( is_page(login) ) { ! ! remove_action( wp_footer, stats_footer, 101 ); ! ! remove_action( wp_head, stats_add_shutdown_action ); ! } } add_action( template_redirect, remove_stats_action_hooks, 9999 ); Thanks for @jim912 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 122. 登録サイトをつくってみたい 素敵なログインページもできる!( `・ω・́) WordPress 超楽しい! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  • 123. デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない ご清聴ありがとうございました2012.11.03 - WordCamp Osaka 2012 GOUTEN(@gouten5010)

×