WordPressでYet Another Related Posts Plugin (YARPP)でW3C Markup Validationでエラーが出る。

2014/08/26

WordPressで作成したページを W3C Markup Validation Serviceで文法チェックしてみることにした。すると、1つエラーが発生した。

Error Line 981, Column 186: Element link is missing required attribute property. …elated-posts-plugin/style/related.css?ver=3.9.2’ type=‘text/css’ media=‘all’ /> Attributes for element link: Global attributes href crossorigin rel media hreflang type sizes Also, the title attribute has special semantics on this element.

 …elated-posts-plugin/style/related.css?ver=3.9.2' の部分はYet Another Related Posts Plugin (YARPP)を利用しているので、そのスタイルシートのlinkがおかしいようだ。 しかし、YARPPのCSSへのlink タグは間違っているようには見えない。 

    ・
    ・
    ・
    <link rel=&#039;stylesheet&#039; id=&#039;yarppRelatedCss-css&#039;href=&#039;http://mysite.com/wp/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=3.9.2&#039; type=&#039;text/css&#039; media=&#039;all&#039; />
    <script type=&#039;text/javascript&#039; src=&#039;http://mysite.com/wp/wp-includes/js/comment-reply.min.js?ver=3.9.2&#039;></script>
    <script type=&#039;text/javascript&#039; src=&#039;//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js?ver=3.1.0&#039;></script>
    <script type=&#039;text/javascript&#039; src=&#039;http://mysite.com/wp/wp-content/themes/rabm01/js/e-smart-zoom-jquery.min.js?ver=1.0.0&#039;></script>
    <script type=&#039;text/javascript&#039; src=&#039;http://mysite.com/wp/wp-content/themes/rabm01/js/modernizr.custom.99332.js?ver=2.8.3&#039;></script>
    </body>
    </html> 調べてみると、次のURLに同じような人の質問と解決方法があった。 

> <a href="http://www.webdeveloper.com/forum/showthread.php?297641-RESOLVED-Validator-error!-Element-link-is-missing-required-attribute-property" title="[RESOLVED] Validator error! Element link is missing required attribute property." target="_blank">[RESOLVED] Validator error! Element link is missing required attribute property.</a> the "link element" should not be on line #145. It must be positioned within the head section of the document  なんと、link はheadの中にあるべきのようだ。 しかし、WordPressでは、wp\_enqueue\_styleで利用するCSSを宣言して、あとは、WordPressが適切に出力してくれるのではないのか？ wp-content/plugins/yet-another-related-posts-plugin/classes/YARPP\_Core.php の \YARPP::display\_related を見ても、wp\_enqueue\_styleを利用してCSS利用を宣言している。これも次のURLが参考になった。 

> <a href="http://stackoverflow.com/questions/14037609/wordpress-wp-enqueue-style-is-adding-the-style-to-the-footer-not-the-header"  title="WordPress - wp_enqueue_style is adding the style to the footer, not the header" target="_blank">WordPress - wp_enqueue_style is adding the style to the footer, not the header</a>  今、WordPressのテーマ中のsingle.phpで投稿表示の後にrelated_posts()を入れている。 

    <?php if( function_exists( &#039;related_posts&#039; ) ){
    related_posts();
    }?> related\_postsの中から\YARPP::display\_relatedがCallされ、wp\_enqueue\_styleも呼ばれる。 しかし、single.phpの冒頭では、 

    <?php get_header(); ?>
     がCallされているので、すでにヘッダは取得済ではないのか？そのため、wp\_enqueue\_styleをsingle.phpの冒頭でCallしてみた。 

```PHP
<?php
wp_enqueue_style('yarppRelatedCss', YARPP_URL.'/style/related.css');
get_header(); ?>

すると、今度はheadの中にCSSへのlink要素が出力された。 W3C Markup Validationもエラーにならなくなった。もしくは、functions.phpでinitアクションを作成してそこに追加してもよさそうだ。本当にこれでよいのか不明だが、すぐ忘れそうなのでメモっておこう。