初心者向けホームページ勉強会(2012年4月8日)

1,176 views

Published on

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

No Downloads
Views
Total views
1,176
On SlideShare
0
From Embeds
0
Number of Embeds
114
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

初心者向けホームページ勉強会(2012年4月8日)

  1. 1. 【第二回】初心者向けホームページ勉強会 ホームページ制作リンドウ 古川恵子
  2. 2. 目次● Magic Fields2 を使ったサンプルサイトの紹介● 子テーマとはなにか● Magic Fields2 を使う準備(管理画面編)● Magic Fields2 を使う準備(テーマ編)● Magic Fields2 でカスタムタクソノミーを使う
  3. 3. Magic Fields2 で作ったサンプルサイトの紹介● TOP ページに最新の 3 件(各ミュージシャンにつき 1 件)を自動的に表示する。● 詳細ページに CD の情報、ライブ情報、メディア情報 を追加できる。● ミュージシャンをジャンルごとに一覧表示ができる。
  4. 4. TOP ページ( home.php )
  5. 5. 詳細ページ(single-musician.php)CD 情報を増やせます。ライブ情報を追加できます。メディア情報を追加できます。【管理画面での操作】配信サイト A 、 B 、 C はチェックボックスで選びます。アップローダーで画像を追加できます。CD 情報の順序を入れ替えることができます。
  6. 6. 「 Visual 」というタグが付いた 2 件が表示される。
  7. 7. 子テーマとはなにか● Twenty Ten の子テーマ 1 と 2 を見比べる
  8. 8. Twenty Ten の子テーマ1Twenty Ten のスタイルシートだけを削除した状態。
  9. 9. Twenty Ten の子テーマ1のファイル構成style.css のみ【 style.css の中身】/*Theme Name: Kid_miniTheme URI: http: //example.com/Description: 2012 年 4 月 8 日勉強会用Author: KeikoAuthor URI: http: //example.com/about/Template: twentytenVersion: 0.1.0*/
  10. 10. 子テーマとは親テーマのファイルを直接いじることなく、親テーマの必要な部分だけを上書きするカスタマイズの方法。Twenty Ten の子テーマ 1 では、親テーマの style.css だけを上書きしている。
  11. 11. Twenty Ten の子テーマ 2Twenty Ten にいろいろ機能を追加しています。
  12. 12. Twenty Ten の子テーマ 2 のファイル構成style.css   Twenty Ten と CSS の部分は同じ。      Theme Name をつけたり、 custom.css を読み込む     ための表記をしています。custom.css  カスタムフィールド出力部分の CSS を記述functions.php  カスタム投稿タイプを作成home.php   TOP ページに最新の 3 件を表示するためのファイルsingle-musician.php  カスタム投稿タイプのページ用screenshot.jpg  管理画面でテーマ一覧を見たときに       表示される画像Img  icon_red.gif  配信サイト A 、 B 、 C 用の飾り
  13. 13. Magic Fields2 を使う準備(管理画面)● プラグインをダウンロード(割愛)● カスタムフィールド作成
  14. 14. プラグインを有効化すると、すぐに投稿と固定ページにカスタムフィールドを作ることができます。
  15. 15. カスタム投稿タイプの「ミュージシャン一覧」を作ります。カスタム投稿タイプを作るときは、 Add new Post Type をクリックするか、 functions.php にコードを書きます。
  16. 16. funcsions.php に記述する場合。(今回のテーマでは functions.php でカスタム投稿タイプを作りました。)<?php// カスタム投稿タイプadd_action(init,create_top_post_type,0);function create_top_post_type() { register_post_type( musician, array( label => ミュージシャン一覧 , public => true, hierarchical => false, menu_position => 5, rewrite => false, query_var => false, has_archive => true, supports => array( title, editor ), ) );}?>
  17. 17. Create a Group か Create a Field をクリックしてカスタムフィールドを作ります。グループは順序を入れ替えることができます。フィールドは順序の入れ替えができません。
  18. 18. cd というグループを作ります。タイトルや商品画像を入れるグループです。グループを複製できるようにしたい場合はチェックボックスにチェックを入れます。
  19. 19. cd というグループができたので、ここにフィールドを追加します。
  20. 20. Lavel をつけると自動的に Name も生成されます。カスタムフィールドのタイプを選択できます。入力欄をTextbox や image や checkbox list にすることができます。必須にしたいときは上のチェックボックスにチェックを入れます。
  21. 21. Lavel は日本語にすることもできます。フィールドのタイプを checkbox list にしたときは、右側の Options にチェックボックス用のリストを作成します。
  22. 22. 赤い枠の部分が cd というグループです。この画面では、 live と media というフィールドも追加してあります。
  23. 23. カスタム投稿タイプ(ミュージシャン一覧)の新規投稿を選択すると、このような画面が表示されます。赤い枠の部分が cd というグループです。下に live と media のカスタムフィールドがあります。
  24. 24. 実際に入力してみましょう。cd のグループは複製可能です。live と media も数を増やせるように設定しました。ただし、 live と media はグループではなくフィールドなので、順番は入れ替えることができません。通常の投稿欄には YouTube のタグを入れました。
  25. 25. Magic Fields2 を使う準備(テーマ編)● テーマフォルダの home.php と single-musician.php にカ スタムフィールド出力用のタグを書きます。
  26. 26. Twenty Ten の子テーマに single-musician.php を用意せずに先ほど入力したページを表示させると、通常の投稿欄に入力した YouTube の情報だけが表示されます。
  27. 27. まずは簡単な表示方法です。Twenty Ten から single.php をコピーし、 single-musician.php にリネームします。適当な場所に以下のコードを書きます。<?php echo get_image(cd_picture);?><?php echo get(cd_title);?>画像は get_image() 、そのほかのデータは get() と書くと表示されます。() の中には Magic Fields2 の管理画面の赤枠の部分を入れます。
  28. 28. グループを複製させる場合やチェックボックスを使う場合は書き方が複雑になります。詳しくは次のページをご覧ください。
  29. 29. <?php$grouplist = get_group(cd); foreach($grouplist as $group){ echo <div class="group border">; echo <img src=".$group[cd_picture][1][original]," />; echo <strong>.$group[cd_title][1].</strong>; echo <br />; echo $group[cd_price][1]; echo <br />; echo $group[cd_date][1]; echo <br />; $choice= $group[cd_distribution][1]; echo <ul class="distribution">; foreach( $choice as $element){ if( $choice ) { if ($element==" 配信サイト A") $txt=<a href="#"> 配信サイト A</a>; if ($element==" 配信サイト B") $txt=<a href="#"> 配信サイト B</a>; if ($element==" 配信サイト C") $txt=<a href="#"> 配信サイト C</a>; echo <li>. $txt.</li>; } } echo "</ul></div>n";}?>
  30. 30. TOP ページに最新情報を出すときは、 Twenty Ten から index.php をコピーしてhome.php にリネーム後、 loop を呼び出している部分を消して次のページのコードを書きます。index.php と home.php がある場合は、 home.php が TOP ページ用になります。
  31. 31. <?php$loop = new WP_Query( array( post_type => musician, posts_per_page => 3 ) );while ( $loop->have_posts() ) : $loop->the_post();?><?phpecho <div class="group border">;echo <a href=";echo the_permalink();echo "><img src=".get(cd_picture)." /></a>;echo <strong>.get(cd_title).</strong>;echo <br />;echo get(cd_price);echo <br />;echo get(cd_date);echo <br />;$choice= get(cd_distribution);echo <ul class="distribution">; foreach( $choice as $element){ if( $choice ) { if ($element==" 配信サイト A") $txt=<a href="#"> 配信サイト A</a>; if ($element==" 配信サイト B") $txt=<a href="#"> 配信サイト B</a>; if ($element==" 配信サイト C") $txt=<a href="#"> 配信サイト C</a>; echo <li>. $txt.</li>; } }echo "</ul></div>n";?>
  32. 32. Magic Fields2 でカスタムタクソノミーを使う● カスタムタクソノミーの設定方法● カスタムタクソノミーの表示方法
  33. 33. Add new Custom Taxonomy をクリックして新しいタクソノミーを作ります。 functions.php に記述して作ることもできます。
  34. 34. ミュージシャン一覧に genre (ジャンル)というカスタムタクソノミーを作ります。
  35. 35. カスタム投稿タイプのメニューの一番下に genre が追加されました。
  36. 36. club 、 rock 、 ska 、 visual などのジャンルを追加します。
  37. 37. 投稿にカスタムタクソノミーが追加されました。
  38. 38. 以下のコードを single-musician.php 記述することで、ジャンルを表示できます。<?php$taxo_list = get_the_term_list( $post->ID, genre, ジャンル: , , , );if ( $taxo_list ):echo $taxo_list;endif;?>
  39. 39. ジャンルをクリックすると、そのジャンルにチェックの入ったミュージシャンを一覧で表示することができます。
  40. 40. 参考サイトWordPress でホームページ制作 太陽ブログ様の記事を基にサンプルサイトおよびこのスライドを制作しました。Magic Fields の使い方 タグ編http://web-taiyo.com/blog/120302.html

×