はじめに
僕の使ってるテーマNishikiでは投稿ページにアイキャッチが表示されません。なので記事の上にアイキャッチが表示されるように変更してみました、JavaScriptで。PHPじゃなくて、JavaScriptで。
なんでJavaScript？
WordPressといえばPHPですよね。確かに、アイキャッチの追加はテーマのPHPをいじれば追加することができます。
でも僕はまだブログを始めたばかりで、今後テーマを変えてしまうかもしれないので、あまりテーマに依存した書き方をしたくなかったのです。
そのため、別の方法で追加する必要がありました。そこで記事の上下にHTMLを挿入できるプラグインを使用して実現しました。
HTMLが書けるということは<script></script>タグを利用してJavaScriptが書けます。なのでJavaScriptで実現しています。
事前準備
記事の上下にHTMLを追加するプラグインを入れます。
PRyC WP: Add custom content to post and page (top/bottom)
追加コードの記入
プラグインの設定から記事上のコードに以下のコードを書き加えます（操作は図を参照）。
注意点としては、一行目の<img>タグのsrcは自分の好きな読み込み中の画像を設定しましょう。
<img name="top_ogp_image" src="https://example.com/path/to/loading.png">
<script type="text/javascript">
var metas = document.head.children;
for(var i=0; i<metas.length; i++){
var property = metas[i].getAttribute('property');
if(property === 'og:image'){
var imagePath = metas[i].getAttribute('content');
document.top_ogp_image.src = imagePath;
}
}
</script>
仕組みの解説
JavaScriptからDOMを使用し、<meata>タグに設定されているOGP画像を読み取ってきます。
ただ特定の<meta>タグを一発で取ってくることができないため、まずdocument.head.childrenを利用し、<head></head>の全ての子要素を取ってきます。そこからOGP画像（propertyがog:imageになっているもの）を抜き出します。
そしてOGP画像で読み込んでいる画像をあらかじめ用意した<img>タグのsrcとして割り当てます。
こうすることで、JavaScriptを使ってアイキャッチ画像の自動挿入を実現できます。
メリット
テーマに依存しない
さっきも書きましたね。テーマを変えたりした時にわざわざ移行の必要がありません。単純に記事上下にHTMLを書き加えるプラグインなのでカスタマイズ性も高いです。
一括管理ができる
例えば「やっぱりアイキャッチ消そ」「表示サイズ/場所を変えよ」といったことが一括で操作できます。まあ、これはPHPでも同じですが…
ただ、このプラグインではIDを指定することで特定の記事には表示しないといった指定ができるのは良い点ですね。
デメリット
読み込みが発生する
JavaScriptで書いているので、クライアントサイド（ブラウザ）で画像の割り当てが実行されます。そのため、サーバサイドのPHPと違って、ページを読み込んだ後に画像を探すので、タイムラグが生じます。このタイムラグが画像読み込みの遅延の原因です。
おわりに
ちょっと特殊な方法でアイキャッチを指定しましたが、自由度が高いので良いですね。いつ表示を消すかわかりませんが笑。
ほんとはPHPが嫌いなので書きたくなかっただけ。