今回は、カスタムテンプレートをつくる練習。
記事やカテゴリー、広告などを詰め込んだブログのトップページではなく、いわゆる「ホームページのトップページ」っぽいシンプルなテンプレートにしてみました。
■テンプレートの作成手順
- index.phpを複製・修正
メインインデックスのテンプレート「index.php」をローカル上で複製し、「toppage.php」と名称を変更。いらない部分を削除したり、記事一覧のコードを追加後、FTPで現在使用しているテーマのディレクトリにアップ(index.phpやheader.phpなどが入ってるディレクトリ)。
- テンプレート名作成
ダッシュボードの【外観>編集】で、テーマの編集ページを開き、右側のテンプレート一覧から、「toppage.php」を選択。
「テーマの編集画面-テンプレート名追加」
「テンプレート一覧に表示される」
toppage.phpの一番上に
<?php /* Template Name: トップページのサンプルテンプレート */ ?>
と記述すると、テンプレート一覧にテンプレート名が表示される。
- ページを追加し、テンプレート選択
サイトのトップーページとブログのトップページ用にページを追加。
「サイトのトップページ用のタイトル入力」
「サイトのトップページは、トップページのサンプルテンプレートを選択」
【ページ>新規追加】でページを追加すると、右下の「テンプレート」に、先ほど作成した「トップページのサンプルテンプレート」を選択可能になる。ページのタイトルは「HOME」に。
「ブログのトップページ用のタイトル入力」
「ブログのトップページは、デフォルトのテンプレートを選択」
さらに、元のブログのトップ用に新規ページを追加して、タイトルに「ブログ」と入力し、「テンプレート」は、「デフォルトのテンプレート」を選択。
- 表示設定の変更
「表示設定の変更画面」
【設定>表示設定】から、フロントページの表示を「固定ページ」にチェックを入れ、
- フロントページ:HOME(トップページのサンプルテンプレートで作成したページ)
- 投稿ページ:ブログ(デフォルトのテンプレートで作成したページ)
を選択するとトップページが入れ替わる。
- Vicunaのグローバルナビ修正
「Vicuna設定画面」
【外観>Vicuna設定】で、グローバルナビから「トップページのサンプル」のID番号を入力して除外する。こういう設定もあるので、Vicunaは、いたせりつくせりですな。
■トップページの外観
トップページの外観は、シンプルにしたかったので、最新記事のタイトルと日付だけを一覧表示させることに。
「記事のタイトルにロールオーバーすると概要とサムネイル画像表示」
記事のタイトルをロールオーバーすると、title属性で記事の概要を表示させるようにしたけど、見た目がもひとつだったので、スタッフUEDA氏に教えてもらったJQueryをアレンジして、概要と記事中のサムネイル画像を表示するようしてみた。
■プラグイン
サムネイル画像を表示させるのは、下記のサイトを参考に「Post Thumb Revisited」というプラグインを利用。
●参考サイト
mono-stock? Blog Archive ? wordpressで記事のサムネイルを表示する
最新記事一覧のループ内に
<?php the_thumb(); ?>
を挿入するだけ。便利。
MTでは、プラグイン使わわないで必死こいてサムネイル画像を作ってたのを思い出します。
■WordPressの練習用ページ
「ホームページのトップっぽいHOME(2009.12.22現在)」
KYS-WP*(WordPressの練習用トップページ)
KYS-WP*(元のブログトップページ)
とりあえず、Movable Typeでやっていたことが、WordPressでも少しずつできるようになってきました。


![商用OK・加工OKの無料画像素材集[KOYU写]](http://www.kys-lab.com/common_files/img/banner/kys_photo_banner_120x90.gif)



コメントする