wordpressをCMSとして使う(4) トップページの実装
ご無沙汰しております。rcorcoです〜！
気づけばすっかり半年以上の月日が流れ、wordpressをCMSとして使うが、中途半端なまま置き去りにされておりました……。
のですが、温かいコメントを頂いてやる気を出したので、続きを書くことに致しました！
前回は、なんとな〜くblogっぽい形のスキンが出来上がったところで終わっていましたので、第4回では、トップページを実装します。
トップページは、1枚絵の上に＜タイトル＞＜メニュー＞＜最新の記事3件の情報＞を表示する構成です。
他のページとレイアウトが大きくことなるので、トップページ用のテンプレートを使うことにしました。
な、な、な、なんと、wordpressでは、テンプレートのファイル名によって、
「これはトップページ用」
「これはカテゴリページ用」
「これは固定ページ用」
「これはカテゴリスラッグがdiaryになっているもの用」
というように、簡単にデザインを分岐することができるのです！
トップページ独自のテンプレートをつくる場合は、
home.php
という名前にします。
※他のテンプレートについては、下記のURLを参考にしてくださいね。
http://luelue.com/tips/wordpress/#filename
タイトル・メニューの表示
タイトル・メニュー部分を出力するのには、
下記のタグを記述しています。
実に単純です！
<div class="menu"> <h1><?php bloginfo('name'); ?></h1> <ul id="navi"> <?php wp_list_pages('sort_column=menu_order&title_li='); ?> <?php wp_list_categories('title_li='); ?> </ul> </div>
(1)wordpressで指定したタイトルを引用する
<?php bloginfo('name'); ?>
と記述すると、
wordpress側で設定したタイトルを呼び出すことが出来ます。
wordpress側で設定したタイトルを呼び出せるということは、あとで気が変わってサイト名を変更したくなったときに、管理画面からタイトルを変えると全ての出力されるページのタイトルが変わるということです。
今回の例では、タイトルのみの表示になっていますが、
例えば、サイトの説明文も表示したい場合は、
<?php bloginfo('description'); ?>
と記述することで、管理画面で設定した説明文を表示できるようになります。
(2)メニューを表示する
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
と記述すると、固定ページの一覧が表示されます。
<?php wp_list_categories('title_li='); ?>
と記述すると、カテゴリの一覧が表示されます。
一覧のタグは、<li>〜</li>の形式で出力されるため、
かならず、メニューを表示する位置の前後に
<ul>〜</ul>を記述してあげてください。
カテゴリの更新情報を出力する
記事を更新すると、トップページに更新のお知らせが表示されると便利なので、
更新情報を出力するようにしました。
日付 カテゴリ名 - 記事のタイトル
という形式で表示させたかったので、下記のタグを記述しています。
<dl> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <dt><?php the_date(); ?></dt> <dd><?php the_category(',') ?> - <a href="<?php the_permalink(); ?> "><?php the_title(); ?></a><?php echo new_up(); ?></dd> <?php endwhile; else: endif; ?> </dl>
せっかくですので、上からひとつひとつ説明します。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
は、記事を呼び出すためのタグです。
お決まりの定型文だと思っていただければ良いかと思います。
<?php the_date(); ?>
は、日付を呼び出すためのタグです。
日付の書式は、
管理画面＞設定＞一般設定＞日付フォーマット
で変更できます。
<?php the_category(',') ?>
は、記事の属しているカテゴリと、カテゴリへのリンクを出力するタグです。
<?php the_permalink(); ?>
は、記事へのリンクを出力するタグです。
<?php the_title(); ?>
は、記事のタイトルを出力するタグです。
<?php echo new_up(); ?>
は、投稿されたばかりの記事に[new]マークを表示するためのタグです。
Customizable Post Listingsで新着にNEWをつける | さんきゅう堂的_STYLE
を参考にさせていただきました。
<?php endwhile; else: endif; ?>
これは、記事の呼び出しの終わりを意味するタグです。
endとついているのでなんとな〜くイメージできますよね。
