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}
回答1件
あなたの回答
tips
プレビュー