WordPressテーマチェック【必須エラー】

RaiseTechのWordPress副業コースを受講しています。

WordPressでテーマを作りの最終段階

一通り組み終わった後おかしいところがないかをTheme Checkを使って確めていきます。

わたし

ハヤクオワラセタイ

そう思った矢先、画面に広がる42個のエラーをみて

わたし

あかん…やる気が出ねえ

己を保つため、記録に残していこうと思います。

弱小ブログを見つけるほどに困っている皆様のお力になれますように！！！

必須エラーたち
前よりエラーの意味が分かって成長を実感した

必須エラーたち

ファイル css/style.css で DOS と UNIX 両方の改行形式が見つかりました。これは SVN レポジトリで問題を引き起こすため、テーマが承認される前に修正する必要があります。どちらか一方の改行形式に統一してください。

Vscodeを表示→Ctrl＋Aでstyle.cssを全選択して

右下改行コードをCRLFから

LFに変更

DOSとUNIXって何ぞ？？と思い調べたところ、なんかOSごとの表示形式の違いらしい。

普段は表示されないけど、データになると改行を表現する文字列（改行形式）が違うそうな。

名称	使われているOS	改行形式
DOS	Windows	CR + LF
UNIX	MacOS	LF

ほかのファイルは全部LFになっていたのに、style.cssだけCRLFと表示されていたので、

多分どっかのタイミングで無意識に押してしまっていたようです。

テーマ内にファイル readme.txt が見つかりませんでした。

readme.txtというWordPressテーマの説明を記載したテキストファイルを作ればOKです。

何を書けばよいのかは”readme WordPress 書き方”とかでググれば出てきます。

Your Theme URI and Author URI must not be the same.

テーマ直下のstyle.cssのAuthor URIを変えたら解消しました。

style.cssの中のTheme URIとAuthor URIは同じにしないで！と言っている模様。

Reference to add_theme_support( "menus" ) was found in the theme. This should be removed and register_nav_menus() used instead.

functions.phpの中にある

add_theme_support('menus');

を消すと解消されました。

メニューをテーマ内で1か所にしか設置しないなら

add_theme_support('menus');

複数設置するなら

register_nav_menus()

を使うと聞いております。

後者を使う場合、add_theme_supportは不要と関数リファレンスに書いてあります。

add_theme_support()もregister_nav_menus()も書いているとこのエラーが出るようです。

Found a script tag in footer.php. Scripts and styles needs to be enqueued or added via a hook, not hard coded. <script src='script.js'></script>

footer.phpのscriptタグの消し忘れでした。

<script src='script.js'></script>

を削除したところ無事動きました。

英文はfooterの中でscriptタグが見つかったよ。フックを使って読み込んで？ベタ打ちで読み込もうとしないで？的な意味のようです。

Found echo home_url in searchform.php. home_url() must be escaped. Use esc_url() for link attributes. A manual review is needed.

searchform.phpの中の

<?php echo home_url('/'); ?>

↑こやつを

<?php echo esc_url(home_url('/')); ?>

↑こう変えたら解消しました。

esc_url()は悪意あるコードを送り込まれたときに、それを無害化するエスケープ処理を施します。

wp_link_pages が見つかりません。See: wp_link_pages <?php wp_link_pages( $args ); ?>

single.phpとpage.phpのループ処理の中に

<?php wp_link_pages(); ?>

これを加えました。

wp_link_pagesはページ送りを動かすために必要なテンプレートタグです。

記事作成者は

ページ区切りを選んで

こんな感じで改ページを入れることで、お好みの場所でページを分けられます。

wp_link_pagesがないと、あれ、ページ区切ったはずなのに1ページで表示されてしまう！といった事象が起こります。

body タグ内の body_class 呼び出しが見つかりません。See: body_class <?php body_class( $class ); ?>

header.phpの

<body>

を

<body <?php body_class(); ?>>

としましょう。

ページごとで異なるCSSクラスを与えられるそうなのですが、今回は使わなかったのであまりその恩恵を感じずに終わりました。。。

add_theme_support( 'automatic-feed-links' ) が見つかりません。See: add_theme_support <?php add_theme_support( $feature ); ?>

WordPressでフィードを使えるように

add_theme_support( 'automatic-feed-links' );

こやつをfuncitons.phpのアクションフックafter_setup_themeで実行される関数の中に含めます。

.screen-reader-text CSS class is generated by WordPress and needs to be styled with your theme CSS. See the Codex for an example implementation.

WordPress Generated Classesというものがあるらしく、テーマ開発時に .screen-reader-textへの指定は必須らしい。

ということで、Codexより下記を追記した。

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar　*/
}

このクラスはページネーションと検索窓あたりで使われてるらしい。

詳しくは”.screen-reader-text”で検索すると色々出てきます。

前よりエラーの意味が分かって成長を実感した

いったん必須エラーは大体解消しました。

前にもRaiseTechの課題でエラーチェックをしているのですが、

その時は本当に言われたことをそのままやっている、いわばマリオネット状態でした。

今回も調べて解消していくのに変わりはないのですが、

前よりもなぜこのエラーが出て、どうして修正が必要なのか納得しながら進められたように思います。

ひたすら目の前の課題を闇雲に進めているけど

何かできるようになってるんだろうか…？と不安でしたが

ちょっとは前進してるんだなと安心しました！

そんな感じで今回はおしまい！