WordPressをはじめる前に

WordPressは

・レンタルサーバー
・独自ドメイン

この2つを契約しなければいけません。

レンタルサーバー

サーバーとは、インターネット上にある部屋だと考えてみるとわかりやすいです
レンタルサーバーは、ネット上の部屋を借りるようなもの。

その部屋には、ファイルや画像などを置くことができます。
アパートやマンションなどいろんな部屋があるように、サーバーにもいろいろあります。

それによって、値段も変わってきます

ドメイン

ドメインは、部屋にかける表札だと考えてみるといいです。

サーバーをレンタルした時点で、サーバー会社の名前が含まれたドメインがあります。
例えば、naitoisao.xsrv.jp (エックスサーバーの場合 zsrv.jp が付きます)

独自ドメイン

自分だけのドメインを、独自ドメインといいます。

サーバー代とは別で年間約 1000 円〜3000 円程度費用がかかりますが、ビジネスで使うならば独自ドメインの方が良いです。

インターネットで、ブログやホームページを見にいくのは、その部屋に遊びにいくようなものです。

その時、部屋に表札をかけておくと迷わずにたどり着けるようになります。

基本的に、レンタルサーバーと独自ドメインはセットで考えておきましょう。

ただし、別契約になります。

それぞれの費用は、サービス会社やプランによっても違います。

今回紹介するエックスサーバーの例でいうと一番安いプランの「X10」で、

・初期費用 3,240円
・月額1080円(12ヶ月契約の場合)

12ヶ月契約で16,200円(税込) (初期費用+月額)です。

また、キャンペーン中なら通常年間1500円のドメインも無料でもらえます。

※サーバー会社によっては、月額500円以下で利用できるものもあります。

エックスサーバーを借りる

「ロリポップ」が安くて有名ですが、セキュリティ面を考えると「エックスサーバー」がオススメです。

エックスサーバーのサイトから、申込み手続きを行います

→ 月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』



右側にあるサーバー無料お試しの「お申込み」から手続きに移ります。

初めてのご利用・新規お申込みの方から進みます。

サーバーID、プラン、お客様情報を入力して申し込みます。

サーバーIDは、エックスサーバーのアカウントになります。 サーバー管理画面にログインするときなどに使います。

プランはX10で、後から変更も可能です。

申し込みが終わると、設定完了のメールが届きます。

独自ドメインの取得

エックスサーバーのキャンペーン期間中ですと、独自ドメインが無料で使うことができます

設定完了のメールにあるサーバーパネルから管理画面に入室します。

各種お申込みの「キャンペーンドメイン」から、希望の独自ドメインを取得します。

あまり長すぎず、覚えやすい、入力しやすい方がオススメです。

ネームサーバー設定

今度は、サーバーと独自ドメインと関連づけます。

表札を部屋にかける作業です。

これをしないと、取得したドメイン(URL)にアクセスしても何も表示されません。

エックスサーバーのインフォパネルへログインし、「ご契約一覧」にある「ドメイン」から「ドメインパネル」をクリックします。

エックスサーバーのネームサーバーを入力し、「ネームサーバーの変更(確認)」→「ネームサーバーの変更(確定)」をクリックします。

→ ネームサーバーと、変更の仕方はこちら

ネームサーバー1が「ns1.xserver.jp」
ネームサーバー2が「ns2.xserver.jp」
になっていればOK

infoパネルの「ご契約一覧」から、サーバーパネルのログインをクリック

サーバーパネルの、「ドメイン設定」で、取得した独自ドメインがあるか確認します

ない場合は、「ドメインの追加設定」で、取得した独自ドメインを追加します

ネームサーバーの変更がインターネット上に安定して反映されるまでには数時間~24時間かかります。

ムームードメインなど他社でドメインを取る場合

エックスサーバーで無料ドメインのキャンペーンがやっていない場合など、他社でドメインを取得することもできます。

今回は「ムームードメイン」を使う場合で説明します。

https://muumuu-domain.com/

ドメインは世界に 1 つだけのもので、使えるのは早い者勝ちとなっています。
まずは、使いたいドメインを探して見ましょう。
.com や.jp など種類によっても料金が変わります。

