[キタジマ タカシ]

一覧のページについては「アーカイブページ設定」ですかね。

アーカイブページ設定

アーカイブページ（ブログ一覧ページ含む）共通の設定を行うことができます。 カスタマイザーでデザイン > アーカ…

snow-monkey.2inc.org

♥ 1

Who liked:

[キタジマ タカシ]

見れればどこでも良いとは思いますが、僕ならわかりやすいようにメディアアップローダーでアップロードして参照するか、My Snow Monkey とか子テーマの中に入れると思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

ただIDだと、登録時のWPの状態によってIDが可変してしまい、DBの情報が異なる場合に、想定通りの色分けにならない可能性があります

あ！そうでした、スラッグですね。一応一覧のところと、記事内のところ、どちらも ID と slug の class を出力するようにしてみようと思います。しばしお待ちを！

♥ 2

Who liked:

[キタジマ タカシ]

また、ヘッダーコンテンツ右に画像でリンクボタンを入れたいのですがこれは可能でしょうか。

はい、普通に HTML を記述すれば良いです。下記は適当な例ですが、こんな感じで a と img を記述してみてください。

<div class="header-info" style="gap: 1em">
  <div class="header-wrapper">
    <i class="fas fa-phone-alt"></i>&nbsp;<b>0123-456-7890</b><br>午前：9:00〜12:00<br>午後：13:00〜19:00(土日祝日は16:00まで)<br>休診日：木曜日
  </div>
  <div>
    <a href="#"><img src="https://placehold.jp/100x60.jpg"></a>
  </div>
</div>

♥ 0

Who liked: No user

[キタジマ タカシ]

要は

<li class="c-meta__item c-meta__item--categories">
  <span class="c-meta__term c-meta__term--category-23">
    <span class="screen-reader-text">カテゴリー</span>
    <i class="fa-solid fa-folder" aria-hidden="true"></i>
    <a href="https://snow-monkey.2inc.org/category/info/">お知らせ</a>
  </span>
</li>

みたいになったら良いですかね？ 確かにここ CSS でさくっとやろうとしても HTML 構造的に無理なので、こうしちゃったほうが良い気がします！

♥ 1

Who liked:

[キタジマ タカシ]

ありがとうございます。確認したところ、.header-info を閉じる </div> が無いようです。それで HTML 構造がずれてしまって現象が発生しているように思います。

♥ 0

Who liked: No user

[キタジマ タカシ]

