head外に書いたを「link」をhead内に書き出す【WordPress/JavaScript】
※自分用の備忘録です
WordPressなどで外部リソースを使う際、カスタムHTMLブロックに<link>を書きたくなる場合があります。
<head>外に<link>を記述をしてもほとんどのブラウザでは正常に機能します。
しかし、全てのブラウザで正常に機能する保証はありません。
W3Cのルール的にも<head>内に記述することが基準となっています。
WordPressなどのカスタムHTMLで<link>を使用する場合はJavaScriptで記述をしましょう。
<head>内に書き出すためのJavaScript
<script type="text/javascript">
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = './css/style.css';
css.type = 'text/css';
var head = document.getElementsByTagName('head')[0];
head.appendChild(css);
</script>
上記のように記述をすると<head>内に「<link rel="stylesheet" href="./css/style.css" type="text/css">」と書き出すことができます。
「css.href = './css/style.css';」には必要なパスを記述しましょう。
CDNなどを実装したい場合はURLを記述します。
その他のWordPressに関する記事はこちらから
その他のJavaScriptに関する記事はこちらから
この記事が気に入ったらサポートをしてみませんか?