Wordpress関連ブログ運営関連

遂にWeb上で自分の新ブログが確認できるように!目に見える形になってきた「やがみんの作業倉庫引っ越し記録」④

スポンサーリンク

引っ越し記録!!第4回!!
うーん、毎週1本このテーマを扱っているので週刊連載のコラムみたいになってきましたねぇ。

自分の備忘録としても有用なので書いていくのは楽しいんですが、当時の苦労を思い出すと少し胃が痛くなりますw
さぁ!そんな僕の汗と涙と涙と汗とry行ってみよう!!(・∀・)

前回の記事はこちら↓

サーバーの契約

前回は画像のダウンロードが全て終わったのでここからは本番に入っていくわけですね。
ローカル(パソコン内)でいじるステージはもうおしまいです。
遂にここまで来てしまいましたね…サーバーの契約から始めていきます。

以前もお話ししましたが契約するサーバーは何となく決めてあります。
「ConoHa Wing」です。値段、容量、メニューの見やすさ等からこちらを選択。
コノハの新規契約を進めていきましょう!!

ConoHaWingの新規登録画面。一般的なサイト登録と同じですね
年数が長くなれば月額が安くなります。今回は一応1年契約で進めていこうかと
Conohaには「Wordpressかんたんセットアップ」機能がついています
WordPressを使用する方なら最初からサーバー内にWordpressをインストールした状態で始められる簡単仕様

ConohaWingは長期契約すると独自ドメインが無料です。(驚きの2つまで無料)
後から独自ドメインを設定できますが、ここは最初から決めたいと思います。

独自ドメイン=HPやサイト・ブログのアドレスになりますので慎重に!!
うーん、何にしましょうかねぇ…。。。
実は以前のライブドアブログは「やがみんの作業倉庫」英語変換しただけのサブドメインでした。

まぁ打ち込み間違いで
「 yagami-w0arehouse.blog.jp 」にしてしまったんですけどね!!!
本当は「wearehouse(作業倉庫)」が正しい

ここは迷いますが僕の名前「八神秀人」を前面に推していきたいですし、打ち込みやすさも考え
「yagamihideto.com」にしようと思います。
今思えば「yagami-hideto.com」とかでも良かったかも…??
な?独自ドメイン決定は慎重にね!!!w

独自ドメインなども決めたので契約に入ります。 決済画面で決定したらもう戻れない…いくぞ…

契 約 完 了

とりあえずの初期設定が終わったので自分のサイトを確認していきましょう。

全く何もしていない状態での本当にまっさらな状態での今見てるこのブログです!
ここから今のブログにまで作り上げました。ほんの2か月前なのに感慨深い…。。。

うほー!!すげー!!!しっかり出来上がってるー!
ここからどうしたらいいのか全くわかんねーwww

昔HPを作った時の感動を思い出しますねぇ…。
だって考えてみてください??契約するまでここには何もなかったのに、契約したらここに新しいページができるわけですよ!!

楽しくない??

さて、これで最低限の準備整いました。
ブログのインポートしていく前やりたい事があるのでこちらを設定していきます。

キャンペーン中は安いので
サーバー探しているならコノハをどうぞ!↓


WordPressが入っているサーバーの初期設定等

さっさとWordPressちゃんを弄って新ブログに切り替えていきたいのですが、ここはハヤる気持ちを抑えながら進めていきます。
まずは「ConoHaWingのコントロールパネル」に飛びます
「サイト管理」「サイト設定」と移動していき上の画像のページへ。

  • かんたんSSL化
    SSLとは「サイト保護機能」です「http」→「https」に代わり安全な接続として閲覧者に優しいサイトになります
  • コントロールパネルプラグイン
    ConohaWingのコントロールパネルに飛ばなくてもWordpress管理画面からコノハコンパネの設定を変更する事ができるようになります
  • 自動キャッシュクリアプラグイン
    人によっては必要ありません。Wordpressのキャッシュデータ(履歴)を一定期間後に消去してくれるメモリクリーナーみたいなプラグインです

    これらを有効化・インストールしていきます。
コノハウィングのコントロールパネル
今の3つはボタンを押すだけで簡単に設定が終わります

SSL化は有効化してから少し待たないと反映されない場合あり。
これらは枠内をクリックするだけな簡単仕様。使いやすくてGood。

次は「サーバー内」の「Wordpress」の「管理画面」に行きます。
管理画面に入ったら「設定」をクリック

