DreamweaverとWordPressを連携してテーマを編集する手順 第4回：WordPressのホームページをカスタマイズ

Dreamweaverl CC （2014年06月公開） 対応

この記事はアドビのDreamweaverを使ってWordPressのテーマを編集するための手順を紹介するシリーズの第4回です。第1回ではWordPressの編集に必要な基礎知識を、第2回は環境設定の方法を、第3回はWordPressテーマのカスタマイズの方法を紹介しました。今回は、ホームページをカスタマイズし、おすすめの記事がサムネール付きで表示されるように作り変えます。

Dreamweaver CC の体験版をダウンロード サンプルファイルをダウンロード

この記事の作業を実施するためには、第2回と第3回で紹介した手順を完了している必要があります。

この記事は以下の項目から構成されます：

新しいホームページのレイアウト構造を構築する

多くのブログのホームページには記事が投稿された順に並べられています。サマリーのみを表示するか、記事全体を表示するかはブログによって異なるでしょう。

ブログによっては、おすすめの記事のリストを、通常の記事リストの上に表示して、特定のコンテンツを強調するものがあります。この連載で使用しているサンプルテーマも、ホームページにいくつかのおすすめ記事をサムネール付きで表示するように作り変えてみましょう。

index.phpからhome.phpを作成する

この連載の第1回では、index.phpがアクセス時にデフォルトで読み込まれるファイルであること、ホームページへのアクセスではhome.phpがindex.phpに優先して表示されることを説明しました。新しいレイアウトを作成するにあたり、カスタマイズ用にhome.phpファイルを作成することにします。手順は以下のとおりです

  1. ダウンロードしたサンプルテーマを定義したサイトをDreamweaverのファイルパネルに開く
  2. サイトルート（MyThemeフォルダ）のindex.phpを開く
  3. home.phpという名前をつけて同じ場所に保存

以降のカスタマイズ作業はhome.phpに対して行います。

おすすめ記事用の表示領域を作成

おすすめ記事の表示位置は、ナビゲーションの下、通常の記事リストと右カラムの上にします。最大幅の960pxで表示されたときには、横に3つの記事を表示できるでしょう。

おすすめ記事の表示領域を確保するため、以下の手順により、ページ幅いっぱいに広がる横960pxのdiv領域を追加します。

  1. Dreamweaverでhome.phpを開き、コードビュー表示に
  2. ファイル冒頭にある <?php get_header();?> の直後の行にカーソルを移動、
  3. divを挿入。idは featureWrapper とする
  4. そのdiv内に、別のdivを作成。idは featuredposts とする

新しく追加したコード

おすすめコンテンツの表示用タグができたのでスタイルも少し設定します。

  1. 以下のコードをstyle.cssの最後に追加

#featureWrapper { width: 100%; clear: both; text-align: center; background: #333; } #featuredposts { width:940px; margin: 0 auto; text-align: left; height: 200px; color: #FFF; padding: 20px 0 20px 20px; }

ローカルのWebサーバーが実行されていれば、Dreamweaverのライブビューでhome.phpを確認できます。ライブビュー表示に切り替えてから、アドレスバーにhttp://localhost/と入力します。ブラウザーを起動してhttp://localhost/を開いて確認することもできます。リモートのサーバーを使用する場合は、ファイルをアップロードしてからブラウザーを使って確認することになります。

さきほど入力したコードにより下のようにおすすめ記事の表示領域が追加されたことを確認します。

ライブニューに表示されたhome.phpのおすすめ記事を表示する領域

おすすめ記事表示領域の背景色を変えたければ、style.cssファイルのfeatureWrapper IDのbackgroundの色指定を変えるだけです。featuredposts IDのheioghtに200pxを指定しているのは、コンテンツが無い状態でも領域が視認できるようにするためです。コンテンツ挿入後はこの値は削除し ましょう。

おすすめ記事用のタグを追加

おすすめ領域には3つの記事を配置したいと思います。そのために記事データ用のタグが3つ必要です。最終的には、おすすめ記事を、WordPressのデータベースから取り出して表示するわけですが、ここでは表示する際に使われる構造の実現に専念します。

記事データは float:left を指定したdivタグで囲みます。先ず、サンプルのコンテンツを使った3つのdivタグを追加して見た目を確認します。確認用のコンテンツは、後でデータベースと連携する際に削除します。

以下の手順で3つのおすすめ記事の領域を作成します。

  1. home.phpを開き、上で作成したfeaturedpostsのdivの中に別のdivを作成してfeaturebox classを指定
  2. 同様に、divを更に2つfeaturedpostsのdiv内に作成する（下図参照）

3つのおすすめ記事用タグを追加した

  1. style.cssファイルを開き、featureboxクラスを以下のように記述する

