よく聞くWordPress(ワードプレス)とは何なんでしょうか。どんな仕組みなのでしょうか。今回は初心者の方で理解できるように、なるべく専門用語を使わずに、図を用いながら解説します。
目次
WordPressとは?
一言でいうとブログの運営を楽にするための無料のソフトウェアです。
WordPressを使わないブログ更新だと…
そもそもブログを含むウェブサイトというのは、コードの集まりで作られています。WordPressを使わずに、自力でブログを更新しようとすると、とっても大変です。どれだけ大変か、少し見てみましょう。
具体的には、HTMLというコードを書かなければならなくなります。しかも1記事につき1つHTMLファイルを作らなければなりません。
これが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はコードの知識が無くても使えるものの、コードの知識があるとより機能を最大限活かすことができます。
例えば、インストールしたテーマのデザインを変えたいな…と思い立つとします。「色を変えたい」「配置を変えたい」「YouTube動画を埋め込みたい」などですね。
その場合、コードの知識が必要になります。ロゴを変えるくらいであれば、コードを書く必要はないのですが、本格的にデザインカスタマイズをするにはコードをいじる必要があるのです。
一旦まとめ
- WordPressはコードの知識がなくても使えるが、知識があるとより自由にカスタマイズできる
アメブロやはてなブログとは何が違うの?
ここで誰もが疑問に思うのが
「アメブロ」とか「はてなブログ」とかじゃダメなの?会員登録するだけで無料で始められるし、サーバー借りたりする必要もないよ?
ということですよね。
こちらは、はてなブログの投稿画面です。たしかに無料で使えて、コードをいじらなくても簡単に更新ができます。
WordPressは自由度が高い
しかし、アメブロやはてなブログなどのサービスではカスタマイズに限界があります。WordPressであれば、本当に自分の好きなようにデザインやブログの構成を変えることができます。これが、アメブロなどのブログサービスとのいちばんの違いです。
具体的にWordPressでできることは、次の章で説明します。
【一旦まとめ】違いを比較
ここまでの内容を表にしてまとめてみました。
自力 | WordPress | アメブロなど | |
---|---|---|---|
カスタマイズの 自由度 | ◎ | ◎ | △ |
コードの知識(HTMLやCSS) | 必須 | あった方が 良い | なくても 良い |
記事の更新 | FTPソフトから | 専用画面から | 専用画面から |
難易度 | 難 | 中間 | 簡単 |
WordPressの特徴とできること
もっと詳しく見ていきましょう。さきほど「自由にカスタマイズできる」と書きましたが、具体的にどのようなことができるのでしょうか。
ブログの隅々まで自由に変えられる
「ここに記事へのリンクを貼って、サイドバーにはあれを載せて、広告はどこに貼って…」というように全て自由に変えることができます。
どのデザインテーマを使っていようと、やろうと思えば全ての部分を変えることができます。
プラグインで機能を付け足せる
WordPressの醍醐味の1つに「プラグイン」というものがあります。
これは、カンタンにブログに様々な機能を付け足すことができる仕組みです。
たとえば、人気のプラグインだと以下のようなものがあります。
- 目次を自動表示してくれるもの
- 投稿した画像を自動圧縮してくれるもの
- サイドバーなどに人気記事を表示してくれるもの
- お問い合わせフォームを設置してくれるもの
- バックアップを自動で取ってくれるもの
プラグインを使うのに、コードの知識は基本的に必要ありません。使いたいプラグインを探し、1クリックでインストールし、有効化するだけです。
プラグインによっては設定が必要ですが、Googleで調べればだいたい丁寧な解説が見つかります。
掲示板を問い合わせフォームを設置できる
プラグインを使えば、訪問者が投稿できる掲示板や問い合わせフォームなどを簡単に作ることができます。
ここまで紹介してきたことは、アメブロなどではできません。このように使い方次第で本当にたくさんのことができるのがWordPressなのです。噛めば噛むほど味が出る系ブログサービスと言えるでしょう。
WordPressの仕組み
WordPressのシステムはPHP(ピー・エイチ・ピー)というプログラミング言語により構築されています。そして、ブログの「記事の内容」や「更新情報」などはMySQL(マイ・エスキューエル)というデータベースシステムにより管理されています。
という説明で分かるはずがないので、図にまとめてみました。
ブラウザがブログにアクセスすると、PHP製のWordPressが反応し「このURLだから、この記事やな…」と、MySQLに記事情報を取りに行きます。そして、取り出した情報をもとに記事ページ(HTML)を作り、ブラウザに表示させているのです。
とはいえ仕組みを理解していなくてもブログ運営は問題なくできます。ひとまず「ふ~ん」程度の理解でOKです。
カスタマイズで使う4つの言語
さきほど「本格的なカスタマイズをしたければ、コードの知識も必要」というお話をしました。WordPressでブログをカスタマイズする際に触るのは、主に次4つのコンピュータ言語です。★は「押さえておくべき度」を表しています。
- HTML ★★★★
- CSS ★★★
- PHP ★★
- Javascript ★
1つずつ順番に見ていきましょう。
HTMLウェブページの土台を作るための言語です。文字や画像はHTMLにより表示されています。テンプレートのHTMLを書き換えることで、いろいろなパーツの配置や文字を変えたりすることができます。
ただし、HTMLはあくまでも土台です。HTMLだけしか使わなければ、文字と画像だけの無味乾燥なページになってしまいます。
CSSブログのあらゆるパーツの色や大きさ、余白などを変えるのはCSSです。CSSはHTMLから読み込まれます。
HTMLで作った土台に対して、CSSで見た目をおしゃれにしていくというイメージですね。
PHPWordPressというシステム自体がPHPという言語により構築されています。
HTMLとCSSが分かれば、デザインカスタマイズは十分にできますが、より高度なカスタマイズをしたり、機能を加えたりしたいときにPHPが必要になります。PHPは「HTMLを動的に(状況に合わせて)作り出す」ためのプログラミング言語です。そのため、HTMLと混ぜ込ぜに書いていくことになります。
WordPressでのPHPの活用例
例えばどんなことができるのか少し紹介したいと思います。覚える必要はありません。
例1:記事の日付を出力したい
どこかに「記事の公開日を表示したい」という場合には、次のようなPHP文を書きます。
<?php the_time('Y-m-d'); ?>
//表示例: 2016-06-29
PHPすると、記事の公開日を表示してくれるようになります。いちいちHTMLで「2016-06-29」と書く必要がなくなるのです。
例2:現在の記事のカテゴリーを表示
例えば「記事の下にもカテゴリー名を表示させたい」という場合には、次のように書きます。
<?php the_category(); ?>
//表示例: ワードプレスの使い方
PHPこのように書けば、記事ごとにいちいちカテゴリー名を書かなくても、自動で出力してくれるようになります(しかもリンク付き)。
例3:条件分岐でスマホのときだけ何かを表示
WordPress専用のPHP関数を使えば、簡単にパターン別の表示を切り替えることができます。
<?php
if ( wp_is_mobile() ) {
/* この中に書いたものはスマホのときだけ表示 */
}
?>
PHPこの関数を使えば「スマホでブログが開かれたときだけ●●を表示」というような少し高度なカスタマイズが出来ます。
ここで紹介したのはごく一部です。PHPを理解すると、たくさんの応用的なカスタマイズができるようになります。
最後はJavaScriptです。
例えばこの画像のように「クリックしたら●●を表示」というような動きはJavascript(ジャバスクリプト)で実装できます。
他にも、「クリックするとポップアップで警告を表示」や「入力された文字数をリアルタイムでカウント」などの機能はJavascriptで実現できます。「ページを読み込み直すことなく何らかの動きをつける系のものの多くはJavascriptで表現される」と何となく理解しておけば良いかと思います(最近だとCSSだけでも色々とできますが)。
とはいえ、初心者の方は、Javascirptは一旦気にしなくても良いのではないかと思います。
一旦まとめ:カスタマイズ時に使う言語
何をカスタマイズできるか | 学習 優先度 | |
---|---|---|
HTML | 土台。パーツをどこに配置するかなど | |
CSS | 装飾をする。色や大きさを変えるなど | |
PHP | 応用的なカスタマイズ。条件分岐など | |
Javascript | 動きをつけたりユーザーの操作に反応するなど |
繰り返しになりますが、これらの言語の書き方を知らなくてもWordPressでブログ運営はできます。運営しながらカスタマイズを繰り返し、少しずつ学んでいけば良いのです。
WordPressの疑問に一挙にお答え
最後に、WordPresについての疑問に一挙にお答えしていきます。
ブログ以外にも使える?
使えます。お店や会社のウェブサイト(ホームページ)を作るようなこともできます。それ用のデザインテーマもたくさんありますし、自由にデザインを変えることもできます。
広告が勝手に表示されたりしない?
WordPressの広告が勝手に貼られるようなことは一切ありません。収益をあげるためにブログに広告を貼ることは自由にできます。
WordPressで作られているかはどうやって分かる?
Is It WordPress?というサイトにチェックしたいウェブサイトのURLを入力すると簡単に調べてくれます。
無料で使える?
WordPress自体は無料で使うことができます。ただし、他に以下の2つのお金がかかるのでご注意ください。
- サーバー代:基本的に月や年単位でレンタルすることになります。
- ドメイン代:ドメインとは◯◯.comや◯◯.jpなどのブログ固有の住所のようなものです。こちらも年単位などの契約になります。
サーバーの契約はどこですればいいの?
ブログの場合、ConoHa WING、エックスサーバー、さくらレンタルサーバのどれかを使う方が多いのではないかと思います。
ロリポップだと同時アクセスが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の方を使うなら、はてなブログやライブドアブログを使うのが良いのではないかと思います。
チェックテスト
チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。