wordbeach @kurudrive

1

Ver. 1.1

2

自己紹介

名前：石川栄和（＠kurudrive）

あま市（名古屋の西隣です！）で

ベクトルという会社を細々と

やっています。

WordPressを使ってウェブサイト制作をしながら

生きています。

3

本日のお題

5

タイトル

本文

カテゴリー

投稿タグ

抜粋

カスタムフィールドとは

6

カスタムフィールドの利用例（１）

7

カスタムフィールドの利用例１－１

税理士やコンサルタントなど、専門家を登録・閲覧出来るサイト

専門家１人につき個別の詳細ページを持つ

詳細ページ

8

カスタムフィールドの利用例１－２

これだけすべてのソースを本文欄に

入力しなくてはならない。

HTMLの知識が少ない人にはわかりにくい。

・修正しにくい

・一度崩れると収集がつかない

9

カスタムフィールドの利用例１－３

カスタムフィールドを追加して、項目だけ入力すれば、整形されて表示されるようにする。

管理画面に入力欄を追加

10

カスタムフィールドの設定方法

11

カスタムフィールドの設定方法＿1

①プラグイン『Custom Field Template』をインストールして有効化

②カスタムフィールドの設定

「投稿」で使うのか「固定ページ」で使うのか、

それとも指定のカスタム投稿タイプで使うのかを指定。

フィールドの名前

フィールドのタイプ

ラベルの名前

インストールするとサンプルコードが入力されているので

なんとなくわかると思います。

12


③テンプレートファイルで呼び出す

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php echo post_custom(‘ex-companyname’) ?>

<?php endwhile; // end of the loop. ?> フィールドの名前

詳細ページのテンプレートであるsingle.phpなどに下記のコードで呼び出します。

<?php echo post_custom(‘ex-companyname’) ?>


<?php endwhile; // end of the loop. ?>

13

<?php echo post_custom(‘ex-companyname’) ?> だけでも呼び出せるが・・・


値が空の場合

歯抜けになる。

14


<?php $exCompanyname = post_custom('ex-companyname');

if ( ! empty( $exCompanyname ) ) { ?>

<tr>

<th>会社・事務所・事業者名</th>

<td><?php echo $exCompanyname ?></td>

</tr>

<?php } ?>

<?php endwhile; // end of the loop. ?>

カスタムフォールドが空じゃない場合のみ表示する


入力されていなかったら行ごと表示しない

15

カスタムフィールドの利用例（2）

16

カスタムフィールドの利用例２－１

「投稿」を「新着情報」コンテンツとして活用する場合、

詳細ページへリンクする場合もあれば、サイト内の別のページにリンクしたり、

外部サイトへリンクさせるなど、状況に応じて使い分けたい。

新着情報詳細ページへ

サイト内の別のページへ

外部のサイトへリンク

17

カスタムフィールドの利用例２－２

ページの扱いをラジオボタンで選択

リンクさせる場合のURL入力欄

18

<ul>

<?php while ( $loop->have_posts() ) : $loop->the_post();?><li>

<span class="infoDate"><?php the_time('Y.m.d'); ?></span>

<?php // 文言がプラグインの設定と連動してるので変更の際は要注意 ?>

<?php if (post_custom('詳細ページの使用') == 詳細ページを使用しない（文字のみ） ) { ?>

<?php the_title(); ?>

<?php } else if (post_custom('詳細ページの使用') == サイト内のページに直接リンクする ) { ?>

<a href="<?php echo post_custom('リンク先URL')?>"><?php the_title(); ?></a>

<?php } else if (post_custom('詳細ページの使用') == 外部サイトへ直接リンクする ) { ?>

<a href="<?php echo post_custom('リンク先URL')?>" target="_blank"><?php the_title(); ?></a>

<?php } else { ?>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<?php } ?>

</li>

<?php endwhile; ?>

</ul>

[詳細ページの使用]

type = radio

value = 詳細ページを使用する # 詳細ページを使用しない（文字のみ） # サイト内のページに直接リンクする # 外部サイトへ直接リンクする

default = 詳細ページを使用する

[リンク先URL]

type = text

size = 35

label = リンクさせるＵＲＬを記入してください。

ブラグイン（カスタムフィールドテンプレート）の設定

新着情報一覧のソース

カスタムフィールドの利用例２

※た、たぶんフィールド名が日本語ってあまり良くないと思います・・・。

20

カスタム投稿タイプとは

21

カスタム投稿タイプを使う理由（１）

Aのカテゴリで使うカスタムフィールドセット

Bのカテゴリで使うカスタムフィールドセット

22

「お知らせ」の投稿画面なら「お知らせ」に

関係のある入力項目だけが最初から表示されている。


23


「制作実績」の投稿画面なら「制作実績」に

関係のある入力項目だけが最初から表示されている。

24

カスタム投稿タイプを使う理由（2）

投稿

カテゴリー

・お知らせ

・制作実績

2011年8月のお知らせ記事を表示させたい