.featurebox { float:left; padding-right:20px; width: 290px; }

  1. home.phpに戻り、featurebox divの中に、以下のように、H3タグを使ったタイトル、pタグを使った適当な文章を記述

&<div class=”featurebox”> <h3>This is a sample post title</h3> <p>Lorem ipsum dolor si amet …</p> </div>

  1. Dreamweaverをライブビューに切り替え、アドレスバーにhttp://localhost/を入力、更新結果を確認（既にプレビューしていた場合は、ドキュメントツールバーの更新ボタンをクリック）

簡単なスタイル付きのおすすめ記事コンテンツ領域

  1. テーマから継承されているH3タグのスタイルを修正するため、style.css に以下のコードを追加

#featuredposts h3 { color: #F90; font-weight: normal; letter-spacing: normal; } featuredpostsのH3タグにスタイル設定

  1. featurebox divに、サムネール画像と記事本体へのテキストリンクを追加

<div class=”featurebox”> <h3>This is a sample post title</h3> <p><img src=”thumb.jpg”>Lorem ipsum dolor si amet…</p> <p class=”readit”><a href=”#”>Read more</a>»</p> </div>

  1. サムネール画像とリンクにもスタイルを設定

#featuredposts img { float:left; margin-right:8px; border: solid 3px #000; } #featuredposts a { color: #F90; } #featuredposts a:hover { color: #FFF; }

  1. featuredposts IDのスタイルから、コンテンツの追加により不要になったheight属性の指定を削除
  2. home.php内のfeaturedposts divの終了タグの直前に以下のコードを追加

<div class=”clearboth”></div>

  1. float:left 設定を解除するためのclearbothクラスをstyle.cssに作成

.clearboth { clear:both; } スタイルが設定されたおすすめ記事領域

WordPressにおすすめ記事カテゴリーを作成

ホームページの構造のカスタマイズが完了したところで、WordPressにおすすめ記事を用意します。これにはいくつもの手段がありますが、一般的な方法は専用のカテゴリーを使用することでしょう。

この記事では、WordPressにfeaturedという名前のカテゴリーを作成し、そのカテゴリーに属する記事をホームページのおすすめ記事として表示します。記事の最後に、featuredカテゴリーから最新の3記事を取り出すロジックも追加します。

WordPressにfeaturedカテゴリーを作成

以下の手順に従って、WordPressにfeaturedというカテゴリーを作成します。

  1. ブラウザーを開きWordPressの管理画面を表示（http://localhost/wp-admin/）
  2. WordPressにログイン
  3. 管理ページ左のサイドバーから「投稿」⇒「カテゴリー」と選択
  4. 「名前」にfeaturedを入力
  5. 「スラッグ」にもfeaturedを入力
  6. 「新規カテゴリーを追加」をクリックして新しいカテゴリーを保存

WordPressにfeaturedカテゴリーを作成

おすすめ記事の作成

featuredカテゴリーを作ったら、そのカテゴリーに記事を投稿できます。既にある記事をfeaturedカテゴリーに追加することもできま す。おすすめ記事の投稿には、記事のタイトルと本文を作成したら、抜粋を作成し、カテゴリーにfeaturedを指定、カスタムフィールドにサムネイル画 像のURLを記述します。

カスタムフィールドはテーマをデザインする際、大変役に立ちます。カスタムフィールドを使って、特定の名前と値の組み合わせを個々の記事に指定できます。指定した値は、get_post_meta()を使って取得して使えます。

おすすめ記事を作成する手順を紹介します。

  1. 「投稿」⇒「新規追加」メニューをクリック
  2. 記事のタイトルと本文を入力
  3. 「抜粋」の欄に記事概要を記述
  4. 「カテゴリー」の欄のfeaturedにチェック

新規におすすめ記事を追加する

  1. 「公開」パネル内の「下書きとして保存」をクリック
  2. サムネール画像をアップロードするために、左のサイドバーの「メディア」をクリック
  3. 「新規追加」をクリック、画像を指定してサーバーにアップロード
  4. アップロードが完了したら、メディアライブラリで画像をクリックして編集画面を表示
  5. ファイルのURL全体をコピーする。
  6. 左のサイドバーの「投稿」をクリック
  7. 編集する気にのタイトルをクリック
  8. カスタムフィールドを新規追加：名前にfeaturethumb、値にステップ8でコピーしたURLを指定

カスタムフィールドの追加

  1. 「カスタムフィールドを追加」をクリック
  2. 「公開」をクリック

以上を繰り返しておすすめカテゴリーの記事を3つ作成します。画像は同じものを共有しても構いません。これで、カスタマイズしたホームページに表示する記事の準備は完了です。

