*

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

公開日: : Web技術・ノウハウ, Wordpress

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

先日とあるお客様のWordPressサイトで「画像が表示されない」と相談を受けました。

WordPressの管理画面を見てみてると独自の子テーマを作成しており、どうやらテンプレート内の画像パス指定部分がうまく機能していないようです。

で、なんでかな〜?と子テーマの処理を追っていくと、imgタグのパス指定にbloginfo(‘template_url’)関数が使われていました。

 

子テーマフォルダ内を参照するときはstylesheet_directoryでパス指定

WordPressの子テーマ内の画像フォルダにパスを張る場合、bloginfo(‘stylesheet_directory’)関数を使う必要があります。template〜 の方だと親テーマの方を見に行ってしまいうので。

また、できればWordPressのバージョンアップに合わせて「get_stylesheet_directory_uri()」関数を使うようにしましょう。

関数リファレンス/get stylesheet directory uri

説明

テーマまたは子テーマの スタイルシート ディレクトリの URI を取得する。SSL が存在するかチェックする。

(中略)
子テーマを使用している場合、子テーマのディレクトリの URI を返します。 親テーマのディレクトリを取得するには get_template_directory_uri() を使用してください。

関数リファレンス/get stylesheet directory uri – WordPress Codex 日本語版

例えばimgタグのパスを指定するなら

<img src=”<?php echo get_stylesheet_directory_uri() ?>/images/aternus.png” alt=”” title=”” width=”” height=”” />

のように使います。

 

ひとこと

これも知らないと意外にハマるもののひとつですね。画像がうまく表示されないときには子テーマのテンプレート内でbloginfo(‘template_url’)関数を使っていないかをチェックしてみてください。該当箇所があったら「bloginfo(‘stylesheet_directory’)」または「get_stylesheet_directory_uri()」に書き換えれば、目的のファイルにパスが通るでしょう。

PR

関連記事

brewでmacのOpenSSLをバージョンアップ

macでローカル環境のopensslをバージョンアップする手順 〜 brewで更新→rbenvでrubyを再インストール 〜

先日自社の運営サイトのSSL証明書の更新作業をしたのですが、ローカル環境として使っているmacで

記事を読む

Rubyで小数点第2位以下を切り捨てる方法

Rubyには標準で便利なメソッドがたくさん用意されています。数値の取り扱いについてもNumericク

記事を読む

Revision Control

ムダな履歴データの蓄積をストップ!『Revision Control』で投稿ページ・固定ページの変更履歴をスマートに管理

投稿ページ・固定ページの「変更履歴」を制御するプラグイン『Revision Control』をご

記事を読む

SEOが強いWordPressサイトの内部を知る

【SEO初心者向け】検索順位を確実に上げるためのWordPress×SEO基礎知識

「うちのホームページをネット検索に強くしたい。でもやり方がわからない。」 WordPressで

記事を読む

Public Post Previewプラグイン

公開前のページを第三者にシェア!『Public Post Preview』は下書きページへの共有リンクを発行できるプラグイン

公開前のページを第三者に確認してもらうのに便利なプラグイン『Public Post Previe

記事を読む

HTMLもCSSもまとめて一式ダウンロードできるmacアプリ

URLを指定するだけでWebサイトを丸ごとダウンロードできるMacアプリ『SiteSucker』

Web制作をしていると、特定のサイトをローカルにダウンロードしたいと思うことがありませんか?

記事を読む

Crayon Syntax Highlighter

【入れるだけ】投稿記事中のコードをキレイに表示!『Crayon Syntax Highlighter』はシンタックスハイライトをかけるプラグイン

WordPressの投稿記事中のコードをキレイに表示できるプラグイン「Crayon Syntax

記事を読む

Active Preview ボタン

『Active Preview』で編集内容をリアルタイムプレビュー

最近使ってみたWordPressプラグイン『Active Preview』が便利だったのでご紹介しま

記事を読む

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりにgitを使っています。 で、

記事を読む

WordPressにテーブルを追加する方法

自作テーブルの追加からデータ取得まで!WordPressでデータをDBに保持して使う方法

WordPressでWebサイトを作ったとき、何かしらのデータをデータベース上に保持しておき必要

記事を読む

PR

コメントを残す

PR

【Git】一つ前のcommitに戻す/他のブランチのcommitを取り込む

久しぶりにRailsでプログラムを書いている関係で、これまた久しぶりに

WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する
WordPressの子テーマで画像が表示されないときはstylesheet_directoryを使っているか確認する

先日とあるお客様のWordPressサイトで「画像が表示されない」

おすすめGoogle拡張リスト
【保存版】情報収集を快適に!Chromeに入れておきたいオススメ拡張(エクステンション)8個

私はChromeをメインブラウザとして使っていますが、その理由のひとつ

Rubyで小数点第2位以下を切り捨てる方法

Rubyには標準で便利なメソッドがたくさん用意されています。数値の取り

BootstrapでWordPressサイトをレスポンシブデザイン化
【やって覚える】BootstrapでWordPressサイトをレスポンシブデザイン化する方法

  先日Googleから「4/21以降、サイトのスマホ

→もっと見る

  • feedlyでフォロー RSS登録ボタン
  • 株式会社YUKARIでは、ホームページリニューアルをメインにWeb制作事業を行っています。既存サイトへのWordPress導入・レスポンシブデザイン化からSEO強化まで何でもご相談ください。 ホームページリニューアルをお考えの方からのお問い合わせをお待ちしております。
PAGE TOP ↑