【WordPress】サイドバーがメインコンテンツの下にズレた時の対処法|バックアップから復元する方法解説【ブログサイトエラー】

こちらの記事では、サイドバーがメインコンテンツの上や下、斜めにズレた時の対処方法を解説しています。

ブログサイトで「テーマファイルエディター」内にある「header.php」や「footer.php」などを弄って、レイアウトが崩れてしまった場合の直し方をまとめているので参考にしてください。

WordPressの復元では、データベースを復元したり「ブログを始めたばかりでバックアップを取っていない」初心者の方が多いかと思います。

今回はエックスサーバーの機能を使って、誰でもできる簡単な復元方法紹介します。

サイドバーがコンテンツ下にずれる原因

1、テーマファイルが原因のズレ

まず始めに、WordPressのサイドバーがコンテンツの下や斜めにズレる原因の多くは、テーマファイルによるものが多いです。

特に「外観→テーマファイルエディター→(style.css・header.php・footer.php)」などで、「padding」や「margin」などの余白を編集したり、書き換えたりした時にエラーが発生することがあります。

▼テーマファイルのphpを確認する

全ページでサイドバーのレイアウトがずれている場合は、上記だけでなくテーマファイルエディターの「Single.php」「Siguler.php」「Pages.php」など、記事単体ページを出力している場所を確認してみましょう。

 

2、CSSが原因によるサイドバーのズレ

テーマファイルエディター以外の原因としては、CSSによるメインコンテンツとサイドバーの高さや横幅の設定が正しく行われていない可能性があります。

CSSでエラーが起きる原因の例として、上記のコンテンツとサイドバーの要素が合計100%以下のサイズになっていない場合だと、サイドバーがコンテンツの下に回り込んで表示されてしまう原因となります。

 

3、HTMLやdiv要素が原因のエラー

次に、記事ごとでサイドバーのレイアウト崩れが起きているエラーの原因は、div要素やhtml要素によるものが多いです。

「div」や「html」が余分に多かったり、少なかったりすることで要素が閉じられずに、サイドバーのズレが発生します。

▼エラーが発生しているページを特定する

サイドバーがコンテンツの下やズレる減少は、ブログサイト全体でなく特定の記事のみで発生している可能性があります。

そのため、TOPページやカテゴリ、投稿記事などの編集画面で「div」や「html」の閉じ忘れがないか探して、エラーを引き起こしている部分を修正する必要があります。

 

WordPressの復元が必要な場合

復元する作業が必要なシーン

  • カスタマイズに失敗して画面が真っ白になった
  • アップデートして正しく動作がしなくなった
  • 外部からハッキングされた場合

WordPressの復元が必要なパターンは主に上記の3つです。

画面が真っ白になった場合は、下記のバックアップより簡単に復元できるので「画面が真っ白になった時の対処方法」ご覧下さい。

 

復元に必要なファイル

  • データベース:記事内容やユーザ情報を保存するファイル
  • ソースコード:WordPressを動かすファイル

WordPressは、主に上記のデータベースとソースコードで構成されており、ブログを復元するためには、この2つを元に戻す必要があります。

アップデートに失敗した場合は、ファイルの復元だけで元に戻ることが多いですが、サイトが改ざんされた場合はデータベースの復元も必要となります。

▼エラーはなるべく早く直す

ブログサイトを弄って、画面表示がおかしくなった際は、早く修復作業を行わないと記事の更新が出来ないだけでなく、ユーザー離れを起こしてしまうので注意しましょう。

それでは、下記でサイドバーのトラブルが発生した際の復元方法を具体的に説明していきます。

 

WordPressのエラー復元

エラー発生時の復元方法一覧

  1. レンタルサーバーの機能で復元する
  2. プラグインのバックアップ機能で復元する

WordPressの復元は「レンタルサーバーの機能で復元する方法」と「プラグインのバックアップ機能で復元する方法」の2つのパターンがあります。

それぞれ、メリットやデメリットがあり、ブログサイトの環境によって使える方法・使えない方法があります。

 

1、レンタルサーバーの機能で復元する

レンタルサーバー会社が提供している復元機能は、ボタン操作だけでバックアップから復元できることが多く、初心者でも利用しやすい点最大のメリットです。

