ワードプレスをどういう順番でHPにしていくか、ざっくりまとめてみます。
「こうして、ああすると、HPができるんだ!」というイメージが持てるようにします。
アメーバブログですとメールアドレスを登録するだけでブログができあがってますが、ワードプレスサイトではもう少々やる必要があるんです。
*目次の1と2を入れ替えました。サーバー借りるのを先にします(ドメイン無料サービス利用を考えるため)
目次
1.レンタルサーバーを借りる(ワードプレス設置に必要です)
2.独自ドメインを取得する(サブドメインも必要ならそちらも)
3. レンタルサーバー(1)とドメイン(2)を接続する
4.サーバー(3)にワードプレスを「自動インストール」する
5.テーマを着せてプラグインを連れてくる
1.レンタルサーバーを借りる(ワードプレス設置に必要です)
ワードプレスを置き、データを置かせてもらう「レンタルサーバー」を借ります。
会社の場合は自社サーバー、自宅サーバーにHPページやワードプレス設置もあるかもしれませんが、セキュリティ面もありレンタルサーバーを借りるのが一般的な作り方となります。
いろんなレンタルサーバー会社がありますが、ワードプレス自動インストールの簡単さから「ロリポップ」(安め)「エックスサーバー」(安定、おそらく高性能)の2つにしぼってお話します。
*今回とりあげませんが「さくらサーバー」も過去に借りて使ったことがありました。
ロリポップ
初期費用1500円、ライトプランなら1か月250円。
「安い!」です。
別記事でのべますが「https化」にはドメイン・サブドメインの数に制限があります。
「複数ドメイン」「サイト丸ごとhttps化したい」場合は、下記のエックスサーバーの方が安くつきます。
そうでない場合(1ドメイン・100サブドメインまで)はロリポップでもいけるんじゃない!?と思います。
サーバーの性能(強さ、安定性)はどうかわかりません。
プロブロガーさん、アフィリエイターさんは「仕事の道具」なので、高くてもエックスサーバーを好んで使います。
エックスサーバー
1000円×12か月(1年)、初期費用3000円で15000円
消費税を8%払うと「16200円」
「エックスサーバーって高い!!」というのが、支払ったときの率直な感想でした。
1年契約なので「月1000円」
3年契約でしたら「月900円」でもっとお安くなりました。
900円×36か月(3年)で35,400円
税込で「38,232円」におじけづき、1年払いにしてしまいました。
3年HPをもつ覚悟があれば、3年払いの方が100円×36か月で「3600円」オトクです。
エックスサーバー全プランでドメイン無料サービス中!
わたしはすでにドメインを持っていたので利用しなかったのですが、エックスサーバー経由で1つ親ドメインをプレゼントしてもらえるようです!
サーバー借りたあとに2つ取得したので、利用すればよかった・・・(もったいない)すでに持ってるドメインの「移管」(お引越し)で「継続無料」になるっぽいので、あとで調べてみようと思います。
このサービスをつかう場合は
1.エックスサーバーの支払い、本契約をすませたあと
2.「ムームードメインでドメイン取得する」をナシにして、いきなりエックスサーバー契約画面へいく
3.「独自ドメインプレゼントサービス」の画面をさがして、ドメインをもらいにいく
ムームードメインの画面が見やすいので、あらかじめ取れるドメインのあてをつけておく方がスムーズです
*調べていませんが、ロリポップなど他サーバーでもドメイン無料サービスをやっている可能性があるので、それぞれ調べてみないといけません。
高くてもエックスサーバーにするメリットは?
エックスサーバーは1か月の支払額が高いですが、次のメリットがあります。
・ドメイン1つプレゼント。1つ3つ(サブドメイン)しかサイト持たない人はドメイン料いらない
・接続が安定している。不安定なサーバーはアクセス集中するとつながらない、落ちるなどあるらしい
・「ドメイン10こまで」などと制限がないので、別々の独立したドメイン(マルチドメイン)でHP運用したい人は最初からエックスサーバーにしとくのが無難(引っ越すのは面倒)
・「いくつまで」と条件なしで「https化」対応している。複数サイトでも数の制限がないため、ロリポップより安く上がる場合も
・上のhttps化も含めて、「ユーザーの利便性に真っ先にこたえるようにしてるサーバー」との評価がユーザーから最も高いレンタルサーバーです。
2.独自ドメインを取得する(サブドメインも必要ならそちらも)
ムームードメイン(またはお名前コム)などで「独自ドメイン」を取得します。
ムームードメイン
検索ウィンドウに「niigatawp.com」と入れて検索します。
わたしがすでに取得しているので、「niigatawp.com」は誰も取得できません。
「niigatawp.net」「niigatawp.jp」なら取得できますし、comがいいなら「wp-niigata.com」など少しかえれば空いていて取得できます。
このあと画面をすすめて1年・3年契約します。
「クレジットカード払い」をおすすめします。
ドメインが切れると、飛んで行った風船のように、他の人に買われてしまう恐れがあるからです。
サブドメインもいるなら管理画面から設定します
メインドメイン(親ドメイン・ルートドメイン)内で別HPをもてるので、サブドメインもあると便利です。
「sakura.niigatawp.com」「ayame.niigatawp.com」のように、ムームードメイン管理画面からサブドメインの設定をします。
「2.レンタルサーバーを借りる」のあとに作業した方がいいかもしれません。
3.レンタルサーバー(1)とドメイン(2)を接続する
レンタルサーバー側・ドメイン側・両方で「接続」の設定をします。
丸1日くらいかかります!
したがって1日でwp設置は終わらず、次の日に4,5の作業を持ち越します。
レンタルサーバー会社側からの作業
サーバーとドメインをつなぐための作業方法を調べます。
エックスサーバーでは「ネームサーバーの設定」ページにのっています。
ドメイン会社側の作業
「ネームサーバーの設定」を行います。
エックスサーバーの場合は、全員(全ドメイン)共通のようです。
ns1.xserver.jp
ns2.(同上)
ns3.(同上)
ns4.(同上)
ns5.(同上)
と、レンタルサーバー会社にある設定のやり方を、ドメイン会社の管理画面で行います。
*エックスサーバーからプレゼントされたドメインでは、ネームサーバーの設定もすでに済んでいるようです。
きっと簡単です!
4.サーバー(3)にワードプレスを「自動インストール」する
レンタルサーバーの「自動インストール」ボタンで作業できます。
エックスサーバーではこのピンクのところをクリックして
自分の取得ドメインをえらび「日本語版ワードプレスをインストールする」をクリックします。
成功すると、そのドメインのワードプレス「管理画面」へ行けて、ブログを始めることができてきます。
5.テーマを着せてプラグインを連れてくる
「ワードプレス自動インストール」で8割ほど設置作業がおわりましたが、ワードプレスの場合、「テーマの洋服を着せる」「最低限のプラグイン機能を入れる」をしてから、運営を始めます。
テーマの洋服を着せる(無料・有料)
固定ページの多い「HP風デザイン」に設計するのか。
アメーバブログのように、日々の記事更新を大切にした「文章・写真たくさん投稿ブログ」にするのか。
最初は「無料テーマ」でいいと思いますので、自分のHP運営の希望にあった「ワードプレステーマ」を選び、インストールします。
今まで私がつかったテーマを片っ端からのせます
ブログ風
・マテリアル(無料) 内部にいろんな機能を
フェイスブック、ツイッターの「シェアボタン」が最初からついてるブログ
管理画面にグーグル解析、広告タグ挿入が仕込まれている、見かけによらずスグレものテーマです。
・プリンシパル(無料) すっきりデザインで高機能
きちんと文章が読め、きちんと写真をのせられる無料テーマです
訪問者の動きをよめる「パンくずリスト」がもともとついていたり、なにげに高性能です。
現役エンジニアでイケてるブロガーさんがカスタマイズ能力があるのに、あえて「無料テーマ」をオフィシャルブログで使っている点でも注目しているテーマです。
・bulan(無料) ヘッダー写真が加工されてオシャレに、ランダム表示
ホームページ作り方サイトには読みづらいので、すぐやめたテーマです。
素敵な写真をいっぱいのっけて、思い出フォト日記にする、手作り雑貨をたくさん紹介するなどの使い道なら、オシャレなHPになったでしょう。
英語フォントがステキな字体で、英単語をぽんぽん置いたら見栄えがよさそうです。
・sango(有料・およそ1万円)個人的にたまたま持っていた
「お客様のためのHP作成論」から離れますが、私自身ブロガーとして「アトラス」「sango」そして圧倒的支持をえている「ストーク」
どれも1万円する有料テーマですが、この3つのどれを買うか迷いました。
ストークは「1サイト」しか利用できないのと、6割くらいの有料ブロガーが使っているためあえて避けました(本当に欲しくなったら再買するかも)
「アトラス」「sango」どちらも複数サイトで使えて迷いましたが…
sangoに決めた理由は
・居心地よく滞在時間が長いサイトデザインを目指して作った
・発売が「新しい」から(この3つでは最新…新しするとカスタマイズ情報が少ないのだけどそこは修行の場にしたいと)
・アトラスは背景色がどれも同じ、サイトカラーが1色になりがちと見かけた(sangoもカスタマイズしないとそうなってしまいますが)
使い方がまだわかりませんがsangoは「ショートコード」をたくさん書いて、いろんなやりたいコトを実現できるらしいんですよね。
3年くらいかけていじり倒して、ワードプレスやテーマ、php(動き)やcss(デザイン)のことなど学んでいきたいと考えています。
HP風
・first(無料) トップに写真をばーんと
・first(無料) ほぼ一緒ですが
トップページに「フルワイド(幅)」なキレイ写真を持ってくると、無料テーマにしては見栄えのよいサイトができると思います。
赤いドレスはこのHPの作者・私本人なので、歌手としてはまだアマチュアの域ですが…(笑)
これがプロカメラマンが撮影した「プロ歌手」の高画質写真がどーんと載るとすると、また見栄えが全然ちがってくると思います。
アマチュアでもオメカシした人が「70人集合」でもですね。
・twenty fourteen(無料)
3年前出版のワードプレス書籍にのっていた「2014」(トゥエンティーフォーティーン)というテーマです。
カフェのサイトを作っていましたが、すでにレスポンシブデザイン(携帯対応)、カスタマイズ次第で優秀なテーマということでした。
書籍のとおりに作ってみましたが、「内部にこのプラグインを仕込みましょう」の話が多くて、見た目ではこのテーマの良さがいまいち伝わりにくいです。
上だけでなくサイドにも「グローバルナビゲーション」(メインメニュー)を置けるのが特徴でしょうか。
・twenty fifteen(無料)
「2015」トゥエンティフイフティーン、翌年のワードプレス公式テーマのようです。
「横にメニューがのせられる」理由で、あやめ会HPのテーマにしました
他のテーマでは「上にメニュー」が多いからです。
・twenty twelve(無料)
「2012」ワードプレスとしては、古くからあるテーマのようです。
レスポンシブ対応になっていたと思います。
白っぽいデザインで、文字や写真のじゃまになりません。
きわめてプレーンなデザインですが、ゴテゴテしたのが嫌な人、無料ブログに近い見た目を好む人には、今でも使われているんじゃないかと想像します。
先ほどものせましたが、メニューバーが真っ黒な「first」とは、少し見た目が違いますよね。
ブログ風・HP風テーマの説明は以上です。
子テーマを必ずセットでインストールして、あとからかぶせましょう
「プリンシパル」「sango」(有料)のようにもともと「子テーマ」の用意がある場合もありますが、ない場合は親テーマに合わせた「子テーマ」をつくり、必ずワードプレスに一緒にインストールします。
ワードプレスのphpは「親テーマ読む(文字色:黒)」「子テーマ読む(文字色:赤)」という順で読むため、子テーマがいるんです。
「親テーマ1(文字色:黒)・・・旧バージョンで削除」「新バージョンで入れた親テーマ2(文字色:みどり)」「子テーマ(文字色:赤)」
新バージョンのワードプレス・テーマをインストールしていっても「子テーマ」に指示がのこり、最後にphpを読み込むため、かならず入れる「きまり」になっています。
子テーマがない場合は5分10分でコピペして作れるので、その場でつくってインストールします。
プラグイン機能を入れる
今のところこのようなプラグインを入れています。
・Page Builder by SiteOrigin いわゆる「ホームページビルダー」並みの、ページ作成をかんたんにしてくれるプラグインです。
「2カラムにして、左は写真、右は文章をつらつらのせて」が簡単にできます。
「トップページはたて3列にして、大きな写真を3枚のせて」も簡単にできます。
3×3にならべた商品(シューズ)が、スマートフォンからも1×9でゆったり見れます。
「レスポンシブデザイン」対応のワードプレステーマがたくさんあります。
スマホであることを感じさせないくらい、快適なんですよ。
・Contact Form 7 お問い合わせフォームをつけます
・backwpup ワードプレスのバックアップをとります。テーマ外観などと、データバックアップなど、2種類とってくれるようです
・List category posts 「さくら会日記の最新投稿だけ」「あやめ会フォトの最新投稿だけ」をピックアップして、新しい順に10、20と並べてくれます
カテゴリー分けをしないままでもいいなら「最新の投稿」全部まとめて表示する機能があるので、このプラグインは不要です
・WordPress Popular Posts 人気記事一覧 1位から順にアクセスの多い記事をならべてくれます
その他、Akismet Anti-Spam (アンチスパム)など元々はいっているプラグインの有効化作業など、セキュリティ面を考えながらいろいろ設定します。
ブロガーさんでない場合は提案しませんが、広告設置、解析設置、SEOプラグイン設置など、オプションでアクセスアップ用の追加する場合もあるかもしれません。
さいごに
レンタルサーバー借りてドメイン決めて、つなぐ設定して
ワードプレス自動インストールして
テーマ決めていれて、プラグインも入れていけばワードプレス設置作業、だいたい完了です。
今回かきませんでしたが「サイト全SSL化」「https化」をするなら、その作業が必要になります。
レンタルサーバー画面から行います。
「バックアップ」についてもふれませんでしたが、記事がたまってきて「ぶっ飛んだら書き直し、泣く><」と思えるほどになったら、バックアップをとる作業をするとよいでしょう。
記事を書くこと自体はかんたんで、「アメーバブログとほぼ同じ操作性」と考えてよいでしょう。
管理画面もこんな感じで(無料ブログとそう変わり無いですよね)
「投稿一覧」の画面はわざと出したのでふだんは消えています。
「文字色」もこのテーマではつけられないと思っていましたが、「ツールバー切り替え」押したら
ちゃんと出てきました(文字色・アンダーラインA下線)
あとはアメーバブログ同様「日々の更新」が大変なのは、どれも同じですね^^。
管理画面あけて文章かいて画像投稿して。
<ワードプレスサイトを守ろう!>
ワードプレスサイトは設置するまでが大変ですし、スパム・攻撃からもHPを守らなければなりません。
プラグイン、新バージョン更新、バックアップ取るなどでセキュリティを考えたHP運営を行いましょう。
インターネットの世界は「危険」でいっぱいです^^!