get_template_directory_uri() . '/wp-content/uploads/2024/12/XXXX.jpeg';
を
https:// から始まる URL に書き換えるのが簡単ではないですかね？
早速の修正ありがとうございます。
<img src="http://mitsudenshi.local/wp-content/themes/snow-monkey/wp-content/uploads/2024/12/XXXXX.jpeg" alt="画像">
リンク先が上記になっておりまして、管理画面のメディアに追加している為
/wp-content/uploads/2024/12/XXXXX.jpeg
にsrcを変更したいのですがどのように行えばよろしいでしょうか。
ご教授よろしくお願いいたします。
あ、条件分岐が抜けていました…。is_single() で条件分岐させてください。
add_filter(
'snow_monkey_get_template_part_args_template-parts/common/page-header',
function( $args ) {
if ( ! is_single() ) {
return $args;
}
$default_image_url = get_template_directory_uri() . '/wp-content/uploads/2024/12/XXXX.jpeg';
$args['vars']['_image'] = '<img src="' . esc_url( $default_image_url ) . '" alt="' . esc_attr( get_the_title() ) . '">';
return $args;
}
);
画像が表示されないのは上記コードの中で指定している画像の URL が正しくないからなので、実際に表示させたい画像の URL になるように、コードを修正してみてください。
キタジマ 様
お世話になっております。
早速のご教授ありがとうございます。
おっしゃる通り「その記事の装飾としての画像を変えたい」です。
早速試してみましたが下記のように表示ができませんでした。
【現状】
固定ページまで反応してヘッダー画像が表示できなくなった
【要望】
社員紹介ページやお知らせなど投稿の詳細ページのみ適用したいです。
ページヘッダーの場合とページヘッダーの上にタイトルを表示の2パターン知りたいです。
お手数おかけいたしますが、何卒よろしくお願いいたします。
投稿一覧はそのままで詳細ページでの表示だけ、ということは、あくまで「その記事の装飾としての画像を変えたい」ということだと思ったので、そのやり方を考えてみました。
※post_thumbnail_html で詳細ページだけ表示を変える場合、OGP 画像や関連記事などに使用される画像も変わってしまう可能性があるのでそれ以外を使ったやり方にしてみました。
「アイキャッチ画像の表示」の選択肢によって対応が変わるので、一応それぞれのパターンについて考えてみました。
### 「アイキャッチ画像の位置」が「ページヘッダー」のとき
// テンプレートパーツに画像の URL を差し替えるオプションがあるのでそれを使う。
add_filter(
'snow_monkey_get_template_part_args_template-parts/common/page-header',
function( $args ) {
$default_image_url = get_template_directory_uri() . '/wp-content/uploads/2024/12/XXXX.jpeg';
$args['vars']['_image'] = '<img src="' . esc_url( $default_image_url ) . '" alt="' . esc_attr( get_the_title() ) . '">';
return $args;
}
);
### 「アイキャッチ画像の位置」が「コンテンツの上」のとき
// オプションは無いのでテンプレートパーツ自体を書き換える。
add_filter(
'snow_monkey_template_part_render_template-parts/content/eyecatch',
function( $html ) {
if ( ! $html ) {
return $html;
}
$default_image_url = get_template_directory_uri() . '/wp-content/uploads/2024/12/XXXX.jpeg';
$default_image =
ob_start();
?>
<div class="c-eyecatch">
<img src="<?php echo esc_url( $default_image_url ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>">
</div>
<?php
return ob_get_clean();
}
);
function custom_replace_featured_image($html, $post_id, $post_thumbnail_id, $size, $attr)
{
// 詳細ページでのみ処理を実行
if (is_single() && in_the_loop() && is_main_query()) {
// デフォルト画像のURLを指定
$default_image_url = get_template_directory_uri() . '/wp-content/uploads/2024/12/XXXX.jpeg'; // デフォルト画像のパスを指定
// 新しい画像タグを生成
$html = '<img src="' . esc_url($default_image_url) . '" alt="' . esc_attr(get_the_title($post_id)) . '">';
}
return $html;
}
add_filter('post_thumbnail_html', 'custom_replace_featured_image', 10, 5);
CSS カスタムプロパティで色が定義してあるので、フッター内では白になるようにカスタムプロパティを上書きしてあげれば良いです。
.l-footer {
--widget-title-pseudo-background-color: #fff;
}
インデントがなかったのでとりあえずインデントを入れていってみたところ、閉じミスが何箇所かありました。
また、シンタックスチェックしてみると、セミコロンの不足やメディアクエリの and の不足なども何箇所かあるようでした。
top-mv〜 ではじまるところも、「top-mv という「タグ」に対して」というセレクタになっているので、多分 .top-mv〜 か #top-mv〜 になるのかなと思いました。
あと、
/*スマホ*/
@media screen and (max-width: 640px) {
...
}
とメディアクエリで囲われている中にも新たなメディアクエリが入れ子になっていて、これもちょっと効いているのか怪しいので確認されたほうが良いのかなと思いました。
その辺り全て修正して CSS を追加したら多分反映されるようになると思います！
ありがとうございますm(_ _)m
無茶苦茶かもしれませんが、、お言葉に甘えてコピペさせていただきます！m(_ _)m
/*フォント指定*/
body {
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
}
/*ヘッダー背景*/.l-header {
background-color: #5388d9;
}
:not(.l-header__drop-nav) .p-global-nav .c-navbar__submenu {
background-color: #5388d9;
}
:not(.l-header__drop-nav) .p-global-nav .c-navbar__item > .c-navbar__submenu::before {
display: none;
}
:not(.l-header__drop-nav) .p-global-nav .c-navbar__subitem > a {
color: #111;
}
/*ティザーサイト縦線非表示*/
is-style-plain-about-open{
display:none
}
/*レスポンシブ*/
@media screen and (max-width:768px){
/*トップイメージタブレット*/
.top-image {
width: 600px;
} }
@media screen and (max-width:480px){
/*トップイメージスマホ*/
.top-image {
width: 200px;
} }
@media screen (max-width:768px){
/*トップ見出しタブレット*/
.hoge {
font-size: 15px;
} }
@media screen and (max-width:480px){
/*トップイメージスマホ*/
.hoge {
font-size: 9px;
} }
/*テキストシャドウ*/
cell{text-shadow: 1px 2px 3px #ffffff; }
/*背景色*/
element.style {
background-color: #ffffff;
}
/*タイトル非表示*/
h1.c-entry__title {
display: none;
}
/*スマホ*/
@media screen and (max-width: 640px) {
html {
margin-top: 0 !important;
}
body {
font-size: 13px;
}
body,
#mainvisual,
header,
footer,
nav,
.slider,
.mainvisual_wrapper {
min-width: 100%;
}
body.page #mainvisual .inner,
body.archive #mainvisual .inner,
body.single #mainvisual .inner,
body.home #mainvisual .inner,
body.error404 #mainvisual .inner {
max-width: 100%;
}
html #wpadminbar {
display: none;
}
body,
#mainvisualvisual,
header,
footer {
width: 100%;
min-width: 100%;
}
/*不妊治療子宮イラスト*/
fertility-treatment-uterus-sme-hidden-sm.{
position:absolute;
display:inline-block
top:5px;
right:-15px;
margin-top:0;
width:20px
}
/*下部Map*/
div#block-e3f09eeb-6d89-4d35-b1e1-4763d48b2d83 {
display: flex;
align-items: center;
justify-content: center;
}
/*フッター*/
.l-footer {
background-color: #5388d9!important;
color: #fff!important;
}
/*topページFV*/
top-mv {
display: flex;
}
top-mv__mv {
width: 66%;
}
@media only screen and (max-width:767px) {
top-mv__mv {
width: 100%;
}
}
top-mv__feature {
width: 34%;
flex: 1;
}
@media only screen and (max-width:767px) {
top-mv__feature {
width: 100%;
}
}
@media only screen and (max-width:767px) {
top-mv {
flex-direction: column;
}
}
top-feature {
width: 100%;
position: relative;
padding-bottom: 0;
}
top-feature__container {
width: 100%;
position: relative;
}
@media only screen and (max-width:767px) {
top-feature__container {
margin-top: 0;
}
}
top-featureList {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
top-featureList li {
width: 50%;
background: white;
border-right: 0;
text-align: center;
color: #263137;
}
top-featureList li a {
display: block;
transition: all 0.3s;
position: relative;
}
top-featureList li span {
position: relative;
}
top-featureList li p {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(186, 179, 216, 0.25);
}
@media only screen and (max-width:767px) {
top-featureList li p {
font-size: 1.2rem;
}
}
top-featureList li a:hover {
opacity: 0.6;
cursor: pointer;
}
@media only screen and (max-width:767px) {
top-featureList li {
position: relative;
padding: 0;
margin-bottom: 0;
border-right: solid 1px #f3f3f3;
border-bottom: 0;
}
top-featureList li:first-child img {
left: 38px;
}
top-featureList li:last-child {
border-bottom: solid 1px #f3f3f3;
}
}
top-featureList li img {
width: 100%;
height: auto;
}
top-featureList p {
font-size: 1.6rem;
line-height: 1.75;
min-height: 5em;
margin-bottom: 44px;
}
試しもしていただきありがとうございます！
!importantと上記コードも入れてみたのですが、反映せず・・・
再起動等試みたのですが反映せずでした・・
他にヘッダー要素の追加CSSもないため、自分の中で手を尽くしてしまった感があるのですが、他に考えられることありますでしょうか・・？
同様の事象が起こった方がもしいましたら試したことアドバイスいただけますとありがたいですm(_ _)m
こちらの環境では反映されているっぽく見えますね…。
.l-footer {
background-color: #417fd0;
color: #fff;
}
としてみました。それでもダメなら !important を付けて詳細度を強めてみるとどうでしょうか？