ですが、レンタルサーバー会社によっては「復元機能を提供していない」「日時指定でバックアップ復元ができない」などがあるので注意が必要です。

当サイトで使用している「エックスサーバー(Xserver)」であれば、契約後は何も依頼せずとも自動的にバックアップを取っており、1日単位で好きな日時で復元可能です。

▼レンタルサーバーの機能がおすすめな人

  • 初心者でも簡単に元に戻したい方
  • WordPressのバックアップをしていない方

 

2、プラグインのバックアップ機能で復元する

2つ目は、WordPressのプラグインを利用した復元方法で、エラー発生前に設定したバックアップの保存データを復元する流れになります。

プラグインのバックアップ機能は、WordPressに特化しており精度の高い復元が可能です。

使い方としては、ブログサイトの内部を編集する前にバックアップを取っておき、万が一のことがあれば以前のデータを復元すること可能です。

注意点としては、事前にプラグインを導入して設定を行っておかないと、いざというときに利用できない点がデメリットです。

▼プラグインの機能がおすすめな人

  • WordPressのバックアップがあり、細かい日時で復元したい方
  • 復元するデータやファイルをカスタマイズしたい方

 

WordPress本体のバックアップ復元方法

本体バックアップの復元手順一覧

  1. レンタルサーバーにログイン
  2. バックアップをクリックする
  3. バックアップの復元内容を選択
  4. バックアップ内容を確認して復元する

それでは、多くの方がレンタルサーバーを使用しているかと思うので、初心者でも簡単にできる復元方法を実際の作業手順で解説していきます。

ほとんどの場合「バックアップ」や「MySQL復元」でWordPressがエラー発生前に戻ります。

まず初めに、ファイルをバックアップで元の状態に戻し、ファイルの復元でエラーが直らなければデータベースを復元する流れで進めていきます。

 

1、レンタルサーバーにログインする

まずはWordPressの契約しているレンタルサーバーにログインしましょう。

今回は当サイトで使用している「エックスサーバー(Xserver)」で復元する手順を解説していきます。

まずはエックスサーバーの「サーバーパネルログインフォーム」から、サーバーパネルにログインしましょう。

 

2、バックアップをクリックする

アカウントのカテゴリ内にある「バックアップ」をクリックします。

 

3、バックアップの復元内容を選択する

バックアップする日時や対象のデータを選択します。

 

4、バックアップ内容を確認して復元する

復元内容に間違いがないことを確認して「復元を開始(確定)」をクリックしましょう。

画像や動画ファイルの多いサイトだと、復元に時間が掛かりますが気長に待ちましょう。

 

WordPressのMySQL復元方法

MySQLで復元する手順一覧

  1. MySQL復元をクリックする
  2. 復元日時を選択する
  3. バックアップ内容を確認して復元する

上記の「WordPress本体のバックアップ復元方法」を行っても改善しない場合や、記事を元の状態に戻したい場合は、データベースの復元を行いましょう

 

1、MySQL復元をクリックする

「WordPress本体のバックアップ復元方法」と同様にサーバーパネルにログインし、データベースのカテゴリ内にある「MySQL復元」をクリックしましょう。

 

2、復元日時を選択する

復元したいデータベースと、復元したい日付を選択して「復元」をクリックしましょう。

 

3、バックアップ内容を確認して復元する

バックアップ復元する確認画面が表示されますので、復元するデータベースと日にちに間違いがないことを確認して、「復元する」をクリックします。

 

データベースがどれか分からない場合

MySQLデータベース名の確認方法

データベースを復元したいけど、サイトが複数あってどのデータベースか分からない場合は、WordPressカテゴリー内の「WordPress簡単インストール」機能から確認しましょう。

ドメイン選択後に以下のような画面が表示されますので、復元したいサイトを見つけて「MySQLデータベース名」を確認します。

 

サイドバーのエラー対処方法まとめ

今回の記事では、メインコンテンツからサイドバーがズレた時の、WordPressの復元方法2つと実際の復元手順を図解付きで紹介しました。

WordPressの復元方法は次の2パターンです。

  1. レンタルサーバーの機能を利用する方法
  2. レンタルサーバーの機能を利用する方法

