Webサイトのエクスポートとローカルへのインポート(バックアップ兼リストア)

WordPresで作成したWebサイトのバックアップ運用手順のまとめになります。
リストアは自分のローカルのPCにWordPressを作成した環境へ行う前提となっています。
未解決課題の内容もあるので詳細は以下を参照してください。

参照:Webサイトのローカルリストア用WordPress環境作成

 

1.WebサイトのWordPressよりブログをバックアップ(エクスポート)

管理者でログインして「ツール」の「エクスポート」をクリックします。
「すべてのコンテンツ」を選択して「エクスポートファイルをダウンロード」ボタンクリックします。
※重要!見たらすぐわかりますがエクスポートされたXMLファイルのサイズは明らかに少なすぎます。
 中身を見ると参照先の情報ばかりに見えます。
 本当の意味えバックアップするのはリストアまでしないと意味がありません。

 

2.ブログをローカルへのインポート(バックアップ兼リストア)

管理者でログインして「ツール」の「インポート」をクリックします。
「インポーターの実行」をクリックします。

エクスポートしたファイルを参照から指定します。
「ファイルをアップロードしてインポート」クリックします。

既存のユーザーへインポートしたいので「あるいは投稿を既存のユーザーに割り当てる」を選択します。
「添付ファイルをダウンロードしてインポートする」をチェックつけます。
「実行」ボタンをクリックします。

「インポートは完了しました。」と表示されれば完了です。

Webサイトのローカルバックアップ兼リストア用WordPress環境作成

せっかく作成した投稿記事など何らかの理由で失ってはたまりません。
また、失わないためにも試す環境があれば安定して動かしたい環境を壊すリスクを減らすことにもなります。
自分の使っているパソコンに WordPress 環境を作成して運用しているWebサイトからエクスポート(バックアップ)したデータをインポート(リストア)します。
基本となる材料はこんな感じです。

インストール作業を楽にしてくれるツールを利用する手順もあるようです。
個々にインストールする手順はよく見つかるのでまとめてできる手順があったので試してみました。
概要は以下の内容に沿ってのまとめになります。

■Webサイトのローカルリストア用WordPress環境作成
Microsoft Web Platform Installer 5.1 Setup について

Webサイトのエクスポートとローカルへのインポート(バックアップ兼リストア) ※リンクを参照してください。
・WebサイトのWordPressよりブログをエクスポート

・ブログをローカルへのインポート(バックアップ兼リストア)

※記載の手順でリストアするとインポートで一部エラーが発生しており未解決です。
 発生したエラーはタイトルで使用している画像がなぜか取り込めませんでした。
この程度であれば手動で戻しても手間でないので手順をまとめることにしました。

 

1.Microsoft Web Platform Installer 5.1 Setup について

以下のインストールをまとめて行うことができます。

・WordPress(英語)
・php
・MySQL

WordPress(日本語)を簡単にインストールするのが目的なので別の手順と併用した手順をまとめています。
ダウンロードは以下のページより「Install this extension」をクリックして行います。

「出典元」Microsoft Web Platform Installer
https://www.microsoft.com/web/downloads/platform.aspx

「WebPlatformInstaller_x64_en-US.msi」がダウンロードされます。
つづきは 2-2.Microsoft Web Platform Installer(Web PI) インストール から!

 

2.Windows10(64bit)のIISにWordPress(日本語)をインストール

手順は以下の内容になります。

IISの有効化
Microsoft Web Platform Installer インストール
WordPress(日本語)をIISに組込む

 

2-1.IISの有効化

Windows10ではデフォルトでIISが入っていませんので利用できるように有効化する必要があります。
有効化は「コントロールパネル」ー「プログラム」にある「Windowsの機能の有効化または無効化」をクリックします。

 

「Windowsの機能」画面が開くので以下の項目にチェックを付けてOKボタンクリックします。

・インターネット インフォメーション サービス
・インターネット インフォメーション サービスのホスト可能なWebコア
・CGI

 