取得可能なドメインを選んで次に進みます。

初めて利用する場合は、新規登録から登録してください。

登録が完了するとドメインの設定に移ります。

・WHOIS 公開情報は、ドメインの所有者を公開する必要があります。
個人情報を開示したくない場合は、『弊社の情報を代理公開する』を選択します。

・ネームサーバ(DNS)は、ドメインをどのサーバーと関連付けるかの設定になります。
表札をどの部屋にかけるか、ということです。

エックスサーバーは他社サーバーになりますので『今はまだ使用しない』を選択します。

※メールオプション(ムームーメール)というメールサービスがありますが、通常メールはサーバーの方で管理しますので、特に必要ありません。

・お支払い方法を選び、『内容確認へ』に進みます。
内容を確認し、間違いがなければ利用規約にチェックをいれ支払い手続きに移ってください。
支払いが済めばドメインの取得は完了です。

ドメインの取得したら、今度はムームードメインのコントロールパネル(管理画面)から、取得したドメインの『ネームサーバ設定変更』を行います。

取得したドメインの『ネームサーバ設定変更』から『GMO ペパポ以外のネームサーバを使用する』からネームサーバを変更します

サーバーがエックスサーバーの場合は、ns1.xserver.jp, ns2.xserver.jp になります。

これでムームードメイン側の設定は終わりになります。

あとはエックスサーバーのサーバーパネルでドメインの設定で、ムームードメインで取得した独自ドメインを設定すればOK

SSL対応

SSLとは、ネット上でのやり取りを暗号化したり、セキュリティを高める機能です。

URLの始まりが「http://」から、「https://」になります
アドレスバーにも、「保護された通信」と表示されます

利用する側も安心ですし、GoogleもSSL対応を呼びかけています

エックスサーバーでは、無料で使えるSSLも用意されています

エックスサーバーのサーバーパネルで「ドメイン」のところにある「SSL設定」を選びます

「独自SSL設定の追加」タブを開いて、ドメインを確認したら、独自SSL設定を追加する(確定)をクリック

1時間ほどでSSL化が完了します。

WordPressを始めてからSSL化するのは手間もかかります(リンク切れになったり、SNSのいいねの数字がリセットされたりします)ので、対応させる場合は、予め行っておくといいです。

必須ではありませんが、できる限り導入したほうがよいでしょう。

常時SSL化させる

SSLの設定をすると「https://」が使えるようになりますが、「http://」にアクセスすることもできます。

例えば、SSL化する前にリンクをもらっていた場合、アクセスされるのは「http://」のURLになってしまいます

そこで、「http://」にアクセスした場合でも、「https://」に自動転送するように設定を行います。

エックスサーバーの管理画面(サーバーパネル)から、「.htaccess編集」

「.htaccess編集」タブを開きます。

こちらのWebサイトの常時SSL化 | レンタルサーバー【エックスサーバー】にある以下のコードを貼り付けます


RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

保存をすると、「http://」が自動的に「https://」に転送されます

WordPressのインストール

サーバー、ドメインの準備ができたら、いよいよWordPressのインストールです
いよいよと言っても、ここまでくればビックリするほど簡単。

エックスサーバーのサーバーパネルで、「自動インストール」から行います

※インストールするドメインを選択しておいてくださいね

「プログラムのインストール」で、WordPress日本語版の「インストール設定」をクリック

インストール時に、各欄を入力していきます

・ブログ名は、後から変更可能です
・インストールURLは、ドメイン直下にWordPressを入れたい場合は、空欄にします。
・ユーザー名は、ログイン時に必要なIDになります。 「admin」はセキュリティ的にNGです。

最後に、インストールボタンを押せばWordPressのインストールが完了です。

WordPress自体のインストールは簡単ですが、その前の準備等が少し手間ですね^^;

何度もやるものではありませんが、参考にしてみてください

テーマ(テンプレート)設定

WordPressでは、デザインとなるテンプレートを簡単に変更することができます。

現在のWordPress4.8だと、デフォルトのテーマ(テンプレート)が「Twenty SEVENTEEN」
毎年新しいデフォルトテーマが出ていますね

