はいこんにちは。先日PCのSSHDがぶっ壊れて、ここ一年分の仕事の作品データと知見がぶっ飛んでいった上に、タイトルのとおりブログもぶっ壊れる事態に見舞われたカワシマです。笑

愛しのマイPCちゃんは工場へドナドナされてゆき、サブPCの7年前のVAIOちゃんで作業しております。

まあひとまずブログのほうは頑張って直しましたよということを備忘録的に書いておきます。これからWordpressテーマHestiaを触るよっていうかたの為にも、ちょっと気をつけたい点として残します。

 

運用環境


まずはわしのブログの環境について。(2019.1.25時点)

  • サーバー:スターサーバー(ライトプラン)https://www.star.ne.jp/
  • CMS:Wordpress(バージョン5.0.3)
  • テーマ(テンプレート):Hestia ※専用の子テーマを作成
  • ページビルダー:Elementor(バージョン2.4.4)
  • PC:ふるーいVAIOちゃん
  • ブラウザ:Chrome(バージョン 71.0.3578.98(Official Build) (64 ビット))

WordPressってな~に?っていうかたへ

ざーっくりいうと、ブログやウェブサイトを作るための機能の詰まったフリーソフトです。HTMLやCSS、JavaScriptなど、Web上で表示を行うためのコードを直接記述しなくても、それらを一括で管理してくれる。つまり、Webまわりの知識が浅くてもウェブサイトが簡単に作れちゃうよっていうステキソフト。「テーマ」と呼ばれるテンプレートを変えることであっという間に模様替えも出来ちゃいます。

世の中にはそういうソフトがいーっぱいあって、それらを総称してCMS(Content Management System)と呼ばれたりもするよ。

 

 

 

ブログに何が起こったか


今回、僕のブログ「碇ヶ関チャンネル」に起きた問題はこちら。

 

1.WPログイン時の管理バーがどっかいった。

ログイン時の管理バーが表示されない

普通はWordpressでログインすると画面上部に管理バーが出るんだけど、消えた。なぜ。わりと不便。別に非表示設定にはしてないんですけど。なして?

 

 

2.関連記事が表示されない!

関連記事が表示されない

あれ?Hestiaだと投稿の一番下に関連記事が3件表示されるはずなんだけど、こちらもいつのまにか消えてた。

 

 

3.プラグイン「Elementor」で作成した過去の記事の編集が出来ない!

Elementorは、テーマHestia製作元が公式におすすめしているプラグインで、テーマとの相性もよい!はずなんですが・・・

あれ?以前作成した記事がいじれない・・・ww

それより「何かがおかしいようです。」

って、なんなんず。(津軽弁)
訳:これってなんなんだよ

サイ。こいだばなもかもねでゃオイ。(秋田弁)
訳:あちゃー。これじゃあどうしようもねぇぜおい。

 

というわけで、まずはGoogle先生に同じような状況になった人がいないか聞いてみた。けれどもこれといって似た事例は見つからない。自力で直せやということです。さあがんばりましょうw

 

 

 

まずはプラグインを疑う


WordPressで問題発生したとき。ゴリゴリとカスタマイズをしていたり、自作テーマを使っているとかでなければ、最初にプラグインを疑うのが定石。

一旦、有効化してあるすべてのプラグインを全て停止し、その後ひとつずつ有効化しては表示を確認し、変化があったときのプラグインが原因だー!という感じで原因を特定するもの。

が、全プラグインを停止しても変化はありませんでした
つまり、原因はWordpressにインスコしたプラグインではないのだった。

 

※プラグインってな~に?っていうかたへ!

WordPressにはどんどん機能を追加できるシステムがあります。迷惑コメントをブロックするもの、記事投稿をやりやすくするもの、ブラウザ上で画像編集するものなど沢山あります。世界中の開発者が、Wordpress環境をもっと便利にするために、せっせとプラグインを開発しては登録してくれるおかげで私たちはその便利機能を自由に使えるんです。すごいね!

Chromeなどブラウザの拡張機能みたいなもんですね。

 

 

 

ソースを読む。


さて、プラグインが原因ではないとわかった今、何から手をつけるか。

