デザイン重視で構築する WordPress                                        ! サイトのすゝめ                           セ ーフ  このスライドはWordCamp Osa...
自己紹介       お前誰やねん            デザイン重視で構築する            WordPressサイトのすゝめ            俺達のやりたいことがWordPressでできないわけがない
自己紹介GOUTEN Webデザイナーとかフロントエンジニアとか       普段は某IT企業の社畜       小劇場系の舞台まわりでも活動中             gouten5010                          デ...
自己紹介 - 自分のサイト  GOUTEN.NET    http://blog.gouten.net                         デザイン重視で構築する                         WordPressサ...
自己紹介 - 自分のサイト  5010 WORKS        一時閉鎖中                デザイン重視で構築する                WordPressサイトのすゝめ                俺達のやりたいこと...
自己紹介 - 悪巧みサイト  うぇぶろっこりー協会        稼働準備中                デザイン重視で構築する                WordPressサイトのすゝめ                俺達のやりたいこと...
自己紹介       属性:IT土方   稼働準備中             デザイン重視で構築する             WordPressサイトのすゝめ             俺達のやりたいことがWordPressでできないわけがない
自己紹介 - WordCamp Osaka 2012 実行委員ですが何か  WordCamp Osaka 2012 公式サイト  主にCSSでデザインカスタマイズしました                                     ...
自己紹介 - WordCamp Osaka 2012 実行委員ですが何か  WordCamp Osaka 2012 登録サイト  デザイン・構築全般をしました                                       デザイン...
自己紹介 - WordCamp Osaka 2012 実行委員ですが何か  WordCamp Osaka 2012 登録サイト  デザイン・構築全般に          特に力入れた                               ...
自己紹介 - いますぐフォロー           ソーシャルアカウント          @gouten5010          www.facebook.com/gouten5010                            ...
自己紹介GOUTEN Webデザイナーとかフロントエンジニアとか よろしくな!普段は某IT企業の社畜       小劇場系の舞台まわりでも活動中             gouten5010                          デ...
アジェンダ一体お前は何をやりたいんだ            デザイン重視で構築する            WordPressサイトのすゝめ            俺達のやりたいことがWordPressでできないわけがない
一体お前は何をやりたいんだ   第1話: デザイン重視っていったいどういうことなの…   第2話: カスタム投稿タイプで投稿を種類別に管理したい   第3話: カスタムフィールドで更新を楽にしたい  第3.5話: カスタムフィールドを自由に出力...
第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿種類別にを管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた     ...
デザイン重視って一体どういうことなの…        デザイン重視で構築する        WordPressサイトのすゝめ        俺達のやりたいことがWordPressでできないわけがない
デザイン重視って一体どういうことなの…                      デザイン重視で構築する                      WordPressサイトのすゝめ                      俺達のやりたいことが...
デザイン重視って一体どういうことなの…  WordPressは はやい   (個人差があります)                      デザイン重視で構築する                      WordPressサイトのすゝめ   ...
デザイン重視って一体どういうことなの…  WordPressは やすい   (個人差があります)                      デザイン重視で構築する                      WordPressサイトのすゝめ   ...
デザイン重視って一体どういうことなの…  WordPressは うまい   (個人差があります)                      デザイン重視で構築する                      WordPressサイトのすゝめ   ...
デザイン重視って一体どういうことなの…   WordPressは「はやい」「やすい」「うまい」 はやい        ・比較的簡単にインストールできて                                     やすい       ...
デザイン重視って一体どういうことなの…       どうせやるなら      良いデザインがいい                      デザイン重視で構築する                      WordPressサイトのすゝめ   ...
デザイン重視って一体どういうことなの…        GOUTEN的、デザインできないと       思っている人が悩みがち!(偏見含む)      ・良いテーマが見つからない。      ・コストを抑えたいけど       外注したくない。 ...
デザイン重視って一体どういうことなの…          思ったような         テーマがなければ        作ればいいじゃない    マリーアントワネットも言ってた(ウソです)                      デザイン重視...
デザイン重視って一体どういうことなの…       GOUTEN的デザイン3箇条      ・完成図をイメージする      ・完全オリジナルにしない      ・どういう動きになるかを       考える                   ...
デザイン重視って一体どういうことなの…         完成図をイメージする 方向性が見えていることでコーディング時に迷わない サイト制作の目標が見えているので、早い ワイヤーフレームの作成が重要 どこに何を配置するかということを考えることでサ...
デザイン重視って一体どういうことなの…        完全オリジナルにしない「全くのオリジナルデザイン」を目指しがちの人は(そうでない人はごめんなさい) まずは     パクりましょう真似することは恥ではないWebサイトに限らず、自分が見て「い...
デザイン重視って一体どういうことなの…      どういう動きになるかを考える 投稿やカスタムフィールド、またプラグインやfunctions.php等で設定するものが どういう出力をしてどういう動きをするかを把握することで、 デザイン時に配置す...
デザイン重視って一体どういうことなの…    Twenty Eleven テーマディレクトリの中身                        デザイン重視で構築する                        WordPressサイトのす...
デザイン重視って一体どういうことなの…    Twenty Eleven テーマディレクトリの中身         ( ゚д゚)ポカーン・・・                        デザイン重視で構築する               ...
デザイン重視って一体どういうことなの…         忘れましょう。                      デザイン重視で構築する                      WordPressサイトのすゝめ                ...
デザイン重視って一体どういうことなの…  WordPress Codex(http://wpdocs.sourceforge.jp/)の                                     デザイン重視で構築する      ...
デザイン重視って一体どういうことなの…テンプレート階層の項目の呼び出し順がわかりやすい。                      デザイン重視で構築する                      WordPressサイトのすゝめ       ...
デザイン重視って一体どういうことなの…   ワイヤーフレームも大事              3箇条の1番目           「完成図をイメージする」              に通じます。                      デザイ...
デザイン重視って一体どういうことなの…              共通のものはパーツで分割たぶんheader.php→                         ←たぶんsidebar.php たぶんfooter.php→        ...
デザイン重視って一体どういうことなの…                       Twenty Elevenのindex.php <?get_header(); ?>               <div id="primary">     ...
デザイン重視って一体どういうことなの… ここで呼び出しタグやループがあったりする。        c <?get_header(); ?>               <div id="primary">                    ...
デザイン重視って一体どういうことなの…                詳しくは  「WordPress テンプレートタグ」や  「WordPress ループタグ」で検索!                       デザイン重視で構築する   ...
第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた     ...
カスタム投稿タイプで投稿を種類別に管理したい         デザイン重視で構築する         WordPressサイトのすゝめ         俺達のやりたいことがWordPressでできないわけがない
カスタム投稿タイプで投稿を種類別に管理したい                         デザイン重視で構築する                         WordPressサイトのすゝめ                       ...
カスタム投稿タイプで投稿を種類別に管理したい      カスタム投稿タイプ                         デザイン重視で構築する                         WordPressサイトのすゝめ        ...
カスタム投稿タイプで投稿を種類別に管理したい                   投稿とは別の投稿のメニュー                   を作ることができる                         デザイン重視で構築する    ...
カスタム投稿タイプで投稿を種類別に管理したい                 プラグインあります                Custom Post Type UI    http://wordpress.org/extend/plugins...
カスタム投稿タイプで投稿を種類別に管理したい              プラグインあります                    CMS Press      http://wordpress.org/extend/plugins/cms-pr...
カスタム投稿タイプで投稿を種類別に管理したい              プラグインあります                        Types        http://wordpress.org/extend/plugins/type...
カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() {   $labels = array(       name => _x(イベント情報, post type genera...
カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() {   $labels = array(       name => _x(イベント情報, post type genera...
カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() {   $labels = array(       name => _x(イベント情報, post type genera...
カスタム投稿タイプで投稿を種類別に管理したいfunction custom_post_type_eventinfo() {   $labels = array(       name => _x(イベント情報, post type genera...
カスタム投稿タイプで投稿を種類別に管理したい 出力方法:シングルページ・アーカイブページ     single-「post_type名」.php     archive-「post_type名」.php         ループタグは普通に書いて...
カスタム投稿タイプで投稿を種類別に管理したい 出力方法:シングルページ・アーカイブページ     single-「post_type名」.php     archive-「post_type名」.php      今回はポストタイプeventi...
カスタム投稿タイプで投稿を種類別に管理したい        出力方法:カテゴリページとか    <?php       $paged = get_query_var(paged);       query_posts( array(      ...
カスタム投稿タイプで投稿を種類別に管理したい   出力方法:カテゴリ/アーカイブページ      <?php         $paged = get_query_var(paged);         query_posts( array( ...
カスタム投稿タイプで投稿を種類別に管理したい      カスタム分類に関しては 「WordPress カスタムタクソノミー」     で検索すれば多分わかる!                         デザイン重視で構築する       ...
第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた     ...
カスタムフィールドで更新を楽にしたい        デザイン重視で構築する        WordPressサイトのすゝめ        俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドで更新を楽にしたい                     デザイン重視で構築する                     WordPressサイトのすゝめ                     俺達のやりたいことがWord...
カスタムフィールドで更新を楽にしたい          本来はデモでやったところ    イベントページを作りたいとか思ったら                     ・主催者・団体の名前                     ・日時 イベント...
カスタムフィールドで更新を楽にしたい          本来はデモでやったところ    イベントページを作りたいとか思ったら                     ・主催者・団体の名前                     ・日時 イベント...
カスタムフィールドで更新を楽にしたい     そんなときにはカスタムフィールド                     デザイン重視で構築する                     WordPressサイトのすゝめ              ...
カスタムフィールドで更新を楽にしたい                でも…      デフォルトは、よくワカンネ                      デザイン重視で構築する                      WordPressサイ...
カスタムフィールドで更新を楽にしたい                     プラグインあります               カスタムフィールドテンプレート     http://wordpress.org/extend/plugins/cus...
カスタムフィールドで更新を楽にしたい              プラグインあります                        Types        http://wordpress.org/extend/plugins/types/  ...
カスタムフィールドで更新を楽にしたい                      おすすめ                 奇跡のプラグイン  Advance Custom Fields  http://wordpress.org/extend/...
カスタムフィールドで更新を楽にしたい    ここからデモです                     デザイン重視で構築する                     WordPressサイトのすゝめ                     俺達...
カスタムフィールドで更新を楽にしたい    本来はデモでやったところ              有効化するとメニューに             「カスタムフィールド」が追加される                       デザイン重視で構築す...
カスタムフィールドで更新を楽にしたい          本来はデモでやったところ                設定画面         フィールドグループを新規追加                     ここから              ...
カスタムフィールドで更新を楽にしたい     本来はデモでやったところ                設定画面 新規フィールド作成はここから                        デザイン重視で構築する                 ...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ         設定画面:フィールド追加                      デザイン重視で構築する                      WordPressサイトの...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ        フィールドのラベル名を入力                     任意の文字列でOK                                      ...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ           フィールド名を入力                     半角英数字で設定                     出力コードの記述で使用        ...
カスタムフィールドで更新を楽にしたい         本来はデモでやったところ         フィールドタイプを設定                           選べるオプション                           テ...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ         フィールドの説明を入力                     任意で入力                     入れても入れなくてもOK          ...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ           必須かどうかを選択                                          実際の表示                      ...
カスタムフィールドで更新を楽にしたい     本来はデモでやったところ              その他の設定                       フィールドタイプによって                       項目が変わります ...
カスタムフィールドで更新を楽にしたい     本来はデモでやったところ            入れ替えもできる                        デザイン重視で構築する                        WordPres...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ   カスタムフィールドの差し込み箇所設定 投稿タイプや特定のカテゴリー・タグ、特定の記事や ユーザー等、さまざまな条件でカスタムフィールドを 出す/出さないの設定ができる。  ...
カスタムフィールドで更新を楽にしたい            本来はデモでやったところ   カスタムフィールドの差し込み箇所設定              カスタムフィールドのグループに              枠(メタボックス)をつけるかつけ...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ      実際のメタボックスの表示(例の一部)                      デザイン重視で構築する                      WordPressサ...
カスタムフィールドで更新を楽にしたい   本来はデモでやったところ      実際のメタボックスの表示(例の一部)                      デザイン重視で構築する                      WordPressサ...
第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた     ...
カスタムフィールドを自由に出力したい        デザイン重視で構築する        WordPressサイトのすゝめ        俺達のやりたいことがWordPressでできないわけがない
カスタムフィールドを自由に出力したい                     デザイン重視で構築する                     WordPressサイトのすゝめ                     俺達のやりたいことがWord...
カスタムフィールドを自由に出力したい  おそらく最も簡単な        カスタムフィールドの出力コード カスタムフィールドの値を普通に出力                    <?php the_meta(); ?><ul class=po...
カスタムフィールドを自由に出力したい    簡単なカスタムフィールドの出力コードカスタムフィールドの値を普通にテンプレートに出力                     ここで入れたものが                     カスタムフィー...
カスタムフィールドを自由に出力したい        簡単な  カスタムフィールドの出力コードカスタムフィールドの値を普通にテンプレートに出力 <?php $key="キーの名前"; echo get_post_meta($post->ID, $...
カスタムフィールドを自由に出力したい     簡単な  カスタムフィールドの出力コードカスタムフィールドでアップした画像を出力     wp_get_attachment_imageを応用   <?php echo wp_get_attachm...
カスタムフィールドを自由に出力したい       簡単な   カスタムフィールドの出力コードカスタムフィールドの値で条件分岐 入力されているかどうかで分岐 <?php if(get_post_meta($post->ID,キーの名前,true)...
カスタムフィールドを自由に出力したい          こんなサイトも作れる                     http://www.spacedrama.jp/micro_to_macro/                       ...
カスタムフィールドを自由に出力したい              こんなサイトも作れる                       http://www.spacedrama.jp/micro_to_macro/                 ...
カスタムフィールドを自由に出力したい          こんなサイトも作れる                     http://www.spacedrama.jp/micro_to_macro/              画像をアップしてい...
カスタムフィールドを自由に出力したい           こんなサイトも作れる                     http://www.spacedrama.jp/micro_to_macro/                     テ...
カスタムフィールドを自由に出力したい          こんなサイトも作れる                     http://www.spacedrama.jp/micro_to_macro/ チェックボックスで チェックしていれば表示 ...
第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた     ...
とりあえずまとめてみた        デザイン重視で構築する        WordPressサイトのすゝめ        俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた              デザイン重視で構築する              WordPressサイトのすゝめ              俺達のやりたいことがWordPressでできないわけがない
とりあえずまとめてみた      適当にざっくりと超簡単にまとめ ・いいものはどんどん真似て           見た目から入って  構造をしっかり考えながらデザイン ・投稿を柔軟に分けて   カスタム投稿 ・入力項目を固定して効率よく    ...
とりあえずまとめてみた    これでだいたいできる!               (※個人の感想です)              できなかったらゴメンナサイ(́・ω:;.:...                                 ...
とりあえずまとめてみた         フォーラムでも聞けるし!                    デザイン重視で構築する                    WordPressサイトのすゝめ                    俺達の...
とりあえずまとめてみた   つまり        WordPress      いじると楽しいよ!         \(^o^)/              デザイン重視で構築する              WordPressサイトのすゝめ  ...
ご清聴ありがとうござ……?
                  ヘ(^o^)ヘ いいぜ                   ¦                    / /               (^o^)/ てめえが俺のセッションを              /(...
第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい                     ...
登録サイトをつくってみたい          デザイン重視で構築する          WordPressサイトのすゝめ          俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい                デザイン重視で構築する                WordPressサイトのすゝめ                俺達のやりたいことがWordPressでできないわけがない
登録サイトをつくってみたい    WordCamp Osaka 2012 登録ありがとう                  登録者数                  1149人でした                         デザイン重...
登録サイトをつくってみたい   WordCamp Osaka 2012 登録サイトの秘密                    固定ページに                    ログイン画面が                    ある…だと...
登録サイトをつくってみたい                       WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)             Theme My Login       固定ページにログイン画面を置くことが可能にな...
登録サイトをつくってみたい   WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login:固定ページの作成                           デザイン重視で構築する              ...
登録サイトをつくってみたい   WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)     Theme My Login:設定画面                           デザイン重視で構築する              ...
登録サイトをつくってみたい   WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)           通常のログイン画面                           デザイン重視で構築する                  ...
登録サイトをつくってみたい    WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)     theme-my-login.cssで整形後                            デザイン重視で構築する         ...
登録サイトをつくってみたい   WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)          お気づきだろうか…                              これ、                        ...
登録サイトをつくってみたい                     WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)                     Gianism     FacebookやTwitterでサイト登録/ログ...
登録サイトをつくってみたい        WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)   Developersサイトでアプリを作る   TwitterアカウントでTwitter Developersに          サイン...
登録サイトをつくってみたい      WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)   Developersサイトでアプリを作る Facebookアカウントでfacebook DEVELOPERSに    サインインしてアプリケ...
登録サイトをつくってみたい     WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)            Gianism:設定   各アプリケーションで取得したキーを項目に入力                           ...
登録サイトをつくってみたい        WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)      ログイン画面に出力されます     ボタンはこのとおりには出ません。CSSで整形してください。                  ...
登録サイトをつくってみたい   WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)       Gianismプロフィール画面    プロフィールに外部サービス連携項目が出現                           デザイ...
登録サイトをつくってみたい                            WordBench大阪での登壇の焼き直し★てへぺろ(・ω<)               JstPackの統計情報で特定のページの  おまけ           ...
登録サイトをつくってみたい    素敵なログインページもできる!( `・ω・́)    WordPress 超楽しい!                      デザイン重視で構築する                      WordPres...
デザイン重視で構築する               WordPressサイトのすゝめ               俺達のやりたいことがWordPressでできないわけがない             ご清聴ありがとうございました2012.11.0...
デザイン重視で構築するWordPressサイトのすゝめ 〜俺たちのやりたいことがWordPressでできないわけがない〜【セーフ!】
Upcoming SlideShare
Loading in …5
×

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

5,188 views

Published on

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

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

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

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

No Downloads
Views
Total views
5,188
On SlideShare
0
From Embeds
0
Number of Embeds
435
Actions
Shares
0
Downloads
39
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

  1. 1. デザイン重視で構築する WordPress ! サイトのすゝめ セ ーフ このスライドはWordCamp Osaka 2012のセッションで実際に披露した内容に 当日デモで動かした部分を加え、危ない橋を渡らないように改変を加えたものです2012.11.03 - WordCamp Osaka 2012 GOUTEN(@gouten5010)
  2. 2. 自己紹介 お前誰やねん デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  3. 3. 自己紹介GOUTEN Webデザイナーとかフロントエンジニアとか 普段は某IT企業の社畜 小劇場系の舞台まわりでも活動中 gouten5010 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  4. 4. 自己紹介 - 自分のサイト GOUTEN.NET http://blog.gouten.net デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  5. 5. 自己紹介 - 自分のサイト 5010 WORKS 一時閉鎖中 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  6. 6. 自己紹介 - 悪巧みサイト うぇぶろっこりー協会 稼働準備中 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  7. 7. 自己紹介 属性:IT土方 稼働準備中 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  8. 8. 自己紹介 - WordCamp Osaka 2012 実行委員ですが何か WordCamp Osaka 2012 公式サイト 主にCSSでデザインカスタマイズしました デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  9. 9. 自己紹介 - WordCamp Osaka 2012 実行委員ですが何か WordCamp Osaka 2012 登録サイト デザイン・構築全般をしました デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  10. 10. 自己紹介 - WordCamp Osaka 2012 実行委員ですが何か WordCamp Osaka 2012 登録サイト デザイン・構築全般に 特に力入れた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  11. 11. 自己紹介 - いますぐフォロー ソーシャルアカウント @gouten5010 www.facebook.com/gouten5010 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  12. 12. 自己紹介GOUTEN Webデザイナーとかフロントエンジニアとか よろしくな!普段は某IT企業の社畜 小劇場系の舞台まわりでも活動中 gouten5010 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  13. 13. アジェンダ一体お前は何をやりたいんだ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  14. 14. 一体お前は何をやりたいんだ 第1話: デザイン重視っていったいどういうことなの… 第2話: カスタム投稿タイプで投稿を種類別に管理したい 第3話: カスタムフィールドで更新を楽にしたい 第3.5話: カスタムフィールドを自由に出力したい 最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  15. 15. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿種類別にを管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  16. 16. デザイン重視って一体どういうことなの… デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  17. 17. デザイン重視って一体どういうことなの… デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  18. 18. デザイン重視って一体どういうことなの… WordPressは はやい (個人差があります) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  19. 19. デザイン重視って一体どういうことなの… WordPressは やすい (個人差があります) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  20. 20. デザイン重視って一体どういうことなの… WordPressは うまい (個人差があります) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  21. 21. デザイン重視って一体どういうことなの… WordPressは「はやい」「やすい」「うまい」 はやい ・比較的簡単にインストールできて やすい ・そんなに初期コストかからなくて ・あわよくば儲けることも出来る うまい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  22. 22. デザイン重視って一体どういうことなの… どうせやるなら 良いデザインがいい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  23. 23. デザイン重視って一体どういうことなの… GOUTEN的、デザインできないと 思っている人が悩みがち!(偏見含む) ・良いテーマが見つからない。 ・コストを抑えたいけど  外注したくない。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  24. 24. デザイン重視って一体どういうことなの… 思ったような テーマがなければ 作ればいいじゃない マリーアントワネットも言ってた(ウソです) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  25. 25. デザイン重視って一体どういうことなの… GOUTEN的デザイン3箇条 ・完成図をイメージする ・完全オリジナルにしない ・どういう動きになるかを  考える デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  26. 26. デザイン重視って一体どういうことなの… 完成図をイメージする 方向性が見えていることでコーディング時に迷わない サイト制作の目標が見えているので、早い ワイヤーフレームの作成が重要 どこに何を配置するかということを考えることでサイト訪問者の動線も 考えることができ、ユーザビリティの向上になる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  27. 27. デザイン重視って一体どういうことなの… 完全オリジナルにしない「全くのオリジナルデザイン」を目指しがちの人は(そうでない人はごめんなさい) まずは パクりましょう真似することは恥ではないWebサイトに限らず、自分が見て「いいな」と思ったものはどんどん真似していくことで、自分のスキルは確実に上がる ※真似するときは敬意を持って デザイン重視で構築する ※ライセンス等には気をつけましょう WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  28. 28. デザイン重視って一体どういうことなの… どういう動きになるかを考える 投稿やカスタムフィールド、またプラグインやfunctions.php等で設定するものが どういう出力をしてどういう動きをするかを把握することで、 デザイン時に配置する項目や表示の方法を精査できる 逆の考え方もできる デザインを見たうえで動かす場所を考えることも出来る 先に言った完成図と動きをイメージすることでより柔軟な作り方ができる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  29. 29. デザイン重視って一体どういうことなの… Twenty Eleven テーマディレクトリの中身 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  30. 30. デザイン重視って一体どういうことなの… Twenty Eleven テーマディレクトリの中身 ( ゚д゚)ポカーン・・・ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  31. 31. デザイン重視って一体どういうことなの… 忘れましょう。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  32. 32. デザイン重視って一体どういうことなの… WordPress Codex(http://wpdocs.sourceforge.jp/)の デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  33. 33. デザイン重視って一体どういうことなの…テンプレート階層の項目の呼び出し順がわかりやすい。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  34. 34. デザイン重視って一体どういうことなの… ワイヤーフレームも大事 3箇条の1番目 「完成図をイメージする」 に通じます。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  35. 35. デザイン重視って一体どういうことなの… 共通のものはパーツで分割たぶんheader.php→ ←たぶんsidebar.php たぶんfooter.php→ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  36. 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. 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. 38. デザイン重視って一体どういうことなの… 詳しくは 「WordPress テンプレートタグ」や 「WordPress ループタグ」で検索! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  39. 39. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  40. 40. カスタム投稿タイプで投稿を種類別に管理したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  41. 41. カスタム投稿タイプで投稿を種類別に管理したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  42. 42. カスタム投稿タイプで投稿を種類別に管理したい カスタム投稿タイプ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  43. 43. カスタム投稿タイプで投稿を種類別に管理したい 投稿とは別の投稿のメニュー を作ることができる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  44. 44. カスタム投稿タイプで投稿を種類別に管理したい プラグインあります Custom Post Type UI http://wordpress.org/extend/plugins/custom-post-type-ui/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  45. 45. カスタム投稿タイプで投稿を種類別に管理したい プラグインあります CMS Press http://wordpress.org/extend/plugins/cms-press/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  46. 46. カスタム投稿タイプで投稿を種類別に管理したい プラグインあります Types http://wordpress.org/extend/plugins/types/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  47. 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. 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. 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. 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. 51. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:シングルページ・アーカイブページ single-「post_type名」.php archive-「post_type名」.php ループタグは普通に書いてOK デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  52. 52. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:シングルページ・アーカイブページ single-「post_type名」.php archive-「post_type名」.php 今回はポストタイプeventinfoを入れる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  53. 53. カスタム投稿タイプで投稿を種類別に管理したい 出力方法:カテゴリページとか <?php $paged = get_query_var(paged); query_posts( array( post_type => eventinfo, 投稿タイプ名 posts_per_page => 5, paged => $paged を入れる )); ?> デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  54. 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. 55. カスタム投稿タイプで投稿を種類別に管理したい カスタム分類に関しては 「WordPress カスタムタクソノミー」 で検索すれば多分わかる! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  56. 56. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  57. 57. カスタムフィールドで更新を楽にしたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  58. 58. カスタムフィールドで更新を楽にしたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  59. 59. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ イベントページを作りたいとか思ったら ・主催者・団体の名前 ・日時 イベントページで ・会場名 ・住所 必要な入力項目例 ・参加費 ・お問い合わせ先メールアドレス ・参加を受け付けているかどうかの判定 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  60. 60. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ イベントページを作りたいとか思ったら ・主催者・団体の名前 ・日時 イベントページで ・会場名 必要な入力項目例 ( A`)マンドクセ ・住所 ・参加費 ・お問い合わせ先メールアドレス ・参加を受け付けているかどうかの判定 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  61. 61. カスタムフィールドで更新を楽にしたい そんなときにはカスタムフィールド デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  62. 62. カスタムフィールドで更新を楽にしたい でも… デフォルトは、よくワカンネ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  63. 63. カスタムフィールドで更新を楽にしたい プラグインあります カスタムフィールドテンプレート http://wordpress.org/extend/plugins/custom-field-template/ カスタムフィールドテンプレートに関しては僕のブログ記事とか参照 デザイン重視で構築する http://blog.gouten.net/article/my-wordpress-demo-tutorial/ WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  64. 64. カスタムフィールドで更新を楽にしたい プラグインあります Types http://wordpress.org/extend/plugins/types/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  65. 65. カスタムフィールドで更新を楽にしたい おすすめ 奇跡のプラグイン Advance Custom Fields http://wordpress.org/extend/plugins/advanced-custom-fields/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  66. 66. カスタムフィールドで更新を楽にしたい ここからデモです デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  67. 67. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 有効化するとメニューに 「カスタムフィールド」が追加される デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  68. 68. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 設定画面 フィールドグループを新規追加 ここから デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  69. 69. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 設定画面 新規フィールド作成はここから デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  70. 70. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 設定画面:フィールド追加 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  71. 71. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールドのラベル名を入力 任意の文字列でOK 実際の表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  72. 72. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールド名を入力 半角英数字で設定 出力コードの記述で使用 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  73. 73. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールドタイプを設定 選べるオプション テキスト テキストエリア Wysiwyg エディタ 画像 Number セレクトボックス チェックボックス 真/偽 投稿オブジェクト カスタムフィールドテンプレートで 関連 このへんはあまり見かけない デイトピッカー デザイン重視で構築する カラーピッカー WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  74. 74. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ フィールドの説明を入力 任意で入力 入れても入れなくてもOK 実際の表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  75. 75. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 必須かどうかを選択 実際の表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  76. 76. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ その他の設定 フィールドタイプによって 項目が変わります (例)チェックボックスやラジオボタン だと選択肢が入力できるようになる等 …触ってみるのがいちばん早い デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  77. 77. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 入れ替えもできる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  78. 78. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ カスタムフィールドの差し込み箇所設定 投稿タイプや特定のカテゴリー・タグ、特定の記事や ユーザー等、さまざまな条件でカスタムフィールドを 出す/出さないの設定ができる。 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  79. 79. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ カスタムフィールドの差し込み箇所設定 カスタムフィールドのグループに 枠(メタボックス)をつけるかつけないか デフォルトのメタボックスを非表示にします コンテンツエディタが 非表示にできるのは神! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  80. 80. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 実際のメタボックスの表示(例の一部) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  81. 81. カスタムフィールドで更新を楽にしたい 本来はデモでやったところ 実際のメタボックスの表示(例の一部) デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  82. 82. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  83. 83. カスタムフィールドを自由に出力したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  84. 84. カスタムフィールドを自由に出力したい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  85. 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. 86. カスタムフィールドを自由に出力したい 簡単なカスタムフィールドの出力コードカスタムフィールドの値を普通にテンプレートに出力 ここで入れたものが カスタムフィールドの キー になります デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  87. 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. 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. 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. 90. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  91. 91. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ テキストエリアで ç 入力したものを出力 ç デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  92. 92. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ 画像をアップしていれば表示 していなければダミー画像を表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  93. 93. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ テキストエリアで入力すれば表示 ç 入力しなければ非表示 ç デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  94. 94. カスタムフィールドを自由に出力したい こんなサイトも作れる http://www.spacedrama.jp/micro_to_macro/ チェックボックスで チェックしていれば表示 チェックしていなければ非表示 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  95. 95. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい最終話: とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  96. 96. とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  97. 97. とりあえずまとめてみた デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  98. 98. とりあえずまとめてみた 適当にざっくりと超簡単にまとめ ・いいものはどんどん真似て 見た目から入って  構造をしっかり考えながらデザイン ・投稿を柔軟に分けて カスタム投稿 ・入力項目を固定して効率よく カスタムフィールド  更新できるようにつくる デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  99. 99. とりあえずまとめてみた これでだいたいできる! (※個人の感想です) できなかったらゴメンナサイ(́・ω:;.:... デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  100. 100. とりあえずまとめてみた フォーラムでも聞けるし! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  101. 101. とりあえずまとめてみた つまり WordPress いじると楽しいよ! \(^o^)/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  102. 102. ご清聴ありがとうござ……?
  103. 103.                   ヘ(^o^)ヘ いいぜ                   ¦                    / /               (^o^)/ てめえが俺のセッションを              /(  )    終わりだって思ってるんなら      (^o^) 三  / / >         \     (\\ 三              (/o^)  < \ 三                ( / / く  まずはそのふざけた                幻想をぶち殺す!!
  104. 104. 第1話: デザイン重視っていったいどういうことなの…第2話: カスタム投稿タイプで投稿を種類別に管理したい第3話: カスタムフィールドで更新を楽にしたい第3.5話: カスタムフィールドを自由に出力したい NEW!最終話: とりあえずまとめてみた番外編: 登録サイトをつくってみたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  105. 105. 登録サイトをつくってみたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  106. 106. 登録サイトをつくってみたい デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  107. 107. 登録サイトをつくってみたい WordCamp Osaka 2012 登録ありがとう 登録者数 1149人でした デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  108. 108. 登録サイトをつくってみたい WordCamp Osaka 2012 登録サイトの秘密 固定ページに ログイン画面が ある…だと… デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  109. 109. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login 固定ページにログイン画面を置くことが可能になります http://wordpress.org/extend/plugins/theme-my-login/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  110. 110. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login:固定ページの作成 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  111. 111. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Theme My Login:設定画面 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  112. 112. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) 通常のログイン画面 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  113. 113. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) theme-my-login.cssで整形後 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  114. 114. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) お気づきだろうか… これ、 なに? デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  115. 115. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Gianism FacebookやTwitterでサイト登録/ログインをできるようにします http://wordpress.org/extend/plugins/gianism/ デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  116. 116. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Developersサイトでアプリを作る TwitterアカウントでTwitter Developersに サインインしてAPIキーを作る デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  117. 117. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Developersサイトでアプリを作る Facebookアカウントでfacebook DEVELOPERSに サインインしてアプリケーションをを作ります デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  118. 118. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Gianism:設定 各アプリケーションで取得したキーを項目に入力 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  119. 119. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) ログイン画面に出力されます ボタンはこのとおりには出ません。CSSで整形してください。 ココが 増える デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  120. 120. 登録サイトをつくってみたい WordBench大阪での登壇の焼き直し★てへぺろ(・ω<) Gianismプロフィール画面 プロフィールに外部サービス連携項目が出現 デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  121. 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. 122. 登録サイトをつくってみたい 素敵なログインページもできる!( `・ω・́) WordPress 超楽しい! デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない
  123. 123. デザイン重視で構築する WordPressサイトのすゝめ 俺達のやりたいことがWordPressでできないわけがない ご清聴ありがとうございました2012.11.03 - WordCamp Osaka 2012 GOUTEN(@gouten5010)

×