カテゴリーＩＤなどをテンプレートファイルに直書きして絞り込み

→ちょっと面倒だし制御しにくい。

投稿（お知らせ）

制作実績

カテゴリー

・企業サイト

・ＥＣサイト

・ブログ

2011年8月のお知らせ記事アーカイブ

2011年8月の制作実績記事アーカイブ

アーカイブが制御しやすい。

25

カスタム投稿タイプの実装方法

26

カスタム投稿タイプが使えるように設定

// ▼▼カスタム投稿タイプ／カスタム分類の追加

add_action( 'init', 'create_post_type', 0 );

function create_post_type() {

// ▼お知らせ

register_post_type( 'info', /* post-type */

array(

'labels' => array(

'name' => __( 'お知らせ' ),

'singular_name' => __( 'お知らせ' )

),

'public' => true,

'menu_position' =>5,

'has_archive' => 'info/archive/'

)

);

// ▲お知らせ

}

※他の変数は関数リファレンスを参照

http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type




27

お知らせをサイトのトップページに表示する

投稿タイプの値

28

お知らせ一覧（お知らせトップ）ページの作成

page-info.php 「お知らせ」トップ用のテンプレートファイル

【２】 page-info.phpが「お知らせ」の投稿を表示するようにカスタマイズ

【１】「お知らせ」トップ用のテンプレートファイルを用意する。

【3】「お知らせ」の固定ページを投稿する。

page-info.phpが適用されるようにスラッグ名を info にして投稿。

<ul class="entryList">

<?php

/* カスタム投稿タイプを表示する */

$loop = new WP_Query( array( 'post_type' => 'info' ) );

while ( $loop->have_posts() ) : $loop->the_post(); ?>

<li>


<?php // 文言がプラグインの設定と連動してるので変更の際は要注意 ?>

<?php if (post_custom('詳細ページの使用') == 詳細ページを使用しない（文字のみ） ) { ?>

<?php the_title(); ?>

<?php } else if (post_custom('詳細ページの使用') == サイト内のページに直接リンクする ) { ?>

<a href="<?php echo post_custom('リンク先URL')?>"><?php the_title(); ?></a>

<?php } else if (post_custom('詳細ページの使用') == 外部サイトへ直接リンクする ) { ?>

<a href="<?php echo post_custom('リンク先URL')?>" target="_blank"><?php the_title(); ?></a>

<?php } else { ?>


<?php } ?>

</li><?php endwhile; ?>

</ul>

新しく追加した投稿タイプのトップページは「固定ページ」で作ります。

29

お知らせのアーカイブを使えるように設定

// ▼カスタム投稿タイプのアーカイブ出力 global $my_archives_post_type; add_filter( 'getarchives_where', 'my_getarchives_where', 10, 2 ); function my_getarchives_where( $where, $r ) { global $my_archives_post_type; if ( isset($r['post_type']) ) { $my_archives_post_type = $r['post_type']; $where = str_replace( '¥'post¥'', '¥'' . $r['post_type'] . '¥'', $where ); } else { $my_archives_post_type = ''; } return $where; } add_filter( 'get_archives_link', 'my_get_archives_link' ); function my_get_archives_link( $link_html ) { global $my_archives_post_type; if ( '' != $my_archives_post_type ) $add_link .= '?post_type=' . $my_archives_post_type; $link_html = preg_replace("/href=¥'(.+)¥'¥s/","href='$1".$add_link."'",$link_html); return $link_html; } // ▲カスタム投稿タイプのアーカイブ出力

【１】 functions.phpに下記のソースを貼り付け

30

お知らせのアーカイブテンプレートを作成

【2】「お知らせ」のアーカイブテンプレートを作成する。

archive-info.php 「お知らせ」アーカイブ用のテンプレートファイル

<h2><?php printf( get_the_date('Y') ); ?>年のお知らせ</h2> <div class="infoList" class="sectionBox"> <ul class="entryList"> <?php while ( have_posts() ) : the_post(); ?> <li> <span class="infoDate"><?php the_time('Y.m.d'); ?></span> <?php // 文言がプラグインの設定と連動してるので変更の際は要注意 ?> <?php if (post_custom('詳細ページの使用') == 詳細ページを使用しない（文字のみ） ) { ?> <?php the_title(); ?> <?php } else if (post_custom('詳細ページの使用') == サイト内のページに直接リンクする ) { ?> <a href="<?php echo post_custom('リンク先URL')?>"><?php the_title(); ?></a> <?php } else if (post_custom('詳細ページの使用') == 外部サイトへ直接リンクする ) { ?> <a href="<?php echo post_custom('リンク先URL')?>" target="_blank"><?php the_title(); ?></a> <?php } else { ?> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php } ?> </li><?php endwhile; ?> </ul>


31

お知らせの詳細ページ／ローカルメニューの作成

single-info.php 「お知らせ」詳細ページ用のテンプレートファイル

「お知らせ」詳細ページ用のテンプレートファイルを作成する。


「お知らせ」用ローカルメニュー