2-2.Microsoft Web Platform Installer (Web PI)インストール

ダウンロードした「WebPlatformInstaller_x64_en-US.msi」を実行します。
Install開始したら一気に終了しちゃいます。

php インストール

スタートメニューから「Microsoft WebPlatform Installer」をクリックします。
画面右上の虫眼鏡左にある検索テキストボックスに「php」と入力してENTERキーを押します
※ENTERキーを押さないと検索してくれません。

「PHP(x64) For IIS Express 」の行にある「追加」ボタンをクリックして「インストール」をクリックします。
以下はインストールが完了した状態です。インストール途中での設定はありませんでした。

が、インストールしたいのが「php」なのでいいんですが「Windows Cache Extension 2.0(x64) for PHP 7.4 in IIS Express」でエラーが出ています。
PHPを高速化する拡張機能で問題なさそうなので無視しています。

WordPress(英語)とMySQLインストール

今度はWeb PI画面の検索テキストボックスに「WordPress」を入力してENTERキーを押します
WordPress(英語)の行の「追加」ボタンをクリックして「インストール」ボタンをクリックします。
※2020年2月29日時点では、「WordPress 日本語版パッケージ」は検索結果に表示されていません。

MySQLの「root」アカウントの「パスワード」を入力して「続行」ボタンをクリックします。
※MySQLを直接利用する場合はないと思いますが必ずメモしてください。

画面にある項目はセキュリティ用でローカルのインポートや検証用として利用するので必要ないくきにせず入力します。
WordPressのキー生成サービスで表示する値(含まれるバックスラッシュと$は削除)を入力します。

「出典元」WordPress.org Salt Key Generator – WordPress API
https://api.wordpress.org/secret-key/1.1/salt/

続行して完了すると以下の状態になります。
パスワードの設定に表示されている値はメモっときます
※重要!このメモ間違うとWordPressにログインできなくなります。

 

2-3.WordPress(日本語)をIISに組込む

2020年2月29日時点、Web PIのWordPressは残念ながら英語版しかないので別途日本語版をダウンロードして解凍します。
※英語版を使う場合は、C:\Users\USER\Documents\My Web Sites\wordpress フォルダを使用します。
 使わない場合は不要なので削除します。

「出典元」wordpress.org WordPressを入手

ダウンロード

解凍した「wordpress」フォルダを「C:\inetpub\wwwroot\」に移動します。
※移動したフォルダにある「IIS_USRS」と「Users」に書込み権限を付与します。
 エクスプローラーで「wordpress」ファイルの「プロパティ」メニューから「セキュリティ」タブをクリックして「編集」ボタンの画面で設定します。
URL「http://localhost/wordpress/wp-admin」をブラウザで開きます。
以下のページにある「さぁ、始めましょう!」をクリックします。
メモった「データベース名」、「ユーザー名」、「パスワード」を入力します。
「テーブル接頭辞」はMySQLのテーブル名などのプレフィックス(接頭辞)になるので任意の値を設定します。
「送信」ボタンをクリックします。

※以下のページのエラーが表示される場合があります。
 IISに書込み権限を先に設定していない場合に発生します。
このページが表示されたら説明の通りテキストを新規作成した「wp-config.php」ファイルに貼り付けて「C:\inetpub\wwwroot\wordpress\」に保存します。
「インストール実行」ボタンをクリックします。

「サイトのタイトル」「ユーザー名」「パスワード」に任意の値を入力します。
※パスワードは「普通」以上じゃないと「WordPressをインストール」ボタンが夕億になりません。
「メールアドレス」は必要ないのですが必須なので適当なアドレスを入力します。
※存在するメールアドレスを設定してもメールの設定をしてないので使えません。
「検索エンジンがサイトをインデックスしないようにする」チェックはサイトを公開しないので不要です。
「WordPressをインストール」ボタンをクリックします。