より見やすくするためにテーマを変更しましょう

テーマの変更の仕方 「Simple-WP4」ダウンロード

今回スマホ対応のテーマを用意しました

「Simple-WP4」

ダウンロードはこちらから

ダウンロードしたファイルは圧縮ファイルになっています。
圧縮ファイルのままWordPress上にアップロードしますので展開(解凍)の必要はありません。

外観 → テーマ から「新規追加」をクリックします

「テーマをアップロード」から、

ダウンロードした「Simple-WP4」をアップロードします
※圧縮ファイル(zipファイル)のままアップロードしてください

アップロードが完了すると、Simple-WP4のテーマが表示されます

「有効化」からテーマを有効にします

これでテーマを設定できました。

レイアウト設定

「Simple-WP4」は、2カラム、3カラムのレイアウト変更が可能です

※スマホでは、1カラム表示になりますのでPCでは2カラムがお勧め

スマホで見た場合

カスタマイズしたい場合

管理画面からヘッダーの挿入や、背景色をつけたりできます

外観 → カスタマイズ から

各部分のカスタマイズが可能です

サイト基本情報

サイトのタイトル、キャッチフレーズ(説明文)が設定できます

カスタマイズを確認しながら変更できます

「サイト名とタグラインを表示」のチェックを外すと、タイトル、キャッチフレーズが非表示になります。
ヘッダー画像にタイトルを画像として埋め込んでいる場合など、チェックを外すといいでしょう。

変更後は必ず保存してください

タイトルの文字色や、サイトの背景色を変えたい場合

タイトルの文字色や、ページの背景に色をつけたい場合は、「外観→カスタマイズ→色」から

サイト名の色で、サイトのタイトルの文字色を変更できます
背景色で、サイト背景の背景色を変更できます

変更後は必ず「保存して公開」をクリック

ヘッダー画像を入れたい場合

外観 →カスタマイズ→ ヘッダー画像 から

ヘッダー画像設定画面で、「新規画像を追加」

パソコンにある画像を画像をアップロードします
ヘッダー画像は、980px ✕ 300pxが推奨サイズ

アップした画像を選択し、「選択して切り抜く」をクリック

ヘッダーとして、使いたい部分を選択し、「画像切り抜き」をクリック

これで、ヘッダー画像を挿入できました。

CSSを編集しカスタマイズしたい場合

CSSを使ってカスタマイズしたい場合は

外観 → カスタマイズ → 追加CSS から

CSSを追加してカスタマイズします。

ウィジェットの設定(サイドバーなど)

ウィジェットの設定を行います。
ウィジェットと呼ばれるブログパーツを配置し、サイドバーや記事下の項目を設置できます。

外観 → ウィジェット から

「利用できるウィジェット」から、右側の「サイドバー」等表示させたい部分にドラッグします。

サイドバーに表示させる項目と、表示させない項目を移動させます。
右側に表示されるウィジェットエリアは、テーマ(デザインテンプレート)によって異なります。

例えば、「Simple-WP4」の場合は、「右サイドバー」「左サイドバー」「」フッターウィジェット」「記事エリア上部」「記事本文上」「記事本文下」があります

「記事本文下」の部分に「テキスト」ウィジェットなどで定型文を作り設置すれば、全投稿記事の下に表示させることができます。

記事を読んだ後が最も読者がアクションを起こしやすいです。
ですから記事下に定型文など入れられるのが必須です。

初期段階では、 投稿の『アーカイブ』『メタ情報』などがサイドバーにありますが、ここで設定を変更します。

メニュー(グローバルナビ)の設定

ワードプレスでは、ヘッダー下などにメニューバー(グローバルナビ)も簡単に設置することができます。
(テーマによって異なります)

初期段階では、自動的にすべての固定ページがメニューに追加されていますが、自由に項目を設定することもできます。

また、メニューは複数作ることができて、ヘッダー下以外にもサイドバーやフッター(ページ下部)に設置する事も可能です。

1.[外観] ⇒ [メニュー]

管理画面の左側にあるメニューから[外観] ⇒ [メニュー]を選択します

2.新規メニューを作る