ヘッダーコンテンツに入力した HTML を、ここにそのまま貼り付けてもらって良いのでしょうか？（HTML 全体を`で囲むとコードとして認識されます）。

♥ 0

Who liked: No user

[キタジマ タカシ]

1. jQuery の読み込みを最適化の無効化

上記について、まだ同じエラーが出て続けていますね。HTML ソースを見ると jQuery の読み込み部分が

<script type='text/javascript' id='jquery-core-js' data-type="lazy" data-src="https://www.kyushu-kiden.co.jp/wp-includes/js/jquery/jquery.min.js?ver=3.6.1"></script>

のように、src ではなくて data-src となっています。なにか遅延読み込みさせるようなものを使われているのではないかなと思うのですがどうでしょうか？

♥ 1

Who liked:

[キタジマ タカシ]

過去にこんなトピックが…！（完全に忘れていました、ありがとうございます）

♥ 1

Who liked:

[キタジマ タカシ]

Uncaught ReferenceError: jQuery is not defined

という JavaScript エラーがでているのが気になります。3D FlipBook　は存じ上げないのですが、そのプラグインが jQuery を使っているのであれば jQuery が読み込まれていないとダメだと思うので、もし意図的に jQuery を無効化しているのであればもとに戻すなどしてみると良いかもです。

あ、もしカスタマイザー → ページ速度最適化 → jQuery の読み込みを最適化するを有効化されているのであれば無効化してみてください。

♥ 1

Who liked:

[キタジマ タカシ]

FTPソフトで覗いてみても、header.phpが見つかりませんでした。

んーなんででしょうね、themes/snow-monkey/header.php に本来あるはずですが…

snow-monkey/header.php at master · inc2734/snow-monkey

Premium WordPress Theme. This theme is published here for users and developers. Please buy themes when using themes on live site. we can not provide support to…

github.com

まぁそれは本筋ではないのでおいておくとして、僕の書いたコード、どこに書くのか書いていませんでしたね。失礼しました。

一般的には子テーマをつくって、その子テーマの functions.php に書くことが多いと思います。そして子テーマの中の適当な場所に google_for_jobs.php もいれて、functions.php に書いたコードの中から include() するという感じです。

あるいは、Snow Monkey のマイアカウントページから My Snow Monkey という空のプラグインがダウンロードできるのですが、その中に google_for_jobs.php を配置して、my-snow-monkey.php にコードを書いて include() しても良いです。

♥ 1

Who liked:

[キタジマ タカシ]

get_template_part() は値を返す関数ではなく出力する関数なので、$breadcrumbs = get_template_part( 'template-parts/common/breadcrumbs' ); としても $breadcrumbs に値は格納されずその時点で画面に出力されてしまいます。なので、下記のようにするとどうでしょう？

ob_start();
get_template_part( 'template-parts/common/breadcrumbs' );
$breadcrumbs = ob_get_clean();

♥ 0

Who liked: No user

[キタジマ タカシ]

グローバルナビゲーションはフレックスボックスになっているので、まずはメニュー項目の flex プロパティを調整して文字列に応じた幅になるようにする必要があります。その後に微調整するのが簡単だと思います。

/* メニュー項目の均等サイズ揃えを無効化 */
.p-global-nav .c-navbar .c-navbar__item {
    flex: 0 0 auto;
}

/* メニューリンクの左右 padding をなくす */
.p-global-nav .c-navbar .c-navbar__item a {
    padding-left: 0;
    padding-right: 0;
}

/* メニュー項目間の余白を 25px にする */
/* メニュー自体を中央揃え */
.p-global-nav .c-navbar {
    gap: 25px;
    justify-content: center;
}

♥ 0

Who liked: No user

[キタジマ タカシ]

‘snow_monkey_template_part_render_template-parts/common/page-header’でフックしてその中でget_template_part(‘template-parts/common/breadcrumbs’)を呼び出すも、その場で展開されてしまい、ヘッダーの一番上にパンくずが表示されてしまいました。

実際に書いたコードと、具体的にどの部分に表示したいのかかがわかるスクショなどを共有してもらうことはできますか？

♥ 0

Who liked: No user

[キタジマ タカシ]

データの送付ありがとうございます。確認したところ確かに現象が確認できました。ただ、原因はちょっとよくわからなくて、Snow Monkey 以外のテーマに変えて、そのテーマの header.php に <a href="/view/search?search_keyword=%B7%AC%A4%CE%CD%D5">...</a> というリンクを記述しても同じ現象が確認できました。

テーマは TwentyTwentyOne で、functions.php に下記のコードを追加してテストしてみました。

add_action(
	'customize_register',
	function( $wp_customize ) {
		$wp_customize->add_setting(
			'test',
			[
				'default' => '',
			]
		);

		$wp_customize->add_control(
			'test',
			[
				'settings' => 'test',
				'label' => 'test',
				'section' => 'test',
				'type' => 'text',
			]
		);

		$wp_customize->add_section(
			'test',
			[
				'title' => 'test',
				'active_callback' => function() {
					return is_home();
				}
			]
		);
	}
);

で、もう一点わかったのですが、そのリンク文字列があるときは下記の JS エラーがでていることに気づきました。

カスタマイザーの詳しい仕組みがわからないのでどういうエラーなのかよくわかりませんが、URIError とあるのでこのリンク文字列と関連があるのかなと思いました。どういうふうに変更すれば良いのかまではわかりませんが、例えばその部分の URL をショートコード化してしまうとか、PHP で出力させるとか、直接 URL を記入しなかったらどうなのかな？と思いました。

♥ 0

Who liked: No user

[投稿者]

投稿