WordPressとは?初心者でも分かるように仕組みを図解

wordpressとは

記事内に商品プロモーションが含まれる場合があります

よく聞くWordPress(ワードプレス)とは何なんでしょうか。どんな仕組みなのでしょうか。今回は初心者の方で理解できるように、なるべく専門用語を使わずに、図を用いながら解説します。

サルワカくんの顔(通常)
サルワカくん

ちなみに当サイトもWordPress で作られています。

1. WordPressとは?

一言でいうと ブログの運営を楽にするための無料のソフトウェアです。

WordPressを使わないブログ更新だと…

そもそもブログを含むウェブサイトというのは、コードの集まりで作られています。WordPressを使わずに、自力でブログを更新しようとすると、とっても大変です。どれだけ大変か、少し見てみましょう。

HTMLを書く

具体的には、HTMLというコードを書かなければならなくなります。しかも1記事につき1つHTMLファイルを作らなければなりません。

Dgad

これがHTMLです。自力でやろうとすると、こんな画面をブログを更新するたびに見ないといけないのです。

それだけではありません。このHTMLファイルを、自力でサーバーにアップロードしなければなりません。

レンタルサーバーを借りる

サーバーとは、インターネット上に何か公開するためのソフトやコンピュータです。ブログの場合、だいたいこのサーバーを間借りします。アパートの1室を借りるようなものです。

ドメインを決める

このお部屋の住所はあらかじめ決めておきます。誰かがブログを見るときには、この住所(URL)にアクセスするわけですね。

サーバーにアップロード

このお部屋に「ファイル転送ソフト(FTPソフト)」というものを使って、ブログを更新するたびにHTMLファイルをアップロードしなければならないのです。

一旦まとめます。

WordPressなしだと
  • ブログに1記事投稿するためには、新しいHTMLファイルを1つ作る必要あり。
  • しかも投稿時には、いちいちサーバーにアップロードしなければならない。
  • つまり面倒。

WordPressを使うと…

【前提】WordPressには次の2種類があります。
(1) ~.org:サーバーに自分でインストール
(2) ~.com:レンタルブログ
この記事では、一般的によく使われている(1).orgの方について書いています。詳しくはのちほど。

インストール

WordPressを使う場合もレンタルサーバーを借りる必要はあります。そして、借りたサーバーにWordPressをインストールします。

サルワカくんの顔(通常)
サルワカくん

最近だとレンタルサーバーの管理ページから、クリックするだけでサクッとインストールができたりします。

ログイン

するとブラウザを通してブログの管理ができるようになります。こちらは、専用のログイン画面です。ネットのサービスを使うときによく見るようなユーザー名とパスワードを入れるものですね。

ダッシュボード

ログインするとダッシュボードが開きます。

このダッシュボードから、コードをいじらなくても簡単にブログを更新したり、設定を変えたりすることができるのです。

ブログの投稿画面

こちらは記事の新規作成画面です。専門知識がなくても「タイトルを書いて、記事を書いて、画像を貼って…」というように直感的に使えるのです。

いちいち手作業でHTMLファイルを作る必要はなく、専門知識がなくても更新ができます。アメブロやLINEブログと同じように、サクッと更新ができるのです。

一旦まとめ
  • WordPressでもサーバーを借りる必要はある
  • WordPressをサーバーにインストールすれば、いちいちHTMLをいじらなくてもブログの更新ができる

参考:より詳しくウェブサイトが公開される仕組みを知りたい方はこちらの記事をどうぞ。

おしゃれなテンプレートが簡単に使える

インターネットで探せば、たくさんのWordPressのデザインテンプレート(テーマと呼ばれます)が見つかります。テーマを自分のブログにインストールすれば、簡単におしゃれなブログが出来上がります。

テーマ例

例えば、こんなおしゃれなテーマも無料で使うことができます(詳細)。

テーマ

こちらも無料のテーマです(詳細)。写真や作品のポートフォリオサイトにも使えそうですね。

こちらの記事でおすすめのWordPressテーマをまとめています。興味のある方はぜひチェックしてみてください。

コードを一切書く必要はないの?

ここがちょっとしたミソです。WordPressはコードの知識が無くても使えるものの、コードの知識があるとより機能を最大限活かすことができます

デザインカスタマイズ

例えば、インストールしたテーマのデザインを変えたいな…と思い立つとします。「色を変えたい」「配置を変えたい」「YouTube動画を埋め込みたい」などですね。

その場合、コードの知識が必要になります。ロゴを変えるくらいであれば、コードを書く必要はないのですが、本格的にデザインカスタマイズをするにはコードをいじる必要があるのです。

サルワカくんの顔(喜)
サルワカくん

「コードって何さ?」ということについては、後ほど解説します。
スキップ

一旦まとめ
  • WordPressはコードの知識がなくても使えるが、知識があるとより自由にカスタマイズできる

アメブロやはてなブログとは何が違うの?

ここで誰もが疑問に思うのが

ワケワカメちゃんの顔(通常)
サルワカくん

「アメブロ」とか「はてなブログ」とかじゃダメなの?会員登録するだけで無料で始められるし、サーバー借りたりする必要もないよ?

ということですよね。

はてなブログの投稿例

こちらは、はてなブログの投稿画面です。たしかに無料で使えて、コードをいじらなくても簡単に更新ができます。

WordPressは自由度が高い

しかし、アメブロやはてなブログなどのサービスではカスタマイズに限界があります。WordPressであれば、本当に自分の好きなようにデザインやブログの構成を変えることができます。これが、アメブロなどのブログサービスとのいちばんの違いです。
具体的にWordPressでできることは、次の章で説明します。

【一旦まとめ】違いを比較

ここまでの内容を表にしてまとめてみました。

自力 WordPress アメブロなど
カスタマイズの
自由度
コードの知識(HTMLやCSS) 必須 あった方が
良い
なくても
良い
記事の更新 FTPソフトから 専用画面から 専用画面から
難易度 中間 簡単

2. WordPressの特徴とできること

もっと詳しく見ていきましょう。さきほど「自由にカスタマイズできる」と書きましたが、具体的にどのようなことができるのでしょうか。

ブログの隅々まで自由に変えられる

できることその1

「ここに記事へのリンクを貼って、サイドバーにはあれを載せて、広告はどこに貼って…」というように全て自由に変えることができます。

どのデザインテーマを使っていようと、やろうと思えば全ての部分を変えることができます。

プラグインで機能を付け足せる

WordPressの醍醐味の1つに「プラグイン」というものがあります。

pluginで機能をつけたす

これは、カンタンにブログに様々な機能を付け足すことができる仕組みです。

たとえば、人気のプラグインだと以下のようなものがあります。

  • 目次を自動表示してくれるもの
  • 投稿した画像を自動圧縮してくれるもの
  • サイドバーなどに人気記事を表示してくれるもの
  • お問い合わせフォームを設置してくれるもの
  • バックアップを自動で取ってくれるもの

プラグインを使うのに、コードの知識は基本的に必要ありません。使いたいプラグインを探し、1クリックでインストールし、有効化するだけです。

サルワカくんの顔(通常)
サルワカくん

プラグインによっては設定が必要ですが、Googleで調べればだいたい丁寧な解説が見つかります。

掲示板を問い合わせフォームを設置できる

プラグインを使えば、訪問者が投稿できる掲示板や問い合わせフォームなどを簡単に作ることができます。

記事やカテゴリーごとにデザインを変えられる

サルワカでも活用している機能です。

dgada-12.jpg

例えばこちらはPhotoshopのカテゴリーページです。一部のカテゴリーだけデザインを変えることができるのです。

Dgada 13

こちらは本のレビューページです。通常の記事とは全く違うデザインにしてみました。

Dafda

こちらは以前ふと思い立って作った「力尽きたときの簡単レシピ」というページです。

このようにページごとにデザインを変えることができるのです。具体的な方法は下の記事で解説しています。

ウェブサービスを作ることもできる

WordPress上で、ちょっとしたウェブサービスを作ることもできます。

Dafa

例えば、こちらは標準フォント一覧からCSSのfont-familyが作れるサービスです。このページもWordPress上に作られています(このようなものを作るにはPHPやJavascriptなどの専門知識が必要ですが)。

ここまで紹介してきた5つのことは、アメブロなどではできません。このように使い方次第で本当にたくさんのことができるのがWordPressなのです。噛めば噛むほど味が出る系ブログサービスと言えるでしょう。

3. WordPressの仕組み

WordPressのシステムはPHP(ピー・エイチ・ピー)というプログラミング言語により構築されています。そして、ブログの「記事の内容」や「更新情報」などはMySQL(マイ・エスキューエル)というデータベースシステムにより管理されています。

という説明で分かるはずがないので、図にまとめてみました。

Wordpressの仕組み

ブラウザがブログにアクセスすると、PHP製のWordPressが反応し「このURLだから、この記事やな…」と、MySQLに記事情報を取りに行きます。そして、取り出した情報をもとに記事ページ(HTML)を作り、ブラウザに表示させているのです。

サルワカくんの顔(通常)
サルワカくん

とはいえ仕組みを理解していなくてもブログ運営は問題なくできます。ひとまず「ふ~ん」程度の理解でOKです。

4. カスタマイズで使う4つの言語

さきほど「本格的なカスタマイズをしたければ、コードの知識も必要」というお話をしました。WordPressでブログをカスタマイズする際に触るのは、主に次4つのコンピュータ言語です。は「押さえておくべき度」を表しています。

  1. HTML
  2. CSS
  3. PHP
  4. Javascript

1つずつ順番に見ていきましょう。

HTMLを書く

HTMLウェブページの土台を作るための言語です。文字や画像はHTMLにより表示されています。テンプレートのHTMLを書き換えることで、いろいろなパーツの配置や文字を変えたりすることができます。

HTMLのいみ

ただし、HTMLはあくまでも土台です。HTMLだけしか使わなければ、文字と画像だけの無味乾燥なページになってしまいます。

CSSを書く

CSSブログのあらゆるパーツの色や大きさ、余白などを変えるのはCSSです。CSSはHTMLから読み込まれます。

CSSでデザインを決める

HTMLで作った土台に対して、CSSで見た目をおしゃれにしていくというイメージですね。

なお、HTMLとCSSについてはそれぞれ別の記事にまとめています。

php

PHPWordPressというシステム自体がPHPという言語により構築されています。

HTMLとCSSが分かれば、デザインカスタマイズは十分にできますが、より高度なカスタマイズをしたり、機能を加えたりしたいときにPHPが必要になります。PHPは「HTMLを動的に(状況に合わせて)作り出す」ためのプログラミング言語です。そのため、HTMLと混ぜ込ぜに書いていくことになります。

WordPressでのPHPの活用例

例えばどんなことができるのか少し紹介したいと思います。覚える必要はありません。

例1:記事の日付を出力したい

どこかに「記事の公開日を表示したい」という場合には、次のようなPHP文を書きます。

<?php the_time('Y-m-d'); ?> //表示例: 2016-06-29

すると、記事の公開日を表示してくれるようになります。いちいちHTMLで「2016-06-29」と書く必要がなくなるのです。

例2:現在の記事のカテゴリーを表示

例えば「記事の下にもカテゴリー名を表示させたい」という場合には、次のように書きます。

<?php the_category(); ?> //表示例: ワードプレスの使い方

このように書けば、記事ごとにいちいちカテゴリー名を書かなくても、自動で出力してくれるようになります(しかもリンク付き)。

例3:条件分岐でスマホのときだけ何かを表示

WordPress専用のPHP関数を使えば、簡単にパターン別の表示を切り替えることができます。

<?php if ( wp_is_mobile() ) { /* この中に書いたものはスマホのときだけ表示 */ } ?>

この関数を使えば「スマホでブログが開かれたときだけ●●を表示」というような少し高度なカスタマイズが出来ます。

ここで紹介したのはごく一部です。PHPを理解すると、たくさんの応用的なカスタマイズができるようになります。

サルワカくんの顔(通常)
サルワカくん

PHPについては、あいにくサルワカでまだ解説をしていません。興味のある方は「WordPressユーザーのためのPHP入門」で学ぶのがおすすめです。

javascript

Javascript最後にJavascriptです。javascript
例えばこの画像のように「クリックしたら●●を表示」というような動きはJavascript(ジャバスクリプト)で実装できます。

他にも、「クリックするとポップアップで警告を表示」や「入力された文字数をリアルタイムでカウント」などの機能はJavascriptで実現できます。「ページを読み込み直すことなく何らかの動きをつける系のものの多くはJavascriptで表現される」と何となく理解しておけば良いかと思います(最近だとCSSだけでも色々とできますが)。

サルワカくんの顔(通常)
サルワカくん

とはいえ、初心者の方は、Javascirptは一旦気にしなくても良いのではないかと思います。

一旦まとめ:カスタマイズ時に使う言語

何をカスタマイズできるか 学習
優先度
HTML 土台。パーツをどこに配置するかなど
CSS 装飾をする。色や大きさを変えるなど
PHP 応用的なカスタマイズ。条件分岐など
Javascript 動きをつけたりユーザーの操作に反応するなど

繰り返しになりますが、これらの言語の書き方を知らなくてもWordPressでブログ運営はできます。運営しながらカスタマイズを繰り返し、少しずつ学んでいけば良いのです。

WordPressのはじめ方

WordPressの始め方は少し長くなりそうなので別の記事にまとめました。サルワカの運営サーバーである「エックスサーバー」を使っての手順となります(安いのに安定していて最高です)。

サーバーを借りて、ドメインを取得して…という手順を初心者の方でも分かるように1つずつ解説しています。

WordPressの疑問に一挙にお答え

最後に、WordPresについての疑問に一挙にお答えしていきます。

ブログ以外にも使える?

使えます。お店や会社のウェブサイト(ホームページ)を作るようなこともできます。それ用のデザインテーマもたくさんありますし、自由にデザインを変えることもできます。

広告が勝手に表示されたりしない?

WordPressの広告が勝手に貼られるようなことは一切ありません。収益をあげるためにブログに広告を貼ることは自由にできます。

WordPressで作られているかはどうやって分かる?

Fadfa

Is It WordPress?というサイトにチェックしたいウェブサイトのURLを入力すると簡単に調べてくれます。

無料で使える?

WordPress自体は無料で使うことができます。ただし、他に以下の2つのお金がかかるのでご注意ください。

  • サーバー代:基本的に月や年単位でレンタルすることになります。
  • ドメイン代:ドメインとは◯◯.comや◯◯.jpなどのブログ固有の住所のようなものです。こちらも年単位などの契約になります。

サーバーの契約はどこですればいいの?

ブログの場合、ConoHa WINGエックスサーバーさくらレンタルサーバのどれかを使う方が多いのではないかと思います。ちなみにサルワカでは、もともとロリポップを使っていたのですが、途中でエックスサーバーに乗り換えています。

Dgada 14

ロリポップだと同時アクセスが100程度でも落ちてしまうことがあったのですが、エックスサーバー(スタンダードプラン)だと1500人の同時アクセスにも耐えてくれました。


また、比較的最近登場したConoHa WINGも使いやすさ・価格の安さ・パフォーマンスのどれもがトップクラスなのでおすすめです(↓参考)

ドメインはどこで取ればよいの?

レンタルサーバーを借りるときにセットで取得できることが多いですね。個人的にもそれが楽で良いのではないかと感じています。サーバーとは別に取得するのであれば、お名前.comが無難でしょう。

SEOに強い?

よく「WordPressはSEOに強い」などと言われますが、そうとも限りません。カスタマイズが自由なぶんサイト構造を自分の思い通りに最適化することができますが、逆に言えばやり方を間違えれば失敗するリスクもあります。ただ、長い目で見ると自由度が高いために、変化に対応しやすいのかもしれません。

はてなブログなどから移行できる?

移行はできます。ただし、ここで重要になるのがドメインです。saruwakakun.comのように独自のドメインをはてなブログなどで使っていれば、ブログのURLが変わることなく移行ができるため、SEO上のリスクが小さいのです。
一方で、独自ドメインを使っていない場合、移行に伴いURLがガラッと変わるため、「SEO的にはほぼリセットに近い」という覚悟が必要でしょう。

WordPressって人気なの?

人気です。世界の25%のサイトはWordPressで作られている、というデータもあります。 WordPress now powers 25% of the Web

WordPress.comって何?

さきほど少し触れたのですが、WordPressには次の2種類があります。
(1) ~.org:ここまで紹介してきたのはこっち。
(2) ~.com:レンタルブログ。

個人的には「(2).comの方を使っている」という方には会ったことがありません。WordPressというと、ほとんどの人が(1)の方をイメージするのではないかと思います。
違いは何なのかというと、(2).comの方はサーバーを自分で借りる必要がありません。アメブロやはてなブログの方に登録作業をすればすぐに使えるようになります。
その一方で、使用できるプラグインや、デザインテーマに制限があります。指定されているものの中から選ばなければならないのです。これはけっこう致命的。個人的には(2)の.comの方を使うなら、はてなブログやライブドアブログを使うのが良いのではないかと思います。

まとめ

ここまで「WordPressとは何なのか」について解説してきました。詳しい使い方についてはまた別の記事で解説しようと思います。

同じカテゴリーの記事
同じカテゴリーの記事一覧
WordPressの使い方
サルワカ