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

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

ただいまの
回答率

88.79%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,399

dogfood

score 19

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

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

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

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

<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">
<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>

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ファイル

.price-top{
    background-image: url(/wp-content/themes/bodymakingbox/images/pricetop.jpeg);
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2019/05/23 15:53

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

    キャンセル

  • dit.

    2019/05/23 16:33

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

    キャンセル

  • dogfood

    2019/05/23 16:35 編集

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

<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">
      <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を選択してください。
そうすればもしかしたら、

<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> 


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

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

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

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


で、HTMLをこうします。

<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">
      <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> 


これでどうでしょうか。

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

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

<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">
      <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> 

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/23 18:37 編集

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

    キャンセル

  • 2019/05/23 22:43

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

    キャンセル

  • 2019/05/23 22:54

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

    キャンセル

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

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る