SlideShare a Scribd company logo
【第二回】初心者向けホームページ勉強会




    ホームページ制作リンドウ
        古川恵子
目次
●   Magic Fields2 を使ったサンプルサイトの紹介
●
    子テーマとはなにか
●   Magic Fields2 を使う準備(管理画面編)
●   Magic Fields2 を使う準備(テーマ編)
●   Magic Fields2 でカスタムタクソノミーを使う
Magic Fields2 で作ったサンプルサイトの紹介

●   TOP ページに最新の 3 件(各ミュージシャンにつき 1
    件)を自動的に表示する。


●   詳細ページに CD の情報、ライブ情報、メディア情報
    を追加できる。

●   ミュージシャンをジャンルごとに一覧表示ができる。
TOP ページ( home.php )
詳細ページ
(single-musician.php)

CD 情報を増やせます。
ライブ情報を追加できます。
メディア情報を追加できます。

【管理画面での操作】
配信サイト A 、 B 、 C は
チェックボックスで選びます。

アップローダーで
画像を追加できます。

CD 情報の順序を入れ替える
ことができます。
「 Visual 」というタグが付いた 2 件が表示される。
子テーマとはなにか

●   Twenty Ten の子テーマ 1 と 2 を見比べる
Twenty Ten の子テーマ1
Twenty Ten のスタイルシートだけを削除した状態。
Twenty Ten の子テーマ1のファイル構成

style.css のみ

【 style.css の中身】
/*
Theme Name: Kid_mini
Theme URI:      http: //example.com/
Description: 2012 年 4 月 8 日勉強会用
Author:      Keiko
Author URI: http: //example.com/about/
Template:     twentyten
Version:     0.1.0
*/
子テーマとは

親テーマのファイルを直接いじることなく、親テーマの
必要な部分だけを上書きするカスタマイズの方法。

Twenty Ten の子テーマ 1 では、親テーマの style.css だけを
上書きしている。
Twenty Ten の子テーマ 2
Twenty Ten にいろいろ機能を追加しています。
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 用の飾り
Magic Fields2 を使う準備(管理画面)

●   プラグインをダウンロード(割愛)
●   カスタムフィールド作成
プラグインを有効化すると、すぐに投稿と固定ページに
カスタムフィールドを作ることができます。
カスタム投稿タイプの「ミュージシャン一覧」を作ります。
カスタム投稿タイプを作るときは、 Add new Post Type をクリック
するか、 functions.php にコードを書きます。
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'
      ),
    )
  );
}
?>
Create a Group か Create a Field をクリックしてカスタムフィールド
を作ります。

グループは順序を入れ替えることができます。
フィールドは順序の入れ替えができません。
cd というグループを作ります。タイトルや商品画像を入れる
グループです。
グループを複製できるようにしたい場合はチェックボックスに
チェックを入れます。
cd というグループができたので、ここにフィールドを追加します。
Lavel をつけると自動的に Name も生成されます。

カスタムフィールドのタイプを選択できます。入力欄を
Textbox や image や checkbox list にすることができます。

必須にしたいときは上のチェックボックスにチェックを入れます。
Lavel は日本語にすることもできます。
フィールドのタイプを checkbox list にしたときは、右側の Options に
チェックボックス用のリストを作成します。
赤い枠の部分が cd というグループです。
この画面では、 live と media というフィールドも追加してあります。
カスタム投稿タイプ
(ミュージシャン一覧)の
新規投稿を選択すると、
このような画面が表示されます。

赤い枠の部分が cd というグループ
です。

下に live と media の
カスタムフィールドがあります。
実際に入力してみましょう。

cd のグループは複製可能です。

live と media も数を増やせるように設定しました。
ただし、 live と media はグループではなく
フィールドなので、順番は入れ替えることが
できません。

通常の投稿欄には YouTube のタグを入れました。
Magic Fields2 を使う準備(テーマ編)

●   テーマフォルダの home.php と single-musician.php にカ
    スタムフィールド出力用のタグを書きます。
