the_post_thumbnail()なんて使わない。WEMOブログ向けWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。ホームWEMOについて人気記事一覧フロントエンドHTMLCSS/SassJavaScriptSVGバックエンドPHPサーバーWordPress基礎知識カスタマイズプラグインちょいメモ集the_post_thumbnail()なんて使わない。2019.08.16WordPressでアイキャッチ画像を表示させる時、the_post_thumbnail()という関数を使用していませんか?関数を呼び出すだけで簡単にアイキャッチ画像が表示できるのですごく便利ですが、この関数を使用するとかなり無駄なソースを出力をしてしまいます。そこで今回は、the_post_thumbnail()に代わる新しい関数を自分で作ってしまうことで、無駄なソースを出力せずにアイキャッチ画像を表示するための方法をメモしていきます。目次the_post_thumbnail()の出力の汚さを実際に確認してみようまずは今回問題としているthe_post_thumbnail()を実際に出力してみましょう。例として、当記事のアイキャッチ画像を表示させてみます。大きさは「large(大サイズ)」を指定しました。問題ないですよね?しかし、Chromのデベロッパーツールでソースを確認して見てください。次のようなソースが吐き出されているかと思います。600px">笑っちゃうくらい無駄に長いですよね。追記(2018/05/02):WordPressの簡単なカスタマイズでsrcset属性とsizes属性の出力は失くすことができるすみません、現在当サイトではWordPressの出力をカスタマイズしているので、上記の「汚いソースコードの例」と、「the_post_thumbnail()で出力させてみた当記事のアイキャッチ画像をデベロッパーツールで確認した時のソースコード」の中身が異なるかと思います。実は、srcset属性とsizes属性は、次のような簡単な記述だけで出力しないようにできるのです。'__return_null');この1行だけです。笑これだけでだいぶスッキリします。今回紹介する自作関数の有用性はあまり変わらないと思うので、ぜひ続きも読んでみてください。追記(2018/05/02):そもそもsrcset属性やsizes属性は無意味なものではない当記事の執筆当時は、これらの属性のソースは全く無意味なものだと認識してしまっていたのですが、そういうわけではありません。srcset属性やsizes属性を使う前提でサイト設計をした場合、レスポンシブ対応時にこれらは非常に便利なものになります。現状、そのような最先端なサイトはまだごく少数だと思うので、ほとんどのサイトでは全く無駄な出力なことには変わりありませんが。「現在の投稿」のアイキャッチ画像をimgタグにして取得する新しい関数を作ってみたクエリループ中に「現在の投稿」のアイキャッチ画像をimgタグにして取得する、get_thumb_img()という関数を作って見たので、コピペするなりアレンジするなりして使って見てください。alt="'.$thumb_alt.'">';}引数には好きなサイズを指定できるようにしています。"full"の4種です。アイキャッチ画像を表示したい場所で以下のようにechoで呼び出します。?>さて、この新しく定義したget_thumb_img()関数の中身ですが、処理の内容は以下の通りです。情報の配列の中からURLだけ取得imgタグやalt属性値と組み合わせてreturnさせるこの3の部分までは、前回のメモにて詳しく説明していますので、参考にしてみてください。投稿IDからアイキャッチ(サムネイル)画像のURLだけを取得する関数を作ってみた。サイズ指...アイキャッチ画像を出力させる時、the_post_thumbnail()を使用すれば簡単にimgタグを出力してくれますが、このアイキャッチ画像の、URL部分だけを取得したいという時、...実際にこの関数を使って、当記事のアイキャッチ画像を出力してみます。(大きさはlargeを指定しました)出力されたソースを見てみると、次のようになっています。alt="タイトル(省略してます)">無駄な出力が記述が一切なくなり、だいぶスッキリしました。alt属性の値も自由に指定して出力できるようにしてみた執筆中にちょっと思いついたので、さらに改良してみました。先ほどの関数では、alt属性を記事タイトルにしていますが、ここも引数で指定できるようにしてみます。指定しない場合のみ、先ほどと同様、記事タイトルを出力するものとします。alt="'.$alt.'">';}実際に出力してみましょう。?>alt属性を"あああ"として、呼び出してみたものが下の画像です。デベロッパーツールで出力されたソースを確認すると、alt属性に"あああ"と入力されてるのが確認できるかと思います。get_the_title();という部分は3項演算という記法を用いています。見慣れない方はググって見てください。まとめさて、いかがだったでしょうか。こんなことに気づくユーザーはいないので、完全に自己満足の世界ですが。追記:投稿IDも指定して好きな投稿のアイキャッチ画像を取得できるように改良しました追記(2018/05/02):さらに改良してみたので、コードを載せておきます。「現在の投稿」だけでなく、任意の投稿のアイキャッチ画像を取得できるように、引数に投稿IDを指定できるようにしてみました。指定しなければいままで通り、「現在の投稿」のアイキャッチ画像を取得できます。@ddryo_loosホームWordPressカスタマイズthe_post_thumbnail()なんて使わない。