これでローカルのWordPressをインストール完了です。
「ログイン」ボタンをクリックしてログインして利用します。

 

3.Microsoft Web Platform Installer の IISにWordPress(英語)を組込む

※日本語版をインストールした場合は、この手順は不要になります。
Web PIでインストールしたWordPressは「C:\Users\USER\Documents\My Web Sites」フォルダに「wordpress」フォルダが作成されます。
この「wordpress」をIISのフォルダにコピーして日本語のインストールと同じ手順でインストールします。

 

4.ローカルWordPressリストアする準備

準備としてインポートする場合、エクスポートした環境と同じ状態で行う必要があります。
この準備をしないでもインポートはできますが想像の通り異なる景色になります。

・同じテーマをインストールして有効化
・同じプラグインをインストールして有効化
・外観のテーマエディターで変更したphpソースへの修正を行う
・インポートプラグインをインストールして有効化

※安定して動作しているプラグインやテーマは提供されなくなったり動作しなくなった時のためにインストールするZIPをダウンロードしておくのも大事と考えます。
ただし、セキュリティ要因で使えない場合は速やかに利用中止する必要があります。

外観のテーマエディタでいじったものは手動で反映しないとだめです。
同じテーマ・プラグインのインストールする手順については以下を参考にしてください。
インポートプラグインについても同様です。
※セキュリティ関連などデータの復元に必要でないものはインストールする必要はありません。

参照:WordPressでプラグインの追加方法

インポートプラグインが有効でない時の状態です。
WordPressの下にある「今すぐインストール」リンクをクリックしてインストールします。

インポートプラグインが有効な時の状態です。
「インポーターの実行」が表示されます。

投稿画像のガンマ補正(GIMPツール)

投稿画像をみていると暗くて見えない・・・と思いました。
少し明るくしたいので取り直すことなく「明るさ」「コントラスト」「ガンマ補正」で見やすく調整したいと考えてとりあえず「ガンマ補正」の使い方がわかりにくかったので備忘録として残します。
 

 
「Clamp Input」の値を下げると明暗がはっきりします。

 
得意ではないので微妙ですがちょっとはましになります。

修正前 修正後

 

リンクへの通知(ピンバック)を無効にする

投稿を作成して自分のページにリンクを貼った時にいきなり通知がきました。
WordPressでページへのリンクを貼った時にリンク先へ通知するようです。
但し、通知を受け取れるのは同じWordPressのサイトらしいです。
通知に対して承認/拒否をする機能があるみたい・・・なんて微妙な機能!
なので、無効にすることにしました。

設定方法
WordPressの管理メニューにある「設定」の「ディスカッション」をクリックします。
「投稿中からリンクしたすべてのブログへの通知を試みる」のチェックを外して「変更を保存」をクリックします。

これでうっとおしい自分への通知(セルプピンバック)が来なくなります。

WordPressでプラグインの追加方法

WordPressでサイト構築した時、プラグインの追加方法すら知りませんでした。なので紹介もかねて記録します。

※プラグインは大変便利ですが反面、以下のデメリットリスクがあります。
 ・ページの表示が重く(表示に時間がかかる)なる(重いページほど見てもらえません。)
 ・セキュリティホールの要因になる(簡単に言うとセキュリティが弱くなる)
 ・バージョンアップで突然動かなくなる
 ・インストール後に有効化してシステムが壊れるもしくは不調になる(最悪使えなくなる)
※プラグイン導入前にはバックアップを取ることをおすすめします。
 バックアップについては利用している方法を以下のリンクに記載しています。

参照:Webサイトのエクスポートとローカルへのインポート(バックアップ兼リストア)

 

1.WordPressでプラグインを検索してインストール

WordPressの管理メニューでログインしたページの左側にある「プラグイン」の「新規追加」をクリックします。

表示されたページの右側にある「プラグインの検索...」に追加したい名前を入力すると検索結果が表示されます。