「新規メニューを作る」からメニューのグループを作ります。

メニューに名前をつけ、「メニューを作成」ボタンをクリックします

3.メニューに追加する項目を設定

左側にある項目の、固定ページやカテゴリーから必要なものにチェックを入れ『メニューに追加』を押してメニューグループに加えていきます。

「リンク」は、外部サイトへのリンクボタンを設定することができます。

4.並び順など設定します。

階層化することも可能です(親子関係を作ることができます)
その場合、メニューバーに表示されるのは、親だけで、ドロップダウンで子メニューが表示されます

5.メニューバーの表示位置を設定します。


「ナビゲーションメニュー」にチェックを入れるとヘッダー下に表示されます。

テーマによっては、表示位置の選択が、フッターやヘッダー上など複数あるものもあります。

最後に『メニューを保存』をクリックします。

これでヘッダー下のメニューバーが完成です。

初期の状態では、固定ページが全てメニューバーに表示されます。

やっておきたい初期設定

一般設定(ブログタイトルの変更など)

管理画面左側にあるメニューの中の「設定」から「一般」で、ブログのタイトルやキャッチフレーズなどの設定を行います。

サイトタイトル(ブログのタイトル)、キャッチフレーズ(ブログの説明文)を入力します。

※検索に大きく関わる2つですので、何のブログかが分かり、検索されやすいキーワードを入れて書きます。

パーマリンク設定(URL表示設定)


パーマリンクとは、各記事やページのURL(アドレス)になる部分のことです

初期の状態では、記事のURLが

http://naitoisao.com/?p=123

のように「?」がついたアドレスになってしまいます。

これはSEO的にあまりよろしくないと言われています。
これを『カスタム構造』にして分かりやすいアドレスになるようにします。

カスタム構造の入力欄に

/%postname%/

を入れると、毎回URLを自分で決めることができます。
アルファベットで記事内容に関連したURLにできます。

また

/%post_id%/

にすると、自動的にナンバリングされます。
変更を忘れてしまう人はこちらにするといいでしょう。僕はこうしています

※途中でパーマリンクを変えると、記事 URL が変わってしまうことになります。
リンクされていた場合など、リンクエラーを起こしますので十分注意してください

不要な記事を削除

最初にインストールすると、初期状態でサンプルで記事が入っています

投稿には、「Hello World」
固定ページには、「サンプルページ」

これらは不要なので削除しておきましょう

プラグインの追加

プラグインは、ワードプレスをさらに便利にするためのプログラムです。
様々なプラグインがあり、簡単に導入することができます。

例えば、バックアップのプラグイン、お問合せフォームを設置できるプラグイン、などなど無数にあります。

※プラグインはワードプレスを便利にしてくれる反面、追加しすぎると表示が遅くなってしまう原因にもなります。
また、ワードプレスがバージョンアップした際に、対応しなくなるプラグインもありますので、ワードプレスのバージョンにあったプラグインを選ぶことも必要です。

プラグイン → 新規追加 から、プラグインを探してインストール、有効化して使います。

こちらも参考にしてみてください
関連記事:内藤が入れているWordPressのおすすめプラグイン(2017年)

更新の通知がある場合は速やかにバージョンアップ

管理画面に、このような更新の通知が出ている場合は、速やかに更新して最新のバージョンにしましょう

WordPress本体、プラグイン、テーマのバージョンアップの通知があります。

セキュリティに関するバージョンアップもありますので、最新状態に保つようにしましょう。

投稿と固定ページ

WordPressには、記事が2種類あります。

『投稿』と『固定ページ』

投稿

投稿は、更新性のある記事を書く際に使います。
いわゆるブログの記事投稿と同じです。

例えば、通常のブログのような使い方もできますし、『お知らせ』など定期的に更新のあるものに使う事ができます。

「投稿」の新規投稿画面

投稿は、カテゴリー別けができたり、タグを設定することもできます。

カテゴリは記事のグループ別けをする時に使い、カテゴリ同士を階層化して親子関係を作ることもできます。

タグは、記事のキーワードになるものを設定することができます。タグはカテゴリと異なり、階層化ができません。
必ず設定しなければならないものではありませんが、設定しておくと読者さんにも便利になるでしょう

