2017年9月26日火曜日

鍼灸院のホームページ wordpressへの移行

歌は世につれ世は歌につれといいますが、ホームページも時代とともに変わっていきます。特に去年あたりはスマホ対応をしないと検索順位が落ちると言われていたこともあり、当院もホームページの改造を余儀なくされることとなりました。

このスマホ対応というのは、スマホでアクセスした時に画面サイズや操作がそのスマホに最適な状態になっているということで、これをレスポンシブウェブデザインというそうです。これを自力で作成というのはあまりに大変でしたので、自動で実現してくれるというwordpressというホームページ作成ソフト(すごいざっくりとした言い方)へ移行しました。

同じことで悩んでいる人もいらっしゃるでしょうから、自分がどのようにwordpressへ移行したかの作業を、この投稿に記しました。なにがしかの参考にしてもらえばと思います。この投稿のタイトルもそのための検索ワード風にしました。

ただし!あくまで自分で作ったホームページをお持ちの方対象です。これからホームページを作る人や業者に作ってもらった人は、勉強する時間がもったいないので、再び業者に頼むかエキテンなどのポータルサイトを利用することをお勧めします。

その前に軽く当院のホームページの歴史を振り返ってみましょう。
当院は平成17年開業ですので、大体12年前。開業と同時にホームページも立ち上げましたが、その初代ホームページから今のホームページは4代目になります。

まず初代、開業時に作成したホームページです。
いやあ、今から思えば何と拙い。何せ初めてホームページを作ったものですから、全て手探り。ページ構成など考えるのが大変でした。テーマカラーも試行錯誤の末、赤紫~桜色に決めました。しかし、この時はレイアウトはテーブルタグ。時代を感じますね。

ただ、このホームページだと、コンテンツの追加など後からの変更がすごくやりにくいことに気づきまして、大改造を決心しました。

そしてできたのが2代目です。
レイアウトはCSSを使用。メニューを左端に集約して、追加しやすくしました。このホームページが一番長かったと思います。

さらに時が過ぎ、SNSが大流行、スマホも徐々に普及し始めました。そこでSNSを意識して作ったのが3代目です。

いいねボタンの表示やGoogle+との連携、将来のスマホ対応を考えてのレイアウト作成など、いろいろ取り入れましたが、果たして効果はあったのか。私自身SNSは面倒になって全然やらなかったですしね。

そして現在のホームページ、4代目。
スマホ対応が必須ということで、それまでのホームページビルダーからwordpressに移行、フリーのイラストなども使用して、雰囲気を変えてみました。

画面はこんな感じ。PCで見ています。

ちなみにスマホで見るとこんな感じ。

このようにホームページのデータは一つだけで、見る環境で自動的に変わるんですね。いやー、本当時代は変わりますなあ。

それでは移行する手順の説明に入ります。

まずwordpressの世界(言葉とか仕組み)を理解しましょう。
下記の本は、お店をやっている女性が初めてwordpressでホームページを作るという設定で、会話形式で解説しています。とてもわかり易いですし、必要なことは大体網羅されてますので、一通り読めば基本的な知識は身につきます。

いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応 (「いちばんやさしい教本」シリーズ)

石川 栄和,大串 肇,星野 邦敏 インプレス 2014-11-14
売り上げランキング : 5795
by ヨメレバ

ただこの本では一からホームページを作る前提ですので、今あるホームページをどうしたらwordpressへ持っていけるのかが分かりません。

そこで参考になるサイトがありました。
既存サイトをWordPressへ移行する方法

このホームページは電子書籍にもなっていますので、こちらの形態が良ければ以下のリンクから手に入れてください。ちなみにkindleがないと読めませんので、スマホなりPCにkindleをインストールしましょう。
既存サイトをWordPressサイトにする方法既存サイトをWordPressサイトにする方法
藤田ひろし

2015-05-21
売り上げランキング :

Amazonで詳しく見る by G-Tools

上記2つ、特に「既存サイトをwordpressサイトにする方法」をしっかり読み込んでおきます。そして以下の手順で作業していきましょう。

1. まずFTPソフトなどでホームページがあるレンタルサーバーのファイルをバックアップする。

2. サーバーの管理画面からwordpressをインストールする。その際今のホームページがある場所(ルート)にwpというフォルダを作って、そこへインストールする。

3. 上記2つの本を参考にしながら、初期設定を行う。

4. 外観(テーマ)を決める。最初からあるテーマはブログ用なので、インターネットから探して、いいと思ったテーマをインストールしましょう。ちなみに私は「いちばんやさしいWordPressの教本 」で紹介されているテーマを使いました。

5. とりあえず今のホームページの全ページを、それぞれwordpressの固定ページを作ってコピー&ペースト。ファイル名(固定ページ編集画面の上にあるパーマリンク)も元と同じにする。その際、初期設定ではファイル名に".html"がつかないので、「.html on PAGES」というプラグインを使って、つくように設定しておく。

6. 全部移し終わったら、スマホやPCのブラウザから"今のホームページのURL/wp"にアクセスして動作チェック。特にリンクの所はミスしやすいので、しっかりチェック。

7. OKなら、もう一度FTPソフトでサーバーの内容をバックアップ。

8. ここからがドキドキの作業です。詳しい手順は「既存サイトをwordpressサイトにする方法」に載っていますのでしっかり読み込んでおきます。ざっと説明しますと、ルート(今までのHPがあった場所)のファイルをwpフォルダ以外全部削除、wpフォルダの内容をルートへコピー。置換プログラムで全ファイルのURL部分を書き換え、というふうに進めます。

これで移行完了。PCやスマホからアクセスして動作チェックしましょう。繰り返しになりますが、本当にリンクでミスをしやすいので、念入りに調べましょう。

また、上記の本にも載っていますが、Google アナリティクスやGoogle Search Consoleに自分のサイトを登録して、エラーが出ないか数週間見守りましょう。私は最初リンクエラーを起こしまくって、訪問者数も激減しました。

ここまで読んで、全然わからん面倒くさ~と思ったらいさぎよくプロの人に頼みましょう。多少お金かかっても、そのぶん本業に集中したほうが絶対いいです。