「使用中の WordPress バージョンと互換性あり」とあればまだ安心ですが中には「使用中の WordPress バージョンで未検証」というプラグインもありますのでよくわからないままインストールするとトラブルの要因となりかねないので注意が必要です。

「今すぐインストール」をクリックするとインストール完了後に「有効化」に表示が変わります。
「有効化」をクリックするとインストールしたプラグインは利用可能になります。

 

2.HPからダウンロードしたZIPでインストール

プラグインはZIPでHPより提供されているものもあります。
インストールしたいZIPを入手します。

例:WordPress Importer

「出典元」wordpress.org WordPress impoter

WordPress Importer


WordPres管理者でログインしたら「プラグイン」の「新規追加」をクリックします。
「プラグインのアップロード」をクリックすると「参照...」が表示されるのでクリックしてZIPを指定します。
「今すぐインストール」が有効になるのでクリックします。

「有効化」をクリックして完了です。

 

 

 

サムネイルページの作成

投稿した記事がカテゴリにサイトマップでまとまっているのはいいのですが・・・
カテゴリ単位でサムネイルが利用できるともっといいですよね。

カテゴリ単位でサムネイルをページに表示するのは以下の手順で行いました。

完成イメージ


1.アイキャッチ画像に表示されるポスト日付の非表示

アイキャッチ画像を表示したらなんか余計なものが表示されている・・・
非表示するプラグインを使っても消えない・・・
ぐぐって調べたどの処方箋も効果ない・・・
ちなみに以下のようにポスト日付が意地でも表示されていました。
※WordPressのバージョンや使用するテーマによっては表示されないかもしれません。

ポスト日付を永久に消す方法の説明になります。
「content-page.php」にあるポスト日付を表示するコードを修正して表示しないようにします。

(1)WordPressの管理者でログインします。
(2)「外観」の「テーマエディター」を開きます。
(3)「Specea」のリンクをクリックします。
  ※使っているテーマにより手順が変わるところになるかと思います。

(4)「content-page.php」をクリックします。

(5)12行目「<!--」と17行目「-->」の行を追加してほ「ファイルを更新」クリックします。

これで永久にポスト日付が表示されなくなります!


2.アイキャッチ画像表示/非表示設定

プラグインを導入しなくてもポスト日付を非表示にしたところのちょい下にあるコードをコメントにすればアイキャッチ画像も非表示にできるのですが「この投稿ページはアイキャッチ画像を表示したいな」に対応できません。
Hide Featured Imageプラグインをインストールすることで管理が楽になるので導入しています。
「投稿」の「新規追加」で表示されるページに「Hide Featured Image?」が追加されます。

このプラグインは未検証と記載されており不安でしたがこのページに記載していることはできました。(2020年02月24日時点)

プラグインのインストール方法は「WordPressでプラグインの追加方法」ページを参照してください。
既存の投稿ページすべてのアイキャッチ画像を設定して「Hide Featured Image?」Image?に「No」を設定します。

 

3.サムネイルページ作成

WP Show Postsプラグインを利用した手順になります。

カテゴリのスラッグ修正
WP Show Postsプラグインのインストール
サムネイルページの作成

 

3-1.カテゴリのスラッグ修正

カテゴリのスラッグが全角の場合、コードで表示されるので選ぶことができません。

このため、先にカテゴリを表示可能な文字で修正します。
WordPressの管理メニューの「カテゴリ」をクリックします。

カテゴリが日本語になっている箇所すべての名前を修正していきます。
名前のリンクをクリックして表示されるスラッグを修正し「更新」クリックするこで修正します。

 

3-2.WP Show Postsプラグインのインストール

このWP Show Postsプラグインもテストされていませんね。(2020年02月24日時点)
このページでのことが利用できることは確認しているので使用しています。

プラグインのインストール方法は「WordPressでプラグインの追加方法」ページを参照してください。

 

3-3.サムネイルページの作成

