Theme Checkで作成したテーマをチェック

テーマが完成したので、アップロード前に「Theme Check」というプラグインを使用して作成したテーマにエラーがないかの確認をしてくれるテストを行いたいと思います。

デバックモードを有効にする

「Theme Check」を利用するには、まずはじめにデバックモードを有効にする必要があります。デバックモードを有効にする際は必ずローカル環境で行いましょう。
それではwordpressフォルダ内の「wp-config.php」ファイルをコピーし編集をしていきます。元のファイルは名前を変更して保存、何かあった時に直ぐに戻せるようにしておきます。wp-config.php内で「WP_DEBUG」と書かれている箇所を探します。見つけたら下記の様に「true」へ変更します。

wp-config.php

define('WP_DEBUG', false);

デバックモードにするために「true」へ変更します。

define('WP_DEBUG', true); 

Theme Checkが完了したらデバックモードをオフにするために必ず「false」に戻します。

Theme Check

プラグイン」から「Theme Check」をインストールし、プラグインを有効にします。有効にしたら、「外観」からTheme Checkを選択。チェックするテーマを選択し、「テスト実行」をクリックします。

テストを実行したら、警告、必須、推奨と出てくるので「警告」と「必修」を中心に順番に修正していきます。

画像の回り込みやキャプションに対するスタイルの設定

  • 必須:テーマの css には .wp-caption の css クラスが必要です。
  • 必須:テーマの css には .wp-caption-text の css クラスが必要です。
  • 必須:テーマの css には .sticky の css クラスが必要です。
  • 必須:テーマの css には .bypostauthor の css クラスが必要です。
  • 必須:テーマの css には .alignright の css クラスが必要です。
  • 必須:テーマの css には .alignleft の css クラスが必要です。
  • 必須:テーマの css には .aligncenter の css クラスが必要です。

まずはじめに、WordPressにはデフォルトで自動的に独自のidやclassを付けるという特生があるようです。上記はそのWordPress独自の画像の回り込みやキャプションに対するclass属性にスタイルが設定されていないので、設定をしてくださいという注意です。

なので、以下を「style.css」に記述します。

style.css

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}
.size-auto,
.size-full,
.size-large,

WordPress Codex

必須:テーマの css には .sticky の css クラスが必要です。

  • 必須:テーマの css には .sticky の css クラスが必要です。
  • 必須:テーマの css には .bypostauthor の css クラスが必要です。

これも先ほど同様classが必要とのことなので、CSSに記述。空欄でもTheme Checkは通りました。

style.css

.sticky {}
.bypostauthor {}

必須: 待機状態のコメント返信のスクリプトを見つけることができません。

  • 必須: 待機状態のコメント返信のスクリプトを見つけることができません。プラグインとテーマの移行/2.7/Enhanced Comment Displayをご覧ください。

コメント返信用のJavaScript(wp-incudes/js/comment-replay.js)を読み込むために、「header.php」のwp_head();の直前に以下を記入します。これで、コメント返信のリンクが適切に作動するようになります。

header.php

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

必須: コンテンツの幅が定義されていません。

  • 必須: コンテンツの幅が定義されていません。

サイトのメインコンテンツ幅を設定してくださいというコードなので、「functions.php」にメインコンテツの幅640pxを書き加えます。

functions.php

if ( ! isset( $content_width ) ) $content_width = 640;

必須: このテーマにはページ送りがありません。

  • 必須: このテーマにはページ送りがありません。paginate_comments_links() または、 next_comments_link() と previous_comments_link() を追加してください。

コメント数が多い場合、分割して表示できるようにするためのリンクです。「設定」→「ディスカッション」で1ページあたりに表示するコメント数を指定できるようになっています。この設定を有効にした場合、ページャーがないと困るので「comments.php」内でページャーを表示させたい箇所に以下を追加します。

comments.php

<?php paginate_comments_links(); ?>

必須: wp_link_pages を見つけることができませんでした。

  • 必須: wp_link_pages を見つけることができませんでした。wp_link_pages (記事を分割するときのページャー)

これは、投稿記事を複数のページに分割したい時のリンクの設定です。WordPressでは記事の途中で<!--nextpage-->と記述をすると記事を分割できるという機能をもっているそうです。その機能を使用した場合、ページャーがないと続きの記事が読めなくなってしますので「single.php」のループ内<?php end while; ?>の直前に以下を追加します。

single.php

<?php $args = array(
      'before' => '<div class="link_page_navi">', 
      'after' => '</div>', 
      'link_before' => '<span>', 
      'link_after' => '</span>'
   );
     wp_link_pages( $args );
 ?>
 <?php endwhile; ?>

必須: post_class を見つけることができませんでした。

  • 必須: post_class を見つけることができませんでした。

「index.php」「single.php」「page.php」のループ内の<article></article>に以下を追加し自動でクラスを追加してくれるようにします。

index.php

<article id=“post-<?php the_ID(); ?>”<?php post_class(); ?>>

<?php the_ID(); ?>では、記事毎にIDを付けてくれ、<?php post_class(); ?>では記事に合わせたクラスを付けてくれます。

必須: add_theme_support('automatic-feed-links') を見つけることができませんでした。

  • 必須: add_theme_support( 'automatic-feed-links' ) を見つけることができませんでした。

RSSのフィードリンクを出力してくれるように「functions.php」に以下を記述します。

functions.php

<?php add_theme_support( 'automatic-feed-links' ); ?>

以上が、Theme Checkプラグインの使い方と修正内容でした。

Leave a Comment