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.
WordBench vol.10LightBox風 jQueryを使ってポップアップ上で      カスタムフィールドを出力             2012.12.16
自己紹介 秋 山 一 樹 〈アキヤマ カズキ〉 デザイナー歴もうすぐ2年 WordPressの経験は1年半程twitter : akiyumfacebook: kazuki Akiyama
まず。 。   。    LightBox風 JavaScript を使って  ポップアップ上でカスタムフィールドを出力             って…?
答えポートフォリオサイトなどにあるLightBoxとかで表示される要素で画像 だけでなく 文字情報 もいれたい。しかもその文字情報を、カスタムフィールドから出力します。
例えば      コレが
例えば      こうなる      カスタムフィールドで出力
メリットCMS管理でするからwebサイト制作の知識がない人でも入力できます。(簡単なwebの知識は必要だけども)いちいちhtmlに記述してFTPから更新する手間が省けます。クライアントワークだったら提案材料として使えるかも
おおまかな実装の手順1. WordPressをいれる               (ここの説明は省きます)2. カスタム投稿タイプとカスタムフィールドを導入3. jQueryプラグイン             「colorBox」を導入4. カ...
2. カスタム投稿タイプとカスタムフィールドを導入          のまえに
2. カスタム投稿タイプとカスタムフィールドを導入       カスタム 投 稿 タイプ       カスタムフィー ルド          ってな に?
カスタム投稿とはざっくり説明すると        「投稿」をもう一つ作る、                   みたいな感じブログのために 「投稿」があるけれども、料理のレシピ集とかも「投稿」にいれると、カテゴリーわけできたとしてもとっても管理...
カスタムフィールドとは投稿画面にあるデフォルトの入力フォームじゃ物足りないから、独自の入力フォームを作ろうってことデフォルトの投稿画面はあくまでブログ用につくられたもの。さっきも書いていた 料理のレシピ集 等の投稿タイプを作りたいとなれば、ブロ...
カスタム投稿&カスタムフィールド               (参考)より詳しい説明は下記等、参照してくださいtakumadesign さんhttp://www.slideshare.net/takuma2480/wordpress-15027...
2. カスタム投稿タイプとカスタムフィールドを導入        で は 本 題 に 戻ります
2. カスタム投稿タイプとカスタムフィールドを導入まず「Custom Post Type UI 」と「Advanced Custom Fields」                       のプラグインを導入「Custom Post Typ...
Custom Post Type UI有名なプラグインなので          「Custom Post Type UI 」                               で検索すると、     たくさん参考サイトが出てきます  ...
Advanced Custom Fields様々なカスタムフィールドが設定できるほか設置場所のルールも細かく決められるなど、とても便利なプラグイン!
次は。。  設定完了したら、 「colorBox」          次は         の導入!
3. jQueryプラグイン             「colorBox」を導入とりあえず jQuery」「colorBox」     「       と         をダウンロード( jQuery はGoogle AJAX API を使っ...
3. jQueryプラグイン             「colorBox」を導入header.php                                 htmlの要素を                               ...
3. jQueryプラグイン             「colorBox」を導入「colorBox」には色々なオプション設定があります。こちらも jQuery プラグインでは有名なものなのでググったらたくさん参考ページ出てきます。それらを見なが...
4. カスタム投稿が出力されるページをコチョコチョ                     ここから表題の通り    カスタム投稿が出力されるページを      コチョコチョしていきます。     具体的なことは次のページから
4. カスタム投稿が出力されるページをコチョコチョ今回は 投稿タイプ名を food にしましたので「archive-food.php」をおき、カスタム投稿のタイプを 料理 として他、料理のフィールドの出力を 加熱法 、 ジャンル などに設定しま...
4. カスタム投稿が出力されるページをコチョコチョarchive-food.php(archive.php をコピペ)               ※1                    カスタム投稿の                   ...
※2※3     カスタム投稿の     ポップアップ     表示部分     カスタム投稿の     ループ出力終了や     投稿がない時の     条件分岐
4. カスタム投稿が出力されるページをコチョコチョ         これであとは  5. 管理画面からカスタム投稿を公開していく        をすれば完了です!
5. 管理画面からカスタム投稿を公開していく                  CLICK!
5. 管理画面からカスタム投稿を公開していくブラウザで確認後、無事表示されていたら完了です!    CLICK!
苦労したところ「Custom●         Post Type UI」の設定でhas archive にチェックをいれないと   「archive.php」が投稿タイプのスラッグを認識してくれない         のポップアップ表示を内包す...
ご清聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

【Wordpress】LightBox風jQueryを使ってポップアップ上でカスタムフィールドを出力。

4,612 views

Published on

LightBox風jQueryはは「colorBox」
Wordpressプラグインは「Custom Post Type UI」、「Advanced Custom Fields」を使用しています。

  • Be the first to comment

【Wordpress】LightBox風jQueryを使ってポップアップ上でカスタムフィールドを出力。

  1. 1. WordBench vol.10LightBox風 jQueryを使ってポップアップ上で カスタムフィールドを出力 2012.12.16
  2. 2. 自己紹介 秋 山 一 樹 〈アキヤマ カズキ〉 デザイナー歴もうすぐ2年 WordPressの経験は1年半程twitter : akiyumfacebook: kazuki Akiyama
  3. 3. まず。 。 。 LightBox風 JavaScript を使って ポップアップ上でカスタムフィールドを出力 って…?
  4. 4. 答えポートフォリオサイトなどにあるLightBoxとかで表示される要素で画像 だけでなく 文字情報 もいれたい。しかもその文字情報を、カスタムフィールドから出力します。
  5. 5. 例えば コレが
  6. 6. 例えば こうなる カスタムフィールドで出力
  7. 7. メリットCMS管理でするからwebサイト制作の知識がない人でも入力できます。(簡単なwebの知識は必要だけども)いちいちhtmlに記述してFTPから更新する手間が省けます。クライアントワークだったら提案材料として使えるかも
  8. 8. おおまかな実装の手順1. WordPressをいれる (ここの説明は省きます)2. カスタム投稿タイプとカスタムフィールドを導入3. jQueryプラグイン 「colorBox」を導入4. カスタム投稿が出力されるページをコチョコチョ5. 管理画面からカスタム投稿を公開していく6. 完 成!
  9. 9. 2. カスタム投稿タイプとカスタムフィールドを導入 のまえに
  10. 10. 2. カスタム投稿タイプとカスタムフィールドを導入 カスタム 投 稿 タイプ カスタムフィー ルド ってな に?
  11. 11. カスタム投稿とはざっくり説明すると 「投稿」をもう一つ作る、 みたいな感じブログのために 「投稿」があるけれども、料理のレシピ集とかも「投稿」にいれると、カテゴリーわけできたとしてもとっても管理しづらくなる。 だから 料理のレシピ集 専用の「投稿」をつくろうということ例えていうと、 本を入れる為に設計された本棚に衣類を突っ込んじゃうのは嫌だからクローゼットも作ろう…って感じだと思う KACHIBITO.netさんのサイトを参照から一部抜粋(http://kachibito.net/wordpress/custom-post-type-list.html)
  12. 12. カスタムフィールドとは投稿画面にあるデフォルトの入力フォームじゃ物足りないから、独自の入力フォームを作ろうってことデフォルトの投稿画面はあくまでブログ用につくられたもの。さっきも書いていた 料理のレシピ集 等の投稿タイプを作りたいとなれば、ブログ用の入力フォームとかだけでなく、チェックボタン等を作って、使う調味料のボタン押すだけでサイト上に反映させたいときに便利さっきの例えでいうと衣類をいれるためのクローゼットを作って、ハンガーかける所や引き出しを作る感じ…だと思う
  13. 13. カスタム投稿&カスタムフィールド (参考)より詳しい説明は下記等、参照してくださいtakumadesign さんhttp://www.slideshare.net/takuma2480/wordpress-15027418W3Q(短時間でWordPressのカスタム投稿タイプを習得するのに役立つエントリまとめ6つ)http://w3q.jp/t/9688works 「カスタム投稿」「カスタムフィールドテンプレート」 (WordPressで と )http://8works-web.com/2011/06/29/wordpress_register_post_type_custom_field_template/
  14. 14. 2. カスタム投稿タイプとカスタムフィールドを導入 で は 本 題 に 戻ります
  15. 15. 2. カスタム投稿タイプとカスタムフィールドを導入まず「Custom Post Type UI 」と「Advanced Custom Fields」 のプラグインを導入「Custom Post Type UI 」 どちらも カスタム投稿 を管理画面から生成 コードを 編集する「Advanced Custom Fields 」 必要ナシ! カスタムフィールド を管理画面から生成
  16. 16. Custom Post Type UI有名なプラグインなので 「Custom Post Type UI 」 で検索すると、 たくさん参考サイトが出てきます !
  17. 17. Advanced Custom Fields様々なカスタムフィールドが設定できるほか設置場所のルールも細かく決められるなど、とても便利なプラグイン!
  18. 18. 次は。。 設定完了したら、 「colorBox」 次は の導入!
  19. 19. 3. jQueryプラグイン 「colorBox」を導入とりあえず jQuery」「colorBox」 「 と をダウンロード( jQuery はGoogle AJAX API を使ってもOK!)ダウンロードしたら所定の位置に置いて〈head〉内に記入※ちなみにjQuery.jsはwordpressに元から入っているからいれなくても大丈夫かも 。 。
  20. 20. 3. jQueryプラグイン 「colorBox」を導入header.php htmlの要素を カラーボックスで 出力? カラーボックスが反応するタグを設定基本的にサンプルデータのものから流用しましたのでプログラム部分の詳細はわかりません (汗
  21. 21. 3. jQueryプラグイン 「colorBox」を導入「colorBox」には色々なオプション設定があります。こちらも jQuery プラグインでは有名なものなのでググったらたくさん参考ページ出てきます。それらを見ながらカスタマイズしていきましょう!
  22. 22. 4. カスタム投稿が出力されるページをコチョコチョ   ここから表題の通り カスタム投稿が出力されるページを コチョコチョしていきます。 具体的なことは次のページから
  23. 23. 4. カスタム投稿が出力されるページをコチョコチョ今回は 投稿タイプ名を food にしましたので「archive-food.php」をおき、カスタム投稿のタイプを 料理 として他、料理のフィールドの出力を 加熱法 、 ジャンル などに設定しました。なお、カスタム投稿のアーカイブをweb上に表示する方法は固定ページに登録とかでも出来るみたいですが、 僕はパーマリンク設定のカスタム構造で /%category%/%postname% としたら表示出来るようになりました !
  24. 24. 4. カスタム投稿が出力されるページをコチョコチョarchive-food.php(archive.php をコピペ) ※1 カスタム投稿の 出力宣言 サムネイル表示 部分次のページへ続く➡ちなみに※部分は最終ページ 「苦労したところ」 の説明用につけました
  25. 25. ※2※3 カスタム投稿の ポップアップ 表示部分 カスタム投稿の ループ出力終了や 投稿がない時の 条件分岐
  26. 26. 4. カスタム投稿が出力されるページをコチョコチョ これであとは 5. 管理画面からカスタム投稿を公開していく をすれば完了です!
  27. 27. 5. 管理画面からカスタム投稿を公開していく CLICK!
  28. 28. 5. 管理画面からカスタム投稿を公開していくブラウザで確認後、無事表示されていたら完了です! CLICK!
  29. 29. 苦労したところ「Custom● Post Type UI」の設定でhas archive にチェックをいれないと 「archive.php」が投稿タイプのスラッグを認識してくれない のポップアップ表示を内包するコードのidを「colorBox」●振り分けないとサムネイルごとのポップアップが出力されない(archive-food.phpのコード※1、2を入力して解消) Custom Fields」「Advanced● の画像フィールドの出力コードが、参考サイトを見てその通りにしても出力されなかった。archive-food.phpのコード※3を入力して解消) (
  30. 30. ご清聴ありがとうございました!

×