HTMLサイトをWordPressに移行する手順のまとめ ‐ その2

前回はHTMLサイトをWordpressに移行するための作業の前半部分、既存のHTMLファイルからベースとなるWordpressテーマを作るところまでの流れをざっと書きました。

ここからは肝心な作り込みに入っていきます。今回も自分の覚書風に書いていくので分かりにくいところがあるかと思います。もしあまりに意味不明だったり、間違ってるよ?というところがあったらコメントあるいはお問い合わせからご連絡いただけると嬉しいです。

では早速、後半の作業に入っていきます!

大まかな流れ

ここからはHTMLサイトを公開状態にしたまま、裏でWordpress版のサイトを作成していく。そしてWordpress版が完成したところで切り替え作業を行い、Wordpress版のサイトを公開する。

前提条件としては、以下のような環境で移行作業を進めて行く。

  • 独自ドメイン(or 独自ドメインのサブドメイン)でHTMLサイトを運営
  • WordPressインストールが可能なサーバーを利用している

サーバーにWordpressをインストールし、前回の作業で作成したテーマをアップロード。サーバー上で作り込み&デバッグ作業をガンガン進めていく。

 

ローカルで作り込んでからサーバーにアップしたい場合は、以下の作業のX~Xまでをローカル環境に構築したWordpressで行い、最後にサーバーにアップする。

ローカル環境の作成やサーバーへのアップまでのフローで参考になるサイトはこちら

XAMPPでローカル環境構築 インストールからWordPressの設置までやってみる。

XAMPPを使ってローカル環境にWordPressをインストールする方法

 

WordPressをサーバーにインストールする

HTMLサイトを運営しているサーバーにWordpressをインストール。
このとき、HTMLサイトのファイル類が置かれているディレクトリ直下ではなく、サブディレクトリを作成してインストールするのがポイント。

例)abc.comというサイトの直ディレクトリがabcの場合、abcディレクトリ直下にはHTMLサイトのファイル類やフォルダ類が保存されている。このabcディレクトリの中にサブディレクトリ(wp)を作成し、その中にWordpressをインストールする。

www
∟abc
∟ index.html
∟about.html
∟contact.html
∟ ….html
∟cssフォルダ
∟jsフォルダ
∟imagesフォルダ
wpフォルダ (←ここにWordpressをインストールする)

 

WordPressのレンタルサーバへのインストール方法

インストールが完了したら、独自ドメイン/wp/にアクセスして、Wordpressの初期テーマでのトップページが表示されることを確認する。