WordPressの管理画面
だいたいどのVerのWordpressを使用していてもこんな感じのはずです

ここは少し混乱しやすいですが「Wordpress」の管理画面なので注意!
「サーバー(ConoHa)「Wordpress」って単語がゴリゴリ出てくるから混乱しますよねw

関係性としてはこんな感じです。
  • 「ConoHaWing」は「サーバー」を貸してくれる
  • 「サーバー」はインターネット上の「データ置き場」
    ※HDDやSSD、USBメモリがWeb上にあるようなものです
  • サーバーの中にWordPress」が入っている
  • 「Wordpress」とは「サイトを作るシステム(プログラム)
サーバーとWordpressの関係性。こんな感じでわかりますかね??

さて話がそれましたので本題に。WordPressの管理画面:設定項目内を見ていきましょう。
「検索エンジンがサイトをインデックスしないようにする」チェックを入れます。

検索エンジンでの表示を遮る機能です
重複コンテンツなどのペナルティはあとでGoogleからの評価に響くので引っ越し終了までは検索エンジンのロボットが来ないようにします

これは簡単にいえば「Googleとかから見えないようにするね!!」という機能です。
移転するまではテストページを作成したり、インポート途中では旧ブログと重複したりするのでとりあえずGoogleから見えなくします(noindex化)

移転が無事完了したらここは戻すので忘れないように!!

ブログ引っ越しデータをWordpressインポートする準備

パーマリンク設定

ブログのインポートをすると今までの「内部リンク」が機能しません。
内部リンクとは「同じホームページ内・サイト内の別のページに飛ばすリンク」ですね。

例えばここに2つのリンクを用意しました。

八神秀人の動画倉庫
≪Twitter始めました☆ ≫ ≪最新Blog”やがみんの作業倉庫

このYouTubeのアカウントは僕のですが、この「やがみんの作業倉庫」と同じサイトではありません。
デジタルな表現をするなら「YouTubeのサイト内の1つである「八神秀人」のページ」ですね。

しかし「OBS」の記事はここ「やがみんの作業倉庫」内のサイトページです。
同じサイト内に飛ばすリンクは「内部リンク」
他のサイトに飛ばすリンクは「外部リンク」なわけです。

ん?なんでこの説明をって??

ブログインポートをした場合、バックアップ当時そのままを再現します。
外部リンクの場合そのままでも機能します。他のサイトは引っ越ししていないですから。

問題となるのがこちら「内部リンク」
同じサイト内のページが全て移転しているのでこのままだと「旧ブログ」に飛ばされます。

ここを簡単に直す方法の準備「パーマリンクの設定」です。
細かく話すとクッソ難しい話になるのでシンプルに説明すると、
「新しく作るページのアドレスを〇〇という順番にしてね!」という話です。

旧ブログの記事ページのアドレスは全て
「https://yagami-w0arehouse.blog.jp/archives/〇〇〇.html」という形式でした。
パーマリンク設定で
「https://yagamihideto.com/archives/%postname%.html」という形式にします。
「%postname%」部分は旧ブログでの「〇〇〇」に当たる部分です。

パーマリンク設定
「/」と「archive」「%postname%」を足して完了。簡単ですね

この設定をすると新ブログの方は旧ブログと同じく記事のアドレスを作ってくれるようになります。
これで内部リンク関連の準備は完了です!

各種プラグイン・ソフトの導入

  • MovableType・TypePadインポートツール
    livedoor、ameba、FC2、はてな等のブログサービスで生成したバックアップデータを
    WordPressにインポート(読み込み)させるツールです
