書籍概要

Books for Web Creative

WebデザイナーのためのWordPress 入門　3.x対応

著者
発売日
更新日

概要

オープンソースのブログ・CMS構築ソフト「WordPress 3」の入門書です。新版ではCMS的な機能を強化して，より高度なWebサイトも制作できるようになりました。それに合わせて本書では，ブログサイトのカスタマイズから，オリジナルテーマの作成，さらにはCMSサイトの構築まで，3つのサンプルサイトを使いながら段階的に解説していきます。インストールや基本設定の概要といった入門者向けの話題はもちろん，WordPress 3を本格的に活用するための鍵であるPHPの基本も学べます。

こんな方におすすめ

  • Webデザイナー
  • Webディレクター

目次

Chapter1　ワードプレスの世界へようこそ

1.1　ワードプレスとは

  • ワードプレスの魅力
  • ムーバブルタイプとの違い

1.2　まずはインストール

  • インストールの前に
  • インストール手順

1.3　インストールしたらまずやること

  • ユーザー情報の変更
  • ユーザーの追加
  • ブログ情報と設定の変更
  • テーマの選択
  • ウィジェットの選択
  • プラグインのインストール

Chapter2　はじめてのテーマカスタマイズ

2.1　テーマとは何か

  • テーマファイルの中身
  • テンプレートファイルとは

2.2　デフォルトテーマをカスタマイズする

  • この章で作成するサンプル
  • サイト設定
  • ヘッダー・フッターのカスタマイズ
  • トップページのカスタマイズ
  • 投稿ページのカスタマイズ
  • 固定ページのカスタマイズ
  • カテゴリーページのカスタマイズ

Chapter3　プログラミング・ワードプレス

3.1　ワードプレスとPHP

  • PHPの基本
  • 変数と配列
  • 演算子
  • 条件分岐と繰り返し
  • 関数
  • 代表的な関数

3.2　テンプレートタグ

  • テンプレートタグとは
  • メッセージループ

Chapter4　オリジナルのテーマを作る　～フォトギャラリー～

4.1　オリジナルのテーマを作る

  • テーマに必要なファイルを用意する
  • テンプレートの階層と種類

4.2　フォトギャラリー

  • この章で作成するサンプル
  • サイトの準備
  • ポストサムネイルの利用
  • カスタム背景の利用
  • ヘッダーとフッター
  • トップページ
  • フォトページ
  • フォトページにコメント欄を表示する
  • フォトページに一覧を表示する

Chapter5　CMSとしてのワードプレス　～商店サイト～

5.1　商店サイト

  • この章で作成するサンプル
  • サイトの準備
  • カスタムポストタイプの利用
  • カスタムタクソノミーの利用
  • カスタムフィールドの利用
  • メニューの利用
  • カスタムヘッダーの利用
  • ヘッダーとフッター
  • トップページ
  • 商品の詳細ページ
  • 商品の一覧ページ

Chapter6　マルチデバイスへの対応

6.1　携帯への対応

  • Ktai Styleプラグイン
  • インストールと設定
  • テンプレートの編集

6.2　iPhoneへの対応

  • WP Touchプラグイン
  • インストールと設定
  • テンプレートの編集

Appendix

  • App.1　主なプラグイン
  • App.2　主なテンプレートタグ
  • App.3　主なワードプレス関数

サポート

ダウンロード

ご利用の前に

サンプルファイルについて，一般的な環境においては特に問題のないことを確認しておりますが，万一障害が発生し，その結果いかなる損害が生じたとしても，小社および著者はなんら責任を負うものではありません。また生じた損害に対する一切の保証をいたしかねます。必ずご自身の判断と責任においてご利用ください。

本書で紹介しているテーマの完成版を，チャプター（章）ごとにまとめています。

サンプルデータはZIP圧縮してありますので，ダウンロード後，解凍してご利用ください。

くわしい使い方につきましては，付属のreadme.txtをご確認ください。

ダウンロード
サンプルファイル（wordpress_gh.zip）

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

P.62　MEMO　5行目

誤 今回のサンプルでは引数にtitle_liを指定していますので、wp_list_pages('exlude=2,3&title_li=')というよ
正 今回のサンプルでは引数にtitle_liを指定していますので、wp_list_pages('exclude=2,3&title_li=')というよ

P.119　下から2行目

