More Related Content Similar to 初心者向けホームページ勉強会(2012年4月8日)
Similar to 初心者向けホームページ勉強会(2012年4月8日) (8) 初心者向けホームページ勉強会(2012年4月8日)2. 目次
● Magic Fields2 を使ったサンプルサイトの紹介
●
子テーマとはなにか
● Magic Fields2 を使う準備(管理画面編)
● Magic Fields2 を使う準備(テーマ編)
● Magic Fields2 でカスタムタクソノミーを使う
9. 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
*/
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 用の飾り
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. Create a Group か Create a Field をクリックしてカスタムフィールド
を作ります。
グループは順序を入れ替えることができます。
フィールドは順序の入れ替えができません。
20. Lavel をつけると自動的に Name も生成されます。
カスタムフィールドのタイプを選択できます。入力欄を
Textbox や image や checkbox list にすることができます。
必須にしたいときは上のチェックボックスにチェックを入れます。
26. Twenty Ten の子テーマに single-musician.php を用意せずに
先ほど入力したページを表示させると、通常の投稿欄に
入力した YouTube の情報だけが表示されます。
27. まずは簡単な表示方法です。
Twenty Ten から single.php を
コピーし、 single-musician.php に
リネームします。
適当な場所に以下のコードを書きます。
<?php echo get_image('cd_picture');?>
<?php echo get('cd_title');?>
画像は get_image() 、そのほかのデータ
は get() と書くと表示されます。
() の中には Magic Fields2 の管理画面の
赤枠の部分を入れます。
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. TOP ページに最新情報を出すときは、 Twenty Ten から index.php をコピーして
home.php にリネーム後、 loop を呼び出している部分を消して次のページのコード
を書きます。
index.php と home.php がある場合は、 home.php が TOP ページ用になります。
31. <?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";
?>
33. Add new Custom Taxonomy をクリックして新しいタクソノミーを
作ります。 functions.php に記述して作ることもできます。