オライリーの山猫で通じる方もいらっしゃいますかね。
フリーランスになったばかりの時シロクマと一緒に買って読みなさいと言われて購入したものです。発行年が2009年とちょっと古いですが、基本的なことがまとめられているので今読んでも十分参考になります。
フロントエンドエンジニアは必須、絶対に読んだほうがいいです。
のみならず、ウェブのディレクションをする人にも、デザイナーさんにもできれば読んでほしい本です。
演習1：ナビゲーションを読み解く
勉強会「メニューを装飾するCSSを考える」で、ナビゲーションを考える演習レッスンを試みました。
どんなものであったか、以下に紹介したいと思います。
・ワイヤーフレームを描く力をつける
・適切なナビゲーションを考える力をつける
・ナビゲーションのデザインについての考察を得る
そんな効果があると思いますので、ウェブを勉強し始めたばかりの方はもちろん、ベテランの方でも発見があるのではないかと思います。
複数人で行うといろんな意見が出てきてとても参考になります。
実際には下記のように行いました。
補足6：Advanced Custom Fieldsを使ってイベント情報PR
補足4でトップページに固定ページを表示するようにしました。
トップページにも直近に開催されるイベント情報を表示できるようにします。
イベント情報から直近のものを表示するように設定してもいいのですが、
今回は「Advanced Custom Fields」の「関連」を利用して表示します。
Advanced Custom Fieldsのフィールドを新しく作り、下記のように設定して、補足4で指定した、トップページに表示する固定ページで管理できるよう設定します。
すると下記のように固定ページの管理画面に表示されるようになるので、トップページに表示したい勉強会の記事を選択します。
search…のところにキーワードを入力すると候補の記事から検索が可能なので、件数が増えても便利です。また、あらかじめ特定のカテゴリーやカスタム分類を選んでおくことも可能です。複数件選択することもできます。
トップページのテンプレート、front-page.php には下記のようなコードを書いて、「関連」で選んだ記事を表示しています。
<?php
$lately_lessons = get_field('lately_lesson');
if( $lately_lessons ): ?>
<?php foreach( $lately_lessons as $post): ?>
<?php setup_postdata($post); ?>
<div class="entry-content entry-content_lately-lesson">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php
$today = date("Ymd");
$lesson_date = get_field('lesson_date_start');
if($today > $lesson_date):?>
<p class="thanks-comennt">この勉強会は終了いたしまいた。お集まりいただきありがとうございました m(_ _)m</p>
<?php endif;?>
<?php the_content();?>
<h3>開催概要</h3>
<dl class="lesson-info">
<dt>開催日</dt><dd><?php the_field('lesson_date');?></dd>
<dt>場所</dt><dd><?php the_field('lesson_address');?></dd>
</dl>
<div class="read-more"><a href="<?php the_permalink();?>">詳細を見る</a></div>
</div><!-- .entry-content -->
<?php endforeach; ?>
<?php wp_reset_postdata(); ?>
<?php else:?>
<p>近日開催予定の勉強会はありません。</p>
<?php endif; ?>
「Advanced Custom Fields」の「関連（Relationship）」詳しい使い方はこちら。
http://www.advancedcustomfields.com/resources/relationship/
補足5：トップページに新着記事へのリンクを数件表示する
補足4でトップページに固定ページを表示しました。
ですが、トップページに新着記事へのリンクはあったほうが読んでもらえそうなので、公開日、記事のタイトル、リンクを数件表示させてみます。
get_posts()を使います。コードは下記の通り。
<ul class="entry-list">
<?php
$args = array(
'posts_per_page' => 10//1ページに表示する件数
);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li class="list-item"><?php the_time('Y年m月d日');?> <a href="<?php the_permalink();?>"><?php the_title();?></a></li>
<?php endforeach; wp_reset_postdata();?>
</ul>
get_posts()を使うといろんな条件で投稿や固定ページカスタム投稿などの記事の情報などを表示することができます。
たとえば、投稿で勉強会のフォローアップというカテゴリに属しているものだけを表示するとか、イベント情報で開催中のもの（過去の勉強会に分類されていないもの）だけを表示する、固定ページである親ページの子ページだけを表示する、などです。
いろいろ使えます。
使い方については、下記を参照ください。
http://wpdocs.osdn.jp/テンプレートタグ/get_posts
補足4：トップページに固定ページを表示する方法
WPのトップページは、テーマにもよりますが、デフォルトのテーマでは投稿の一覧になっている場合があります。
ブログとして利用する場合はこれで構いませんが、企業のホームページなどとして利用する場合には、トップページの内容を「固定ページ」のように扱うと便利な場合が多々あります。
その方法を紹介します。
まず先に、トップページに表示したい内容を掲載する固定ページを作成しておきます。下記のような感じです。
内容は下記のように入力してあります。
次に管理画面のサイドバーにある「設定」＞「表示設定」を開きます。
フロントページがサイトのトップページのことを指します。
デフォルトでは「最新の投稿」となっており、表示件数で指定された数ぶんの記事が表示されます。
これを、固定ページに変更します。
あらかじめ作っておいた固定ページを選択して、保存します。
この時、フロントページのテンプレートは front-page.php 、
投稿ページのテンプレートは home.php となります。
これで設定はOKです。
下記のように表示ができます。
※このサイトのトップページについては、もうちょっとカスタマイズしています。
その続きは補足5、補足6で紹介します。
補足3：日付を比べて条件分岐する
イベントが終了したのちの記事に「このイベントは終了しました」などのちょっとしたコメントを掲載する方法を検討しました。
手動でコメントを追加すればどんなことでも可能ですが、今回は日付を比べて条件分岐をしてコメントを表示する仕様を考えました。
あらかじめ、イベント情報のページにはイベントの開催日（複数日に渡る場合は終了日）をYYYYMMDDの形で取得できるように設定しておきます。
今回はAdvanced Custom Fieldsでデイトピッカーを利用しています。
実際に書いてあるコードはこちらです。
<?php
$today = date("Ymd");//本日の日づけ
$lesson_date = get_field('lesson_date_start');//イベントの日付
//イベントの日付が小さかったら以下を実行
if($today > $lesson_date):?>
<p class="thanks-comennt">この勉強会は終了いたしまいた。お集まりいただきありがとうございました m(_ _)m</p>
<?php endif;?>
補足2：終了したイベントを一覧でどう扱うか？
第1.5回の勉強会では、勉強会の一覧をどう見せるかから、終了したイベントを一覧でどう見せるかを検討することに発展し、「イベント一覧から終了したイベントを見えなくする方法」について検討しました。
結果から言うと、カスタム分類を利用して「イベントのステータス」という分類を増やし、ここで「過去の勉強会」と選択した場合に、勉強会の一覧から除外するように実装しました。
つまり、カスタム投稿のアーカイブから特定のタームを除外して一覧を表示することとしました。