サムネイルページは設定したショートコード(タグ)を投稿/固定ページに埋め込んで利用します。
まずは、最低限の設定でサムネイルの投稿ページを作成します。

 

(1)ショートコードの作成

WordPressの管理メニューにある「WP Show Posts」の「新規追加」をクリックします。
投稿タイプは「post」、分類は「category」、分類項目は任意にチェックします。

カラム数はいい感じに表示できそうな3を設定します。

サムネイル画像で表示される画像のサイズを設定します。

公開にある「更新」をクリックして設定を保存します。
使用方法にある「ショートコード」をコピーします。

 

(2)投稿ページにショートコードを埋め込む

WP Show Postsプラグインで作成したショートコードを作成した投稿ページにテキストで埋め込みます。
※「ビジュアル」で埋め込むと機能しません。

以上で完了です。
プレビューすると完了イメージのページが表示されます。

サイトマップページの作成(PS Auto Sitemap)

サイトマップのページを作成するツールの使ったときの設定を備忘録として記録しています。
PS Auto Sitemapプラグインを導入したあと、「設定」の「PS Auto Sitemap」をクリックします。
下の方にあるタグ(濃いグレーの文字列)をコピーします。

固定ページを作成します。
「テキスト」でコピーした文字列を貼り付けます。
パーマリンクにある「id」横の数値をメモします。

「設定」で「PS Auto Sitemap」を開きます。
メモしたidの値を「サイトマップを表示する記事」に入力して下の方にある「変更を保存」をクリックします。

これでサイトマップページのできあがりです。

WordPressの投稿ページ見出しフォントサイズ設定

デフォルトの設定で見出し1を設定したら文字でかっ!と思いました。
せめてタイトルと同じくらいでいいのに・・・
と設定変更箇所を探したらみつからない。
なるべく重くしたくないのでプラグインを使うのは控えたい・・・

CSSの設定でできるようなので備忘録としてまとめます。

WordPressの管理者でログインしたら「外観」の「カスタマイズ」をクリックします。
下の方にある「追加CSS」をクリックして行1~9の文字列を入力します。

コピペ用テキスト

h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.0rem;
}
h3 {
font-size: 1.5rem;
}

サイトを常時SSL化(HTTPS)してHTTPを利用しない

SSL(HTTPS)は通信を暗号化して盗聴されても内容をわからないようにする機能です。
Googleも含め世の中は常時SSL化の流れになっています。
ブログを利用してもらっているのに盗聴されたら嫌ですよね!
なので常時SSL化することにしました。

 

ブログ運用後でも変更できますが時間がたつほどに以下のリスクが増えます。

 

・SNSなどのURLで管理されてる情報がリセットされてアフェリエイトなど収益激減
・WordPressのツールなどが使えなくなるものが見つかる

 

設定の手順は以下の通りです。

 

 

1.サイトのアドレス設定を変更

「WordPressのアドレス」と「サイトアドレス」のURLをHTPPSから始まるように修正します。
※両方同じ修正内容です。

 

2.混合コンテンツ(投稿内などでのHTTP記述)の修正

投稿ページなどで特に画像つかうと画像のURLがHTTPだったりする場合があります。
もしHTTPが残っていると「このサイトは安全ではありません。」などと証明書に警告が表示されたりします。
「http:」を検索して利用箇所を「https:」に書き換えます。
※HTTPのサイトアドレス利用時に作成した投稿などが「HTTP」で残ります。


※投稿数が少ないので利用していませんが修正箇所が多い場合は、WordPressのプラグインで一括修正もできるようです。

※後述するリダイレクトプラグインではHTTPの記述箇所はHTTPSで利用する機能があります。

 

3.HTTPアクセスをHTTPSにリダイレクトするよう設定

