第3回 WordPressでサイト構築前に行う設定をまとめる（一般設定編）
Webサイトのページ構成などが決まったら、いよいよWordPressの方に入っていきますが、まずは左メニューの簡単な説明とインストール後の一般設定で、はじめに行いたい点を見ていきます。各種設定は後からの変更も可能ですが、ページのURLを変更する場合は、お気に入りに登録してくれた人や各種ソーシャルボタンの履歴などがクリアされますので、はじめにしっかりと決めておくことが大切です。またWordPressでは左メニューは自由にカスタマイズできるものとして考えておくとよいでしょう。
解説：（有）ムーニーワークス ハヤシユタカ
解説：（有）ムーニーワークス ハヤシユタカ
●WordPressのインストール画面
はじめからWordPressの簡単インストールなどが入っているレンタルサーバの場合は、インストールは簡単です。コントロールパネルから「簡単インストール」ボタンを押してインストール場所を設定するだけで、難しいデータベースなどの設定をしないで使用することができます。初めての人やノンプログラマーの方はWordPressの実装が簡単なレンタルサーバを選ぶとよいでしょう。最近はどのレンタルサーバも簡単にWordPressを使えるものが増えています。これもWordPressが多く利用されている理由のひとつでしょう。
インストールの際に入力する情報
（▲クリックして拡大）
デフォルトの管理画面の左サイドメニュー
（▲クリックして拡大）
インストール画面では一番下の「検索エンジンによるサイトのインデックスを許可する」のチェックを外しておきましょう。チェックをつけておくと作成途中から検索エンジンにヒットしてしまいます。
サイト名（ブログ名）の変更やアカウントID情報、パスワード、登録メールアドレスなどの設定は後から変更可能です。
サイト名（ブログ名）の変更やアカウントID情報、パスワード、登録メールアドレスなどの設定は後から変更可能です。
デフォルトの管理画面の左サイドメニューの全体
（▲クリックして拡大）
WordPressをインストールし、管理画面を見てみると左側のメニューは初期状態のテーマのものとなっています。これらは違うテーマを使用するとテーマごとに違うメニューが出てきますので、いろいろな書籍やテーマなどによって違っていてもあまり気にする必要はありません。WordPress初心者の片は、まず赤枠内の部分の役割を覚えましょう。
ちなみに展開したメニューの一覧は、左図のようになります。
ちなみに展開したメニューの一覧は、左図のようになります。
サイトの基本情報を設定するエリア （▲クリックして拡大）
続いて、次に設定したいのは、WordPressの基本情報を決める「設定」メニューです。ここでは、それらについてまとめます。
それでは赤枠の4つの設定から見ていきましょう。
それでは赤枠の4つの設定から見ていきましょう。
●「設定」→「一般」でサイト情報を管理する
サイト名や投稿時の日付のフォーマットの設定を行います
(▲クリックして拡大)
| 「サイト名」や「キャッチフレーズ（副題）」な投稿時の日付のフォーマットの見せ方などを設定するエリアです。 ブログなどでは記事を投稿した日付を表示しているサイトが多いと思いますが、通常のビジネスサイトで投稿日とかは必要ないという場合はデフォルトのままで構いません。よく使うとしたら、更新情報の日付として「日付のフォーマット」に活用できます。 |
●「設定」→「表示設定」でサイト情報を管理する
1ページに表示する件数やRSSの表示設定を行います
（▲クリックして拡大）
ここでは、投稿した記事を1ページ内に表示させる最大数の設定やRSSのフィードへ情報を出す際の表示の設定を行います( ※1ページの表示設定はビジネスサイトではより細かく設定したいので、後ほどプログラムの方でも分岐させます)。
またフロントページの設定は今回は使用せずに「最新の投稿」としてありますが、簡単な説明を画像内にいれております。
またフロントページの設定は今回は使用せずに「最新の投稿」としてありますが、簡単な説明を画像内にいれております。
●「設定」→「メディア」で投稿時にアップする画像サイズの設定をする
ここでは、記事を投稿する際に画像をアップロードしたサイズを設定を行います。
WordPressではデフォルトで1枚の画像をアップロードすると他に3枚の合計4枚の画像が用意されます。これらは自分のサイトのデザイン内の見せ方によって決めますので、ページ数やフォーマットが多いビジネスサイトでは、はじめにしっかり決めたい部分となります。
例えば製品紹介ページで大きめの画像を使い、さらにクリックで拡大画像を見せ、トップページではサムネイルというようにする場合などに各サイズを考えてから、元画像の作成とアップロード時に縮小されるサイズを決めます。
一度投稿した後に、画像サイズを変更しても、すでに投稿した画像のサイズは元の画像サイズのままとなってしまいます。※これらを新しい画像サイズに一括かき出しのプラグインがあります。
これらはサイトのデザイン案の段階でしっかりとルール付けをすることで、後からやり直しを防ぐことができるでしょう。※この3つの設定以上に別のサイズで画像を書き出すことも可能ですので後ほど紹介します。
投稿する画像サイズの設定 ※キャプチャー内はサンプルサイトの数値です
（▲クリックして拡大）
今回設定した画像サイズはサンプルサイト用のものです。
どのようになっているかは下記のサンプルサイトで確認できます。
URL:http://wordpress-book.webdesignmatome.com/
どのようになっているかは下記のサンプルサイトで確認できます。
URL:http://wordpress-book.webdesignmatome.com/
●サムネイルサイズ→幅：280 高さ：100
→TOPページのトピックスページのサムネイル用の画像として使用します。
●中サイズ→幅：300 高さ：0
→セミナー＆製品画像の個別投稿ページ内の画像として使用します。
●大サイズ→幅：460 高さ：0
→トピックス個別投稿ページ内の画像として使用します。
→TOPページのトピックスページのサムネイル用の画像として使用します。
●中サイズ→幅：300 高さ：0
→セミナー＆製品画像の個別投稿ページ内の画像として使用します。
●大サイズ→幅：460 高さ：0
→トピックス個別投稿ページ内の画像として使用します。
※画像サイズの考え方はいろいろありますので参考としてご覧ください
●「設定」→「パーマリンク設定」で投稿時のURLを設定をする
「パーマリンク設定」は記事をアップする際のURLになる部分で、ビジネスサイト制作では大変重要なものとなります。ブログなどでは日記のように考えると記事のURLは日付でも良いと思いますが、たくさんのフォーマットとなるビジネスサイトでは日付だけのURLではわかりにくくなってしまいます。そこで今回は下記のようなパーマリンク設定を行いました。
投稿する記事のURLを設定します
※キャプチャー内はサンプルサイトの設定です
（▲クリックして拡大）
投稿時に設定するカテゴリー名と投稿時に
設定するスラッグ名をURLとします
（▲クリックして拡大）
ここで少しでききた「カテゴリー名」と「スラッグ名」について見ていきます。カテゴリー名というのは、ブログなどで日記を書く際のカテゴリーを分ける際の名称です。通常サイトの場合は更新性のあるページ「お知らせ」や「セミナー情報」や「製品情報」などをカテゴリーとして使用します。
通常サイトを例にした場合にURLとしてお知らせページのURLは「news」、製品情報ページのURLは「products」と作成する場合に、
--------------------------------------------
お知らせ：www.example.com/news/
製品情報：www.example.com/products/
--------------------------------------------
ここで、このURLとして使う設定が「スラッグ」となります。
「スラッグ」とは、カテゴリーの作成や記事投稿や固定ページの作成の際に、WordPressによってURLが自動生成されますが、このURLは日本語を入力した場合にURLが置き換わってしまいます。
それを防ぐためにスラッグを半角英数字で任意の名前をつけます。
通常サイトを例にした場合にURLとしてお知らせページのURLは「news」、製品情報ページのURLは「products」と作成する場合に、
--------------------------------------------
お知らせ：www.example.com/news/
製品情報：www.example.com/products/
--------------------------------------------
ここで、このURLとして使う設定が「スラッグ」となります。
「スラッグ」とは、カテゴリーの作成や記事投稿や固定ページの作成の際に、WordPressによってURLが自動生成されますが、このURLは日本語を入力した場合にURLが置き換わってしまいます。
それを防ぐためにスラッグを半角英数字で任意の名前をつけます。
例）カテゴリー名が「お知らせ」でスラッグ名を使用しない場合のURL
http://www.example.com/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/
と文字化けのように置き換わってしまいます。
このときスラッグ名に「news」と設定し直すことで
http://www.example.com/news/
とすることが可能となります。
このようにすることで「わかりやすく・伝えやすいURL」にしていくことができます。
http://www.example.com/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/
と文字化けのように置き換わってしまいます。
このときスラッグ名に「news」と設定し直すことで
http://www.example.com/news/
とすることが可能となります。
このようにすることで「わかりやすく・伝えやすいURL」にしていくことができます。
設定したパーマリンクの設定「/%category%/%postname%/」のcategoryの部分に自分で作成したカテゴリー名に設定したスラッグ名がURLとして設定されます。また、構築時にページや記事の条件分岐の際にもこのスラッグを使うことが可能です。パーマリンク設定はこれ以外にも設定方法がいろいろありますので、自分のサイト設計にあったものを使ってあげるとよいでしょう。
今回はサイト構築前のWordPressの設定関連の説明をまとめてみました。
次回は「WordPressのカテゴリーと固定ページのスラッグの違い理解して投稿の準備をする」として、作成するコンテンツリストから「投稿」のカテゴリー分けやスラッグ名「固定ページ」のスラッグ名などの設定をまとめていきたいと思います。
次回は「WordPressのカテゴリーと固定ページのスラッグの違い理解して投稿の準備をする」として、作成するコンテンツリストから「投稿」のカテゴリー分けやスラッグ名「固定ページ」のスラッグ名などの設定をまとめていきたいと思います。
●本連載で使用しているサンプルサイトをゼロから作成できる書籍
本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。
Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile：http://jquerymobile-memo.co/
【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)