上の1~3の問題のうち、1は勘が働かないのですっとばす。笑

まずは2の関連記事が表示されない問題から調べていきます。

尚、僕はブラウザはほぼChromeしか使わないので、以下はChrome使用前提です。

 

まずページ上で右クリックし、「ページのソースを表示」を選択。

右クリックメニュー

すると、わけわからんコードがどわーーーーーーーーーーっと出てきます。

これはいわゆるHTMLといって、これをブラウザが読み込んで、私たちが読めるようなウェブページに変換してくれるわけです。(HTMLの説明については割愛。興味ある人はググってね!)

このなかに、通常なら関連記事が出力されているはず。ということで、Ctrl+Fで「関連記事」を検索。

 

検索ウィンドウ

 

すると・・・

 

ソースには関連記事が出力されている

 

753行目以降に出力されている様子。

つまり、テーマ自体も正常に動いてます。なのにページ上では見えていない。なーぜー。さらに深堀りしていくよ。

 

 

「検証」を使う。


ページ上で右クリック→「検証」を選択。これでChromeに搭載されている開発者ツールが起動します。これでページの状態を詳しく見ることが出来るんです。で、出てきたのがこちら。

検証ツール

僕の画面では右側にツール画面が出てきました。ここから調べていきます。

って。ちょっとまって。

 

エラー多すぎぃ!

エラー多すぎィ!

あーもー読む気もしない!のでここは放置!笑

 

とにかくここから改めて「関連記事」の状態について調べます。この状態でCtrl+F。右上のコードが表示されている部分で「関連記事」を検索します。

 

検索結果1

ふむ。この黄色い部分が怪しい。

 

また、関連記事の部分にはクラス 「.section related-posts」が自動で出力されているはずです。ということでこちらでも検索。

検索結果2

うーん。やはり同じ箇所が出てきますなあ。

しかしこれ・・・普通にFacebookのウィジェット埋め込みコードやぁん・・・。

埋め込んだFacebookウィジェット

これが犯人か???

そんな、まっさか~。Facebookちゃんが犯人なわけないでしょお。といいつつも、ここしか怪しい部分が無いのでひとまず消してみよう。

 

WordPressの管理画面を開き、外観>ウィジェットを選択。僕の設定はこんな感じ。別に隠すほどの事もしてないので大公開~

管理画面

この「サイドバー」に機能をつけたり消したり自由にできるから便利だよね。僕の場合はサイドバーの一番下にFacebookの窓を埋め込んでいました。

 

Facebook

今回はこいつが怪しいので消しちゃいます。▼ボタンを押して、「削除」を選ぶよ。すると・・・。

 

 

 

関連記事復活!

で、出た~~~~!!

しかも管理バーも直ってるし左側にいつぞや設置したシェアボタンも復活しておる!犯人はFacebookだったー!真実はいつもひとつ!

Elementorも普段どおり動くようになったし、3つの問題が一挙に解決しますた。

 

 

色々調べてたら、多分Facebookのページプラグインの設定の関係で、使っているシステムとの衝突があったりするらしい。なのでそこも直して再設置しときました。わーいわーい。

 

 

デバッグは根気


という感じで、何とか直りました。よかった。僕もそんなに経験豊富なわけではないので、本格的な技術はまだこれから身に着けたいところですが、一般的な環境下でこれぐらいの作業はできます。

どこかおかしいと感じたら、必ず原因はあるので

あきらめずがんばる!

ことが大事ですね。だいじょうぶ。機械は人間と違って裏切りません。ちゃんとやったぶんだけ返してくれるんです。根気よく消去法で原因を絞り込んでいけばなんとかなります。

Webシステムは日々更新されていくので、手が空いたらちょくちょく過去の記事の挙動なんかもチェックをしてみましょう。


kawashima

kawashima

秋田県出身のITマンだったりスパイダーマンだったりするひと。弘前大学(美術科)を出て事務職やらSEを経て、やーっぱり津軽が居心地よくて、もどってきちゃったりしたひと。平川市で地域おこし協力隊をしながらブロガーやったりデザイナーやったり。

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です