想定読者

• HTML,CSSコード理解
• プログラミング言語の簡単な文法の理解

はじめに

ここでは、WordPress（ワードプレス）でHPを作成して実際にネットで公開するまでの流れを解説する記事になっています。

• 「せっかくHTMLやCSSで簡単なページを作ったのに、まだ自分のPCの中にあるだけ…」
• 「アルバイト先で『うちの店のHP作ってよ』と言われたけど、どうやって公開すればいいの？」

そんな悩みを持っている人を対象とした記事となっています。

HPの作成について

僕が学生の時にバイト先で突然言われました。

「うちの店のホームページ、作ってくれない？」

正直そのときは、学校の講義などでプログラミングの理解はしてたので、できそうだなと思っていました。 HTMLとCSSは少し触れたことがあり、実際にそれなりのものを作れましたが、サーバーとかドメインなどの知識などは皆無だったので、なかなか理解することに苦労したこともあります。

しかも、WordpressではPHPという言語で作られているので、独特な動き方などに理解するのに時間がかかりました。

この記事では、当時の自分と同じように

• 「バイト先やゼミ等でHPを作ってほしい」と頼まれて困っている人
• 「HTML/CSSだけじゃ公開できない」と悩んでいる学習中の学生

というような人がWordPressを触ってHPを公開する一歩を踏み出せるような記事になれば幸いです。

一般的なHTML,CSSサイトとWordPressで作ったサイトの違い

Webサイトの仕組み

まずはみなさん知っていると思いますが、Webサイトはどのように作られているか説明できますか？

ブラウザやサーバなどが絡むと思いますが、とりあえずHTMLファイルがあればWebサイトを作れます。そのHTMLをサーバーに保存して、誰かがそのファイルをみたい時に渡すことで…といった感じでWebサイトが作られています。そして、デザインなどを整えたりする時に使うのがCSSだったりします。

WordPressの仕組み

では、WordPressのWebサイトとはなんでしょうか？

AIによると、「WordPressはブログやWebサイトを作成できる世界中で最も人気のある「コンテンツ管理システム（CMS）みたいです。CMSとは？という疑問もありますが、とりあえずHTMLとCSSだけで作るWebサイトとどう違うのかも聞いてみました。

### HTML/CSSだけでHPを作る場合
- 「会社のHPを作りたい」と思ったら、以下のファイルを手作業で作るため、新しいページを増やすたびに、新しいhtmlファイルを追加してリンクを編集する必要があります。
- index.html
- about.html
- style.css

### WordPressでHPを作る場合
- WordPressをサーバーにインストールすると、最初から「記事投稿フォーム」や「固定ページ作成機能」が付いてきます。
- デザインも「テーマ」と呼ばれるテンプレートを選ぶだけで、見栄えが整ったサイトになります。
- メニューや新しいページも、管理画面からクリック操作で追加できます。

プログラミングが触ったことがある人だと、ある処理を使いまわしたい時に関数として定義し、それを使い回すと思いますが、そのような便利な処理を備えてくれているイメージです。

あと、ここで出てくるテーマとは、WordPressがある程度完成されたHPデザインを用意してくれているテンプレートのことです。それを使えば、少しテキストを修正したりするだけで使えるようになる便利なものです。ただ、今回は自分で1からサイトを作るということを目標としているので、今回はこのテーマというのは使わない方法（自作テーマの作成）を解説します。

そして、管理画面というページが用意されているみたいです。

HTMLとCSSで作ったサイトには自分が作ったページしか表示されないですが、WordPressで作ったサイトには管理画面ページが勝手に作られています。この管理画面を使ってサイトを色々変更したりできるのが特徴っぽいですね。まあそんな便利なものがあるみたいです。

いろいろと書いてきましたが、習うより慣れろといいますので、実際に作っていきましょう。

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

サーバーとドメイン

早速作る！という前に残念なお知らせです。サーバーとドメインという知識を説明しないといけないです。これだけ覚えましょう。

サーバーはパソコンで、ドメインはgoogle.comなどのサーバの名前だと思ってください。以上です。ネットにはいろいろなサーバがあります。例えばAmazonのサイトにアクセスしたら、まず自分のパソコンがAmazonが用意しているサーバにリクエストをして、サイトが自分のパソコンに表示されるようになっています。

ではこのサーバを用意するのかという話になりますが、実はこのサーバーはいろんな会社が用意してくれています。今回はその用意してくれているレンタルサーバーというものをお借りします。ただ、このレンタルサーバーというのはお金がかかります。勉強代だと思って借りてください。お金を払った方が勉強意欲が高まると思います。

レンタルサーバーの契約の流れ

先ほどもお伝えしましたが、レンタルサーバはいろいろな会社が提供しています。それぞれメリット・デメリットがあると思いますが、今回は安そうな「ロリポップ」の「ハイスピードプラン」で契約してみます。そのままドメインも契約できそうでするみたいです。

https://lolipop.jp/lp/lite

契約の申し込みをし続けると、WordPress同時インストールという欄がでてくるので、チェックしてください。

そして、最初に設定するWordPressテーマをデフォルトテーマに設定しておきます。

作成すると以下の画面になります。さっそくユーザー専用ページにログインしてみましょう。

トップページから下にスクロールすると、基本情報があり、そこにあるサイトアドレスが自分のサイトになります。クリックしてみましょう。

このようなページが出てきたら成功です！とりあえず自分だけのサイトを作ることができました。これはもう世に公開されているので、自分の携帯などでも確認することができると思います。

レンタルサーバーを契約することができたので、次はHTMLとCSSを作ってみてサイトに反映してみましょう。