フォーラムへの返信
-
補足：SEO対策として考えるのなら
上のコードそのままだとトップページのH1が「メディア上で設定した個別のALT」になってしまう<h1 class="c-site-branding__title"> <a href="https://example.com/" class="custom-logo-link" rel="home" aria-current="page"> <img width="484" height="98" src="https://example.com/wp-content/uploads/2023/05/logo-horizontal.png" class="custom-logo" alt="メディア上で設定した個別のALT"> </a> </h1>条件分岐してトップページでは、
<span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span>のようにH1にサイトネームが入るようにする必要があると思います。<h1 class="c-site-branding__title"> <a href="https://example.com/" class="custom-logo-link" rel="home" aria-current="page"> <img width="484" height="98" src="https://example.com/wp-content/uploads/2023/05/logo-horizontal.png" class="custom-logo" alt="メディア上で設定した個別のALT"> <span class="screen-reader-text"><?php bloginfo( 'name' ); ?></span> </a> </h1>Who liked:
/** * WordPressのコア関数 the_custom_logo() が使用する * wp_get_attachment_image_attributes フィルターを利用して * サイトロゴのALT属性をカスタマイズします。 */ add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment ) { // カスタムロゴのIDを取得 $custom_logo_id = get_theme_mod( 'custom_logo' ); // 現在処理中の画像がサイトロゴかどうか確認 if ( $custom_logo_id && $attachment->ID === (int) $custom_logo_id ) { // メディアライブラリで設定されたALT属性を取得 $custom_alt = get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ); // カスタムALT属性が存在する場合は、それを使用 if ( ! empty( $custom_alt ) ) { $attr['alt'] = $custom_alt; } } return $attr; }, 10, 3 );こちらのコードを My Snow Monkey に追加すれば、メディアに設定した代替テキストと入れ替えることが出来ますが、SEO目的ならトップページの
H1をどうするか？もう少し考える必要がありそうです。Who liked:
一括非表示
/** * すべてのSNSアカウント入力欄を削除 */ function my_remove_all_sns_accounts( $accounts ) { return array(); // 空の配列を返すことですべてのSNSアカウント入力欄を削除 } add_filter( 'inc2734_wp_profile_box_sns_accounts', 'my_remove_all_sns_accounts', 99 );Who liked:
個別に残す場合
/** * YouTube と LINE だけを残す */ function my_customize_sns_accounts( $accounts ) { $custom_accounts = array(); // YouTube と LINE だけを保持 if ( isset( $accounts['youtube'] ) ) { $custom_accounts['youtube'] = $accounts['youtube']; } if ( isset( $accounts['line'] ) ) { $custom_accounts['line'] = $accounts['line']; } return $custom_accounts; } add_filter( 'inc2734_wp_profile_box_sns_accounts', 'my_customize_sns_accounts', 99 );Who liked:
snow_monkey_template_part_render_<slug>
snow_monkey_pre_template_part_render_<slug>
のどちらかのフィルターフックを使用されてはどうでしょうか？/** * @param $html テンプレートパーツの出力HTML * @param $name テンプレートパーツの名前 * @param $vars テンプレートパーツのリクエスト配列 */ add_filter( 'snow_monkey_template_part_render_template-parts/loop/entry-summary/title/title', function( $html ) { $html = str_replace( '書き換え前の文字列', '書き換え後の文字列', $html ); return $html; }, 10 );/** * @param $html テンプレートパーツの出力HTML * @param $name テンプレートパーツの名前 * @param $vars テンプレートパーツのリクエスト配列 */ add_filter( 'snow_monkey_pre_template_part_render_template-parts/loop/entry-summary/title/title', function( $html ) { return 'New HTML'; }, 10 );Who liked:
「お知らせ一覧ページ」や「実績一覧ページ」は、カスタム投稿タイプでしょうか？
その場合は、以下のようにis_post_type_archive( $post_types )で条件分岐できます。add_action( 'snow_monkey_before_archive_entry_content', function () { $_title = '一覧ページ'; if ( is_post_type_archive( 'news-achievements' ) ) { // 「お知らせ一覧」の場合 $_title = 'お知らせ一覧'; } elseif ( is_post_type_archive( 'achievements' ) ) { // 「実績一覧」の場合 $_title = '実績一覧'; } ?> <div class="news-section"> <h2><?php echo esc_html( $_title ); ?></h2> </div> <?php } );参考ページ
Who liked:
上に記載されているコードの8行目を修正して以下のようにするとどうでしょうか？
add_action( 'snow_monkey_before_archive_entry_content', function () { ?> <div class="news-section"> <h2>一覧ページ</h2> </div> <?php } );Who liked:.base-image { position: relative; /* 親要素を相対配置にする */ display: block; /* ブロック要素として表示 */ }は、必要ないので削除してください。
Who liked:
こんにちは。
方法はいろいろあると思いますが、画像ブロック5つの場合
まず、5つの画像ブロック全部をグループブロック化します。
その上で、カスタマイザーの追加CSSを以下のように変更してみてください。.overlay-image1, .overlay-image2, .overlay-image3, .overlay-image4 { position: absolute; width: 12%; height: 20%; z-index: 1; margin-top: 0 !important; } .overlay-image1 { top: 100px; left: 100px; } .overlay-image2 { top: 0; right: 0; } .overlay-image3 { bottom: 0; left: 0; } .overlay-image4 { bottom: 0; right: 0; } .overlay-image1 img, .overlay-image2 img, .overlay-image3 img, .overlay-image4 img { width: 100%; /* 画像を要素の幅に合わせる */ height: 100%; /* 画像を要素の高さに合わせる */ object-fit: cover; /* 画像をブロックに合わせて表示 */ }画像の位置やサイズは、お好みで調整してください。
サンプルページ
Who liked:
