質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

2215閲覧

WordPressの背景画像の表示について

dogfood

総合スコア19

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2019/05/23 06:48

編集2019/05/23 08:38

HTMLファイルからWordpressへの移行作業を行なっております。
ここで質問なのですが、
背景画像をHTMLで直接設定しております。

<div class="site-blocks-cover inner-page" style="background-image: url(images/pricetop.jpeg);" data-aos="fade" data-stellar-background-ratio="0.5"> <div class="row align-items-center justify-content-center"> <div class="col-md-7 text-center" data-aos="fade"> <h1>ご利用料金</h1> <span class="caption d-block text-white">price menu</span> </div> </div> </div>

HTMLデータをブラウザに表示した際は、これでも表示されるのですが、
ワードプレスの固定ページにてこれをコピペしてもうまく表示できません。

解決策ご存知でしたらぜひご教授ください。

ちなみにfunctions.phpにて下記は実装しております。

function imagepassshort($arg) { $content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg); return $content; } add_action('the_content', 'imagepassshort');

固定ページのURLは、
wordpress/price/

画像のURLは
images/pricetop.jpeg

[images] フォルダはwp-contentのthemeに入れた自作テーマのフォルダに入っております。

改めて下記のように打ち込んでおりますが、やはり表示ができません。
functions.php

php

1function imagepassshort($arg) { 2$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg); 3return $content; 4} 5add_action('the_content', 'imagepassshort'); 6 7function imagepassshortTemp($arg) { 8 return get_bloginfo('template_directory') . '/images/' . $arg; 9} 10

ワードプレス固定ページのHTML

HTML

1<div class="site-blocks-cover inner-page" style="background-image: url(<?php echo imagepassshortTemp('pricetop.jpeg'); ?>);" data-aos="fade" data-stellar-background-ratio="0.5"> 2<div class="row align-items-center justify-content-center"> 3<div class="col-md-7 text-center" data-aos="fade"> 4<h1>ご利用料金</h1> 5<span class="caption d-block text-white">price menu</span> 6 7</div> 8</div> 9</div>

CSSで編集することにしましたが、やはりうまく表示されません。
wordpressに打ち込んでいるHTML

<div class="price-top site-blocks-cover inner-page" data-aos="fade" data-stellar-background-ratio="0.5"> <div class="row align-items-center justify-content-center"> <div class="col-md-7 text-center" data-aos="fade"> <h1>ご利用料金</h1> <span class="caption d-block text-white">price menu</span> </div> </div> </div>

header.phpのhtml

<!DOCTYPE html> <html lang="ja"> <head> <title><?php bloginfo('name'); ?> 麻布十番パーソナルジム 業界最安完全貸切ジム - 【ボディメイキングボックス】 <?php wp_title(); ?></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="<?php bloginfo( 'stylesheet_directory' ); ?>/https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Work+Sans:300,400,700" rel="stylesheet"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/fonts/icomoon/style.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/bootstrap.min.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/magnific-popup.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/jquery-ui.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/owl.carousel.min.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/owl.theme.default.min.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/bootstrap-datepicker.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/animate.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/fonts/flaticon/font/flaticon.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/aos.css"> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_directory' ); ?>/css/myedit.css"> <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"> <?php wp_head(); ?> </head> <body style="background-image: url('<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg');"> <div class="site-wrap"> <div class="site-mobile-menu"> <div class="site-mobile-menu-header"> <div class="site-mobile-menu-close mt-3"> <span class="icon-close2 js-menu-toggle"></span> </div> </div> <div class="site-mobile-menu-body"></div> </div> <!-- .site-mobile-menu --> <div class="site-navbar-wrap js-site-navbar bg-white"> <div class="container"> <div class="site-navbar bg-light"> <div class="py-1"> <div class="row align-items-center"> <div class="col-2"> <h2 class="mb-0 site-logo"><a href="<?php bloginfo('url'); ?>/">BodyMaking<strong>Box</strong></a></h2> </div> <div class="col-10"> <nav class="site-navigation text-right" role="navigation"> <div class="container"> <div class="d-inline-block d-lg-none ml-md-0 mr-auto py-3"><a href="#" class="site-menu-toggle js-menu-toggle text-black"><span class="icon-menu h3"></span></a></div> <ul class="site-menu js-clone-nav d-none d-lg-block"> <li class="has-children"> <a href="<?php bloginfo('url'); ?>/program">プログラム</a> <ul class="dropdown arrow-top"> <li><a href="<?php bloginfo('url'); ?>/program#beginner/">初心者メニュー</a></li> <li><a href="<?php bloginfo('url'); ?>/program#diet/">ダイエットメニュー</a></li> <li><a href="<?php bloginfo('url'); ?>/program#powerup/">筋力アップメニュー</a></li> </ul> </li> <?php wp_nav_menu( array( 'theme_location'=>'place_global', 'container' =>'', 'menu_class' =>'', 'items_wrap' => '%3$s',//<ul>を出力しない )); ?> </ul> </div> </nav> </div> </div> </div> </div> </div> </div>

背景を読み込ませた、CSSファイル

CSS

1.price-top{ 2 background-image: url(/wp-content/themes/bodymakingbox/images/pricetop.jpeg); 3}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/05/23 06:53

画像へのパスが違うからでしょうね。 固定ページのURL(ドメイン以下からでけっこうです)と、画像のURLを質問本文に記載してください。
dit.

2019/05/23 07:33

「固定ページのHTML」は、テーマテンプレートを編集していますか? それとも、固定ページの本文への記載ですか?
dogfood

2019/05/23 07:36 編集

固定ページ本文へ記載しております。コードエディターモードで貼り付けております。
guest

回答1

0

ベストアンサー

質問の修正を受け、回答させていただきます。
ローカルとサーバー(WordPress稼働時の固定ページ)で、URLが違うからです。
相対パスと、絶対パスをの知識が必要になりますので、よく調べて勉強してみてください。
(なぜHTMLのままだと表示されたのか理由がそこにあります)

情報がだいぶ出揃ったと思いますので、下記でいかがでしょうか。
momosiriさんのコメント、そのまま使わせていただきます。。。

html

1<div class="site-blocks-cover inner-page" style="background-image: url(/wp-content/themes/テーマフォルダ名を入れてください/images/pricetop.jpeg);" data-aos="fade" data-stellar-background-ratio="0.5"> 2 <div class="row align-items-center justify-content-center"> 3 <div class="col-md-7 text-center" data-aos="fade"> 4 <h1>ご利用料金</h1> 5 <span class="caption d-block text-white">price menu</span> 6 </div> 7 </div> 8 </div>

で、もしかしたらこれでもうまくいかないかもしれないです。
なぜなら、実際に表示されているものを教えていただきましたが、
"などのメタ文字が、エスケープされているからです。

なので、編集画面にて、ビジュアルではなく、HTMLを選択してください。
そうすればもしかしたら、

html

1<div class="site-blocks-cover inner-page" style="background-image: url(images/pricetop.jpeg);" data-aos="fade" data-stellar-background-ratio="0.5"> 2 <div class="row align-items-center justify-content-center"> 3 <div class="col-md-7 text-center" data-aos="fade"> 4 <h1>ご利用料金</h1> 5 <span class="caption d-block text-white">price menu</span> 6 </div> 7 </div> 8 </div>

でもいけるかもです。
ようは、background-imageを指定している部分のメタ文字がビジュアルモードによって、変換されてた可能性があるということです。
HTMLを直接入れる時は、HTMLモードで入れるようにしましょう。

-------- さらに元解決案は下記 --------
質問文を再度見直し、回答修正させていただきました。
すみません。