WordPress管理画面から「プラグイン」を選択し検索すればサクッと出てきます

  • Search Regex
    WordPress内の全ページを検索し置換してくれるツール
    例えばWebページ内の「リンゴ」を「バナナ」に全部書き換えたい!なんて事ができちゃいます
  • 以上2点のツールをWordPressにインストールしていきます。

    ついでにパソコン内「FFFTP」というソフトをインストールしていきます。

    こちらはWordpress内ではなくPC内にダウンロードしてインストールします
    インストールは「次へ」を押すだけの簡単な仕様。これさりげ僕が中学の頃からあるようなソフトな気が…

    これらが移行作業時に使える子たちなので今回は必須
    使い方などは後述。

    テーマの変更

    これは別に今じゃなくてもいいのですが、ついでなのでやってしまいます。
    テーマとはそのまんま「サイトの見た目」です。
    先ほどのド・シンプルな見た目で進めていくには僕のテンションがもたないのでw

    WordPressテーマを変えるのは簡単。
    「外観」を開いて選んで、はい。終了。

    外観からテーマを選びます。「親テーマ」と「子テーマ」をいう独自のWordpressルールがありますが
    とりあえずcocoonを選ぶなら「cocoon child」を選べばOK

    有料テーマである「Sango」「JIN」なんかも気になりましたが、今回は無料かつ基本である「cocoon(child)を選択。
    あとでどうしても必要になったらまた改造すればいいんです!!これぐらいの後悔ならありあり。

    旧ブログからのデータインポート

    ここまで終わったのなら、記事(文字データ)をインポートしていきます。
    先ほどの「MovableType・TypePadインポートツール」を使用してWordPressにデータ入力していきます。
    「ツール」→「インポート」画面にアクセスすると先ほどの「MovableType・TypePad」があるので「インポーターの実行」を選択
    ライブドアブログからダウンロードした「バックアップデータ」をアップロードして読み込ませます。

    プラグイン画面からではなく「ツール」画面から行う所に注意!

    最初から全ての記事をインポートしようかと思ったのですが、どういう風にWordpress上で反映されるか試したかったためまずは1記事だけ読み込ませることに。

    「ファイルをアップロードしてインポート」を選び、バックアップデータを選択するだけで使える簡単です
    成功すればカテゴリ分け、ページリンクなど全てそのまま再現してくれる高性能ツール
    重複したコンテンツは追加しないという有能さ。これ無料なのは凄いわ。

    さ、あとは待つだけ!余裕余裕☆!!

    んーーー????
    読み込まないぞ???

    というわけで一回目のインポートは失敗。なぜや。

    MovableType・TypePadの処理バイト数を上げる

    いくつか記事を読み込ませてみるとテストに使用した「ちびっこヒーローズ~~~」の記事だけダメな模様。
    文字ベースなので何が問題なのか「???」状態。
    調べてみると、どうやら「MovableType・TypePadインポートツール」処理上限を超えているかもしれない事が判明しました。

    要点だけ話す「初期設定のままでは1行に8192バイトを超えた場合処理ができない」らしいです。
    「ハンカクモジ(hankakumoji)」1文字1バイト
    「全角文字」1文字2バイト使用します

    テキストエディターでバックアップデータの中身を確認した状態
    あらー^^綺麗に1文字オーバーしてますねぇ^^奇跡かな??^^
    ※「8190」と書いていますが「8192」の間違いです

    バックアップデータを確認するとまさにコレ
    見事にByte数をオーバーしていました。

    このままではインポートができないので、
    「プラグインエディター」機能を使用しプラグインの改変を行います。

    プラグインエディターを開く

    !自己責任でお願いします!

    1. 右上の「編集するプラグインを選択」から「MovableType・TypePadインポートツール」を選択
    2. 「function fgets($fp, $ler=8190)」を検索
    3. この「8192」部分に「0」を足して「81920」にする

    これで81920Byte処理ができるようになりました。
    全角で言えば1行に40,960文字ですね。

    ぱっと見難しそうですが簡単です。「Ctrl+F」を押して検索窓を開いて「function fgets($fp, $ler=8190)」と検索すればすぐ見つかります
    無いとは思いますがもっと桁数を増やして処理数を増やしたいのであれば「00」や「000」と追加してみてください

    さて、これで先ほどと同じくバックアップを読み込ませてみると…

    cocoonが反映されていて少しすっきり画面の状態
    しっかり「スマートフォンアプリ」へカテゴリ分けもされています

    できたー!!!!
    とりあえずはこれでインポートのチェックは完了です。

    画像をサーバー内にアップロードする

    次は「FFFTP2.0」を使用しサーバー内のデータフォルダにアップロードしていきます。
    まずは「FFFTP」サーバーの場所を教えなきゃいけないので各種アドレス・パスワード等を拾ってきます。

    使用するレンタルサーバサービスによってFTPアカウント取得・設定、パスワードの確認などが変わります
    これらの設定を書いていくとキリが無いので今回は割愛させていただきます
    FFFTPちゃんの起動画面
    新規ホストやらなんやらまるでタイムスリップしたような気分になりますね
    昔はホームページをHTMLで作ったらこういったソフトでアップロードしてたんやで(インターネット老人会)
    「新規ホスト」→「基本」タブでコノハウィングFTPサーバーにアクセスするための設定を入力していきます
    これが無事動くようになれば「FTP」という通信規格を使用してサーバー内のアップロード・ダウンロード・確認が簡単にできるように

    FFFTPを開いて各種設定類を決めていきます。
    FTP関連はながーーーい説明になるので細かい説明は今回割愛。
    もし「知りたい!!」なんて方がいたらコメントやTwitterへ連絡ください。

    旧ライブドアブログと同じように画像フォルダの構成を作っていきます。
    該当する場所に「imgs」フォルダを作り、前回ダウンロードした画像データをアップロードしていきます。

    imgsフォルダごとサーバー内にアップロード。5GBもあったので結構待ちました
    今回は画像データのみですがサーバー内にはどんなデジタルデータもアップロードする事ができます
    見れるかどうかは別の話なんですけどねw

    一応「Google chrome」「Firefox」などのブラウザを使用し、表示されるか確認します。
    何枚か確認した所、問題なく閲覧できたのでOK!次に行きましょう!

    Search Regexを使用してリンクを変更

    「Search Regex」「検索した文字列」「設定した文字列」「書き換える(置換)するプラグインです。
    先ほどのパーマリンク設定で少し触れた内部リンク、そして画像のリンクをこれで書き換えます。

    画像表示するためのHTMLは

    ≪例≫
    <img src=”https://livedoor.blogimg.jp/yagami1120/imgs/5/f/5f810152-s.jpg>
    <img src=”https://yagamihideto.com/wp-content/uploads/imgs/5/f/5f810152-s.jpg>

    この画像はこれです⇙

    内部リンクのHTMLは

    ≪例≫
    <a href=”https://yagami-w0arehouse.blog.jp/archives/hello-world.html>
    <a href=”https://yagamihideto.com
    /archives/hello-world.html>
    このURLリンクはこれです。

    以上のように変更していきます。
    よーく見てもらうとわかるのですが前半部分しか書き換える必要がありません。

    置換すれば旧から新へすぐ移行ができ、作業量を減らせる。
    そのために今まで各種準備が大変だったわけですね。

    Search Regexも使用方法は簡単
    「a href」という「内部リンク」を変えたい場合は「ヤガミウェアハウス」を「八神秀人.com」に置き換えるだけです
    「https~~」みたいな書き方が変わらない所は置換する必要がありません。画像データも同じように変換していきます

    と、これだけで完了!
    ぱっと見は難しいですが「検索入力」「置換する文字」「全て置換」と3ステップで終了。
    さて、記事を確認してみましょう!

    うほー!できたぞー!!!
    ちょっと表示されていない画像が何枚かありましたが…

    画像が表示されていないのは前回の記事で話した「少しだけダウンロードできなかった画像」です。
    これは手元のストックから画像を上げ直せば…

    問題なし!!
    やったね!!これでインポートチェックが無事終わりました!
    あとは今までの記事を一括インポート→置換していくだけです。

    引っ越し作業が大分進んできました

    インポートチェックが終わったので残りを一気に仕上げていきます。
    先ほどの「MovableType・TypePad」を使用し一括でブログバックアップのインポート。
    「Search Regex」を使用してインポートした記事の内部リンク・画像を一括置換。

    計300以上の記事が無事Wordpressに移行できました。
    簡易的にチェックしていき、少し息抜き。

    WordPressを開設した時に最初から入っているページを少しいじってみてページ自体の編集はどんな感じにしていくのかを体験してみます。

    それが先ほどの≪例≫で貼ったリンクページです。

    きゃわモルちゃん

    そもそもWordPressの書き方がわからないと意味がないですからねw
    ここで少し慣れておいたわけです。

    細かい画像チェックやリンクチェック等まだまだ確認点は大量にありますが、大きな山を一つ越えたようなもんです!
    ここから壊滅的な失敗は基本的に無いはず!!

    いやー、長かった!!
    ここらへんで今までの苦労が一気に解決したような気分に…!!
    もう「0から始めたわりに自分って天才!?!?!」なんて調子に乗り始めてきました。

    まぁ。この後にまた足元救われるんですけどね。

    というわけで今回のお話はここまで!
    引っ越し作業も大分形になってきましたね!!次回をお楽しみに!(・∀・)!


    コメント

    タイトルとURLをコピーしました