「画面が真っ白になってアクセスできない」「変なエラー文が消えない」という場合など、バックアップから復元することで元に戻せる場合があります。

WordPressに不具合が出た場合など、本記事を参考に復元作業を行ってみて下さい。

 

関連記事

新着記事一覧


2024年11月21日
NEW! 【悲報】闇バイト強盗、絶対に抵抗しちゃダメだった…専門家「拝み倒してください」

2024年11月21日
NEW! わい投資1年生、今日も元気に26000円稼いでお仕事終了w

2024年11月20日
NEW! 【ASUS】160Hz/4K表示対応27型ゲーミングモニター発売!

2024年11月14日
【画像】トー横キッズのパパ活ついに一線を越えるwww

2024年11月14日
【閲覧注意】中国で老害車が暴走し35人死亡、道路が血の海に!!!

2024年11月14日
【緊急悲報】松本さん、文春よりヤバそうなのが出てくる。。。

2024年11月14日
【動画】巨乳女子小学生「えっ、ノーブラで走るんですか!?」

2024年9月18日
フワちゃん「消しゴムマジックで消してやるのさ!」→ 自分が消されてしまうwwwww

2024年9月17日
【画像】中国版港区女子さん、限界突破wwwwwwww❤

2024年9月17日
【画像】アメリカのセクシー女優さん可愛すぎてワロタwwwwwwwwwwwwwwww

2024年9月17日
【女の三大嘘】「引き締まった筋肉には興奮しない」「巨根はきもちくない」←あと一つは???

2024年9月17日
【画像】独身おじさんの末路、イラスト化されるwwwww

2024年9月17日
【画像】JK、集合写真で尻丸出しにwwwwwwww

2024年9月17日
【速報】中国で新型コロナ変異株KP.2とKP.3が急速に感染拡大「若者の突然死増加」病院を管理する地方政府から司令が!!!

2024年9月17日
【悲報】結婚相談所「負けるな!低身長男性!」→炎上するwwww

2024年9月17日
【動画】中国のハニートラップ、こんなのが押し寄せてくるらしいwwwwww

2024年9月17日
【画像】女さん「ヤれる男とヤれない男の境界がコレ」

2024年9月12日
【画像】最新のiPhoneの進化が凄すぎると話題に!!!

2024年9月12日
【悲報】弱者男性「妹の結婚式に着ていくスーツ買う金がない!アコムで借りたろ!」←これ・・・

2024年9月12日
福原愛さん、不倫報道から3年…キャラ激変ぶりにコメント欄は茫然・・・

2024年9月12日
【牛角半額騒動】ロザン菅「なんでこれが叩かれるの?企業が戦略としてやってること」→「じゃあ企業戦略で『日本人半額』だったら?」

2024年9月12日
今気づいたんだけど筋肉ムキムキで鬱病のやついないよね?←つまり・・・

2024年9月12日
新入社員「遅刻しました!でも"遅延証明書"持ってます!」ドヤァw  ぼく「……うん、それで?」

2024年9月12日
【超朗報】お○ぱい博物館が爆誕!!揉んだり舐めたりできるぞ

2024年9月12日
【動画】めちゃくちゃ気持ち悪い鳥が見つかるwywywyww

2024年9月12日
【画像】韓国人女さん、とんでもない格好でナンパ待ちwwwww

2024年9月12日
【アイドル闇深】元乃木坂46メンバーさん、乃木坂を辞めてプロ雀士になった途端に脱いでしまうwwww

2024年9月12日
【画像】Twitter民「この漫画の台詞の意味を読み取れない人間がいるらしい…」→ネット民激論へwwww

2024年9月12日
【PS5pro】BTOメーカーがPS5を意識した価格設定でPC販売している模様!

2024年9月11日
巨乳JK「フフ♪私の方がナイスバディねwww」パシャッ

PR記事一覧

 

Ads Blocker Image Powered by Code Help Pro

広告ブロックを検出しました!

ブラウザの拡張機能を使用して広告をブロックしていることが検出されました。

ブラウザの広告ブロッカーなどの機能を無効にして「更新」をクリックして下さい。