Twenty Ten の子テーマに single-musician.php を用意せずに
先ほど入力したページを表示させると、通常の投稿欄に
入力した YouTube の情報だけが表示されます。
まずは簡単な表示方法です。

Twenty Ten から single.php を
コピーし、 single-musician.php に
リネームします。

適当な場所に以下のコードを書きます。

<?php echo get_image('cd_picture');?>
<?php echo get('cd_title');?>

画像は get_image() 、そのほかのデータ
は get() と書くと表示されます。

() の中には Magic Fields2 の管理画面の
赤枠の部分を入れます。
グループを複製させる場合や
チェックボックスを使う場合は
書き方が複雑になります。
詳しくは次のページをご覧ください。
<?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";
}
?>
TOP ページに最新情報を出すときは、 Twenty Ten から index.php をコピーして
home.php にリネーム後、 loop を呼び出している部分を消して次のページのコード
を書きます。
index.php と home.php がある場合は、 home.php が TOP ページ用になります。
<?php
$loop = new WP_Query( array( 'post_type' => 'musician', 'posts_per_page' => 3 ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<?php
echo '<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";
?>
Magic Fields2 でカスタムタクソノミーを使う

●   カスタムタクソノミーの設定方法
●   カスタムタクソノミーの表示方法
Add new Custom Taxonomy をクリックして新しいタクソノミーを
作ります。 functions.php に記述して作ることもできます。
ミュージシャン一覧に genre (ジャンル)というカスタム
タクソノミーを作ります。
カスタム投稿タイプのメニューの一番下に genre が追加されました。
club 、 rock 、 ska 、 visual などのジャンルを追加します。
投稿にカスタムタクソノミーが
追加されました。
以下のコードを single-musician.php 記述することで、ジャンルを表示できます。

<?php
$taxo_list = get_the_term_list( $post->ID, 'genre', ' ジャンル: ', ', ', '' );
if ( $taxo_list ):
echo $taxo_list;
endif;
?>
ジャンルをクリックすると、そのジャンルにチェックの入った
ミュージシャンを一覧で表示することができます。
参考サイト
WordPress でホームページ制作 太陽ブログ様
の記事を基にサンプルサイトおよびこのスラ
イドを制作しました。


Magic Fields の使い方 タグ編
http://web-taiyo.com/blog/120302.html

More Related Content

Viewers also liked

Web開発用ツール導入のすすめ
Web開発用ツール導入のすすめWeb開発用ツール導入のすすめ
Web開発用ツール導入のすすめ
Kiyoshi SATOH
 
ホームページ作り、考え方の「考え方」
ホームページ作り、考え方の「考え方」ホームページ作り、考え方の「考え方」
ホームページ作り、考え方の「考え方」
takayuki katumata
 
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
淳 竹野
 
Biology
BiologyBiology
BiologyUrbas
 
Science
ScienceScience
Science
Lian Cash
 
Foreign ai dppoint
Foreign ai dppointForeign ai dppoint
Foreign ai dppointmhaine22
 
Зимующие птицы
Зимующие птицыЗимующие птицы
Зимующие птицыTABUCHITEL
 
初心者向けホームページ勉強会(2012年2月5日)
初心者向けホームページ勉強会(2012年2月5日)初心者向けホームページ勉強会(2012年2月5日)
初心者向けホームページ勉強会(2012年2月5日)古川 恵子
 
Chemistry
ChemistryChemistry
ChemistryUrbas
 
Calendar jupiler pro league play offs
Calendar jupiler pro league play offsCalendar jupiler pro league play offs
Calendar jupiler pro league play offsThomas Bernard
 
Real time web_apps_pycon2012-v1
Real time web_apps_pycon2012-v1Real time web_apps_pycon2012-v1
Real time web_apps_pycon2012-v1
Avinash Prasad
 
サイトリニューアル案
サイトリニューアル案サイトリニューアル案
サイトリニューアル案古川 恵子
 
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
Yoshinori Kobayashi
 
HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料
Kazuya Hiruma
 
”スラスラわかる”未経験からのHTMLとCSS
”スラスラわかる”未経験からのHTMLとCSS”スラスラわかる”未経験からのHTMLとCSS
”スラスラわかる”未経験からのHTMLとCSS
schoowebcampus
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
Yasuhito Yabe
 
A investigação como elemento estruturante dos esquemas de programação arquiví...
A investigação como elemento estruturante dos esquemas de programação arquiví...A investigação como elemento estruturante dos esquemas de programação arquiví...
A investigação como elemento estruturante dos esquemas de programação arquiví...
Pedro Abreu Peixoto
 

Viewers also liked (20)

Web開発用ツール導入のすすめ
Web開発用ツール導入のすすめWeb開発用ツール導入のすすめ
Web開発用ツール導入のすすめ
 
ホームページ作り、考え方の「考え方」
ホームページ作り、考え方の「考え方」ホームページ作り、考え方の「考え方」
ホームページ作り、考え方の「考え方」
 
HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料HTML5勉強会 ライトニングトーク資料
HTML5勉強会 ライトニングトーク資料
 
Biology
BiologyBiology
Biology
 
Science
ScienceScience
Science
 
Foreign ai dppoint
Foreign ai dppointForeign ai dppoint
Foreign ai dppoint
 
Зимующие птицы
Зимующие птицыЗимующие птицы
Зимующие птицы
 
初心者向けホームページ勉強会(2012年2月5日)
初心者向けホームページ勉強会(2012年2月5日)初心者向けホームページ勉強会(2012年2月5日)
初心者向けホームページ勉強会(2012年2月5日)
 
Chemistry
ChemistryChemistry
Chemistry
 
Calendar jupiler pro league play offs
Calendar jupiler pro league play offsCalendar jupiler pro league play offs
Calendar jupiler pro league play offs
 
Projet speed 01022012
Projet speed 01022012Projet speed 01022012
Projet speed 01022012
 
Real time web_apps_pycon2012-v1
Real time web_apps_pycon2012-v1Real time web_apps_pycon2012-v1
Real time web_apps_pycon2012-v1
 
サイトリニューアル案
サイトリニューアル案サイトリニューアル案
サイトリニューアル案
 
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回
 
HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料HTML5 Conference 2015 WebGLハンズオン資料
HTML5 Conference 2015 WebGLハンズオン資料
 
”スラスラわかる”未経験からのHTMLとCSS
”スラスラわかる”未経験からのHTMLとCSS”スラスラわかる”未経験からのHTMLとCSS
”スラスラわかる”未経験からのHTMLとCSS
 
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
 
A investigação como elemento estruturante dos esquemas de programação arquiví...
A investigação como elemento estruturante dos esquemas de programação arquiví...A investigação como elemento estruturante dos esquemas de programação arquiví...
A investigação como elemento estruturante dos esquemas de programação arquiví...
 
Viagem
ViagemViagem
Viagem
 
LINCS Flyer
LINCS Flyer LINCS Flyer
LINCS Flyer
 

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

ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回Hitsuji
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
 
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
Seiko Kuchida
 
WordBeach @kurudrive
WordBeach @kurudriveWordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
 
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」タカシ キタジマ
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
ria1201
 
2005 07 30_xwj_customizinig
2005 07 30_xwj_customizinig2005 07 30_xwj_customizinig
2005 07 30_xwj_customizinig
Tom Hayakawa
 

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

ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
 
a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」a-sap06「カスタムフィールドを使いこなす」
a-sap06「カスタムフィールドを使いこなす」
 
WordBeach @kurudrive
WordBeach @kurudriveWordBeach @kurudrive
WordBeach @kurudrive
 
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
 
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
 
EC-CUBEプラグイン講義
EC-CUBEプラグイン講義EC-CUBEプラグイン講義
EC-CUBEプラグイン講義
 
2005 07 30_xwj_customizinig
2005 07 30_xwj_customizinig2005 07 30_xwj_customizinig
2005 07 30_xwj_customizinig
 

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