テーマチェックプラグインの紹介。
ワードプレスのテーマが適切に作られているかをチェックするプラグインで、公式のテーマ審査チームでも使用されています。
必ずクリアする必要があるわけではありません。
クライアントワークでは、警告が出ることを把握し対処方法を理解した上で、警告を無視することは多々あります。
クライアントワークにおいて全ての機能を使うわけでは無いので、必ずクリアしなくてはいけないわけでは無いですが、セキュリティ向上のためにも、エラーなく作れるだけの技量がありエラーについて説明できるようにしておいたほうが良いです。
企業のWeb担当者の方も、このプラグインでチェックを行い、エラー箇所については説明を求める事で、制作会社の技量をはかる事ができます。
小規模事業者の方などは、有料/無料問わず公式テーマディレクトリ以外から入手したテーマを使う場合には、一度チェックしてみましょう。
クラシックテーマ＆ハイブリッドテーマ制作向けの記事になります。
まずは、Theme Check プラグインのインストール。
WordPressのプラグインをインストールする3つの方法
WPインストールディレクトリにあるwp-config.phpファイル80行目付近の、WP_DEBUGをtrueにします。
define( 'WP_DEBUG', true );でも今までtrueとfalseで結果が変わった事が無いので、そのままでも結構正確な結果が得られると思います。
外観 ＞ Theme Check と進み、テーマを選び実行するだけです。
結果は「必須」「警告」「推奨」「情報」に分類されて表示されますので、修正をしていきましょう。
初めての場合は何かしらエラーが出ると思いますが、2,3テーマぐらい経験すれば、すぐに一発クリアできるようになると思います。
「推奨」「情報」はクリアしなくても、テストには通るので、「必須」「警告」部分を修正していきます。
検証用に、「testフォルダ」を作り3つのファイルを配置します。
index.php ・・・こちらは中身は空にします。
functions.php ・・・<?php とだけ書きます。終了タグである ?> は書きません。
style.css ・・・ 下記参照。Theme Nameは、フォルダ名と合わせます。
<?php@charset "utf-8";
/*!
Theme Name: test
*/今回はクライアントワークや個人の場合に絞った対処法を書きます。
ワードプレス公式のテーマディレクトリでテーマを配布する場合は、全て対応する必要があります。
公式テーマディレクトリ以外で、配布する場合も対処しておきましょう。
困った時は、Twenty Twenty-Fiveなど公式テーマを参考にしましょう。
style.css ヘッダーに ***: がありません。
テーマフォルダ直下にある、style.cssの初めに、これらのテーマファイルヘッダーと呼ばれるものを記述します。
推奨や情報のものも併せて掲載。
/*
Theme Name: テーマ名 ※必須
Theme URI: テーマのURL ※推奨
Description: テーマの説明 ※必須
Version: テーマのバージョン ※必須
Author: テーマの作者 ※必須
Author URI: テーマ作者のサイトURL ※推奨
Text Domain: テキストドメイン ※必須
License: ライセンスに関する記述 ※必須
License URI: ライセンスに関する記述を別ファイルにしてURLで指定 ※必須
Tags: 公式テーマディレクトリでの分類用 ※情報
（Template: 子テーマの場合親テーマを指定する必要があります）
Tested up to: 検証したWPのバージョン ※必須
Requires PHP: PHPのバージョン ※必須
*/*** が見つかりませんでした。
- wp_link_pages が見つかりませんでした。
- wp_head が見つかりませんでした。
- wp_footer が見つかりませんでした。
- post_class が見つかりませんでした。
- language_attributes が見つかりませんでした。
- charset が見つかりませんでした。
- body タグ内の body_class 呼び出し が見つかりませんでした。
- body の開始タグの直後の body の最上部に記述する wp_body_open アクションまたは関数の呼び出し が見つかりませんでした。
- DOCTYPE が見つかりませんでした。
これらは index.php が空の状態だからですね、上記の1と4以外はこれで大丈夫！
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php wp_footer(); ?>
</body>
</html>
1と4については、別途 loop.php と single.php を用意します。
<article <?php post_class(); ?>>
<header class="entry-header">
<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
</header>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
<footer class="entry-footer">
<div class="entry-meta">
〜〜〜 省略 〜〜〜
</div>
</footer>
</article><?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article <?php post_class(); ?>>
<header class="entry-header">
〜〜〜 省略 〜〜〜
</header>
<div class="entry-content">
<?php the_content(); ?>
<?php wp_link_pages(); ?>
</div>
<footer class="entry-footer">
〜〜〜 省略 〜〜〜
</footer>
</article>
<?php endwhile; else: ?>
<p><?php echo __( 'Not Found', 'test' ); ?></p>
<?php endif; ?>
<?php get_footer(); ?>テーマ内に add_theme_support( “title-tag” ) への参照が見つかりませんでした。
add_theme_support( ‘automatic-feed-links’ ) が見つかりませんでした。
functions.php にこのように書きます。
<?php
if ( ! function_exists( 'wp55_setup' ) ):
function wp55_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'automatic-feed-links' );
}
endif;
add_action( 'after_setup_theme', 'wp55_setup' );
この5行目以降には他にも、推奨されてる中で使いたい機能がある場合 add_theme_support() 関数が追加されていきます。
テーマにファイル readme.txt が見つかりませんでした。
空のreadme.txtファイルを作るだけで消えますが、公式テーマとして提出する場合、ライセンスと著作権について明記することが必須となります。style.cssとほぼ同じ内容になりますがその他に更新履歴などを書いてもOKです。
スクリーンショットが検出されませんでした。
1200px x 900px サイズの screenshot.png または screenshot.jpg を作成しテーマに含めてください。
テーマのファイル functions.php で remove_action *** が使用されています。
これはプラグイン領域の機能であり、テーマでは使用できません。代わりにプラグインを使用してください。wp_head() で出力される余分なタグを消す際によく使われますが、functions.php に直接書くと怒られます。
プラグインを利用するか、独自プラグイン化しちゃいましょう。
functions.phpの機能の一部をオリジナルプラグイン化する方法
コード内に CDN の URL が見つかりました
WordPressでは、CSS / JS ファイルをCDNから読み込まないようにテーマフォルダ内で管理します。
unsplash.com への参照が見つかりました。
これは、Twenty Seventeen 3.9 で表示された内容です。w
テーマの著作権表示が見つかりませんでした。
1つ以上のテキストドメインがこのテーマ内で使用されています。見つかったドメインは test, test1 です。style.css に書いた、Text Domain 以外がテーマ内にあるとこちらが表示されます。
この場合、test1がテーマ内に混入してる事になるのでテーマ内の各ファイルをチェックして修正する必要があります。
翻訳関数 __() _x() 等で使われてる所を探して確認していきましょう。
テーマ名のディレクトリが間違っているようです。
ディレクトリ名はテーマのスラッグと一致する必要があります。（子テーマの場合は除く）
クリアしなくてもテストには通ります。
古いテーマなどで、廃止予定タグを使ってる場合は、早めに推奨タグに置き換えることをお勧めします。
CSS/JSをCDNで使ってる場合、テーマ内に同梱するよう表示されます。
テーマ CSS では .*** CSS クラスの使用が推奨されます。
記事をトップに固定(.sticky)や画像の回り込み(.align***)など、ワードプレスに搭載されてる機能が自動でつけるクラスに関するものになります。
絶対にその機能を使わないのであれば、無くても大丈夫です。
気になる方は、空のクラスを書いておきましょう。.screen-reader-textは「推奨」ではなく「情報」になります。
.wp-caption,
.wp-caption-text,
.sticky,
.gallery-caption,
.bypostauthor,
.alignright,
.alignleft,
.aligncenter,
.screen-reader-text {
}テーマ内に nav_menu への参照が見つかりませんでした。
functions.php に書くことで、ダッシュボードの [外観] – [メニュー] から項目を設定することができるようになります。
<?php
if ( ! function_exists( 'wp55_setup' ) ):
function wp55_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'automatic-feed-links' );
register_nav_menus( array(
'main-navi' => 'Main Navi',
'side-navi' => 'Side Navi',
) );
}
endif;
add_action( 'after_setup_theme', 'wp55_setup' );
テーマ内に add_theme_support( “***” ) への参照が見つかりませんでした。
- add_theme_support( “wp-block-styles” )
- add_theme_support( “sensitive-embeds” )
- add_theme_support( “html5”, $args )
- add_theme_support( “custom-logo”, $args )
- add_theme_support( “custom-background”, $args )
- add_theme_support( “align-wide” )
- add_theme_support( “custom-header”, $args )
- テーマに add_editor_style() への参照が見つかりませんでした。
- add_theme_support( “post-thumbnails” )
※2は、responsive-embedsの事と思われます。
一部、$args とあるようにオプションの指定が出来るものもあります。
ダッシュボードの、[外観] に[カスタマイズ] [ヘッダー] [背景]の項目が追加されるので設定を行なっていきます。
サイトに表示するにはテーマの設定が必要になります。
<?php
if ( ! function_exists( 'wp55_setup' ) ):
function wp55_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'html5', array(
'comment-list',
'comment-form',
'search-form',
'gallery',
'caption',
) );
add_theme_support( 'custom-logo' );
add_theme_support( 'custom-background' );
add_theme_support( 'align-wide' );
add_theme_support( 'custom-header' );
add_theme_support( 'editor-styles' );
add_editor_style( 'css/editor-styles.min.css' );
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(
'main-navi' => 'Main Navi',
'side-navi' => 'Side Navi',
) );
}
endif;
add_action( 'after_setup_theme', 'wp55_setup' );
このテーマにはサイドバー/ウィジェットエリアがありません。
テーマでウィジェット機能を使えるように設定します。functions.php に下記のコードを追記します。
ダッシュボードの、[外観] にウィジェットの項目が追加されるので設定を行なっていきます。
if ( ! function_exists( 'wp55_widgets_init' ) ):
function wp55_widgets_init() {
register_sidebars( 2, array(
'name'=> 'SIDEBAR %d',
'id' => 'sidebar',
'description' => 'Add widgets here to appear in your Sidebar Top.',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
endif;
add_action( 'widgets_init', 'wp55_widgets_init' );register_sidebar() を使用しているようですが、dynamic_sidebar() が見つかりませんでした。
下記のコードを書いた、sidebar.php ファイルを用意します。
<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'SIDEBAR' ) ) : ?><?php endif; ?>
<?php if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 'SIDEBAR2' ) ) : ?><?php endif; ?>index.php / single.php など表示させたい箇所に下記のコードを書きます。
<?php get_sidebar(); ?>comments_template が見つかりませんでした。
single.php ファイルのコメントを表示したい箇所に下記のコードを追加します。
先ほどのファイルの場合、</article> の後ろ辺りに追記します。
併せて空のファイルでよいので comments.php ファイルを用意します。
</article>
<?php comments_template(); ?>
<?php endwhile; else: ?>テーマにコメントの改ページコードが含まれていません。
get_avatar または wp_list_comments を使用してください。
wp_list_comments が見つかりませんでした。
comment_form が見つかりませんでした
先ほど用意した、comments.php に下記のコードを書きます。
<article class="discussion">
<?php if( have_comments() ): ?>
<div class="comments">
<h3 class="discussion-title">Comments</h3>
<ul class="comments-list">
<?php wp_list_comments(); ?>
</ul>
<?php the_comments_pagination(); ?>
</div>
<?php endif; ?>
<?php comment_form(); ?>
</article>
キューに登録された comment-reply スクリプトが見つかりませんでした。
通常コメント一覧の最後にあるフォームを、返信ボタンを押した所に表示するためのスクリプトになります。
読み込ませ方は、functions.php の最後に下記のコードを追加します。書き方は他にもあります。
WordPressでは、CSS / JS ファイルの読み込みは、全て functions.php で指定します。
くれぐれも、header.php などに書かないようにします。
if ( ! is_admin() ) {
function wp55_register_script() {
wp_register_script( 'script', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
function wp55_add_script() {
wp55_register_script();
wp_enqueue_script( 'script' );
if ( is_front_page() ) {
} elseif ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_print_scripts', 'wp55_add_script' );
}テーマ内に register_block_style への参照が見つかりませんでした。
投稿の際に追加する各ブロックのスタイルを独自に設定する関数です。functions.php に書きます。
// サンプル
register_block_style(
'core/heading',
[
'name' => 'design01',
'label' => 'デザイン01',
'inline_style' => '.is-style-design01 {
padding: 20px 10px 15px;
border-radius: 10px;
background: #0073aa;
}
.is-style-design01::before {
content: "●";
color: #ffffff;
margin-right: 10px;
}
}',
]
);register_block_style() ジェネレータがありましたので、こちらでコード生成して functions.php に貼り付けて使うのが便利です。
テーマ内に register_block_pattern への参照が見つかりませんでした。
投稿のブロックパターンを独自に設定する関数です。functions.php に書きます。
register_block_pattern(
'test/my-awesome-pattern',
array(
'title' => 'Two buttons',
'description' => 'Two horizontal buttons, the left button is filled in, and the right button is outlined.',
'content' => "<!-- wp:buttons {\"align\":\"center\"} -->
<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->
<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">" . esc_html__( 'Button One', 'test' ) . "</a></div>
<!-- /wp:button -->
<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->
<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">" . esc_html__( 'Button Two', 'test' ) . "</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->",
)
);※このままでは php自体の警告がでますが、wp-config.php のWP_DEBUG を false に戻すと消えます。
テーマに投稿ページネーション コードが含まれていません。
投稿ページネーションを追加するにはposts_nav_link()、paginate_links()、the_posts_pagination()、the_posts_navigation()、next_posts_link() previous_posts_link() のいずれかを使ってください。
WP4.1以降では・・・archive.php 等のアーカイブ系のページには、the_posts_pagination() または the_posts_navigation を使います。single.php の投稿自体の個別ページは、the_post_navigation() を使います。
テキストドメインのない翻訳関数が見つかりました。
1行目や3行目のようにするとエラーとなりますが、個人的なサイトやクライアントワークの場合、3行目のように書いてしまうことは多々あります。
'title' => __( 'LOGOUT' )
'title' => __( 'LOGOUT', 'textdomain' )
'title' => 'ログアウト'Requires PHP はメジャーバージョンとマイナーバージョンのみの使用を推奨します。style.css のヘッダーで、7.4.2など指定している場合に表示されます。7.4などの指定に変更します。
メジャーバージョンとマイナーバージョンのみの使用が推奨されており、パッチバージョンは必要ありません。
あくまで情報なので対応は必須ではありません。
印刷可能でない文字が見つかりました。
CSSやPHPに日本語を使用すると、情報としてでてきます。対策するには翻訳関数などを使って英語で書いた上で、Poedit を使い、翻訳データを用意する事になります。
コメントタグで日本語のコメントをした場合も出てきます・・
accessibility-ready タグを使用したテーマは、アクセシビリティレビューを受ける必要があります。style.css のヘッダーにある、Tags: に accessibility-ready を設定した場合、アクセシビリティレビューを受ける必要があります。
初めに設定した、wp-config.php ファイル80行目付近の、WP_DEBUG を false に戻します。
繰り返しになりますが公式テーマに登録しない場合は、必ずクリアする必要があるわけではありません。
警告の内容や対処方法を理解しておくことが大切です。
サーバー：heteml / テーマ：検証用のオリジナルテーマ
WordPress 6.8 / PHP 8 / MySQL 8
今回のプラグイン：Theme Check Ver.20231220