function.phpに指定した、imagepassshort関数は、the_contentにのみ反映されるように書かれているようです。
なので、テンプレートに直接書いたものに対しては全く効力をなしません。
function.phpにもう一個関数を追加しましょう。

php

1function imagepassshortTemp($arg) { 2 return get_bloginfo('template_directory') . '/images/' . $arg; 3}

で、HTMLをこうします。

php

1<div class="site-blocks-cover inner-page" style="background-image: url(<?php echo imagepassshortTemp('pricetop.jpeg'); ?>);" data-aos="fade" data-stellar-background-ratio="0.5"> 2 <div class="row align-items-center justify-content-center"> 3 <div class="col-md-7 text-center" data-aos="fade"> 4 <h1>ご利用料金</h1> 5 <span class="caption d-block text-white">price menu</span> 6 </div> 7 </div> 8 </div>

これでどうでしょうか。

-------- 下記元解決案 --------

では、回答の方ですが、下記で解決するかと。

php

1<div class="site-blocks-cover inner-page" style="background-image: url(<?php echo imagepassshort('pricetop.jpeg'); ?>);" data-aos="fade" data-stellar-background-ratio="0.5"> 2 <div class="row align-items-center justify-content-center"> 3 <div class="col-md-7 text-center" data-aos="fade"> 4 <h1>ご利用料金</h1> 5 <span class="caption d-block text-white">price menu</span> 6 </div> 7 </div> 8 </div>

つまり、function.phpによって設定した、テーマの中の画像のパスを動的に取得する関数を、しっかりと使うわけです。

投稿2019/05/23 07:12

編集2019/05/23 07:54
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dogfood

2019/05/23 07:17

ありがとうございます。 相対パス、絶対パス勉強します。 ひとまず、いただきましたphpコードを貼り付けてみましたが、 やはり表示ができないようです。 他の要因があるのでしょうか?
miyabi_takatsuk

2019/05/23 07:21

失礼しました。 質問文のコードを再度見直して、回答を修正いたしました。
kei344

2019/05/23 07:21

そのコードは本文内に入れるとPHPを解釈しないため動かないと思いますよ。(「固定ページにコピペ」が固定ページのテンプレートのことでは無いと推測 & 「下記は実装」で本文エリアの置換を行っているため)
kei344

2019/05/23 07:21

あ、変わってた。
dogfood

2019/05/23 07:28

funcitons.phpの表記が間違っているのでしょうか?
miyabi_takatsuk

2019/05/23 07:36

key344さん>すみません、質問のコード見返して、修正した次第でして 汗 dogfoodさん>大丈夫です。修正後の上記の方法をお試しください。
dogfood

2019/05/23 07:38

やはり、画像を読み込んでくれないようです。泣
kei344

2019/05/23 07:39

To: miyabi_takatsuk さん 修正後のほうにもPHPが入っているため、本文では処理できませんよ。(特に質問者は触れていませんがテンプレートではなく本文エリアに入れるコードを提示されています)
miyabi_takatsuk

2019/05/23 07:39

dogfoodさん>おっと、まだだめでしたか。 では、実際に表示されている画像のパス、このコメントで構いませんので、教えていただけませんか? ページのところで右クリック、ソースを表示か、要素を検証ってすると、実際に表示されてる画像URL見れるはずなので。 多分、もう一つ二つ変えるだけでいけるはず。
miyabi_takatsuk

2019/05/23 07:41 編集

key344さん>あ、そういうことか・・・・。 dogfoodさん>もしや、key344さんの言う通り、固定ページ編集画面で、入れてるんですか?そのHTML
dogfood

2019/05/23 07:42

こちらでよろしいのでしょうか? ------ <div class="site-blocks-cover inner-page" style="background-image: url(<?php echo imagepassshortTemp('pricetop.jpeg'); ?>);&#8221; data-aos=&#8221;fade&#8221; data-stellar-background-ratio=&#8221;0.5&#8243;></p> <div class="row align-items-center justify-content-center"> <div class="col-md-7 text-center" data-aos="fade"> <h1>ご利用料金</h1> <p><span class="caption d-block text-white">price menu</span></p> </div> </div> </div>
momosiri

