Wb osaka 20120623

WP初心者なデザイナーと
いっしょに勉強しよう！
自動で管理する「イベント開催情報」と便利機能「カスタムメニュー」

2012.06.23 石田美穂

自己紹介

石田美穂

フリーランスでWEB制作やっています。

女性向けデザインやブログのデザイン＆カスタマイズ、小規模サイトの構築など。

WP歴１年くらい。PHPはコピペ専門です( ｰ`дｰ́)ｷﾘｯ

10Fのオオサカンスペースのメンバー。

こんな私でもWordCamp大阪の実行委員やってます！

ishidamiho dk45blog

今回のプレゼンの目的

私と同じような、

PHPわからないWP初心者デザイナーさんに向けて、

同じ目線で、役立つ何かをお話できればなと思っています！

目次

その1.
「カスタムフィールド」と「カスタムメニュー」を使って、簡単で更新しやすいサイ
ト制作のご紹介。

その2.
PHPのソース大解剖！何が書いてあるのかをいっしょに読み解いていくよ！

ポイントは２つ

ポイント１：イベント情報の自動管理
イベント情報を掲載し、これから開催されるものを開催日が近い順に並べる。
終了したイベントは消さずに「終了した」コーナーに置く。

ポイント２：簡単に更新できるナビゲーション
グローバルナビ、サイドナビは項目が増減される可能性があるので
なるべく簡単に更新できるようにしておきたい。

1. イベント管理機能の実装

イベント管理の実装

ポイントと全体のながれ
1. 投稿ページでつくる

2. カスタムフィールドを作ってそこに開催日を入力する

3. カスタムフィールドの「開催日」に入った値と今日の日付を比較して、未来と過

去に振り分けるPHPをテンプレートに書く。

カスタムフィールドを作成

イベント開催日を入力するためのカスタムフィールドを作成する。

※カスタムフィールドとは？
通常入力する「タイトル」と「本文」に加え、何らかの項目を追加で作成し、その値を入力できる欄が作れる。

カスタムフィールドを作成

このまま使うにはちょっと面倒？

event-date
2012/06/06

プラグインを使って入力を簡単・確実に

「Advanced Custom Fields」プラグインを使うと、日付がピッカーから入力できる

ので簡単で間違いがない。

プラグインを使って入力を簡単・確実に

・カスタムフィールドを表示させる場所を選べる

→今回はサイドバーに置いて、入力忘れを防ぐ。

・必要な時だけ表示させる事ができる

→「イベント」以外では不要なので非表示に。

・必須項目の設定ができる

→入力忘れが防げるから嬉しい。

イベントの過去と未来を振り分ける

ソースを大まかに分類して考えてみる

前半＝準備エリア
どんな条件で投稿に関する情報をDBから取ってくるのか
定義している

後半＝出力エリア
上記の条件で取って来た値をブラウザーでどう表示するのか
書くエリア

＄って何？

→ 変数の事。

計算の結果などの値をここに入れる、という意味。

変数の名前はページの中でユニークなものでないといけない

（CSSでいったらIDみたいなもの？）

もし２回定義すると、最初に書いたものが上書きされて

意図通りに動かなくなることも。

＄current_dateを翻訳する

翻訳すると：

$current_date 「current_date」という名前の変数を定義します。

= その内容は、

date_i18n wordpressの「date_i18n」という関数で取得したローカルの日付です

( 'Y/m/d' ) それをxxxx/xx/xx、という形式で表示してください

; 定義おわり

次のエリア

最初のarray＝
カスタムフィールドに入れたイベント開催日の値で
記事を並べるように指定している

二番目のarray＝
カスタムフィールドに入れたイベント開催日と、現
在の日付を比較して未来か過去かを判断している

＄args=array ってよく出てくるけど？

$args ・・・引数
array ・・・配列
その後で出てくる

query_posts

という、クエリ＝DBに入っている情報を取り出してくる指示の中で、投稿記事に
関する情報の中から、何を取り出してくるのかを定義している。

query_posts( ★ );
→この★のところに書いてもいいけど、たくさんある場合は$args=arrayとい
うふうに一旦外に取り出して書いて、あとで戻すことが多いみたい。

＄args=arrayの中を翻訳

$args = array(

最新の３０件を表示
'showposts' => '30',

並び順は、カスタムフィールドに入ってる値の順で
'orderby' => 'meta_value',

どのカスタムフィールドかというと「'ﬁnal_day'」って
'meta_key' => 'ﬁnal_day',
やつ

'order' => 'ASC',
値の小さい順＝日付の近い順で並べる

meta_query => arrayの中を翻訳

'meta_query' => array(

array(

「ﬁnal_day」という名前のカスタムフィールドを
'key' => 'ﬁnal_day',

'value' => $current_date, 「$current_date」で定義した値と比べて、

'compare' => '>=', これと同じ、もしくは大きい値のものを持って来てください

'type' => 'DATE' 値のフォーマットは日付です

$output = '';

$output 「output」という変数を定義します

= その内容は

'' からっぽです

これから「$output」という関数を使いたいんだけど、

すでにこの関数がどっかで定義されているかもしれないので、

予期せぬ値が入るのを防ぐために一旦リセットする、というお話。

. って要るの？ ''はつけないとダメなの？

$output .= '<ul classs="pagelist">';

. 文字列と文字列を連結するための記号。これがついて
いるうちは、ずっとひと続きですよ、という事

''
シングルクオーテーションの中に入っている内容はそ
のままブラウザに出力される。

. って要るの？ ''はつけないとダメなの？

$output .= '<ul classs="pagelist">';

while ( have_posts() ) : the_post();

$output .= '<li class="page_item">[ ' . get_post_meta( $post->ID, 'ﬁnal_day', true ) . ' ] ';

$output .= '<a href="' . get_permalink() .'">' . get_the_title() . '</a></li>';
endwhile;

$output .= '</ul>';

<ul classs="pagelist"> <li class="page_item">[XXX]<a href= >あああ</a></li></ul>

echo？えこー？

echo $output;

ブラウザーに変数の値を出力する

wp_reset_query();

query_posts で指定していたDBの検索条件をリセットする。

これをしておかないと、今度またDBを検索した際に今回の条件が引き
継がれてしまって、意図通りの動きにならない場合がある。

あらためて全体図

現在の日付を取得しておく

カスタムフィールドに入れた日付の順番で並べ替え

カスタムフィールドに入れた日付と現在の日付を比較して
未来かどうかを判断、未来の分だけ持ってくる

$outputの変数をリセットでからっぽにして、
上で決めた条件にしたがって、投稿の情報をいれていく

上で入れた投稿の情報をブラウザーへ表示

投稿の情報の取得条件をリセット

イベント情報が完成！

カスタムメニューを使ったナビゲーション

全体のながれ
1. function.phpにソースを追加してカスタムメニューが使えるようにする

2. テンプレートの、カスタムメニューを表示させたい場所にソースを書く

3. 管理画面で、メニューに追加したいページや投稿を選ぶ

カスタムメニューの良い所

・メニューに入れたいページを管理画面から簡単にメンテナンスできる

・現在表示されているページにクラスをふってくれる

以前は・・・

wp_list_pages('echo=0&depth=1&exclude=3,7,31' );
（´-`）.｡oO（
みたいにして、除外したいページのIDを
決めうちみたくしてメニューを作っていました。

1. function.phpに下記を追加

register_nav_menu( 'header_menu', 'ページ上部のメニュー' );

register_nav_menu( 'side_menu', 'ページ横のメニュー' );

2. テンプレート内にソースを追加

ヘッダーナビゲーション
<?php wp_nav_menu(array('theme_location' => 'header_menu'')); ?>

サイドナビゲーション
<?php wp_nav_menu(array('theme_location' => 'side-menu')); ?>

3. 管理画面からページ・投稿を選択

最後に・・・Special thanks!

PHPのソースを書いてくれたり、ソースの解説をしてくれた
WordPressなお兄さんたち！

@show_web さん @01v0101 さん木下さん

おしまい

ご清聴ありがとうございました

Wb osaka 20120623

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (8)

Similar to Wb osaka 20120623

Similar to Wb osaka 20120623 (20)

Wb osaka 20120623

Editor's Notes