WordPress

【WordPress】ダミー記事を使い投稿ページのレイアウトが崩れていないかチェックする方法

WordPressのオリジナルテーマで投稿ページのレイアウトが崩れていないかチェックしたいけどどうすればいい?
ダミー記事を使うと便利だよ!
  • 超長いタイトルでも大丈夫か?
  • 画像が大きくても大丈夫か?
  • アイキャッチが縦長でも大丈夫か?

など、チェックポイントがたくさんあります。

これを1つ1つ手作業で投稿するのは人間のする事ではないので、便利なデータを使ってダミー記事を量産しましょう。

ダミー記事を使い投稿ページのレイアウトをチェックする方法

冒頭でも書きましたが、投稿ページのレイアウトをチェックするポイントはたくさんあります。

チェックするには色んなパターンの記事を投稿する必要があるのですが、この色んなパターンの記事を一気に投稿してくれるのが「テーマテストユニットデータ(テーマテストデータ)」となります。

今回はそのテーマテストデータの使い方と、いくつかのチェック方法をご紹介します。

 

テーマテストデータをダウンロード

まずは以下のページにアクセスし、ダウンロードします。

[blogcard url="https://github.com/jawordpressorg/theme-test-data-ja"]

 

 

テーマテストデータをインポート

先ほどダウンロードしたファイルを解凍すると、「wordpress-theme-test-data-ja.xml」というファイルがあります。

使うのはこのファイルだけです。

 

 

まずは管理画面左のツール→インポートをクリックします。

 

 

そしてWordPressの「今すぐインストール」をクリックするとそのまま「インポーターの実行」と文字が変わるので、そのままインポーターの実行をクリックします。

 

 

そして以下の画面が表示されるので、ファイルを選択でダウンロードした「wordpress-theme-test-data-ja.xml」を選択します。

すると左下のボタンがアクティブになるので、クリックします。

 

 

インポートが完了したら投稿者の割り当てという表示になります。

 

 

投稿するユーザーを新規作成するか、既存のユーザーに割り当てるかを設定する箇所ですが、ここはそのままスルーしてOKです。

そしてそのまま下にスクロールしていくと、添付ファイルのインポートの項目があります。

 

 

ここは画像のチェックなどを行うためにチェックを入れて実行をクリックします。

これでインポートは完了です。

それでは投稿一覧を見てみましょう。

 

 

色んなタイトル、カテゴリー、タグの記事が投稿がされました。

あとはこの記事を実際に見て、デザインに崩れがないかチェックしていきます。

 

崩れやすいポイント

それでは実際に崩れていないかチェックしていきますが、特に崩れやすいポイントについてご紹介します。

 

ブログカード

例えばブログカードではこのように崩れる可能性があります。

 

 

  • 英字が折り返されず横に飛び出す
  • アイキャッチの画角がバラバラで高さもバラバラ
  • タイトルが長すぎてテキストエリアの高さがバラバラ

ちなみに英字が折り返されないではみ出てる記事を見てみると、ご丁寧に対処法が書いてありますw

 

 

また記事の個別ページでは画像がはみ出たり、右寄せや中央寄せになってくれない事があります。

 

 

 

画像の位置やはみ出ているのを修正する方法は以下の記事を参照下さい。

[blogcard url="https://junpei-sugiyama.com/align-img/"]

実務でも「画像がはみ出ちゃいます」「画像が潰れます」と言われた事があるので、しっかりチェックするようにしましょう。

記事一覧、カテゴリータブ、個別記事など、サイトによって異なると思うので、毎回チェックすることをおすすめします。

-WordPress