今後は
独自ドメイン/wp/ (例: http://abc.com/wp/ )
からWordpressのサイトを参照しつつ、作り込みを進めて行く。

※厳密には独自ドメイン/wp/のURLを直打ちすれば一般の人もアクセスできてしまうが、個人レベルのサイトやブログではその可能性は限りなく0に近いという前提で進める。もし完全に外から見られないようにしたい場合は、ローカルで作り込むか、.htaccessでアクセス制限をする必要がある。

 

wp-config.phpをデバッグモードにする

ここからの作業では何らかのエラーが発生することが多々あるが、この時に原因がつかめないと先に進めない。

デフォルトの状態ではデバッグモードがオフになっていて、エラーが発生すると、作成中のWordpressサイトにアクセスしても真っ白なページが表示されるだけ、ということがしょっちゅうあるので、デバッグモードをオンにする。

そうすると、エラーの原因とエラーが発生しているテンプレートファイル(と行番号)を教えてくれるので解決しやすい!

WordPressをインストールしたフォルダ(この記事ではwpフォルダとする)にFTPでアクセスし、wpフォルダ直下のwp-config.phpを見つけてローカルにダウンロードする。

ファイルを開くと以下のような場所があるので、falseをtrueに変更し、ファイルを再アップロード。

define(‘WP_DEBUG’, false);

define(‘WP_DEBUG’, true);

 

テーマをアップロードする

前回の作業で作っておいたWordpressテーマをアップロードする。

ダッシュボードから 外観>テーマ にアクセスし、ファイルのアップロード画面からzipファイル形式でアップロードする。

 

サイトを作る場合は固定フロントページの設定を

デフォルトではindex.phpがトップページとして表示されるようになっている。ブログの場合はこれでOKだが、サイトの場合は、front-page.phpがトップページとして読み込まれるように設定したい。

この場合は、以下のように固定フロントページの設定を行う。
1.トップページとブログページ用にダミーの固定ページを作成する(空ページでOK。タイトルも適当に)
2.ダッシュボードから 設定>表示設定 の「フロントページの表示」の設定で、固定ページを選択し、フロントページ、投稿ページそれぞれに1で作成しておいた固定ページを選択する。

これでトップページの表示にはfront-page.phpが読み込まれるはず!

 

PHPファイルの記述の誤りを修正していく

まずは基本となる以下のファイルの作り込みを完了させることが先決

  • front-page.php
  • index.php
  • single.php

そして上記のファイルで読み込む以下のテンプレートファイルも確認&修正をする

  • header.php
  • footer.php
  • sidebar.php

※header.phpやfooter.phpではcssやjsファイルの読み込み設定があるが、そのファイルのパスがちゃんと通っているかなども確認する。

※サイトのトップページ(front-page.php)は、画像スライダーがあったり、新着情報の表示欄があったりと、少しカスタマイズが必要なことが多いので、まずはindex.phpとsingle.phpの方から手を付けるのがおススメ。

 

index.phpとsingle.phpは基本となるループが正しく書けていれば、あとはそんなに難しくない。記事のタイトルやリンク、サムネイル画像、コンテンツを動的に読み込むための関数に誤りがないかの確認(&修正)や、レイアウトの調整などをここで進めて行く。

この辺りはWordpressのテーマを自作したことがある人は楽々だが、そうでない場合は、まずテーマの自作方法を解説している以下の記事を参考にしながら作り上げるのが良い。

WordPress オリジナルテーマの作り方

HTMLからWPテーマを作成する

テーマの作成

※前回のテーマを作る段階でも、同じような手順があったけれど、ここでは表示を確認しながらミスなく作り上げていくことが重要。

 

フロントページについて

フロントページは、新着記事の表示など、動的に読み込む必要があるところは、サブループ(WP_Query())と呼ばれるループを使う。このあたりについては以下の記事を参考に。

WordPress ループの基本

WP_Queryの使い方をPHPコードにまとめた便利なコード・スニペット

ちょいちょい忘れる『WP_Query』の使い方

 

フロントページの静的な部分は、ウィジェットであとから内容を変えられるように切り分けてもいいし、今後そうそう変更する予定もない、という場合は、リンク部分だけ以下のように変更しておけば取りあえずOK。

 

CSSの調整もここで同時に進めて見た目を整えていく。

 

残りのテンプレートファイル(page.php、archive.phpなどの作成)

index.phpとsingle.phpが出来上がったら、これらをベースにpage.phpやarchive.phpなど、必要なテンプレートファイルを作っていく。

index.phpをベースに作成するとよいテンプレート

  • archive.php
  • taxonomy.php
  • category.php
  • search.php

など。

single.phpをベースに作成するテンプレート

  • page.php
    404.php

など。

テンプレート階層を参照し、自分のサイトに必要になるものを作成する。

 

パーマリンク設定

ここはHTMLサイトから移行する場合、結構大事なところなのでよく考えて設定する。

HTMLサイトからWordpressサイトになると、URLが変わってしまう可能性がある。301リダイレクトで旧URLから新URLへアクセスを転送することはできるが、URLが変わるのを最小限に抑えたい場合は以下の方法を取る。

1.ページや投稿のスラッグをもとのHTMLサイトのスラッグと合わせる

例えば、http://abc.com/contact.html という問い合わせページがあったとしたら、Wordpressでも固定ページで問い合わせページを作る際にcontactというスラッグにする。

2.パーマリンク設定で、URLの最後に.htmlが付くようにする。

ダッシュボードの設定>パーマリンク設定で、カスタム構造を選択し、入力欄に「/%postname%.html」と入力する。

ただし、固定ページは別途functions.phpのほうで以下のコードを記述しないと.htmlが付かないので注意。

 

上の方法で合わせられない部分も出てくると思うが、その場合は301リダイレクトの設定をする(後述)。

 

コンテンツの作成・メニューやウィジェットなど

このあたりは作業が前後するかもしれないが、ページの作成やメニューの作成、サイドバーのウィジェットの作成なども順次行っていく。
HTMLサイトから必要なテキストや画像素材などをWordpressサイトのほうに移していく感覚で。

  • 各ページのコンテンツ⇒固定ページで作成
  • ナビゲーションメニュー⇒メニューで作成
  • サイドバーやフッターのコンテンツ⇒ウィジェットで作成

 

基本的なプラグインの導入

ここまでくると元のHTMLサイトと同じものがWordpressでできあがっているはず。なので、必要なプラグインの設定などを進めて行く。

導入プラグインのおススメリストはコチラ

 

全体的な動作確認

変な動きをしたりしないか、色んなページにアクセスしたりリンクをクリックしたりして確認する。

 

wp-config.phpをデバッグモードをオフに

動作確認が終わったらデバッグモードをオフにする

 

トップページをhtmlからwordpressに切り替える作業

いよいよ切り替え作業。一応メンテナンスモードにして、アクセスが少なくなる時間帯に切り替え作業を行うのがベター。

「工事中」「準備中」「メンテナンス中」呼び方は色々ですが、ページの公開を一時的に中止したいときに便利なプラグイン WP Maintenance Mode

これまでは独自ドメイン/wp/へのアクセスでWordpressのサイトが表示されていたが、独自ドメインのみでWordpressサイトが表示されるように設定する。やり方は以下の記事を参考に。

WordPressでサイトのトップページURLにドメインだけが表示されるように設定する方法

HTMLサイトのファイル・フォルダ類はひとまず削除せず、適当なフォルダを作って移動させる。(移行後少し経つまでは削除しないほうが何かの時に困らないかも?)

無事Wordpress版のサイトが表示されればOK!

リダイレクト設定(必要な場合)

プラグインSimple 301 Redirecsを使用すると便利。

Simple 301 Redirectsプラグインの使い方

 

 

 

本当に自分にしか分からない覚書風になってますが、最後までご覧くださりありがとうございました!

何かのヒントになれば嬉しいです。ではまた!

自分の配信するメルマガが迷惑メールにならないためのプラグインWP Mail SMTP

こんにちは!今回はレンタルサーバーに設置したメルマガ配信ツールを利用する場合に、配信したメールが迷惑メールフォルダに振り分けられてしまうのを防ぐ方法について解説したいと思います。具体的にはメルマガ配信ができるWordpressプラグインBFT Pro(Arigato Pro)を使用している場合や、メルマガ配信ツールだけでなく、Wordpressでのコンタクトフォームのプラグインを利用する場合などで、送信されたメールが迷惑メールに入ってしまうのを防げる方法です。特に最近Gmailの迷惑メールの規制が強化されているので、もはやこの対策は必須といってもいいですね。

なぜ迷惑メールに入ってしまうのか

メルマガ配信をするときに結構気になるのが、「到達率はどれくらいか」ということですよね。せっかく配信したメルマガも、購読者さんの受信ボックスに入らなければ読んでもらえる確率はかなり低くなってしまいます。私はWordpressのプラグインBFT Pro(またはArigato Pro)を使ってメルマガ配信をしているのですが、最近Gmailの迷惑メール対策がかなり厳しくなったようで、ちょっとこの問題は無視できないと思っていました。(メルマガ配信をしても全然リアクションがないということはなかったので、そこそこ届いていたとも思うんですが…)

 

気になっていたのは、BFT Proの場合、何も設定しなければメールの送信元とFromに表示されるドメインが異なってしまうということなんです。つまり、From(送信者)のアドレスは独自ドメインのアドレスでも、メールの送信元は、レンタルサーバーのドメインが表示されてしまう。

bftpro1

Gmailはこのように送信元と送信者が異なる場合、迷惑メールである可能性が極めて高いと判断し、迷惑メールフォルダに自動的に振り分けてしまうんです。ちなみに、この問題はメルマガ配信の場合だけでなく、有名なお問い合わせフォーム用プラグインContact Form 7やその他の問い合わせフォーム作成プラグインを使用した時も生じてしまうので、プラグインが悪いということではないのかなと。

 

じゃあ、どうなればGmailは迷惑メールとして振り分けなくなるのか。答えは簡単で、送信元と送信者が同じになればいいということですよね!?こういう感じに↓

WP SMTP Mailを使った結果

実はこういう風にできる方法がちゃんとあったんです!^^ 一言で言えばSMTPサーバーを使ってメール送信するということなんですが、Wordpressプラグインを使えば 「なんで今までやらなかった・・・?」っていうくらい、簡単にできますので、ぜひ試してみてください。

 

プラグインWP Mail SMTPをインストールする

WP Mail SMTP

上記のサイトからダウンロードするか、またはWordpressダッシュボードからプラグインの新規追加で WP Mail SMTP と検索し、プラグインをインストール、有効化します。

そうすると、設定 > メール が現れるのでクリックします。以下のように設定していきます。

wp mail smtp 設定

From Email: ここには、メールの送信元として使うメールアドレスを入力します。(例: info@locatimefree.com)

From Name: メールの送信者名を入力します。(例: YUNA)

メーラーのところは「WordpressのすべてのメールをSMTP経由で送信する」を選択。

Return PathはチェックをいれないでOK。

 

続いてSMTP設定に入ります。ここの設定が、お使いのレンタルサーバーによって若干違ってくる可能性がありますが、以下はさくらのレンタルサーバーの場合で解説します。うまくいかないときは、以下の設定のどこかが間違っている可能性が高いので、色々試してみてください。

wp mail smtp 設定2

SMTP Host: サーバーのホスト名を入力します。FTPの設定で使用するホスト名と同じです。(例: abc123.sakura.ne.jp)

SMTP Port: ポートには587と入力します。

Encryption: TLSを使用するを選択。

Authentication: はい:SMTP認証を使用しますを選択。

Username: ここは独自ドメインのメールアドレスではなく、サーバーの初期ドメインのメールアドレスを入力します。(例: info@abc123.sakura.ne.jp)

Password: サーバーのパスワードを入力。

 

以上で、変更を保存します。テストメールを送信してうまく設定できているかどうか、試してください。

 

実は、問い合わせフォームのメールが迷惑メールフォルダに入っていて1か月くらい問い合わせに気づかなかったというトホホな経験をしたときに、このプラグインに出会ったのですが、設定してみたらメルマガのほうにもこの設定が反映されていることに気づいた次第です^^;

この設定で、Wordpressで使用していたメルマガ配信ツールからのメール、問い合わせフォームからのメールがすべて問題なくGmailの受信ボックスに届くようになりました。めでたしめでたし。

 

参考になったサイト:

WordPressのメールが送信できないので、SMTPサーバの設定を外部サーバに変更する。

 

WordPressでCSSの変更内容が表示に反映されない4つの原因と解決法

cache-problemWordPressでスタイルシート(cssファイル)の内容を変更しても、その変更内容が表示に反映されないときがあります。特にキャッシュ系のプラグインやCloud FlareなどのCDNサービスを使っている人に起こりやすいのですが、最近、変更してずいぶん時間が経っているのに変更内容が一向にブログの表示に反映されないことが何度かありました。その時の解決法も含めて、考えうる原因と解決法についてまとめたいと思います。

原因その1: 変更したcssの記述が正しくない

あたりまえですが、cssが正しく記述されなければ表示もちゃんとされませんよね。単純なことですけど、コロン(:)やセミコロン(;)が抜けていないか、{}で閉じられているか、など再チェックしましょう。

cssの変更の際には、ブラウザの開発ツールを使うとミスが少なくなり、編集スピードもグッとあがります。

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

 

原因その2: ブラウザのキャッシュが効いている

ブラウザのキャッシュにより、以前の状態が表示されていることがあります。ページを2~3度、再読み込み(F5キー押下)すると表示が新しくなることがあるので、試してみてください。でも、Wordpress側で、ページの読み込み速度を高速化するためのキャッシュプラグインを使用している方は、これだけだとうまくいかないことが多いです。その場合は次!

 

原因その3: Wordpressのキャッシュ系プラグインのせい

私はW3 Total Cacheプラグインを使用して、ページキャッシュ、ブラウザキャッシュなどの設定をしています。こういうキャッシュ系のプラグインを使っていると、スグに変更が反映されないときが多いです。W3 Total Cacheの場合、Purge from cacheやEmpty all cachesといったメニューがあるので、それを実行してキャッシュをいったん削除します。その他のプラグインも似たような機能がついていると思うので、Wordpressのダッシュボードから確認してみてください。

 

原因その4: Cloud Flareのキャッシュのせい

W3 Total Cacheと併せて利用するとかなり高速化の効果が高い、CDNサービスCloud Flareですが、少し前に仕様が変わったのか、以前のやり方では、変更前のcssの状態がかなり長く続いてしまう、ということに気づきました。。

Cloud Flareについてはこちらの記事も見てみてください。

ブログ表示速度をアップさせるために使っているプラグインとCloudFlare

 

以前は、ログインして、一時的にDevelopment Mode(開発モード)に設定しておけば、cssやjavascriptなどをキャッシュしないで(CDN経由にしないで)表示してくれ、編集がすべて終わった後に、Development modeを終了しておけば、その編集内容が引き続き表示に反映されていました。

が、最近は、Development modeを終了すると、編集内容がすべてなかったかのように、以前の表示に戻ってしまう…という事態が何度か発生。「一日経てば表示が更新されるだろう」と思って放っておいたら、ナント一週間たっても更新されないままでした!

焦って、CSSが書き戻されていないかなどチェックしなおしたりしたのですが、最終的に分かったのは、これです。

Cloud FlareのCacheメニューからキャッシュをクリアーしないと、変更が反映されない。

でした。。

 

いや~、意外にハマってしまった。。以下、キャプチャとともに解決法を載せたのでCloud Flareをお使いの方はぜひ一度確認してみてください!

 

CSSの編集をする際には、Overview のところでStatusをDevelopment modeに変更します。

Cloud flare

 

Development Modeが有効になっているときは、cssの変更がスグに表時に反映されるはずです。(されない場合は、キャッシュプラグインの方のキャッシュも削除)

 

重要なのは、CSSの編集を終えて、Development Modeを無効化するとき。まず、Cachingのメニューに移って、Purge everythingをクリックします。こうすることで、以前Cloud Flareがキャッシュしていたファイルはクリアされ、変更後の状態を新たにキャッシュしてくれます。
Cloud flare

 

最後にDevelopment Modeを無効化して完了。

Cloud flare

HTMLサイトをWordPressに移行する手順のまとめーその1

こんにちは!最近、HTMLサイトをWordpressに移行するという作業を何回か行う機会がありました。立て続けに同じような作業を行っていたので、だいぶ流れも覚えられたのですが、ちょっと時間が経ったらきっと色々忘れてしまうだろう・・・ということで、HTMLサイトからWordpressへの移行の手順についてまとめてみました。

自分の備忘録的な感じで書いたので、分かりにくいところも多々あると思いますが、何かのヒントになれば・・・。もし間違っているところや質問などあったらぜひコメント欄からご連絡いただけると嬉しいです!

HTMLサイトのコピーをローカルに作成

サーバーからローカルにコピー。バージョン管理システムなどを使っていない場合は、バックアップ用にzipファイル化しておくと万が一の時に解凍して元に戻せる。

 

HTMLファイルを整理する

HTMLファイルの中で同じような構成のページ(内容が違うだけ)のものは一つを残し、あとは別フォルダに移動する(あとで使うファイルやフォルダもあるので削除はしない)。

例えば、

  • トップページ
  • 会社概要
  • お問い合わせ
  • 製品一覧ページ
    • 製品情報ページ1
    • 製品情報ページ2
    • 製品情報ページ3
  • ブログ記事一覧
    • ブログ記事1
    • ブログ記事2
    • ブログ記事3

というような構成のサイトの場合、製品情報ページ1~3やブログ記事1~3は内容が違うだけでHTMLの構成はほぼ同じはずなので、製品情報ページ1のhtmlファイルのみを残す。ブログ記事も同様にブログ記事1のhtmlファイルのみを残す。

 

HTMLファイルとWordpressテンプレートとの対応を考える

WordPressテンプレート階層を参考に、HTMLサイトのページがそれぞれ、どのWordpressテンプレートで対応できるかを考える。

例えば、前述の例の場合、

  • トップページ ⇒ フロントページ(front-page.php)
  • 会社概要 ⇒ 固定ページ(page.php)
  • 問い合わせ ⇒ 固定ページ(page.php)
  • 製品カタログ ⇒ カスタムテンプレートファイル または archive-カスタム投稿タイプ.php
  • 製品情報 ⇒ 固定ページ(page.php) または single-カスタム投稿タイプ.php
  • ブログ ⇒ インデックス(index.php)
  • ブログ個別記事 ⇒ 個別投稿記事(single.php)

 

注意点1: トップページに使うのはhome.phpかfront-page.phpか

WordPressでブログではなくサイトを作成する場合、トップページはindex.phpにならないのでhome.phpかfront-page.phpを用意する必要があります。個人的にはフロントページをいつも使用。index.phpとhome.php、front-page.phpの違いや使い分けについては以下のサイトで確認。

WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い

 

注意点2: 製品カタログ(製品一覧)と製品情報のページの作り方

幾つか考えられる方法があるので、サイトに適したものを選ぶ。

製品カタログと製品情報ページを両方固定ページで作成

カスタム投稿タイプの作成がいらないのでその分、簡単。製品の数が少ない場合はこれで十分いけそう。この場合、カタログ(一覧)ページは、通常の固定ページで作るとなると、新しい製品を追加したり、古い情報を削除するたびに、カタログの内容を手動で編集しなくてはいけない。が、これは専用にテンプレート(カスタムテンプレートファイル)を作成すればok。

具体的には、

製品カタログ(親ページ)

―製品情報1(製品カタログの子ページ)

―製品情報2(製品カタログの子ページ)

―製品情報3(製品カタログの子ページ)

という風に固定ページの親子関係を指定しておき、製品カタログ用に、子ページの一覧を取得して表示するテンプレートを作成する。こうすれば、子ページが増えたり減ったりしても、カタログを編集することなく最新の情報で表示できる。

このあたりのやり方は以下のサイトが参考になりそう。

WordPressで親ページに子ページの一覧を表示する方法

 

製品情報をカスタム投稿で作る

より本格的なのがこっち。クライアントさんのほうで情報を追加・更新したいなどの要望がある場合は、カスタム投稿タイプを使って他の固定ページやブログ投稿と分けてあげるほうが分かりやすい。

例えば、製品情報(product)というカスタム投稿タイプを作成する場合、single-product.phpを用意すると、製品情報ページの表示の際は、このファイルを読み込んでくれる。(single-product.phpがない場合はsingle.phpで代用されます)

この場合、カタログ(製品一覧)は、専用のアーカイブページ(archive-product.php)を用意してもいいし、archive.phpやindex.phpので代用してもOK。あるいは、固定ページで、カスタム投稿タイプ一覧を取得して表示する専用のテンプレート(カスタムテンプレート)を用意するのもあり。

カスタム投稿タイプの具体的な使い方については以下のサイトが参考になっています。

 

カスタム投稿タイプの一覧ページ作成で参考になるサイト:

カスタム投稿タイプの一覧ページの作成

カスタム投稿タイプのアーカイブページを作成する

 

カスタム投稿タイプを一から設定するのに参考になるサイト:

WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト

 

カスタム投稿タイプとカスタムタクソノミーを初めて使う時に参考にしたいサイト:

カスタム投稿タイプとカスタムタクソノミーまとめ

 

WordPressテーマの基本的なファイルを作成

いよいよWordpressのテーマファイルにhtml内のコードを移行していく。まず、Wordpressテーマ用のフォルダをローカルに作成します。フォルダ名はテーマ名に合わせる(例えばnomadというテーマ名にする場合は、nomadという名前のフォルダに。)

いちばん基本的な以下のphpファイルとスタイルシートをフォルダ内に作成しておく。空ファイルでOKなので、以下に挙げる通りのファイル名で一通りファイルを作成!

 

共通部分のパーツファイル

  • header.php :ヘッダー部分
  • footer.php :フッター部分
  • sidebar.php :サイドバー部分

HTMLサイトでは基本、ヘッダーからフッターまで一つのファイルに記述していたものが、Wordpressでは幾つかのパーツごとにファイルを分けてコードを記述できる。ヘッダーやフッター、サイドバーのコードがそれぞれパーツ化されることで、メンテナンスもグッとしやすくなるのはありがたいですね^^

 

基本となるテンプレートファイル

  • index.php :ブログ投稿の一覧を表示させるテンプレート
  • front-page.php :サイトのトップページのテンプレート
  • single.php :個別投稿記事のテンプレート

これらのファイルに、header.php、footer.php、sidebar.phpを読み込む設定をし、それ以外のコンテンツ部分のコードを記述する。ちなみに、index.php、single.phpをある程度作り込んでからarchive.phpやpage.phpなどを作る方がラクなので、まずは上記のテンプレートファイルだけ作成していけばOK。

 

WordPressテーマに必須の二つのファイル

  • functions.php :関数を定義
  • style.css :スタイルを定義

functions.phpには、もともとのWordpressの設定を変更したり、拡張したりするための関数を記述するファイル。何も書かなくてもいいけど、このファイル自体が存在しないとWordpressテーマとして認識してもらえないのでファイルは必要。絶対何か記述する必要はでてきますけど^^;

style.cssにはCSSを記述し、他のphpファイルと同じ階層に配置しておきます。(cssフォルダ内とかに配置するのはNG)

 

 

ちょっと寄り道

実はWordpressテーマには、index.phpとfunctions.php、style.cssさえあればテーマとしては成り立ちます。なので例えば一枚モノのサイトを作るときは最低限の三つのファイルだけでもいいわけですよね。でもたいていの場合は、パーツを共通化したほうが便利だったり、ページによってレイアウトやデザインを変えたいはずです。私もまだまだですが、テンプレート階層をちゃんと意識して、必要なところは切り分けたり、別のテンプレートを使ったりと、サイトの構成に合わせてテンプレートファイルを用意していくのが良さそうですね。

テンプレート階層

 

元のHTMLファイルをパーツ化しWordpressテンプレートファイルに移行

WordPressに必要な基本ファイルが用意できたところで、HTMLファイルの内容を各phpファイルに移していく。

まずは何も編集せず、htmlファイルからphpファイルに該当する部分をコピペするだけ。例えば、以下のようなhtmlの場合には、こんな風にパーツごとにコピペしていく。

 

header.php

DOCTYPE宣言から始まって、<head></head>の部分、そしてサイトのヘッダータイトル、ナビゲーションメニュー部分まで。

上の例で言うと

の部分。

 

footer.php

サイトのフッター部分から最後の</body></html>まで。

 

sidebar.php

コンテンツのサイドバー部分。上の例だと、section#content内のsidebarのdiv。

 

残りの部分

で、残った部分のコードを、トップページのhtmlならfront-page.phpにコピペ、記事のhtmlならsingle.phpにコピペする。そして、ヘッダー、フッター、サイドバーがあったところを以下のようなコードに置き換える。

 

htmlの一部をphpコードに置き換える

htmlではサイトのタイトル名や読み込むcssやjavascriptのファイルの場所を直に書いていたが、Wordpressの場合、phpで動的に取得する。

一例をあげると、ヘッダー部分はこんな感じ。

<? php … ?>のコードに置き換わっている部分が動的に読み込まれる。

header.php、footer.php、sidebar.php、index.php、single.phpのコードの置き換えには、以下のサイトの解説が非常に分かりやすい。オリジナルテーマを作る手順の解説ですが、ベースとなるhtmlを作成してからそれをwordpress化するという方法で解説されているので、ループの部分なども含めて見ながらやるとラク!

WordPressオリジナルテーマの作り方

※front-page.phpの解説は上のサイトにはありませんがひとまずコンテンツ部分は編集しなくてもOKです。

 

 

style.cssとfunctions.php

style.cssの始めには必ずテーマの名前を設定する必要がある。以下のコードをコピペ。Theme Nameは必ず指定すること。他は必要な部分の情報を設定。

 

functions.phpによく使うコード。必要な部分をコピペして使う。

 

WordPressテーマをzip化し、アップロード

htmlサイトのほうで使っていたcss、js、imagesなどのフォルダ類を、この作業の最初の方で別フォルダに取り分けておいたところから移してくる。ただし、imagesフォルダには、サイトのデザインに関係した素材ファイルのみを移動させ、コンテンツに使う写真や画像ファイルなどは含めない。

HTMLサイトのトップページのスクリーンショットを撮って、screenshot.pngという名前でWordpressテーマフォルダ内に保存。

以下のファイルやフォルダ類が揃っていることを確認する。

  • header.php
  • footer.php
  • sidebar.php
  • index.php
  • front-page.php
  • single.php
  • functions.php
  • style.css
  • cssフォルダ
  • jsフォルダ
  • imagesフォルダ
  • fontフォルダ(あれば)
  • screenshot.png

 

確認できたら、zipファイルに圧縮。ここまででWordpressテーマづくりは一息^^

残りは、phpの処理の記述の間違いなどもあるかもしれない(というか必ずある!)が、そういったものは、WordPressにテーマをインストールしてからデバッグしていく。

 

この後の作業をリストアップ

ちょっと長くなってしまったので、Wordpressをインストールしてテーマをアップロードした後の手順は次回の記事にまとめます。残りの作業としては

  • WordPressのインストール(まだの場合)
  • テーマのアップロード
  • wp-config.phpをデバッグモードにする
  • PHPファイルの記述の誤りを修正していく
  • 残りのテンプレートファイル(page.php、archive.phpなどの作成)
  • メニューやウィジェットの作成
  • front-pageの編集
  • 基本的なプラグインの導入
  • パーマリンク設定
  • コンテンツの作成
  • 全体的な動作確認
  • リダイレクト設定(必要な場合)
  • wp-config.phpをデバッグモードをオフに
  • htmlからwordpressにトップページを切り替え

といった作業が残りのタスク。これらについて注意点や参考になるサイトなども含め次回まとめたいと思います。

BackWPupプラグインを使ってWordPressブログのバックアップ設定をしよう

この記事ではWordpressでブログを作ったら真っ先にやっておきたいバックアップ設定について解説しています。Wordpressを初めて使う方にも分かりやすいように「バックアップがなぜ、どんな時に必要になるのか」というところから、バックアップを自動で行ってくれるプラグインBackWPupの設定方法まで図解しました。

バックアップとは。なぜ必要なのか。

バックアップとは一般に、データの写しを取って保存することを言います。例えば携帯電話の連絡先。万が一、携帯を壊してしまったりしたときに連絡先だけは復元できるよう、別の場所に連絡先データを保存しておきますよね。

WordPressで作るブログも、普段はちゃんと動いてくれていますが、何かの拍子に「データが壊れた!!」ということが100%ないわけではないんです。なので、そういう「万が一」のときに備えてバックアップを常にとっておく必要があります。

 

例えば、次のようなときには必ず事前にバックアップを取ることが勧められています。というより絶対やったほうがいいです。

  • ワードプレスの更新のお知らせが来たとき
  • プラグイン(拡張機能)の更新のお知らせが来たとき
  • テーマを編集したいとき

ワードプレス本体も拡張機能を追加する様々なプラグインもバージョンアップを続けています。新しいバージョンが出ると、ダッシュボードにお知らせがでるので、更新する必要があります。こういう時は、不具合が出やすいので更新をする前に必ずバックアップを取って、万が一、うまくブログが動かなくなったら元に戻せるようにしておく必要があります。

また、テーマファイルを編集したい(カスタマイズしたい)というときも、バックアップは必要です。この場合は、少なくとも自分が編集するファイルの内容をすべてコピーし、メモ帳などに保存しておくのが一番手っ取り早いバックアップ方法ですが、いくつものファイルを編集する場合は、全体のファイルのバックアップがある方が安心です。

 

「予期しない事態」というのは何もこういった更新や変更を加えるときだけではありません。全く想像しないような時に、急に何かがおかしくなるという可能性もゼロではないんです。例えばお使いのレンタルサーバーで、全データが消失するという惨事が起こる可能性だってないわけじゃない。(実際に過去にそういう事例もあります)

 

あなたが長くブログを運営すればするほど、その「予期しない事態」で失うものは大きくなります。そういった事態の被害を最小限にとどめるには、日ごろからバックアップを取る習慣をつけることが大切。

でも、こういう作業ってついつい後回しになったり、気が付いたら忘れてしまうものですよね。。なので、こういうことは自動化するのが一番です。そこで登場するのが、あなたの代わりに定期的にバックアップを取ってくれるお役たちプラグインBackWPup

BackWPupについての特徴をここで簡単にご紹介しておきます。

 

WordPressプラグイン BackWPupの特徴

サイト全体(ファイル類)とデータベースのバックアップが両方できる

WordPressで作ったブログやサイトは、大きく分けて以下の二つの部分に分けることができます。

  • サイトを構成するファイル類: Wordpress本体・プラグイン・テーマなどのファイル、画像など
  • データベース: ブログの設定情報、ユーザー情報、記事やコメントなどのデータ

BackWPupは、これら両方をバックアップすることができるという利点があります。

 

遠隔保管ができる

バックアップファイルを、ブログ・サイトを置いているサーバー上に保存すると、ディスク障害などサーバーに問題が生じたときに、バックアップまで消失してしまうリスクがあります。

BackWPupを使えば、オンラインストレージをバックアップの保存先に指定することができるので、安心です。DropBox、SugarSync、Amazon S3、Google Strage、Microsoft Azureなど、利用できる種類も多いのが魅力です。

この記事ではDropBoxの無料アカウントを利用したバックアップ保存について説明します。

 

バックアップのスケジュール管理ができる

指定した期間ごとにバックアップ処理が自動的に行われるよう、スケジュールを決めておくことができます。バックアップする内容も、自分で色々選択できます。

たとえば、

  • データベースのみのバックアップは毎日
  • ファイル類のバックアップは週に一度

など複数のジョブスケジュールを設定することもできます。

 

便利ですよね^^ 実際、BackWPupはあらゆるサイトで「Wordpressの必須プラグイン」として紹介されているくらい、本当に優良でありがたいプラグインです。

では早速インストール、設定をしていきましょう!

 

BackWPupの導入

プラグインのインストール

WordPressのダッシュボード(管理画面)の左メニューから「プラグイン」を選択し、そのなかから「新規追加」を選択。

「プラグインの追加」というページが表示されたら、右側の「プラグインの検索」と書かれているボックスの中にBackWPupと

入力しEnterキーを押してください。

プラグインインストール

 

検索結果にBackWPupu Freeというプラグインが表示されるので、「今すぐインストール」をクリック。

BackWPupインストール

 

インストールが完了したら「プラグインを有効化」をクリックします。

プラグイン有効化

 

以上でプラグインのインストールが完了です。
管理画面の左側のメニューに「BackWPup」という項目が表示されるのでそこからバックアップの設定をしていきます。

 

BackWPupにバックアップジョブを作成する

データベースのバックアップジョブを作成

まずはじめに、データベースのバックアップをするジョブを作成します。BackWPupのメニューから「新規ジョブを追加」をクリック。

新規ジョブを追加

 

以下のように設定していきます。

BackWPupデータベースバックアップ1

  • ジョブの名前: データベースのバックアップであることが分かるような名前を付けます
  • ジョブタスク: 「データベースのバックアップ」と「データベーステーブルをチェック」にチェックをいれます
  • バックアップファイルの作成: アーカイブ名にはデフォルトで表示される文字列の最初に「どのブログの何のバックアップなのか」が分かるように文字をいれます。そうすると複数のブログやバックアップジョブの作成をしてもごちゃごちゃになりません^^
  • アーカイブ形式はデフォルトのまま Tar GZipでOK

 

BackWPupデータベースバックアップ2

  • バックアップファイルの保存方法: 「Dropboxにバックアップ」を選択
  • ログファイル: ここの設定項目はすべてデフォルトのままでOK

 

ここまで設定出来たら「変更を保存」をクリックします。

 

次に「スケジュール」タブを選択します。

BackWPupバックアップスケジュール1

  • ジョブの開始方法: Wordpressのcronを選択

 

BackWPupバックアップスケジュール1

  • スケジューラタイプ: 基本
  • スケジューラ: 毎日、3時35分に設定(アクセスが少なく、他のプログラムとのバッティングがなさそうな時間帯にします)

データベースには、投稿した記事の内容やコメントの内容など、頻繁に追加や変更のある情報が保存されていますので、データベースのみを1日1回、自動でバックアップする設定にしています。

 

ここまで出来たら「変更を保存」をクリックし、「DBバックアップ」タブを選択します。

BackWPupデータベースバックアップ3

  • バックアップするテーブル: すべてにチェックします
  • バックアップファイル名: デフォルトのまま
  • バックアップファイルの圧縮: GZipを選択

 

「変更を保存」をクリックし、「DBチェック」のタブを選択します。

BackWPupデータベースバックアップ4

  • データベースチェックの設定: Wordpressのテーブルのみにチェックをいれます。こうするとデータベースに何かのエラーや欠損が発生した時にメールで知らせてくれます。

 

「変更を保存」をクリックします。もう一つ「Dropbox」の設定がありますが、これは後からまとめて設定するので今はそのままでOKです。

 

次にファイルのバックアップジョブの作成をします。

 

ファイルのバックアップジョブを作成

データベースバックアップジョブの作成時と同様に、管理画面のBackWPupメニューから「新規ジョブを追加」を選択します。

BackWPupファイルバックアップ1 BackWPupファイルバックアップ2

  • ジョブの名前: ファイルのバックアップであることが分かるような名前を付けます
  • ジョブタスク: 「ファイルのバックアップ」だけにチェックをいれます
  • アーカイブ名: 先頭に「どのブログの何のバックアップか」が分かるような文字列を追加します。
  • アーカイブ形式: Tar GZip

 

BackWPupファイルバックアップ3

  • バックアップファイルの保存方法: 「Dropboxにバックアップ」を選択

 

BackWPupファイルバックアップ4

  • ログファイル: すべての項目は特に変更しないでOK

 

ここまでできたら「変更を保存」をクリックします。

次に「スケジュール」タブをクリック。

BackWPupファイルバックアップ5

  • ジョブの開始方法: Wordpressのcronを選択

 


BackWPupファイルバックアップ6

  • スケジューラタイプ: 基本
  • スケジューラ: 毎週 日曜日 3時25分 (データベースバックアップと重ならない時間で、深夜に設定)

ファイルには、テーマファイルや画像データなどが含まれますが、これらデータベースほど頻繁には変更されないので、バックアップは週に1度くらいのペースで実行されるように設定します。

 

「変更を保存」をクリックします。

「ファイル」タブの設定欄は、特に変更することはないので解説を省略します。「Dropbox」タブは後程まとめて設定するので今はそのままでOKです。

 

最後に、すべてを丸ごとバックアップするジョブも作っておきましょう。

丸ごとバックアップするジョブを作成

管理画面メニューのBackWPupのところから「新規ジョブの追加」を選択します。

BackWPup全バックアップ1

  • ジョブの名前: 全てのバックアップであることが分かるような名前を付けます
  • ジョブタスク: すべてにチェックをいれます

 

BackWPup全バックアップ2

  • アーカイブ名: 先頭に「どのブログの何のバックアップか」が分かるような文字列を追加します。
  • アーカイブ形式: Tar GZip
  • バックアップファイルの保存方法: Dropboxにバックアップを選択

 

BackWPup全バックアップ3

  • ログファイル: どの項目も特に変更は必要なし

 

「変更を保存」をクリックします。

次に「スケジュール」タブを選択します。

BackWPup全バックアップ4

  • ジョブの開始方法: 「Wordpressのcron」を選択

 

BackWPup全バックアップ5

  • スケジューラタイプ: 基本
  • スケジューラ: 毎月 実行日● 3時45分 (日付は適当に、時刻はデータベースのバックアップ、ファイルのバックアップと重ならない時刻で、深夜に設定)

 

「変更を保存」をクリックします。

 

「DBバックアップ」「DBチェック」のタブでの設定は、前述のデータベースバックアップの設定 のところを参考にしてください。その他のタブの設定は変更せずに初期設定のままでOKです。

 

作成したジョブの確認

ダッシュボードの左メニューのBackWPupから「ジョブ」を選択すると、作成した3つのジョブの一覧が表示されます。以下のようになっていればOKです。

 

ジョブの確認BackWPup

 

お疲れ様でした!いよいよDropBoxとの連携を行います。

オンラインストレージDropBoxとの連携

DropBoxアカウントの作成

ジョブ一覧で、どれか一つのジョブの名前の下にカーソルを持っていくと、Editリンクが表示されるので、クリックします。BackWPupジョブの編集

 

「宛先:Dropbox」タブを選択します。

Dropboxのアカウントを持っていない場合はアカウントをまず作成しましょう。「認証」の欄の「アカウントを作成」ボタンをクリックします。

BackWPupとDropboxの連携1

 

そうすると、Dropboxのアカウント作成ページに表示が切り替わるので、必要事項を記入してアカウントを作成してください。Dropboxのアカウントの作成が完了したら、また元のBackWPupの「宛先:Dropbox」タブの表示に戻ります。

 

Dropboxとの連携を開始する

「Dropboxのアプリへのアクセス」の項目で、「Dropboxのアプリ認証コードを取得」ボタンをクリックします。

BackWPupとDropboxの連携2

 

表示が切り替わったらので、ログイン情報を入力してDropboxにログインしてください。以下のような表示が出たら「許可」を選択します。

BackWPupとDropboxの連携3

 

 

「このプロセスを完了するにはBackWPupAppにこのコードを入力してください」と表示されたら、その下のコードを選択してコピーします。

BackWPupとDropboxの連携4

「Dropboxのアプリへのアクセス」のテキストボックスにコードを貼り付けます。

BackWPupとDropboxの連携5

 

その他の設定項目は初期状態のままでOKです。「変更を保存」をクリックします。

BackWPupとDropboxの連携6

 

以下のように「認証済み!」という緑のサインがでたら無事連携が完了です^^

BackWPupとDropboxの連携7

 

他の二つのジョブも同様にしてDropboxの認証設定を行ってください。

 

手動でバックアップ処理を実行したい場合

もし、手動でいずれかのジョブを今すぐ実行したい場合は、BackWPupのメニュー「ジョブ」から、実行したいジョブ名のところにカーソルを持っていくと「今すぐ」というメニューが現れるので、クリックすれば、実行されます。

WordPress本体の更新やプラグインの更新の前には必ずバックアップを取っておくのがいいですが、そういう時に全体のバックアップを手動で実行してから更新をするのがおススメです。

 

ちなみに、実際にバックアップデータを使って、Wordpressの復元をしたい状況が生じた場合は、以下の記事がとても分かりやすくリカバリー方法を解説してくれています。参考にしてみてください。

BackWPup – バックアップデータからの復元手順

WordPressテーマ(zipファイル)をインストールする方法―賢威テーマを例に.

この記事では、zipファイル形式のWordpressテーマをインストールする方法について解説します。

WordPressのテーマはダッシュボードの「外観」>「テーマ」から検索してインストールすることもできますが、今回はダッシュボード経由ではなく、様々なサイトで配布されているWordpressテーマをダウンロードした場合のインストール手順を説明していきます。「賢威」テーマを利用する方は、サポートサイトからダウンロードする部分も図解したので参考にしてみてください。

WordPressテーマファイルを用意する

まずはWordpressテーマをダウンロードサイトからダウンロードしてください。zip形式でダウンロードされるはずですが、解凍はしないでOKです。

 

賢威テーマを利用する場合

まずは賢威のサポートページにログインします。すると、右上のほうに「ダウンロード」というボックスがあります。その中から「賢威テンプレート」のリンクをクリックします。

賢威6.2と大きく書かれたページが開かれたら、少しスクロールダウンして

「賢威6.2 テンプレート(HTML or WordPress)」をダウンロードする

というリンクをクリックしてください。新しいページにテンプレートメーカーが表示されます。

 

左側のテンプレートメーカーメニューから必要な情報を選択していきます。

賢威テンプレートダウンロード1

  • テンプレートの種類: WordPressテンプレートを選択します
  • テンプレートのデザイン: 好きなものを選びましょう

 

賢威テンプレートダウンロード2

  • サイトの幅: 特にこだわりがなければ初期設定のままでOKです。
  • ロゴタイプ: ロゴに画像を使いたい場合は「画像」を選択してファイルをアップロードします。

 

賢威テンプレートダウンロード3

  • 細かな配色設定: 初期設定の色を変えたい場合はここで選択しなおすことができます。

 

以上の設定が終わったら「ダウンロードする」ボタンをクリックしましょう。zip形式のテーマがダウンロードされます。

 

テーマをWordpressダッシュボードからインストールする

ダッシュボードで 外観 > テーマ を開きます。「新規追加」をクリックします。

Wordpressテーマインストール1

 

 

「テーマのアップロード」をクリック。

Wordpressテーマインストール2

 

 

中央の「ファイルを選択」をクリックしてダウンロードしておいたzip形式のテーマファイルを選択するか、下の画像のように、「ファイルを選択」のところにzipファイルをドラッグ&ドロップします。

すると「今すぐインストール」がクリックできるようになるのでクリックします。

Wordpressテーマインストール2

 

 

アップロードが完了すると下のような表示になります。「有効化」をクリックします。

Wordpressテーマインストール4

 

 

以上でWordpressテーマのインストールは完了です。

ダッシュボードの左上のサイトタイトルのところにカーソルを合わせると「サイトを表示」というメニューがひょこっと現れますのでクリックして、インストールしたテーマを確認してみましょう^^

Wordpressサイト表示

 

WordPressをサーバーにインストールする方法(さくらサーバー)

この記事では、レンタルサーバー(さくらインターネット)にWordpressをインストールする方法を図解しています。さくらインターネットもそうですが、多くのレンタルサーバーではWordpressを簡単にインストールできるツールが備わっていて、初めてでもほんの15~20分もあればインストールが完了します。さくっとインストールしていきましょう^^

 

ちなみにこの記事はWordpressでつくるブログ(またはウェブサイト)のドメインがサーバーに設定されていることが前提で話が進んでいきます。

WordPressでブログやサイトを運営するには、

  1. サーバをレンタルする
  2. 独自ドメインを取得する
  3. ドメインをサーバーに設定する
  4. WordPressをサーバーにインストールする

という手順がまず必要になります。この記事では4番目の手順について解説していますが、1~3についてはこちらの記事でそれぞれ解説しています。これからWordpressを始める方は参考にしてみてください。

では本題に入っていきます!^^

 

データベースを作成する

まず、Wordpressで作るブログやサイトの情報を保管するデーターベースを作っていきます。

さくらインターネットのコントロールパネルにログインしましょう。

コントロールパネル

 

左サイドバーから「データベースの設定」を選択します。

さくらインターネット データベースの設定

 

「データベースの新規作成」をクリックします。

さくらインターネット データベースの設定2

 

データベース名を設定します。後からデータベース一覧を見た時にどのブログ(またはサイト)のデータベースなのか分かるような名前を設定しておくといいですね。データベース文字コードはUTF-8を選択してください。

さくらインターネット データベースの設定3

「データベースを作成する」をクリックします。

データベースが作成されると、データベース一覧が表示されます。作成したデータベース名が表示されていることを確認しておきましょう。

 

では次に、Wordpressのインストールです!

WordPressをサーバーにインストールする

コントロールパネルの左サイドバーから「クイックインストール」を選択します。

wpinstall1

 

カテゴリーメニューから「ブログ」を選択し、インストールメニューから「Wordpress」を選択します。

Wordpressインストール手順2

 

 

インストール先の一番目のボックスには、今回使用するドメインを選択します。二番目のボックスにはWordpress用のファイル類を保存するフォルダ名を指定します。wpとか、適当につけましょう。

データベースには、先ほど作成したデータベースを一覧から選択します。

テーブルの接頭語は表示されている文字列のままでoKです。

Wordpressインストール手順3

 

入力内容を今一度見直して、インストールボタンをクリックします。

 

無事にインストールが完了すると以下のような表示になります。「アプリケーションの設定へ進む」をクリック。

Wordpressインストール完了

 

 

WordPressのインストール画面が表示されるので必要な情報を入力します。ユーザー名とパスワードはこの後すぐに必要になるのでメモっておきましょう。

Wordpressインストール

 

 

WordPressのインストールの完了画面が表示されたらログイン画面へと進みます。ユーザー名とパスワードを入力してログイン!

 

Wordpressログイン

 

 

ダッシュボードが表示されたらオメデトウございます!! 早速セキュリティのために一つ、作業をしておきましょう。

 

ニックネームを変更する(セキュリティのため)

WordPressをインストールした直後は、管理者(あなた)のユーザー名と、ブログに表示されるあなたのニックネームが同じものになっています。これは変更しておかないと、ログイン情報の半分を公開しているようなもので危ないので、すぐにニックネームを

変更しておきましょう。

ダッシュボード左のメニューから ユーザー > あなたのプロフィール を選択します。

「ニックネーム」のところを「ユーザー名」と違うものに変更し、ブログ上の表示名のところは「ニックネーム」を選びます。下の方にいって「変更を保存」をクリックして完了です。

 

Wordpressニックネームの変更

 

 

WordPressのインストールは以上です。お疲れ様でした!

 

独自ドメインをサーバーに設定する方法

この記事では、取得した独自ドメインをWordpressのブログやウェブサイトのURLとして使えるようにするため、レンタルサーバーにドメインを設定する方法について解説します。

利用するレンタルサーバーやドメイン取得サービスによって設定方法は少し違ってきますが、ここでは

  • レンタルサーバー: さくらインターネット「スタンダードプラン」
  • 独自ドメイン取得サービス: お名前.com

の場合を例に解説を進めていきます。

独自ドメインの取得方法や、レンタルサーバーの借り方については以下の記事もあわせて参考にしてくださいね。

お名前.comで取得したドメインを設定する

まずはさくらサーバーのコントロールパネルにアクセスし、ログイン情報を記入してログインします。

さくらサーバーコントロールパネルログイン

 

ログイン画面でのログイン情報(ドメイン名とパスワード)は、仮登録完了メールに記載されている情報(《 サーバコントロールパネル ログイン情報 》の欄)を入力します。

 

ログイン後、左サイドバーにある「ドメイン設定」の欄で、「ドメイン設定」のリンクをクリックします。

サーバーでのドメイン設定

 

ドメイン一覧の上の部分にある「新しいドメインの追加」ボタンをクリックします。

サーバーに新規ドメイン追加

 

「5.他社で取得したドメインを移管せずに使う・・・」の項目で「ドメインの追加へ進む」リンクをクリックします。

他社のドメインを移管せずに使う

 

ドメイン名の欄に取得した独自ドメインを入力し「送信する」をクリックします。独自ドメイン追加

 

確認画面で、入力内容が確認できたら「送信する」をクリックします。

「ドメイン追加完了」画面が表示されたら、続いて「詳細設定にすすむ」をクリックしましょう。

ドメイン追加完了

 

ドメインの詳細設定

以下のような設定画面が表示されます。

ドメイン詳細設定

ここでは、まず1で「マルチドメインとして使用する」が選択されていることを確認します。

2の「マルチドメインの対象のフォルダをご指定ください」で、適当なフォルダ名を指定します。上の画像ではsampleとしていますが、何のサイトのフォルダなのか分かるようにしておくほうがいいです。後々、複数のサイトを運営するようになったときに見分けがつくように、例えば、bananarecipe.clubのサイトだったらフォルダ名はbananaとか、そんな感じに付けるといいと思います。フォルダは次の項で作成しますので、フォルダ名は忘れないでおいてくださいね。

その他の設定は特に変更しなくてOKです。「送信」をクリックして詳細設定を完了させましょう。

 

ファイルマネジャーでマルチドメインの対象のフォルダを作成

マルチドメインの対象フォルダとして指定したフォルダを、ファイルマネジャーを利用して作成します。コントロールパネルの左サイドバー「運用に便利なツール」から「ファイルマネジャー」をクリックします。

コントロールパネル

表示されたコントロールパネルの左上の方に、以下のような表示がありますので、右クリックして「フォルダ作成」を選択します。

マルチドメイン対象のフォルダ作成

ポップアップ画面で、先ほど「ドメインの詳細設定」画面で入力したフォルダ名と全く同じものを入力し(ただし先頭にスラッシュ(/)は入力しない)、OKボタンをクリックします。

フォルダが作成されていることを確認したら完了です。

 

ネームサーバーの変更

お名前.comで取得した独自ドメインのWHOIS情報に登録されているネームサーバ情報(Name Server)をさくらのネームサーバ情報に変更する必要があります。

 

お名前.comにログインし、「ドメイン設定」から「ネームサーバーの変更」を選択します。

「お名前.com各サービスを利用」か「他のネームサーバーを利用」を選択するところで「他のネームサーバーを利用」を選択します。

ネームサーバー情報を入力する部分では以下の情報を入力してください。

さくらネームサーバー
(↑この情報は、さくらレンタルサーバーに他社で取得したドメインを設定する手順のSTEP4に載っています)

 

確認画面で入力内容が確認できたら「設定する」をクリックして完了します。

※具体的な変更の仕方は、お名前.comの公式ガイドをご覧ください。

 

 

以上で、独自ドメインのサーバーへの設定が完了しました。これでサーバーにWordpressをインストールする準備が整ったことになります^^ 次回はWordpressのインストール方法について解説しますね。