見出し画像

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に関する記事はこちらから

この記事が気に入ったらサポートをしてみませんか？