ohno

こんにちは。Bilingualママのソフィアです。

ワードプレス開始後、一番初めにぶち当たった壁が、初めての記事を書いたのに「プレビュー画面が開かない!」でした。
「私の書いた記事はどんな風に表示されるのかな~」と確認したいのに出来ない・・。

結局1日かかって解決したのですが、そのときは有料テーマ「DIVER」を購入した直後で、「DIVER」に原因があるのかな、と勘ぐったりしたものです。
(結論から言うと関係ありませんでした)
かなり焦り、冷や汗もので検索しまくったものです。

これを読んでいる多くの方は、ワードプレス開始直後に張り切って記事を書いてプレビューしようとしたらエラーメッセージが表示され困っている方だと思います。

私がワードプレスに設定した変更事項と、解決するまでに行った手順を以下に記載します。
落ち着けば、きっと解決しますので、頑張りましょう。

以下ステップで私はプレビュー問題を解決出来ましたが、皆が100%解決出来るとは限りません・・
あくまでも自己責任で対応をして下さいね。
それでは、解決までのステップを見ていきましょう^^
スポンサーリンク

原因はワードプレスアドレスとサイトアドレスが異なること

初め何も分からず、指示されるがまま、エックスサーバーにワードプレスをインストールしました。
その後、サイトアドレスのSSL化(http→https)を行い、wwwも独自ドメインの前に追加しました。
変更前

ワードプレスアドレス http://bilingualmama.net
サイトアドレス http://bilingualmama.net

変更後

ワードプレスアドレス http://bilingualmama.net
サイトアドレス https://www.bilingualmama.net

つまり、ワードプレスアドレスとサイトアドレスが異なってしまったのです。
サイトアドレスを元に戻せば、確かにプレビュー画面は問題なく開けるのですが、
今後サイトは、SSL化しておきたい。(SSL化とは情報を暗号化して行う安全なデータ通信のこと)
そのため、サイトアドレスを元に戻すという選択肢はなくなりました。

この時点でのエラーメッセージはスクリーンに「プレビュー生成中・・・」と表示され延々とぐるぐる回っている状態でした。

管理画面下の設定>一般をクリックすると、サイトのワードプレスアドレスとサイトアドレスが確認できます

解決までのステップ

使用しているパソコンの設定や環境によって、どのステップで解決するかは個人差があるようです。
簡単なステップから記載していきます。

プラグインが原因?

プラグインは様々な機能が使えるようになるので便利ですが、多く入れすぎると競合してエラーが起きるようです。
しかし、まだワードプレス開始直後なので、プラグインは何も入れていませんでした。

サイトを更新する

Ctl+F5でサイトを更新し、新しい情報を読み込みます。

キャッシュを消す

Google Chromeは、右上のマーク>その他のツール>閲覧履歴を消去>キャッシュされた画像とファイルを消去をクリック。

キャッシュは、一度アクセスしたサイトをブラウザが記憶しておき、次に同じサイトにアクセスした時、表示スピードを高める仕組み。
でも、サイトが変更されても、ブラウザに記憶(キャッシュ)されたサイトが優先的に表示されてしまうので、何か変更をした場合はキャッシュを削除しないと駄目なケースがあります。

ワードプレスに再ログイン

ログアウトして、再度ログインすると解決することもあるようです。

 

ブラウザーを再起動

パソコンも疲れますので、たまに情報を処理しきれないときがあります。
ブラウザーを立ち上げ直すと、情報が新しくなり、解決することもあるようです。

 

function.phpファイルの書き換え

自分としては、かなり勇気を持って行ったのですが、実際には効果がありませんでした。
もし効果がなかった場合は、変更は削除し、ファイルを元に戻しておきましょう。

詳細は、こちらの記事を参考にさせて頂きました
WordPress】メディアのプレビュー画像が表示されない原因がわかった!
WordPressの投稿プレビューのURLを変更する方法

 

 

プラグインClassic Editorをインストール→有効化

実は上記全ステップ後、「自分では解決出来ないかもしれない」と不安になりDIVER公式サイトの「お問い合せ機能」を利用しました。
そこで、現在の新しいエディターGutenbergは特殊な読み込み方をするので、
もしかしたらClassic Editorのプラグインを入れた方が良いかもしれないとご回答頂きましたので、それを実行。
インストール後は、スクリーンのぐるぐるが終わり、スクリーンに以下エラーメッセージが表示されるようになりました。

ページが見つかりません。
URLが正しく入力されているかお確かめください。
URLが正しく、かつブラウザで再読み込みしても表示されない場合は、
ページが移動または削除された可能性があります。
取りあえず、スクリーンにエラーメッセージが出ただけでも進歩ですが、まだプレビュー画面は表示されません。

