WordPressの勉強-06「カスタムテンプレート作成」

December 22, 2009
custom_tpl_main.jpg

今回は、カスタムテンプレートをつくる練習。

記事やカテゴリー、広告などを詰め込んだブログのトップページではなく、いわゆる「ホームページのトップページ」っぽいシンプルなテンプレートにしてみました。

■テンプレートの作成手順

  1. index.phpを複製・修正

メインインデックスのテンプレート「index.php」をローカル上で複製し、「toppage.php」と名称を変更。いらない部分を削除したり、記事一覧のコードを追加後、FTPで現在使用しているテーマのディレクトリにアップ(index.phpやheader.phpなどが入ってるディレクトリ)。

  1. テンプレート名作成

ダッシュボードの【外観>編集】で、テーマの編集ページを開き、右側のテンプレート一覧から、「toppage.php」を選択。

テンプレート名

「テーマの編集画面-テンプレート名追加」

テンプレート名

「テンプレート一覧に表示される」

toppage.phpの一番上に

<?php
/*
Template Name: トップページのサンプルテンプレート
*/
?>

と記述すると、テンプレート一覧にテンプレート名が表示される。

  1. ページを追加し、テンプレート選択

サイトのトップーページとブログのトップページ用にページを追加。

ページを編集(タイトル)

「サイトのトップページ用のタイトル入力」

ページを編集(テンプレート名)

「サイトのトップページは、トップページのサンプルテンプレートを選択」

【ページ>新規追加】でページを追加すると、右下の「テンプレート」に、先ほど作成した「トップページのサンプルテンプレート」を選択可能になる。ページのタイトルは「HOME」に。

ページを編集(タイトル)

「ブログのトップページ用のタイトル入力」

ページを編集(テンプレート名)

「ブログのトップページは、デフォルトのテンプレートを選択」

さらに、元のブログのトップ用に新規ページを追加して、タイトルに「ブログ」と入力し、「テンプレート」は、「デフォルトのテンプレート」を選択。

  1. 表示設定の変更
表示設定

「表示設定の変更画面」

【設定>表示設定】から、フロントページの表示を「固定ページ」にチェックを入れ、

  • フロントページ:HOME(トップページのサンプルテンプレートで作成したページ)
  • 投稿ページ:ブログ(デフォルトのテンプレートで作成したページ)

を選択するとトップページが入れ替わる。

  1. Vicunaのグローバルナビ修正
除外ページ

「Vicuna設定画面」

【外観>Vicuna設定】で、グローバルナビから「トップページのサンプル」のID番号を入力して除外する。こういう設定もあるので、Vicunaは、いたせりつくせりですな。

■トップページの外観

トップページの外観は、シンプルにしたかったので、最新記事のタイトルと日付だけを一覧表示させることに。

記事のタイトルにロールオーバーすると概要とサムネイル画像表示

「記事のタイトルにロールオーバーすると概要とサムネイル画像表示」

記事のタイトルをロールオーバーすると、title属性で記事の概要を表示させるようにしたけど、見た目がもひとつだったので、スタッフUEDA氏に教えてもらったJQueryをアレンジして、概要と記事中のサムネイル画像を表示するようしてみた。

■プラグイン

サムネイル画像を表示させるのは、下記のサイトを参考に「Post Thumb Revisited」というプラグインを利用。

●参考サイト

mono-stock? Blog Archive ? wordpressで記事のサムネイルを表示する

最新記事一覧のループ内に

<?php the_thumb(); ?>

を挿入するだけ。便利。

MTでは、プラグイン使わわないで必死こいてサムネイル画像を作ってたのを思い出します。

■WordPressの練習用ページ

sample

「ホームページのトップっぽいHOME(2009.12.22現在)」

KYS-WP*(WordPressの練習用トップページ)

KYS-WP*(元のブログトップページ)

とりあえず、Movable Typeでやっていたことが、WordPressでも少しずつできるようになってきました。

関連記事

トラックバック(0)

コメントする


画像の中に見える文字を入力してください。

PageTop