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

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

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

http://unittest.rensrv.com/

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

一般設定の設定変更

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」へ変更します。

表示設定の設定変更

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

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

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

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

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

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

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

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

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

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

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

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に変更します。
※この設定が必要なのかはよく理解できていません。

メディア設定の設定変更

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.

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

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

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

カスタムメニューの作成

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

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

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

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

カスタムメニューの作成

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

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

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

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

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

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

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

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

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

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

プラグインの有効化

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

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

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

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

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

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

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

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

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

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

投稿者の付け替え選択

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

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

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

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

インポートの完了

テストデータの表示確認

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

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

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

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

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

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

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

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

さいごに

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

参考

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

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

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

WordPress.com、WordPress.net、WordPress.org、WordPress.tv、
WordPressFoundation.orgはWordPress Foundationが
管理運営を行なう正式なトップレベルドメインであるとともに、
WordPress Foundationが運営を行うサービスの名称です。

wordpressはFree Software Foundation, Inc.によってGPL2+でライセンスされています。

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

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略