投稿者: blogzamurai

ワードプレスの導入時に知っておきたい2種類のWordpress

WordPress（ワードプレス）は非常に人気の高まっているブログサイトシステムです。そのためネット上には情報がたくさんあります。
しかし、初めてワードプレスを使う際に、知らないとチンプンカンプンになってしまうことがあります。それはワードプレスには2種類のタイプがあるということです。
きちんとした解説書があったり、詳しい方に教えてもらえる場合は問題ないのですが、ネットで「wordpress」で検索すると両方出てくるのでややこしいのです。
かくいう筆者も初めて使うときは全く知りませんでした。これを機に理解を深めておきましょう。

ワードプレスには2つのタイプがある

ワードプレスの2種類のタイプとは具体的にどんなものなのでしょうか。
ひとつはウェブサービスタイプのWordpressです。
こちらにアクセスしてみてください。→wordpress.com

これはアメブロなどのブログサービスと同じで、ユーザー登録することで自分の専用ページが分けてもらえるものです。作ったサイトはwordpress.comのサーバー内に存在することになり、独自ドメインなどの設定はできません。
 
そしてもう一つがファイルをダウンロードし、自分のレンタルサーバーにインストールして使うWordpressです。
一般的によく言われているワードプレスというのは9割9分がこちらを指します。ホームページはこちらになります。→wordpress.org

wordpress.orgのサイトでワードプレスのシステムファイルをダウンロードすることができます。ダウンロードしたファイルをレンタルサーバーにアップロードすることで、ご自身のウェブサイトとして運営・管理ができるのです。
もちろん独自ドメインを持っていれば、自分の好きなURLでサイトを作ることができます。

→目次にもどる

レンタルサーバーにWordpressをインストールするには？

お持ちのレンタルサーバーにWordpressをインストールすることは、実は難しいことではありません。
先ほどご紹介したwordpress.orgサイトからファイルをダウンロードしてもよいのですが、そんなことはしなくても大丈夫です。エックスサーバーをはじめ、最近のほとんどのレンタルサーバーにはWordPress自動インストール機能が備わっています。
ボタン一つでワードプレスファイルをサーバー上にアップロードしてくれます。
中にはこうした便利な機能を部分的に省く代わりに、利用料金が安くおさえられるサーバーもあります。ですが筆者の経験上、（とくに）初めてワードプレスに挑戦される場合は、トラブルがないようしっかりしたレンタルサーバーを選ぶようにしましょう。
そのほかの便利機能は公式サイトからご覧いただけます。→エックスサーバー

→目次にもどる

wordpress.orgサイトはどんなときに使うの？

wordpress.orgサイトでは、ワードプレスのシステムファイルをダウンロードできます。
これは、HTMLサイトをアップロードするときのように、レンタルサーバーにFTP接続をして、ファイルを直接アップロードします。つまり自分の手でインストールを行う、ということですね。
多少知識が必要なのと、ややめんどうにはなりますが、ご自身の知識アップを図るならばチャレンジしてみてもよいかもしれません。初めは自動インストールで使い、慣れてきたら試しに手動でインストールしてみるというのもいいですね。
サーバーによって異なりますが、例えばエックスサーバーなら一つの契約で最大30個ものワードプレスサイトを持つことができます。これだけあれば、練習用のサイトだろうと本番サイトだろうと好きなだけ試せますね。

→目次にもどる

ワードプレスのカテゴリー設定のしかたとパーマリンク設定の王道

レンタルサーバーを用意し、Wordpress（ワードプレス）のインストールが完了すると、新たな疑問が生じます。
ワードプレスには各種の基本設定があるのです。中でもよく疑問視されるのがカテゴリーの設定とパーマリンクの設定です。
これは適当に設定したり、わからないまま進んでもサイトは作れます。しかし正しい設定をするかしないかで、検索順位が大きく変わってきたり、訪問者にとってわかりにくいサイト構造になる可能性があるのです。
人によって好みの設定はありますが、本コラムでは訪問者と管理者両方の目線に立ち、一番王道と言える設定のしかたを解説します。

カテゴリー設定のしかた

WordPressはブログ形式のサイトでも、通常のウェブサイトでもどちらでもつくれる万能ツールです。
ですが、いかにブログだからといって、カテゴリー分けをおろそかにしないほうがよいでしょう。カテゴリーをしっかり分けることで、訪問者が過去に書いたページを探しやすくなります。
あとからまとめてカテゴリーを分けるのもいいのですが、ページのURLが変わる場合があるのでオススメできません。カテゴリーは思いつく限りは先に設定しておくのが吉といえます。
またカテゴリー（目次）が先にあると、記事ページに書くアイデアも浮かびやすいという副次的な効果もあるでしょう。

まずは各ページを作る前に、カテゴリー分けをしましょう。
左サイドバーの「投稿」→「カテゴリー」をクリックします。

カテゴリー新規作成画面がひらきました。
最初に思いつくだけのカテゴリーを用意します。「名前」のところは表示名なので日本語でかまいません。
「スラッグ」というのは、カテゴリーページなどを表示したときのURLの一部分になる文字列です。よって、ここは必ず半角小文字の英数字にしましょう。
「親」というところは、作成済みのカテゴリーを今から作るカテゴリーの親カテゴリーにする、ということです。「犬」の中の「大型犬」・「小型犬」のような入れ子の構造になるわけです。
 
ここで一点だけ注意があります。カテゴリーの入れ子構造は、「親」→「子」→「その子」→・・・のようにどんどん作れます。しかしサイトで使用する「ワードプレステーマ」の種類によっては、正しく階層が実現できない場合があるのです。
よって初めてカテゴリーを階層にするときは「親」→「子」までにしておく（もしくは入れ子にしない）ようにしましょう。

これは当サイトのカテゴリー設定画面です。
カテゴリー分けで最後にやっておきたいことがあります。
はじめに「未分類」というデフォルトのカテゴリーがありますよね。普通は記事のカテゴリー設定をしなかった場合自動的にこの「未分類」に属されます。
このままでは見苦しいうえ、URL用のスラッグも設定されていないので、適切なものに変えてあげましょう。例を挙げますが、名前を「コラム」「その他」、スラッグを「column」「others」「nocategory」にするなど自由です。

→目次にもどる

サイトのおすすめパーマリンク設定

ではさっそく記事ページに・・・行きたいところですが、もう一つだけ。
サイト全体のパーマリンク設定を見てみましょう。

ダッシュボードの左サイドバーから「設定」→「パーマリンク設定」をクリックします。
「一般的な設定」の「デフォルト」にチェックが入っているはずです。これでもサイトは機能しますがオススメできません。
デフォルトの右のURLを見てみると、
http://○○○.△△/?p=123
のようになっていますね。これはサイトの中身である記事ページのURLの形式を示しています。記事ページには作成順に番号が振られているのです。
しかしこのような番号であらわされたURLを見せられても、どんなページなのか開くまで全く想像がつきませんよね。
 
よって、当サイトではカスタム構造を選択し、右の入力欄に次のように入力することをおすすめします。
/%category%/%postname%/
完了したら「変更を保存」をクリックしておきましょう。
 
このパーマリンク構造だと、例えばラーメン屋さんの紹介サイトならば、次のようなURLになります。
http://○○○.△△/syouyu/syouwaramen/
「醤油」のカテゴリに属する、「昭和ラーメン」というお店の紹介ページです。いかがでしょうか、HTMLサイトのようなカテゴリーの階層構造がURLに反映していますよね。
私たちはフォルダの階層構造を意識した状態でネットを見ています。ですので、URLを見ただけで今自分がどこのページにいるかがわかりやすいほうが好まれるのです。

→目次にもどる

記事ページを書くときにパーマリンクに気をつけよう

重要な設定はこれで終わりです。
あとは記事ページを書くだけですが、そのときにもう一点だけ気をつけたいことがあります。

記事作成ページ上部の下線の部分です。記事の下書きを保存するか投稿したあとに表示される人もいるかもしれません。
ここはカテゴリー設定時の「スラッグ」のようなもので、ページのURLとして表示されます。
何もしないとページのタイトル文がそのまま入りますが、これはオススメできません。半角小文字の英数字に書き直すようにしましょう。
 
どこかのサイトやGoogle検索時に、こんなURLを目にしたことはありませんか？
http://○○○.△△/column/%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83
%AC%E3%82%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
この文字化けのようなURLの原因はマルチバイト文字というものにあります。
ここでは詳しい解説は避けますが、日本語のような複雑な文字は、それぞれ複数の記号や数字であらわされます。日本語そのままでURLにはできないので、このような文字変換が起きるわけです。
URLが長くなりすぎるので、途中で省略される場合もありますし、どんなページなのか想像がつかないですよね。
ちなみに上の例は、記事ページのパーマリンクを「ワードプレスについて」という日本語のままにした場合です。前半の「%E3%83%AF」が「ワ」ですから、長くなるのも当然ですね。
 
次の二例のようにちゃんと設定したURLと比べて、どちらがスッキリしてわかりやすいかは・・・一目瞭然ですよね。
http://○○○.△△/column/aboutwordpress/
http://○○○.△△/column/aboutwp/

→目次にもどる

MySQLとかデータベースとか聞くけど何のこと？

ホームページ（ウェブサイト）のことを勉強し始めたり、自分でサイト作成をしてみようと思うと、データベースとかMySQLという言葉を聞く機会が増えると思います。MySQL（マイエスキューエル）とは数あるデータベースの中の一つです。
Wordpressを使うときには、レンタルサーバーにMySQLをインストールすることが必須となります。ワードプレス自体がMySQLと連動するしくみになっているからです。
とはいえ多くのレンタルサーバーではMySQLのインストールは自動でできるようになっていますので、不安に思う必要はありません。
では、そもそも『WordpressがMySQLと連動している』とは、いったいどういうことなのでしょうか。
本コラムでは、ワードプレスとMySQLとの関係を簡単に解説します。

ワードプレスサイトって記事ページはどこに保存されているの？

HTMLで作ったサイトにしろ、Wordpressを使ったサイトであっても、表示する際にHTMLを出力するという点は同じです。
ですが、レンタルサーバーにFTP接続してみると、Wordpressサイトの記事ページ（ファイル）がどこを探しても見つかりません
HTMLを勉強されたあと、はじめてワードプレスを使ってみようという時に、このような疑問にぶつかるのではないかと思います。
 

例えば前回のコラムのサンプルHTMLサイトを見てみましょう。
サーバーにFTP接続をすると、上記のようなフォルダやファイルがそのまま保存されています。カテゴリー名のフォルダをさらに開くと、各お店のページファイルがあります。
 
しかしワードプレスでこのようなラーメン屋さんサイトを作った場合、どこのフォルダを探しても記事（ページ）ファイルが見つからないのです。いったいWordpressは記事をどこに保存しているのでしょう。

→目次にもどる

ワードプレスはMySQLデータベース内に記事などを保存している

やや前置きが長くなりましたが、ワードプレスではMySQLというデータベースの中に、記事やカテゴリ名などあらゆるデータを格納しているのです。データベースに保存してあるデータは、FTP接続では見たり開いたりすることはできません。

データベースというと難しい感じがしますが、エクセルの表があると思っていただければイメージがつかみやすいです。例えばMySQLの中に上記のような表の形で、記事（ページ）内容や投稿日時などが保存されているわけです。
MySQLなどのデータベースは、情報を整理して、好きな時に好きな情報を引き出すことができます。「タンス」に例えてもいいかもしれませんね。引き出しの中にそれぞれデータが入っているのです。
 
では、データベースにデータを格納するワードプレスは、HTMLサイトと比べてどこが便利なのでしょうか。例のごとく、ラーメン屋紹介サイトで解説します。

少しサイトの構造を変更し、「昭和ラーメン」のページを「醤油ラーメン」のカテゴリーと「ピックアップ」のカテゴリーの両方に入れることにしましょう。
カテゴリーごとにフォルダを分けているため、複数のカテゴリーに属するページにするには、お店のファイルをコピーする必要があります。“wyouwaramen.html”ファイルをコピーして“pickup”フォルダにも保存するわけですね。
ここで以下のような問題が生じます。

• カテゴリーが増えるほどフォルダの階層構造が複雑になる。
• 同じファイルが色々なところにあるため、サーバー容量の無駄遣いになる。
• 昭和ラーメンのページ内容を修正する必要がでたら、全部の昭和ラーメンのHTMLファイルを同じように直さないといけない。

これではサイトが大きくなればなるほど、管理がとんでもなく大変になりますね。
では同じことをWordpressで行う場合どうでしょう。
wordpressの場合、ページをどのカテゴリーに入れるかは、ページ編集画面で該当カテゴリーにチェックを入れるだけです。ページの内容を変える場合も、記事を編集するだけです。

↓↓

これだけの変更で、MySQL内では上記のようなデータの書き換えが行われます。
 
☆カテゴリーはフォルダではなく「タグ付け」で行われるため、階層構造を気にする必要はない。
☆ページが増えたわけではないので、データ容量は変わりません。
☆おおもとの記事内容が修正されているため、一回の修正で万事OK。
 
HTMLサイトと比べ、たとえ大規模なサイトであっても管理がとてもラクになるんですね。
今回はデータベースとワードプレスの関係を解説しましたが、実際サイトを運営するときには難しい知識は必要ありません。

→目次にもどる

WordPress（ワードプレス）とはそもそも何なの？

WordPress（ワードプレス）ってなんか流行っているようだけど、いったいどんなものなのでしょうか？
 
『ウェブサイトが簡単に作れる』
『ブログを書くような感覚でホームページを更新できる』
 
などという解説はよく目にしますが、ピンとこない方もいるかもしれません。
難しい説明では、
『CMS（コンテンツマネージメントシステム）というものをインストールすることで、簡単にブログやホームページを作るシステムだ』
などと言うこともありますが、これでは全くわけがわかりませんね。
通常のHTMLサイトと比べて何がどう便利になっているのか違いを知ることで、Wordpressの便利さが理解できます。

通常のHTMLサイトの更新やページ追加のしかた

WordPressを理解するために一番いいのは、簡単なものでもいいのでHTMLファイルで作成したサイトをサーバーにアップロードしてみることです。
ここでは簡単に、通常のHTMLサイトの構造を解説します。例として、ラーメン屋さんを紹介するサイトで解説します。

上記のサイト構造は一例ですが、一般的なHTMLサイトには上記のようなファイルやフォルダが入っています。（フォルダはディレクトリともいいます。）
パソコンの中に何かデータや写真を保存しておくように、ホームページはサーバーという大型のパソコンの中にこれらのファイルを保存するのです。ネット接続経由でファイルの保存をするので、アップロードするという言い方をします。
 
トップページである“index.html”ファイルと同じ階層に“category”という名前のフォルダがあります。その中にそれぞれのカテゴリーである「醤油ラーメン」や「味噌ラーメン」といったフォルダがあります。
それぞれのお店の個別ページはさらにそのフォルダの中にあります。「昭和ラーメン」のページとなる“syouwaramen.html”には以下のようにHTMLの記述があるとしましょう。

<html>
メタ情報
<head>
ヘッダー情報
</head>
<body>
（省略）
<div id="content">
<p>○○駅前にある「昭和ラーメン」は30年前の創業以来、伝統の味を守り続けている老舗ラーメン屋だ。</p>
（省略）
</div>
（省略）
<footer>
フッター情報
</footer>
</body>
</html>

では昭和ラーメンのメニューが変わって、ページを修正する必要ができた場合どうしましょう。
この場合は、アップロードしてある“syouwaramen.html”をいったんパソコンにダウンロードし、該当箇所を修正して再度アップロードし直す必要があります。
 
