2024(令和6)年5月31日WordPressのカスタマイズ【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています画像のtitle属性自体が検索エンジン等からどう判断されるのかは別として、せっかくある属性なので設定しておきたいものではあるものの、WordPressでは、ページ内に挿入した画像に対してtitle属性は付与されません。そこで今回は、以下のようなことを行う方法を紹介します。冒頭で書いたように、title属性が俗にいうSEOに有効であるかどうかは別として、画像をマウスオーバーした際にどんな画像なのかが表示されるようになるので、簡単な説明文などを表示させたいときに使えそうな気がします。以下は、投稿編集画面の「代替テキスト」欄に「代替テキストに入力した内容がtitle属性として出力され、マウスオーバーで表示される例」と入力しているので、それがtitle属性として出力され、画像をマウスオーバーした時にその文字列が表示される例です。以下は同じ画像ではあるものの、「代替テキスト」欄が空(未入力)なので、投稿タイトルがtitle属性として出力され、マウスオーバー時に投稿タイトルが表示される例です。本ページ掲載のコードを使用するときは本ページで掲載しているコードは、以下に了承した上で使用くださいコードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いませんコードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでくださいコードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがありますコードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください掲載しているのは参考コードです。以下のコードを有効化しているテーマのfunctions.phpへ追加します。'pwcn_add_title_attribute_to_image_tag');コード使用上の注意点WordPress6.5時点では、上記コードの形で画像タグが出力されていますが、別のバージョンなどで画像タグ内の情報出力の順序が変わった場合には、画像タグを分解して取得する部分と、title属性を付加して書き換えるパターンの部分を書き換える必要があります。これは私の勝手な想像ですが、画像タグの構造は少なくともいくつか前のバージョンからはこの形態ですし、特に今後タグが使われることもないと思いますので問題が発生する可能性は少ないと思います。コードのカスタマイズ方法title属性にどの情報を出力するのかは、コード全体の中の以下の部分で書いています。$post_title;}この中の条件を変更していけば、優先順の変更が可能です。キャプションよりもaltの値を優先させたければ以下のように変更します。$post_title;}また、メディアのキャプションではなく画像のタイトルや説明の項目を出力対象としたい場合には以下のよう変数化して利用することでカスタマイズできます。$id);メディアのタイトルは、画像のアップロード時に自動で設定されてしまうので、恐らく変更することが少ないだろうということ、説明欄は個人的にメモのようにして使うことが多いので、本コードの出力対象から外しています。【おまけ】jQueryでできないこともないけど..以下のコードをテーマのカスタムJSファイルなどに追加することで、前述のPHPコードのように動作させることもできます(当初はこれを公開するつもりでした)。PHPと異なるのは、メディアに保存されている画像のキャプション情報を取得して利用できないのでaltまたはページタイトルという選択になる点で、書いて試してはいませんが、キャプション情報を利用すると以下のようなプロセスが必要となるので、とんでもなく長く複雑なコードになると思います。取得したキャプション情報をページ内の画像ごとに返して算入する前述したPHPで1つの関数で比較的簡単にできてしまいますから、わざわざ改変する必要もないですし、特に処理速度云々にも影響しませんから、条件付きであってもどうしてもjQueryで処理したいという方はこちらを使ってください。});});結構簡単なコードで実装できますね。本ページで掲載した内容や、紹介した参考コードなどがお役に立てたようでしたら、ページ末尾のコメント欄よりコメントを残す、SNS等で拡散するなどしていただけましたら幸いです。本ページ掲載の方法やコード等はあくまでも最終更新日時点での私の環境において動作確認等を行ったものです。動作不良やカスタマイズの詳細な方法などをコメント欄よりいただきましても原則回答は致しませんのでご了承ください。WordPressのカスタマイズに関するご要望はココナラにてお受けしております。お問い合わせ方法など詳しくはこちらをご覧ください。最後までお読みいただきありがとうございました。Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。Utility】プラグインの紹介などをしています。コメントをキャンセルメールアドレスが公開されることはありません。次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(PWCN)WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなどこのスライドメニューは以下のページの方法を使って実装しています。以下のページでタブ切り替え式のコンテンツの作り方を公開しました。Utility】プラグインをバージョン5.1へ更新しました。