<ul> <?php wp_get_archives('type=yearly&post_type=info'); ?> </ul>

single-info.php

page-info.php

archive-info.php

33

カスタム分類とは？

34

カスタム分類の概要

追加した投稿タイプに“カテゴリー”が管理出来るようにしたり、

更にカテゴリーとは別の軸のカテゴリーを作ったり出来ます。

「お知らせ」もカテゴリー分け出来るようにカスタム分類を追加

「制作実績」もカテゴリー分け出来るようにカスタム分類を追加

「制作実績」をカテゴリーとは別で、地域で分類出来るように

カスタム分類を追加

“投稿タグ”機能を追加設定する事も可能

投稿をカテゴリーやタグで分類する為の機能を追加する事が出来ます。

35

カスタム分類の利用例

カテゴリー毎や地域毎などで投稿データを呼び出す事が出来る

36

カスタム分類の実装方法

37

カスタム分類が使えるように設定

// ▼▼カスタム投稿タイプ／カスタム分類の追加

add_action( 'init', 'create_post_type', 0 );

function create_post_type() {

// ▼お知らせ

register_post_type( 'info', /* post-type */

array(

'labels' => array(

'name' => __( 'お知らせ' ),

'singular_name' => __( 'お知らせ' )

),

'public' => true,

'menu_position' =>5,

'has_archive' => 'info/archive/'

)

);

// ▲お知らせ

// ▼お知らせのカテゴリー

register_taxonomy(

'info-cat', /* タクソノミーの名前 */

'info', /* お知らせで設定する */

array(

'hierarchical' => true, /* 親子関係が必要なければ false */

'update_count_callback' => '_update_post_term_count',

'label' => 'お知らせカテゴリー',

'singular_label' => 'お知らせカテゴリー',

'public' => true,

'show_ui' => true,

'menu-order' => true,

)

);

// ▲お知らせのカテゴリー }

※他の変数はこちらの記事等を参照

http://www.h-fj.com/blog/archives/2010/08/26-152442.php




38

カテゴリー（カスタム分類）ページの作成

taxonomy-info-cate.php 「お知らせ」カテゴリー（カスタム分類）用のテンプレートファイル

【２】 taxonomy-info-cate.phpが「お知らせ」のカテゴリーに投稿された記事を表示するように作成

【１】カスタム分類用のテンプレートファイルを用意する。

<?php $catinfo = get_term_by('slug',$term,$taxonomy); ?>

<h2><?php echo esc_html($catinfo->name); ?></h2>

<?php query_posts($query_string ); ?>

<?php while (have_posts()) : the_post(); ?>

<ul class="entryList">

<li>


<?php $taxo_list = get_the_term_list( $post->ID, ‘info-cat', '', ', ', '' );

if ( $taxo_list ): ?>

<span class="infoCate">[ <?php echo $taxo_list; ?> ] </span>


</li>

<?php endwhile; ?>

</ul>

表示しているページのカスタム分類名

投稿が属するカスタム分類名

39

カテゴリー（カスタム分類）のローカルメニュー

<h3><a href=“/info/>お知らせ</a></h3>

<h4>お知らせカテゴリー</h4>

<ul>

<?php wp_list_categories('taxonomy=info-cat&title_li=&orderby=order'); ?>

</ul>

<h4>年別アーカイブ</h4>

<ul>

<?php wp_get_archives('type=yearly&post_type=info'); ?>

</ul>

40

カテゴリー（カスタム分類）の表示順制御

カスタム分類の表示順をコントロールする為にプラグイン

「PS Taxonomy Expander」を使用します。

http://www.warna.info/archives/451/

いろいろと凄く便利で詳しい使い方は下記で紹介されています。

ドラッグ＆ドロップで順番を入れ替え！

http://www.warna.info/archives/451/

41

カスタム分類のパーマリンクを調整する

ＨＯＭＥ > おしらせ > キャンペーン

理想：http://ドメイン名/info/campaign/

現実：http://ドメイン名/info-cate/campaign/

// ▼カスタム分類のパーマリンクを”/カスタム投稿名/カスタム分類名/項目”にする。

add_filter( 'term_link', 'my_term_link' ,10,3);

function my_term_link( $termlink, $term, $taxonomy){

$t=get_taxonomy($taxonomy);

$wp_home = get_option("home");

$post_type = $t->object_type[0];

if(!isset($t->object_type[1])) {

$termlink = str_replace($wp_home,$wp_home."/".$post_type,$termlink);

}

return $termlink;

}

// ▲カスタム分類のパーマリンクを”/カスタム投稿名/カスタム分類名/項目”にする。

function.phpに追加

http://ドメイン名/info/info-cate/campaign/

42

構築サイト例

http://senmonnet.com/ http://www.vektor-inc.co.jp/ http://www.delasal.com/

http://senmonnet.com/

http://www.vektor-inc.co.jp/



http://www.delasal.com/

43

最後に

44

http://www.vektor-inc.co.jp

wordbeach @kurudrive

Business