誤 また、ダウンロードしたサンプルファイルの「photo-gallery」フォルダ内にある「images」と「commons」をアップします。
正 また、ダウンロードしたサンプルファイルの「photo-gallery」フォルダ内にある「images」をアップします。

P.133　style.css　74～75行目

誤 
background: url('images/comment.
gif') left center no-repeat;
正 
background: url('images/comment.gif') left center no-repeat;

※1行目の改行は不要です。

P.185　items.php

誤 
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <li>
    <div class="image"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php the_content(); ?>
    <div class="price"><?php echo(get_post_meta(get_the_ID(),'price',true)); ?>円</div>
  </li>
<?php endwhile; endif; ?>
正 
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <li>
    <div class="image"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></div>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <?php global $single;
    if(!$single) { 
      the_content();
      ?>
      <div class="price"><?php echo(get_post_meta(get_the_ID(),'price',true)); ?>円</div>
    <?php } ?>
  </li>
<?php endwhile; endif; ?>

※5行目を5～8行目のように修正します。

※10行目を追加します。

P.186　最終行

誤 図のように表示されれば成功です。ドリンクとフードそれぞれに記事を登録して確認してみましょう。
正 図のように表示されれば成功です。ドリンクとフードそれぞれに記事を登録して確認してみましょう。なお、商品の画像はポストサムネイル（アイキャッチ画像）として登録します。手順については123ページをご覧ください。

P.188　single-drink.php

誤 
<?php get_header(); ?>
<h2>ドリンク</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <div class="image"><?php the_post_thumbnail('medium'); ?></div>
  <h3><?php the_title(); ?></h3>
  <?php the_content(); ?>
  <div class="price"><?php echo(get_post_meta(get_the_ID(),'price',true)); ?>円</div>
<?php endwhile; endif; ?>
<h3>ドリンクメニュー</h3>
<ul class="menu drink-menu parallel">
<?php
  $single = true;
  query_posts('post_type=drink');
  get_template_part('items');
  wp_reset_query();
?>
</ul>
<?php get_footer(); ?>
正 
<?php get_header(); ?>
<h2>ドリンク</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="one parallel">
  <div class="image"><?php the_post_thumbnail('medium'); ?></div>
  <div class="text">
    <h3><?php the_title(); ?></h3>
    <?php the_content(); ?>
    <div class="price"><?php echo(get_post_meta(get_the_ID(),'price',true)); ?>円</div>
  </div>
</div>
<?php endwhile; endif; ?>
<h3>ドリンクメニュー</h3>
<ul class="menu drink-menu parallel">
<?php
  $single = true;
  query_posts('post_type=drink');
  get_template_part('items');
  wp_reset_query();
?>
</ul>
<?php get_footer(); ?>

※4行目、6行目、10～11行目を追加します。

P.190　single-food.php

誤 
<?php get_header(); ?>
<h2>フード</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <div class="image"><?php the_post_thumbnail('medium'); ?></div>
  <h3><?php the_title(); ?></h3>
  <?php the_content(); ?>
  <div class="price"><?php echo(get_post_meta(get_the_ID(),'price',true)); ?>円</div>
<?php endwhile; endif; ?>
<h3>フードメニュー</h3>
<ul class="menu drink-menu parallel">
  <?php
  $single = true;
  query_posts('post_type=food');
  get_template_part('items');
  wp_reset_query();
  ?>
</ul>
<?php get_footer(); ?>
正 
<?php get_header(); ?>
<h2>フード</h2>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="one parallel">
  <div class="image"><?php the_post_thumbnail('medium'); ?></div>
  <div class="text">
    <h3><?php the_title(); ?></h3>
    <?php the_content(); ?>
    <div class="price"><?php echo(get_post_meta(get_the_ID(),'price',true)); ?>円</div>
  </div>
</div>
<?php endwhile; endif; ?>
<h3>フードメニュー</h3>
<ul class="menu drink-menu parallel">
  <?php
  $single = true;
  query_posts('post_type=food');
  get_template_part('items');
  wp_reset_query();
  ?>
</ul>
<?php get_footer(); ?>

※4行目、6行目、10～11行目を追加します。

P.p.203　5行目

誤 これらのファイルはほぼそのまま流用します。次にChapter2で作成したPC用のテーマである
正 これらのファイルはほぼそのまま流用します。次にChapter4で作成したPC用のテーマである

商品一覧