技術メモJavaScript/WordPress/プラグインはじめに僕の使ってるテーマNishikiでは投稿ページにアイキャッチが表示されません。記事の上にアイキャッチが表示されるように変更してみました、JavaScriptで。PHPじゃなくて、JavaScriptで。なんでJavaScript?WordPressといえばPHPですよね。確かに、アイキャッチの追加はテーマのPHPをいじれば追加することができます。僕はまだブログを始めたばかりで、今後テーマを変えてしまうかもしれないので、あまりテーマに依存した書き方をしたくなかったのです。そのため、別の方法で追加する必要がありました。そこで記事の上下にHTMLを挿入できるプラグインを使用して実現しました。HTMLが書けるということは<script></script>タグを利用してJavaScriptが書けます。JavaScriptで実現しています。記事の上下にHTMLを追加するプラグインを入れます。(top/bottom)追加コードの記入プラグインの設定から記事上のコードに以下のコードを書き加えます(操作は図を参照)。注意点としては、一行目の<img>タグのsrcは自分の好きな読み込み中の画像を設定しましょう。}</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が嫌いなので書きたくなかっただけ。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。ボリュームアクセスが遅いので使うのやめた。