では次に、醤油ラーメンのカテゴリーに新しいお店のページを追加するにはどうすればよいでしょうか。
“syouwaramen.html”をダウンロードして中身を変えてもよいですが、一般的にはページのテンプレートファイルを用意します。
上記の例で言えば、ラーメン屋の説明部分である、

<div id="content">
<p>○○駅前にある「昭和ラーメン」は30年前の創業以来、伝統の味を守り続けている老舗ラーメン屋だ。</p>
（省略）
</div>

の部分（以下、コンテンツ部分と呼びます）だけを空欄にしたファイルを持っておき、ページを追加するときに該当箇所を入力してファイル名を新たにつけ、レンタルサーバーにアップロードします。
これが通常のHTMLサイトです。つまり、サイトの修正や更新の時には該当ファイルをひらき、必要な部分だけを直すわけです。

→目次にもどる

サイトの管理をラクにするプログラミング言語

HTMLサイトの運営が難しいわけではありませんが、修正や追加のたびにレンタルサーバーに接続して必要ファイルをダウンロード・アップロードするのはちょっとめんどくさいです。
とくに、「修正したいのはラーメンの値段だけなんだよ」という場合はなおさらそう思うでしょう。
それぞれのお店ページの肝である、コンテンツ部分だけを切り取れないのか。そこだけ直してボタンを押せば、サイトの修正が完了するようにはできないのか。
こういった便利な機能を実現するために使うのが、perlやPHPに代表されるプログラミング言語です。もちろん、Wordpressにはプログラミング言語が使われています。
 
またプログラミングでは、HTMLファイルの中の一部分を切り取ること以外にも、以下のようなさまざまなことができます。

• あらかじめボタンにファイルのアップロード機能をつけておくことで、毎回手動でサーバーに接続しなくてもよくなる。
• データベースと接続することで、データを「ファイル」の形で置いておかなくてよくなる。（セキュリティ面でメリット）
• データベースに格納されていれば、いつでも好きな時に取り出しやすい。

まだまだ挙げればきりがないですが、便利になるのはお分かりいただけたと思います。
ただネックになるのが、プログラミングは習得がやや難しく、好き嫌いが分かれると言います。マークアップ言語であるHTMLやデザインのCSSと比べれば、難易度は跳ね上がります。

→目次にもどる

そこで脚光を浴びたのがWordpress（ワードプレス）です。
ワードプレスはPHPというプログラミング言語で作られていますが、利用する際にはプログラミング言語など意識しないでも使えるのです。
これは大きなメリットですよね。PHPなんか全く知らない人でも、プログラムで制御された便利な機能を使うことができるわけですから。
 
HTMLサイトでは、ページを追加するたびにレンタルサーバーに接続してファイルをアップロードしていましたが、ワードプレスではそんなことしなくても大丈夫です。
「新しいページを作る」というところをクリックすれば、編集ページが開きます。編集ページには「ページのタイトル」や「内容」など、あらかじめ書くための枠が設定してあるので、キーボードさえ打てればOKなのです。
ページの内容を書き終ったら「更新」ボタンを押すだけ。これだけで新しいページがあなたのウェブサイト内に追加されます。
 
なぜWordpressが便利と言われているか、おわかりいただけたのではないでしょうか。
Wordpressはオープンソース、無料です。
WordpressなどのCMSが一般的でない頃はどうしていたのでしょうか。
プログラマの方たちが、「ミニWordpress」のようなオリジナルの管理ツールを作り、自分や会社のウェブサイト管理に使っていたわけですね。
今はこんなにも便利なツールがあるんです。

→目次にもどる

WordPressの閉じタグ（終了タグ）などのHTMLタグ自動修正

