ゆるくはじめるWordPress.

テーマを作ったらチェックしておきたい項目7つ

web-test-tools-top

自作テーマを作ったら、投稿を始める前に!チェックしておきたい7項目をリストアップしました。各種エラーチェックやモバイル表示チェック、サイトスピードチェックなど、それぞれツールの使い方とあわせてまとめてみましたので、よろしければ参考にどうぞ。

WordPressのデバッグモードを有効化してエラーチェック

デバッグモードをオンにすると、何らかのエラーが発生している場合にページ上にエラー内容を表示してくれるようになります。
デバッグモードを有効化するにはwp-config.phpを下記のように設定します。

wp-config.phpはルートディレクトリ(wordpressフォルダ)の中にあります。


デバッグモードを有効化

wp-config.php

define('WP_DEBUG', true);

define('WP_DEBUG', false);define('WP_DEBUG', true);にするだけでOK。下のような感じでエラーが表示されます。

デバッグモード表示画面

画面上でエラーが丸見えになるので、本番環境ではなくテスト環境でチェックしましょう。


HTMLのバリデーションチェック

HTMLの書き方が適切かをチェック。下記サイトでチェックできます。
Ready to check – Nu Html Checker

nu-html-checker

サイトのURLを入力してチェック。グリーンの表示が出ればOK。

html-no-errors

CSSのバリデーションチェック

HTMLと同様にCSSもチェック。下記サイトでチェックできます。
W3C CSS 検証サービス

w3c-cssチェック

これもグリーンの表示が出ればOK。日本語でわかりやすい。

css-no-errors

モバイル表示チェック

モバイル端末からどのように見えるか、きちんと表示されているかを確認。

Google Chrome デベロッパーツール

Google Chromeだとページ上で右クリック>検証でデベロッパーツールが利用できます。そこでスマホボタンをポチっとすれば様々な端末サイズでの表示確認が可能に。

chromeスマホボタン
chromeデベロッパーツール

Responsinator

Web上でURLを入力するだけで様々な端末サイズで一覧表示してくれるサイトもあります。Responsinator

responsinator画面

モバイルフレンドリーテスト

ちょっと視点を変えて検索エンジンがモバイル用サイトをどのように認識しているかをチェック。Googleの提供するツールで簡単に確認できます。
モバイル フレンドリー テスト

モバイルフレンドリーテストサイト

サイトのURLを入力するだけでOK。

問題ありません。このページはモバイルフレンドリーです。

クロスブラウザチェック

2016年1月12日にIE8のサポートが完全に終了し、クセの強い古いIEはほぼ考慮しなくてよくなったと思われます。サポートが終了した古いバージョンのブラウザはセキュリティ面に問題が出てくるので最新のものにアップデートしましょう。ということです。
特に個人のサイトであればPCにインストールできるブラウザを入れて自分の確認できる範囲で最新バージョンのチェックをしておけばOKだと思います。

  • Internet Explorer
  • Google Chrome
  • Firefox
  • Safari

Windows版Safariは開発が終了しているのでWindowsからはダウンロード不可です。


サイトのスピードチェック

サイトが重いとページが表示される前に帰ってしまう訪問者もいるので、できる限りサイトは軽くしておきたいもの。これもGoogleの提供するPageSpeed Insightsでサイトの表示スピードを計測することができます。
PageSpeed Insights

pagespeed-insightsサイト

サイトのURLを入力すれば計測が開始されスコアが表示されます。

pagespeed-insightsスコア

85以上がグリーンゾーン。スコア改善のヒントも表示されるのでできる範囲で対応してみましょう。

ユーザーエクスペリエンススコア

同時にモバイルのユーザーエクスペリエンスというのも表示されます。モバイル画面からの見やすさや、操作のしやすさなどを評価してくれるので、モバイルフレンドリーテストと併せてこちらもチェックしてみるとよいです。


プラグイン:Theme Check

theme-checkプラグイン

テーマが適切に作られているかチェックしてくれるプラグインもあります。
自分用のテーマなら対応しなくてもいいかなという項目もありますが、警告の項目を把握しておくだけでも勉強になるので、テスト環境に入れてみてはいかがでしょうか。

WordPress › Theme Check « WordPress Plugins
  1. プラグイン>新規追加からインストールして有効化
  2. デバッグモードを有効化
  3. 外観>Theme Checkからテーマを選んで実行!

まとめ

それぞれのチェック結果の中でも重大なエラーや簡単に直せるものから対応して、そこまで影響の大きくないものなんかは頭の片隅に入れて追々直していくようなやり方でもいいと思います。
見つけたエラーがなくなるととてもスッキリした気分になるので、是非一度チェックしてみてください~。


スポンサーリンク

公開日:2016-2-3