固定ページ

固定ページは、更新性のないページを作る時に使います。

例えば、『アクセス』のページや、『会社概要』などのページに使う事ができます。

固定ページは、カテゴリー別けやタグが設定できませんが、親ページを設けて階層化することができます。

投稿と固定ページの使い分け

無料ブログサービスがホームページのような使い方がされなかったのは、記事がどんどん更新され、『会社概要』など個別に置いておきたいページを用意することができなかったからです。

逆にホームページは、更新性のある記事が配信しにくかったため、古いまま放置状態になることが多かったです。

ワードプレスならば、『投稿』と、『固定ページ』をうまく使って、更新性のあるホームページを作ることもできます。

記事の書き方を覚える

新しい記事を書く

「投稿」 →「 新規追加」 から新規投稿画面を開いて記事を書きます。

※既に書いた記事を編集したい場合は、「投稿一覧」から

必ず使う箇所を赤枠で示しました

1、記事タイトル
2、記事本文
3、カテゴリー
 複数選択することも可能です。また固定ページではカテゴリーはありません。
4、アイキャッチ画像
 記事一覧ページに表示さるサムネイル画像や、Facebookにリンクした際に表示されるサムネイル画像
5、公開
 下書き保存する場合は、ステータスで変更します。

エディタの「ビジュアル」と「テキスト」

記事本文を入力する時に使う「エディタ」には、「ビジュアル」と「テキスト」があります

「ビジュアル」は、文字装飾や画像、リンクなどが、実際の表示に近い形で編集できます

装飾のボタン類もわかりやすいアイコン表示

「ツールバー切替」で、ボタン類の表示を増やすことができます

※例の図は一部プラグインを入れているため標準にはないものもあります。

「テキスト」は、HTML表示で編集できます。

「ビジュアル」と「テキスト」を切り替えながら書くこともできます。

「ビジュアル」の場合

「テキスト」の場合

リンクの挿入

リンクを入れたい場合の手順は
・リンクさせたい文字を選択
・リンクボタンからURLを設定

リンクさせたい文字を選択し、リンクボタンをクリックから、飛ばしたい先のURLのを入力します。

「ビジュアル」の場合

URL入力欄の右側にある「歯車マーク」をクリックすると、既に公開した投稿や固定ページが一覧表示されリンクしやすくなったり、別ウィンドウで開くように設定もできます

「テキスト」の場合は、リンクさせたい文字を選択し、「link」ボタンから設定します

画像の挿入

画像を挿入したい場合は「メディアを追加」をクリック

「メディアを挿入」画面になりますので、画像ファイルをアップロードします。

アップロードされた画像は、「メディアライブラリ」にあるので、選択して「投稿に挿入」をクリックします

挿入する際、「メディアライブラリ」の右側に表示される「配置」、「リンク先」、「サイズ」などを設定して挿入する画像を編集します。

※「配置」で「右」や「左」を選択すると、文字が画像の横に回り込みます。
ただし、スマホで見た場合見づらくなることもありますので、「なし」がいいです。

WordPressは、画像ファイル以外にも、音声ファイルや動画もアップロードできます。
その為「メディアの追加」というボタンになっています。
ただし、音声や動画はファイル容量が大きいのでサーバーに負荷がかかります。
YouTubeなどにアップロードし、それにリンクさせたり、埋め込んだ方が得策です。

カテゴリーの設定

投稿の場合、必ずカテゴリーを選ぶ必要があります。
また読者はカテゴリーごとに読み進む場合もありますので、分かりやすく分類されたカテゴリーを作っておきたいです

「投稿」 → 「カテゴリー」からカテゴリーを作ります

「名前」は、読者がわかりやすい名前に。
「スラッグ」はURLに表示されますので、アルファベットにしておきましょう。
また親カテゴリーを選択すると、親子関係を作ることもできます

WordPressの管理画面には、いろんな項目がありますが全部使うわけではありません。
最初の設定で使って、あとは普段さわらないところもあります。

必ずスマホで確認

今はスマホで見る人が7割、8割です

記事を書いたら必ずスマホでも確認しましょう。