Webサイト制作におけるWordPressを用いたブログのトップページの作り方１

Webサイト制作に関連して、ブログを作る必要が出てくる場合がある。

今回はWordPressでのブログ制作におけるトップページの作り方の基本事項をまとめていく。

WordPressのインストール方法などは省略する。
参照：http://wp-exp.com/

WordPressでのブログ制作は、WordPressの管理画面（ダッシュボード）でブログに関する情報の設定や記事の投稿を行っていく。
そして、phpでページを生成し、スタイルシートでテーマを作成し、ページにテーマを適用していくという流れになるようである。

テーマとはデザインのテンプレートのようなものと考えると分かりやすいと思われる。

テーマのスタイルシートの最初に書くこと

スタイルシートの一番最初にはテーマに関する情報を記述する必要がある。
記述する主な項目は以下の通り。

項目名	記述する内容	省略
Theme Name	スタイルシートのテーマ名	不可
Theme URI	テーマ（スタイルシート）がある場所のURL	可
Description	テーマの説明文	可
Version	テーマのバージョン	可
Author	テーマの著作者	可

※テーマと認識されるために必要となるため、「Theme Name」のみ省略不可。
以下、記述例。コメントとして記述する。

/*
Theme Name: ○○○○
Theme URI: http://www.△△△
Description: ××××××.
*/

コードの書き方

基本的な書き方は以下の通り。

<?php タグ名(パラメータ値); ?>

パラメータ値があるものは括弧内にパラメータ値を指定する。パラメータ値が文字列の場合はシングルクォート「''」で囲む必要があるが、数値の場合はシングルクォートで囲む必要はない。

bloginfoタグ

bloginfoタグはブログの基本情報を出力するテンプレートタグで、主にHTMLのheadタグ内やヘッダー部で使われ、以下のように記述する。

<?php bloginfo(); ?>

bloginfoタグの主なパラメータ値と出力内容は以下の通り。

パラメータ値	出力内容
name	管理画面「設定」-「一般」の「サイトタイトル」で設定した名前を出力
description	管理画面「設定」-「一般」の「キャッチフレーズ」で設定したブログの説明文を出力
html_type	コンテンツタイプを出力。WordPressが生成するページのコンテンツタイプは「text/html」で変更不可
charset	エンコードの種類を出力。WordPressが生成するページのエンコードの種類は「UTF-8」で変更不可
url	ブログのトップページのURLを出力
template_url	テーマフォルダのURLを出力
stylesheet_url	スタイルシートのURLを出力

以下、記述例。

<?php bloginfo('name'); ?>

ループ処理

ページに表示する記事に関するデータをデータベースから取得するために用いられ、主にコンテンツ部で使われる。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
　ループ（繰り返し）処理させる内容
<?php endwhile; endif; ?>

このループ処理は最大で10件分の記事に関するデータを取得し、記事ごとに処理を実行することができる。

記事のタイトルと本文設定

主に上記のループ処理内で使われ、以下のように記述する。

<?php タグ名(); ?>

以下、主なタグ名と出力内容

タグ名	出力内容
the_title()	記事のタイトルを出力
the_content()	記事の本文を出力
the_permalink()	記事の個別ページのURLを出力
echo home_url()	ブログトップページのURLを出力。パラメータの指定を「('/')」とすることでURL末尾に「/」をつけて出力できる

※the_content()で出力する記事の本文は、自動的にpタグで囲まれるため、phpコードをpタグで囲む必要はない
※投稿作成時の記事本文の入力欄において、改行キー（Enterキー）を押すと改段の意味となり、the_content()で出力すると、段落ごとにpタグで囲まれて表示される
※Shiftキー+改行キー（Enterキー）を押すと改行の意味となり、段落は変わらず同一のpタグ内に改行コードのbrタグが挿入される

以下、上記内容に関するサンプルコード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" >
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
</head>

<body>
<!-- コンテナ開始 -->
<div id="container"> 
  
  <!-- ヘッダー開始 -->
  <div id="header">
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    <p id="desc"><?php bloginfo('description'); ?></p>
  </div>
  <!-- ヘッダー終了 --> 
  
  <!-- コンテンツ開始 -->
  <div id="content"> 
    <!-- ループ処理開始 -->
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php the_content(); ?>
    <?php endwhile; endif; ?>
    <!-- ループ処理終了 --> 
  </div>
  <!-- コンテンツ終了 --> 
</div>
<!-- コンテナ終了 -->
</body>
</html>