webサーバーの設定ファイルを書き換えるのが一般的かもしれませんが面倒なのでプラグインで済ませることにしました。
インストールしたのは以下のプラグインで機能を有効化します。
※導入するプラグインは使用するWordPressのバージョンと互換性があることと「詳細情報」からテストされているかを確認したほうが安全です。テストされていない場合は、テストされていないと表示されます。導入して変な動作を後から気づいたりセキュリティホールがあったりすると面倒です。

以下の設定で使用することにしました。

「Force resource to use HTTPS URL」は混合コンテンツ(HTTP修正漏れ)でも動作してくれるかなとチェックしました。
設定作業は完了になりますが後ほど重要な説明があるので本章の最後まで読んでから「変更を保存」をクリックしてください。

※お約束のビビってしまう注意事項が英語でやまもり記述されていましたので記載しておきます。
キャッシュがある場合はクリアしろとありますが出来立てほやほやなサイトなので気にせず利用してます。

テキスト:When you enable the HTTPS redirection, the plugin will force redirect the URL to the HTTPS version of the URL.
So before enabling this plugin's feature, visit your site's HTTPS URL https://helloworld.sakura.ne.jp/db to make sure the page loads correctly.
Otherwise you may get locked out if your SSL certificate is not installed correctly on your site or the HTTPS URL is not working and this plugin is auto redirecting to the HTTPS URL.
Important! If you're using caching plugins similar to W3 Total Cache or WP Super Cache, you need to clear their cache after you enable or disable automatic redirection option.
Failing to do so may result in mixed content warning from browser.

設定の下方にある通知の方がびびりました。
かかれてる内容はごもっともなので念のためにバックアップとってから「変更を保存」クリックしました。

テキスト:Notice: It is very important to be extremely attentive when making changes to .htaccess file.
If after making changes your site stops functioning, do the following:
Step #1: Open .htaccess file in the root directory of the WordPress install and delete everything between the following two lines
# BEGIN HTTPS Redirection Plugin
# END HTTPS Redirection Plugin
Step #2: Save the htaccess file (this will erase any change this plugin made to that file).
Step #3: Deactivate the plugin or rename this plugin's folder (which will deactivate the plugin).
The changes will be applied immediately after saving the changes, if you are not sure - do not click the "Save changes" button.

 

4.HTTPアクセスでリダイレクトされるか確認

お題とおりHTTPのアドレスでアクセスしたらブラウザのアドレスがHTTPSに変わってました。
混合コンテンツの確認では、HTTPの画像URLを記述して保存したら保存後にHTTPSへ書き換わっていました。
※プラグインを導入前に残っていた場合については未確認です。

ブログとTwitterを連携

ブログとTwitterを連携する手順をまとめます。

 

1.ブログのフッターにTwitterのタイムラインを埋め込み

手順は以下の通りです。

TwitterのアカウントのURLをメモ
メモしたURLでタイムラインコードのタグを取得
取得したタグをブログのフッターに追加

 

1-1.TwitterのアカウントのURLをメモ

ブラウザでTwitterのアカウントにログインします。
「プロフィール」をクリックします。
ブラウザに表示されているURLをメモします。

「出典元」Twitter

 

1-2.メモしたURLでタイムラインコードのタグを取得

Twitter Publishをブラウザで開いてメモしたTwitterアカウントのURLを貼り付けます。
「→」をクリックします。

「出典元」Twitter Publish
https://publish.twitter.com/#

「Embedded Timeline」をクリックします。

「Copy Code」をクリックします。

 

1-3.取得したタグをブログのフッターに追加

WordPressに管理でログインして「外観」の「ウィジェット」をクリックします。
「カスタムHTML」の「▼」をクリックします。

「フッターウィジェットエリア」をクリックします。
続いて「ウィジェットを追加」をクリックします。

 

2.Twitterのプロフィールにブログをリンクを紹介

ブラウザでTwitterのアカウントにログインします。
「プロフィール」をクリックします。
右側にある「プロフィールを編集」をクリックします。

「ウェブサイト」に紹介するURLを入力して「保存」をクリックします。

これでプロフィールにURLが表示されるようになります。