頑張らない!でも諦めない!必死にならずにええかげん

WordPress開発で表示確認にはユニットテストデータを活用しよう

      2014/11/22

Google or AdMax Promotion(it)

WordPressでテーマの変更やカスタマイズなどを行う際には、
運用中のサイトで行うよりもカスタマイズ用のサイト(開発環境)などを構築しておくと便利です。
そんな開発環境に対して表示用のデータを準備する作業は非常に面倒ですが、
WordPressではユニットテスト用のデータが公開されています。
ここではのユニットテストデータを利用したインポート手順をご紹介します。

なお、インポートの結果は以下URLにて実際にご確認いただけます。

http://unittest.rensrv.com/

 

ユニットテストデータのダウンロード

ユニットテストのデータはWordPress Codexに公開してくれています。
こうして有志の方々がデータを日本語化して公開してくれていることに感謝します。

テーマユニットテスト – WordPress Codex 日本語版

01_WordPressユニットテストデータCodex

WordPressユニットテストデータCodex

 

ユニットテストデータは「日本語版テストデータ(2013年作成。リンク先の説明を参照)」を、
右クリックして保存します。

wordpress-theme-test-date-ja.xml ファイルが保存できます。

02_テストデータのダウンロードリンク

テストデータのダウンロードリンク

 

プロモーション(btm)

Google or AdMax Promotion (it)

ユニットテスト前のWordPress設定変更

ユニットテストデータのインポートを行う前にWordPressの設定を変更します。

変更する手順、内容はCodexに記載されています。

03_WordPressの設定

WordPressの設定

 

テーマユニットテスト – WordPress Codex 日本語版

WordPress の設定

インポートの前に WordPress の設定を以下のように変更してください。

  • Settings -> General: set the Site Title to something fairly long, and set the Tagline to something even longer. These settings will facilitate testing how the Theme handles these values.
  • Settings -> Reading: set “Blog pages show at most” to 5. This setting will ensure that index/archive pagination is triggered.
  • Settings -> Discussion: enable Threaded Comments, at least 3 levels deep. This setting will facilitate testing of Theme comment list styling.
  • Settings -> Discussion: enable Break comments into pages, and set 5 comments per page. This setting will facilitate testing of Theme paginating link markup/styling.
  • Settings -> Media: ensure that no values are set for max width or height of Embedded media. This setting will facilitate testing of the Theme $content_width setting/implementation.
  • Settings -> Permalinks: ensure that a non-default permalink setting is selected, e.g. “Month and name”. This setting will facilitate stepping through the Theme Unit Tests.

最低二つのカスタムメニューを作成してください。

  • Long Menu: all included Pages
  • Short Menu: a menu of 2-3 Pages

 

各設定が英語のメニュー表示で記述されていますので、
英語・日本語のメニュー表記は以下のようになっています。

04_設定メニューの英語・日本語メニュー

設定メニューの英語・日本語メニュー

 

Settings -> General([設定]-[一般設定])

[設定]-[一般設定]を開き設定を変更します。

Settings -> General: set the Site Title to something fairly long, and set the Tagline to something even longer. These settings will facilitate testing how the Theme handles these values.

(意訳)かなり長いものにサイトのタイトルを設定し、さらに長いものにタグラインを設定してください。 テーマはこれらの値をどのように処理するかこれらの設定は、テストを容易にします。

05_一般設定の設定変更

一般設定の設定変更

 

Settings -> Reading([設定]-[表示設定])

[設定]-[表示設定]を開き設定を変更します。

Settings -> Reading: set “Blog pages show at most” to 5. This setting will ensure that index/archive pagination is triggered.

(意訳)「1ページに表示する最大投稿数(Blog pages show at most)」に5を設定します。この設定はインデックス/アーカイブページネーションでトリガされます。

 

トップページやアーカイブページに抜粋表示される投稿数を「5」へ変更します。

06_表示設定の設定変更

表示設定の設定変更

 

Settings -> Discussion([設定]-[ディスカッション])

[設定]-[ディスカッション]を開き設定を変更します。

Settings -> Discussion: enable Threaded Comments, at least 3 levels deep. This setting will facilitate testing of Theme comment list styling.

(意訳)少なくとも3レベル以上の深さでスレッドコメントを有効にします。この設定は、テーマのコメント一覧スタイリングのテストを容易にします。

 

「■ コメントを[ 5 ▼ ]階層までのスレッド(入れ子)形式にする。」が有効になっていることを確認し、
階層は3以上の値であることを確認します。

07_ディスカッション設定の設定変更スレッド

ディスカッション設定の設定変更スレッド

 

次に、コメントの分割設定を変更します。

Settings -> Discussion: enable Break comments into pages, and set 5 comments per page. This setting will facilitate testing of Theme paginating link markup/styling.

(意訳)ページのコメント分割を有効化します。そして1ページあたり5件のコメントを設定します。この設定は、テーマのページ付けリンクのマークアップ/スタイリングのテストを容易にします。

コメントの分割設定を有効化して、分割数を5件に変更します。

08_ディスカッション設定の設定変更コメント

ディスカッション設定の設定変更コメント

 

Settings -> Discussion([設定]-[メディア])

[設定]-[メディア]を開き設定を変更します。

Settings -> Media: ensure that no values are set for max width or height of Embedded media. This setting will facilitate testing of the Theme $content_width setting/implementation.