余談ですが、Classic Editorは新しいGutenbergより断然使いやすいですね。
初めは、Gutenbergの方が最新版なのだから頑張って慣れようとしていましたが、時間の無駄でした笑
ワードプレス初心者で、「なんか使い辛いなぁ・・」と感じている方は、是非このプラグインを入れてみてください。

ワードプレスアドレスも変更

正しくは、独自ドメインは変更しておりません。
よく検索すると「ワードプレスアドレスは絶対に変更しないで下さい。変更するとログインできなくなります!」と記載がありますよね。
私もそれを信じていただのですが、実際には独自ドメイン自体を変更しなければ、SSL化やwwwを追加しても私は問題ありませんでした。

変更前

ワードプレスアドレス http://bilingualmama.net
サイトアドレス https://www.bilingualmama.net

変更後

ワードプレスアドレス https://www.bilingualmama.net
サイトアドレス https://www.bilingualmama.net

この変更を行っても、まずワードプレスにログインは問題なく出来ましたが、
肝心のプレビュー画面は未だ開けておりません。

ワードプレスアドレスとサイトアドレスに関しては、こちらの記事を参考にさせて頂きました。
https://www.nishi2002.com/4207.html
どうやら、独自ドメインの後ろの部分を変えるだけでもログイン出来なくなるようなので、よく調べてから変更することをお勧めします!

解決!認証用ユニークキーを変更

最後に行った「認証用ユニークキーの変更」で解決出来ました!

認証用ユニークキーとは

まず認証用ユニークキーとは何?と言う方のために、以下他サイトから引用した定義です。

WordPress バージョン2.6から採用されたもので、ユーザーの Cookie に保存される情報をより強固な暗号化で守るための仕組みです。V2.6の時は3種類でしたが現在はもう少し増えて8個にになっています。

この認証用ユニークキーが他のサイトと同じであたり、デフォルトのままになっていたりすると記事のプレビュー機能が働かなくなるようです。公開前に確認作業ができないのは不便です。下記の方法で対策してみてください。

要は、認証用ユニークキーはユーザーの個人情報を守るためのもので、それがより強固になりましたよ。
この認証用ユニークキーがデフォルトのままだと、プレビュー機能が働かないことがあります、とのこと。

認証用ユニークキーの変更

それでは、実際に認証用ユニークキーを変更しましょう!
私はエックスサーバーなので、それを例に説明します。
基本的な構造は、他のサーバーでも同じなので、参考になさって下さいね。

1.インフォパネルにログインします
エックスサーバーの方はここからログイン

2.ご契約一覧のサーバー欄からファイル管理ボタンをクリック

xserver1

3.  サイト名を選択します。
xserver2

4.Public htmlファイルを選択。

xserver3

5.wp-config.phpファイル(↓)を選択。

6.以下のように認証用ユニークキーに全て同じ数値が並んでいたら、これが原因です

7.認証用キーをあなた独自のキーに変更していきます。
やり方は簡単!
こちらのサイトにログインすると、自動でユニークキーを作ってくれます。
https://api.wordpress.org/secret-key/1.1/salt/
毎回クリックするたびに異なるキーになるのでご注意下さい。

 

8.ステップ7で自動生成されたユニークキーを、ステップ5で開いたwp-config.phpファイルに反映させていきます。
具体的には次の赤枠の部分を、それぞれのdifineキーに対して上書きしていきます。
ここが、一番緊張します。間違えないように、ゆっくり時間をかけてコピペしていきましょう。

間違えてしまうかも・・・と不安な方は、ステップ6の元のファイルを保存しておきましょう。
万が一間違えても、元に戻すことが可能なので、安心です。

9.あとは、このファイルを上書き保存すれば完成です!

 

10.お疲れ様でした!再度ワードプレスにログインし、プレビュー画面を開いてみて下さい^^

スポンサーリンク

まとめ

いかがでしたか。

ワードプレス開始後は、ワクワクしながらも分からないことだらけでエラーが出ると焦りますよね。
私は、想定外のことが起きるといつも焦ってしまい、ミスが多くなり、冷静な判断が出来なくなります。

そんな時こそ、落ち着いて深呼吸してみて下さい。

きっと解決出来ますので、頑張りましょう!

検索して見つけた解決方法で一つだけ私が使わなかったものがあります。
残念ながら、ここまでの解決方法でも未だプレビュー画面が表示されていない方は、
こちらのサイトの3.例外処理を入れず「pre_get_posts」を使って記事の並び替え処理などを入れてしまった場合
を参考にして下さいね。
スポンサーリンク

Twitterでフォローしよう

おすすめの記事