おすすめ記事を表示するコードを記述

それではいよいよDreamweaverに戻って、おすすめ記事を、カスタマイズしたホームページに表示するコードを記述します。

サンプルコンテンツの削除

home.phpをカスタマイズした際、設定したスタイルを確認する都合からサンプルコンテンツを追加しました。実際の記事を表示する前に、これらのコンテンツを削除しておきます。

  1. home.php内のfeaturebox divを、1つだけ残して削除
  2. featurebox div内のサンプルのタイトルを削除しH3タグのみに
  3. pタグ内のサンプルテキストを削除、imgタグはそのまま
  4. 本文へのリンクは残して、featureWrapper divのコードを以下のように：

<div id=”featureWrapper”> <div id=”featuredposts”> <div class=”featurebox”> <h3></h3> <p><img src=”thumb.jpg”></p> <p class=”readit”><a href=”#”>Read more</a>»</p> </div> </div> <div class=”clearboth”></div> </div>

繰り返し処理の実装

WordPressの一つ一つの記事は、記事データを処理してページに埋め込むPHPコードの繰り返しにより表示されます。追加したおすすめ記事の領域にも、データベースから特定のタグの付いた記事データを取得するPHPコードが必要です。

home.phpに追加するコードは、featuredposts divタグ内側で実行され、最大3回までおすすめ記事の処理を繰り返します。繰り返し処理コードの内側には、featurebox divタグと、H3タグ、pタグがありうます。

  1. home.phpを開いてfeaturedposts divタグを以下のように変更

<body> <div id=”featuredposts”> <?php $featuredPosts = new WP_Query(); $featuredPosts->query(‘category_name=featured&showposts=3′); while($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?> <div class=”featurebox”> <h3> <?php the_title(); ?> </h3> <p> <img src=”<?php echo get_post_meta($post->ID,’featurethumb’, true); ?>”/> <?php the_excerpt(); ?> </p> <p class=”readit”> <a href=”<?php the_permalink() ?>”>Read more</a>» </p> </div> <?php endwhile; ?> <div class=”clearboth”></div> </div>

  1. home.phpを保存してライブビューで表示し、3つの記事にサムネール、抜粋、本文へのリンクが表示されることを確認

記事が表示されたホームページ

上で追加したコードの動きを説明します。featuredposts divタグの直後には下のようなPHPコードがあります。

<div id=”featuredposts”> <?php $featuredPosts = new WP_Query();

これはWordPressに、$featuredPostsという名前のクエリを使い、データベースからデータを取得することを伝えます。

次の行は、featuredカテゴリーから最大3つの記事を取得するようWordPressに指示します。

$featuredPosts->query(‘category_name=featured&showposts=3’);

そして、記事を表示する処理の繰り返しの開始です。

while($featuredPosts->have_posts()) : $featuredPosts->the_post();

繰り返し処理の内部の行は、コンテンツの表示を行います。サンプルコンテンツではなく、PHPによって実際にWordPressのタグを使って取得した値が挿入されます。

<h3><?php the_title(); ?></h3> <p> <img src=”<?php echo get_post_meta($post->ID, ‘featurethumb’, true); ?>”/> <?php the_excerpt(); ?> </p> <p class=”readit”> <a href=”<?php the_permalink() ?>”>Read more</a>&raquo; </p>

次の行は、繰り返し処理の範囲の終わりを示します。

<?php endwhile; ?>

一般記事を表示するコードの修正

お気づきのように、おすすめの記事は、その下のメインの記事一覧にも重複して表示されます。メインの記事一覧にはfeaturedカテゴリーの記事が含まれないようにしたいものです。

そのためには、まずfeaturedカテゴリーのIDを調べる必要があります。以下の手順に従ってください。

  1. WordPressの管理画面左のサイドバーの「カテゴリー」をクリック
  2. featuredカテゴリーの上にマウスを移動し、ブラウザーのステータスバーに表示されるIDを確認（下図参照）

featuredカテゴリーのIDを確認する

  1. 以下のコードを、メインの記事一覧表示用の繰り返し処理の直前に挿入（10は上で確認した数字と置き換える。その際、数字の前のマイナス記号を削除しないこと）

<?php query_posts(“cat=-10”); ?>

これでfeaturedカテゴリーに属する記事は、メインの記事一覧からは除外されるようになります。Dreamwaverのライブビューでドキュメントツールバーの更新ボタンを押して、表示を確認してください。アドレスバーのURLはhttp://localhost/ のままです。

次のステップ

この記事で紹介したテーマの変更はごく僅かなものでした。Dreamweaverを使ったテーマの編集の基礎を学んだら、オリジナルの見た目を実現するためのいろいろなカスタマイズを始めてみましょう。