(意訳)最大幅または埋め込まれたメディアの高さにに値が設定されていないことを確認してください。
この設定は、テーマの$ content_widthの設定/実装のテストを容易にします。

 

メディアの高さ設定を0に変更します。
※この設定が必要なのかはよく理解できていません。

09_メディア設定の設定変更

メディア設定の設定変更

 

Settings -> Discussion([設定]-[パーマリンク設定])

[設定]-[パーマリンク設定]を開き設定を変更します。

Settings -> Permalinks: ensure that a non-default permalink setting is selected, e.g. “Month and name”. This setting will facilitate stepping through the Theme Unit Tests.

(意訳)デフォルト以外のパーマリンク設定が選択されていることを確認します。たとえば「月と名前」などです。
この設定は、テーマのユニットテストをステップ実行が容易にします。

パーマリンク設定をデフォルト以外を選択して設定します。

10_パーマリンク設定の設定変更

パーマリンク設定の設定変更

 

カスタムメニューの作成

新規に2つのカスタムメニューを作成しておきます。

Long Menu: all included Pages
Short Menu: a menu of 2-3 Pages

(意訳)
ロングメニュー:すべてのページが含まれるメニュー
ショートメニュー:2-3ページが含まれるメニュー

カスタムメニューを全てのページを表示するメニューと、
数ページのみを表示するメニューとして2つ作成しておきます。
※この時点ではテストデータがない為、表示対象の選択はできません。

11_カスタムメニューの作成

カスタムメニューの作成

 

メニューを作成するとメニューがプルダウン選択できるようになります。

12_作成したカスタムメニュー

作成したカスタムメニュー

 

ただこの記述に伴った作業は不要なのかもしれません。
予想通りというか、インポート後に自動的にメニューが生成されますので、
実際にはここで作成したメニューは使うシーンがないかもしれません。

25_インポートされたカスタムメニュー

インポートされたカスタムメニュー

 

インポータプラグインのインストールと有効化

ユニットテストデータのインポートにはインポータープラグインを利用します。

サイドメニューから[ツール]-[インポート]をクリックして[WordPress] をクリックします。

13_ツール・インポートからWordPress選択

ツール・インポートからWordPress選択

 

WordPressのインポータープラグインのインストールが表示されます。
下部の[今すぐインポート]をクリックします。

14_インポータプラグインのインストール

インポータプラグインのインストール

 

プラグインのインストールがすぐに開始されます。
[プラグインを有効化してインポートツールを実行]をクリックします。

15_プラグインの有効化

プラグインの有効化

 

インポートファイルの選択画面が表示されます。

 

ユニットテストデータのインポート実行

インポートツールを実行するとインポートするファイルの選択画面が表示されます。

16_テストデータのファイル選択

テストデータのファイル選択

 

[ファイルを選択]をクリックして、ダウンロード済のユニットテストデータを選択します。

17_テストデータのファイル選択とアップロード

テストデータのファイル選択とアップロード

 

ファイルの選択が完了したら[ファイルをアップロードしてインポート]をクリックします。

18_アップロードしてインポート実行

アップロードしてインポート実行

 

ユーザーの選択画面が表示されます。

各投稿のタイプ等にそれぞれのユーザーが割り当てられていますが、
ここでは[Select ▼]をクリックしてWordPressにログインしているユーザーなどに変更しておくといいでしょう。

19_投稿者の付け替え選択

投稿者の付け替え選択

 

最下部の「Import Attachments」では画像のダウンロードを行う設定のようです。
必要があればチェックを入れておきます。

「ようです」と言うのは、これまで何度かインポータでサイトの移行を行ってきましたが、
これまで画像のインポートが付け替えられた覚えがありません。
インポート前のURLがそのまま画像のリンク先になっている印象です。

[Submit]をクリックするとすぐにインポートが開始されます。
ユニットテストデータはデータが大きいこともあって、30秒程度かかる印象です。

20_画像のアタッチメント指定

画像のアタッチメント指定

 

これでユニットテストデータがインポートされました。

21_インポートの完了

インポートの完了

 

テストデータの表示確認

ダッシュボードで投稿一覧などを確認するとユニットテストデータが生成されているのが確認できます。

22_インポートされた投稿一覧

インポートされた投稿一覧

 

サイトの表示を確認するとテストデータらしく、
長いタイトルなどが投入されている投稿などが確認できます。

23_ユニットテストデータの表示例1

ユニットテストデータの表示例1

 

実際のサイト表示では様々な表示を確認できます。

ユニットテスト環境 WP4.0 以後は十分な長さの文字数を確保するために設定しています。 | WordPress Codex ユニットテストデータ表示用 WP4.0 以後は十分な長さの文字数を確保するために設定しています。

例えば、こうした画像の回り込みや位置指定といった表示の確認が行えます。

24_ユニットテストデータの表示例2

ユニットテストデータの表示例2

 

さいごに

このようにして簡単な手順で、ユニットテストデータをインポートして、
サイトのデザインの変更や表示の確認時に活かすことができます。

参考

ユニットテストデータの日本語化にご尽力されておられる方のサイトのようです。
参考にさせて頂きました。感謝。

WordPressテーマユニットテストデータ日本語版を更新したよ! ‹ nuuno

 


*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - WordPress

  関連記事