WordPressに関してこんな質問があったので、記事にしてみました。もともとはWordpressに関する質問だったのですが、実際はHTMLタグのルールに関係するものでした。
質問の内容は以下のようなものです。
WordPressのテーマ編集時、<div>の開始タグだけを入力してサイトを表示すると、自動的に</div>終了タグが補完される。
また<div><dl></div><dt><dd></dd></dt></dl>と打ち込んで保存すると<div><dl><dt><dd></dd></dt></dl></div>と</div>の位置が勝手に変わる。文法的に正しくなるように修正してあるのはわかるが、私は<a><div>～</div></a>のようにしたいところ、<a></a><div>～</div>と修正されてしまい困っている。だから自動修正をオフにしたい。
・・・という内容のご質問でした。
 
結論ですが、この方はHTMLタグのルールに関しての見落としがあることが原因でこの質問が出ており、Wordpressのタグ修正機能をなくす必要がない、ということになります。

HTMLタグの記述ルールは『かっこ』の位置だけではない

ご質問の中の2つ目の例を出されているように、この質問者様はHTMLタグの基本ルール、「タグとタグが部分的に重なるように記述してはいけない」ということを理解されています。数学の大カッコ・中カッコ・小カッコのようなものですね。
HTMLタグの部分重なりはNGで、完全にあるタグの中に他のタグを入れこむ（入れ子・ネストという）形にする必要があるからです。Wordpressのタグ自動修正機能がちゃんと働いていることがわかりますね。
 
ただ残念ながらHTMLタグには他にもルールがあるんです。
おそらくこの方は、divタグで囲んだ領域をまるごとリンクにされたいということでしょう。リンクバナーかリンクボタンのようなものを設置されたいのかもしれません。
しかしそもそも<div>タグを<a>タグで囲むという記述のしかたはHTMLのルールに反しているのです。
div要素はブロックレベル要素、a要素はインライン要素であり、インライン要素の中にブロックレベル要素を入れ込むことはできないのです。

→目次にもどる

ブロックレベル要素

ブロックレベル要素とは「独立したひとまとまり」という意味です。ブロックレベル要素のほとんどは、その中にインライン要素やテキスト（文章）を含むことができます。div要素のように一部のブロックレベル要素は、その中にさらにブロックレベル要素を含むことができるものがあります。
具体的にブロックレベル要素には以下のようなものが該当します。

• h1～h6要素（見出し要素）
• p要素（パラグラフ・段落要素）
• address要素（作成者情報）
• blockquote要素（引用文）
• ul要素・ol要素（箇条書き）
• dl要素（用語定義型要素）
• table要素（表）

上記のHTMLタグはすべてブロックレベル要素です。しかしすべてがインライン要素や他のブロックレベル要素を内包できるわけではなく、中に入れ込める要素が決まっているものもあります。

→目次にもどる

インライン要素

一方インライン要素とは「テキストの一部分に何らかの役割を持たせる」ものです。インライン要素の中には他のインライン要素やテキストを含めることができますが、ブロックレベル要素を含めることはできません。
また、リンク要素であるa要素には、同じa要素を含めることはできません。
インライン要素には以下のようなものが該当します。

• a要素（アンカー要素・リンク等）
• img要素（画像）
• em要素・strong要素（強調）
• span要素（グループ化要素）

以上のHTMLタグはインライン要素に当てはまります。
なんとなく感覚で理解できるかもしれませんが、とくに注意が必要なものが“a要素”です。リンクは文字だけでなく、画像等を囲んでボタンやバナーとして利用することもあるので、間違えやすいのです。
a要素を使われるときは、以下の2点に注意しましょう。

• a要素はインライン要素なので、中にブロック要素であるdivやpを含めない
• a要素の中にa要素は含めない

よって今回の質問者様がやりたいことを実装するには、<div><a>～</a></div>のような形にし、a要素をCSS（スタイルシート）のdisplay: block;でブロック要素にし、大きさ等を指定してあげるのがよいかと思います。
プラグインでも、Wordpressの自動整形に関するものがあるようですが、あまりオススメはしません。HTML、XHTMLなどのルールはバージョンによって変わっていきます。Wordpressのバージョンアップもこれらになるべく準拠していくことが予想されるので、部分的にプラグインなどで変えないほうがよいのではないかと思うからです。

→目次にもどる