2019/05/23 07:42

横やりすみません。Wordpressは固定ページの本文内でphpの使用が許可されていないので背景画像が表示できないのでしょう。page.phpなど固定ページテンプレートに記述すれば動くと思いますよ。 ただそもそも何でfunctions.phpで置き換える必要があるのでしょう?? /wp-content/themes/テーマフォルダ名/images/pricetop.jpeg としたら表示されると思いますけど・・・。 やりたいことと異なっていたらごめんなさい。
dogfood

2019/05/23 07:42

そうです。固定ページの編集画面に貼り付けております。
miyabi_takatsuk

2019/05/23 07:45 編集

それはかなーり重要な情報です。 こちらも早合点で確認せずすみません。 回答、それに合わせて修正いたしますね。
dogfood

2019/05/23 07:46

お手数お掛け致します。
dogfood

2019/05/23 08:02

ご回答ありがとうございます。 いただきましたものを貼り付けてみましたがやはり表示ができません。泣 また当初よりコードエディターにて貼り付けております。 momosiri様にご教授いただいたものも試しましたが、やはり画像表示できないようです。
dogfood

2019/05/23 08:03

ちなみにですが、 page.phpは下記のようにしてあります。 ーーー <?php get_header(); ?> <?php if(have_posts()): while(have_posts()): the_post();?> <?php the_content(); ?> <?php endwhile; endif; ?> <?php get_footer(); ?>
miyabi_takatsuk

2019/05/23 08:06

な、なんと・・・。 実際に表示されてるコードで、 &#8221; (エスケープされた文字)などは消えていましたか??
dogfood

2019/05/23 08:11

<div class="site-blocks-cover inner-page" style="background-image: url(/wp-content/themes/bodymakingbox/images/pricetop.jpeg);" data-aos="fade" data-stellar-background-ratio="0.5"> <div class="row align-items-center justify-content-center"> <div class="col-md-7 text-center" data-aos="fade"> <h1>ご利用料金</h1> <span class="caption d-block text-white">price menu</span> </div> </div> </div> こちらが更新した後のデータです。
dogfood

2019/05/23 08:12

「”」は消えていないかと思います。
miyabi_takatsuk

2019/05/23 08:15 編集

なるほど・・・・。 あ、"はあるで正解です。ないと逆にだめです。 先ほどは、"が&#8221;に変換されてたのでその状態がまずかったんです。 style="background-image: でやるのではなく、 テーマのCSSファイルで、背景画像当てるほうがいいのでは・・・。 もうそっちの方がいいかと思います。 (CSSファイルに、その背景画像当てるだけのクラスを定義し、HTMLにはクラスを付与する) もう一個確認ですが、画像ファイルには直接URLでアクセスしたら表示されますか??
dogfood

2019/05/23 08:20 編集

file:///wp-content/themes/bodymakingbox/images/pricetop.jpeg でブラウザ検索すると、「ファイルが見つかりませんでした 移動または削除された可能性があります。 ERR_FILE_NOT_FOUND」とでます。 (確かにbodymakingboxのimagesフォルダに入っているタイトルが[pricetop.jpeg」データなのですが。 ーーーー file:///Applications/MAMP/htdocs/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg これですと直接URLの打ち込みで表示ができました。
dogfood

2019/05/23 08:19

style="background-image: でやるのではなく、 テーマのCSSファイルで、背景画像当てるほうがいいのでは・・・。 もうそっちの方がいいかと思います。 (CSSファイルに、その背景画像当てるだけのクラスを定義し、HTMLにはクラスを付与する) ーーー この場合だと、 cssの background-imageのurlは何を入れたらいいのでしょうか?
miyabi_takatsuk

2019/05/23 08:22

file://は、ローカル上のパスなので、 Webサーバー上では不正解ですよ。 回答にも記載しました、相対パスと絶対パスを勉強しましょう。 CSSの場合は、 momosiriさんが掲示してくださったurlで大丈夫です。 /から始めるやつです。
miyabi_takatsuk

2019/05/23 08:30 編集

え、ちょっと待った、MAMPPで作業してるの!? それも先に言って欲しかった・・・。 今回のような、パスの話の場合、 どこで、どうやっているかによって、全く話が変わります。 次で構いません、情報・状況はもっと細かく記載してください。 必要な情報がわからないなら、全部の情報を開示してください。 OS、仕様ツール、ローカルなのか、Webサーバーなのか、ディレクトリ構造 etc... 聞かなかった私も悪いですが、MAMPP使ってローカルサーバーだってなら、そこもかなり重要なので先に言ってほしかったです。
dogfood

2019/05/23 08:31

大変失礼しました。次回より留意します。
miyabi_takatsuk

2019/05/23 08:36

えーと・・・。一応確認ですが、 MAMPPを起動して、ローカルサーバーは稼働させているんですよね?
dogfood

2019/05/23 08:39

はい、ローカルサーバで稼働させております。
dogfood

2019/05/23 08:39

追加情報にも載せたのですが、CSSでもやはり読み込んでくれないようです泣
miyabi_takatsuk

2019/05/23 08:44

はい、それでは、 サイトURLは、loalhost:8888/ですか? loalhost:8888/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg で画像は表示されますか?
dogfood

2019/05/23 08:52

localhostは locahost:80です。
dogfood

2019/05/23 08:54

loalhost:80/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg でCSS、固定ページ直接貼り付けを試してみましたが、やはり表示されませんでした。
miyabi_takatsuk

2019/05/23 08:57 編集

では、loalhost:80/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg で画像は表示されるはずです。 url見て気づきました。 cssに、 background-image: url(/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg); でもう大丈夫だと思います。 momoshiriさんが教えてくださったのは、 wordpressを、 localhost:80/の直下にインストールしてる前提なので、 /wordpressが抜けていたわけです。 ここまでの勘違いや入れ違いも、相対パス、絶対パス、もう一つ、ドキュメントルートパスというものを理解されていれば、もっと早期に解決できていたでしょう。 HTML、Webにおいては、このパスというものがとてもとても重要になりますので、よくよく勉強しましょう。
miyabi_takatsuk

2019/05/23 08:56

固定ページにとかではなく、ブラウザのURL欄に直接URL貼り付けて表示できるかまず見てみましょう。
dogfood

2019/05/23 08:57

試みてみます。 本当に親身に解決していただきありがとうございます。
dogfood

2019/05/23 08:59

ブラウザのURL欄に直接URLでは、 loalhost:80/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg は表示できませんでした。 「このサイトにアクセスできません loalhost のサーバーの IP アドレスが見つかりませんでした。 DNS_PROBE_FINISHED_NXDOMAIN」 とでます。
miyabi_takatsuk

2019/05/23 09:03

わかりました。 CSSでの表示は background-image: url(/wordpress/wp-content/themes/bodymakingbox/images/pricetop.jpeg); でうまくいきましたか?
miyabi_takatsuk

2019/05/23 09:38 編集

もう一点、これは私の言い忘れです。 CSSファイルの方で、上記を指定した場合、 HTMLタグの方の、style="〜"は消さないと、ダメです。 CSSには優先強度というものがあり、 HTMLに書くstyle="〜"は最優先なので、 style="〜"を残しておくと、CSSファイルに書いたものは無効になります。
dogfood

2019/05/23 13:43

ありがとうございます。解決しました!!!!
miyabi_takatsuk

2019/05/23 13:54

おおお・・・・!よかったですね!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問