[キタジマ タカシ]

あ、上記の書き込み、もしかしたら僕の勘違いかも…です。

My Snow Monkey に記述するときに、 wp_enqueue_scripts 部分のコードは記述せずに、それ以外の部分だけ記述するとどうなりますでしょうか？ 下記を My Snow Monkey に貼り付けてみてください。

/**
 * ページヘッダーにパララックスエフェクトを反映
 *
 * @param string $html
 * @param string $slug
 * @return string
 */
add_filter(
	'inc2734_view_controller_template_part_render',
	function( $html, $slug ) {
		if ( 'template-parts/common/page-header' !== $slug ) {
			return $html;
		}

		$html = str_replace(
			'class="c-page-header"',
			'class="c-page-header js-bg-parallax"',
			$html
		);

		$html = str_replace(
			'class="c-page-header__bgimage"',
			'class="c-page-header__bgimage js-bg-parallax__bgimage"',
			$html
		);

		$html = str_replace(
			'class="c-container"',
			'class="c-container js-bg-parallax__content"',
			$html
		);

		return $html;
	},
	10,
	2
);

これでページヘッダーもセクションもどちらもパララックスにならないですかね？

♥ 0

Who liked: No user

[キタジマ タカシ]

報告ありがたいです！ IE は表示をあわせるのが難しいので、崩れていると感じない程度で調整していく対応になることが多いかなと思います。ということで進めていきます。

♥ 0

Who liked: No user

[webj56]

IEの表示なので報告するのも少し躊躇われますが、対応ありがとうございます。

♥ 0

Who liked: No user

[キタジマ タカシ]

ボックスの高さが揃うのは画像サイズが同じだからだと思うのですが、IE11の場合、ブラウザのバグがあるので完全に chrome などのモダンブラウザと表示を合わせることができません。右側に余白がでるのはなんとかできそうなので調査/修正をすすめようと思います！

♥ 0

Who liked: No user

[M T]

すみません、参考ページのURL間違っていました。こちらです。

ブログ

もっと簡単に、もっと効率的に WordPress サイトを構築・運用したい方のための WordPress テーマ

snow-monkey.2inc.org

♥ 0

Who liked: No user

[キタジマ タカシ]

こんなにスラスラコードが書けるってすごいです。Wordpress初心者ですが、いつかキタジマさんのようになれるといいなぁ。

僕はプログラマーとしてのスキルはそんなに高くなくて、基礎的なことを地道にレゴみたいに組みあわせていっているだけなので、1行1行の意味を理解しながら書くクセをつければ、僕程度になら絶対なれると思いますよ！

上記ご説明のウィジェットエリア以外のエリアにウィジェットを配置するのは難易度が高いのですよね・・・他の方法としてはElementorなどで左右非対称のカラム分けをつくるかですよね。
アドバイスがあればご教示いただきたいです。

Elementor は詳しくないのでちょっとわからないのですが、ぱっと思いついたのは、Meta Slider のようなスライダーをショートコードでつくれるプラグインを使い、つくったショートコードをアクションフックにつっこむパターンですかね。お知らせバーやヘッダーコンテンツを使っていると変になってしまうかもなのですが、下記のようなコードでスライダーのショートコードを入れればそれっぽくなるかもしれません。

<?php
add_action(
	'snow_monkey_prepend_contents',
	function() {
		if ( ! is_front_page() ) {
			return;
		}

		echo do_shortcode( 'ここにスライダーのショートコード' );
	}
);

♥ 0

Who liked: No user

[キタジマ タカシ]

下記のコードを My Snow Monkey プラグイン、もしくは子テーマの functions.php に貼り付けてみてください。

/**
 * ホームページに割り当てた固定ページでもページヘッダーにアイキャッチ画像を表示
 */
add_filter(
	'snow_monkey_pre_page_header_image_url',
	function( $url ) {
		if ( is_front_page() && is_page() && has_post_thumbnail() ) {
			$thumbnail_id = get_post_thumbnail_id();
			if ( $thumbnail_id ) {
				return wp_get_attachment_image_url( $thumbnail_id, 'xlarge' );
			}
		}
		return $url;
	}
);

♥ 0

Who liked: No user

[キタジマ タカシ]

あ、なるほどです。トップページですね。トップページについては他のページより自由にデザインしたいという方が多いため、アイキャッチ画像の自動表示はナシになっているんです。もし自動表示させたい場合は子テーマ、もしくは My Snow Monkey プラグインでのカスタマイズが必要です。

Snow Monkey のカスタマイズは子テーマよりプラグインがオススメ！プラグインの雛形をダウンロードできるようにしました

子テーマの問題点 一般的に、テーマの設定では対応できないカスタマイズについては、子テーマを用意し、コードを書い…

snow-monkey.2inc.org

ちょっとカスタマイズコードを準備しますので少々お待ちを。

♥ 0

Who liked: No user

[渥美 有紀子]

ごめんなさい！解決しました！

ほかの方への返信でキャッシュのお話をされていて、キャッシュをクリアしてみたら反映されました。

お騒がせいたしました。

♥ 0

Who liked: No user

[キタジマ タカシ]

wp_enqueue_style のところを下記のように変更するとどうでしょうか？

style.css を更新したときに、自動的に style.css のキャッシュもリセットされるようになります（サーバーによってはダメな場合はあるかもしれません）。

wp_enqueue_style(
	get_stylesheet(),
	get_stylesheet_uri(),
	[ get_template() ],
	filemtime( get_stylesheet_directory() . '/style.css' )
);

♥ 0

Who liked: No user

[魚住 惇]

確かに、iPadでもSafari以外のブラウザで閲覧すると正しい比で表示されました。

子テーマで使っているfunction.phpはこちらです。

<?php
add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_style(
		get_stylesheet(),
		get_stylesheet_uri(),
		[ get_template() ]
	);
} );

remove_filter('pre_user_description', 'wp_filter_kses');

add_filter( 'snow_monkey_entry_summary_title_num_words', function( $num_words ) {
	return 60; // 60 文字で切る。 false にしたら切らずに表示する。
} );

global $wp_embed;

add_filter( 'the_content', array( $wp_embed, 'autoembed' ), 9 );

add_action( 'admin_menu', 'add_custom_menu' );

function add_custom_menu(){
	add_menu_page( 'ブロックの管理', 'ブロックの管理',
	'manage_options', 'edit.php?post_type=wp_block', '', 'dashicons-admin-post', 21 );
}

よろしくおねがいします。

♥ 0

Who liked: No user

[キタジマ タカシ]

子テーマの style.css を直接参照するとちゃんと !important が追加されているのですが、実際の画面では反映されていないようです。どうもキャッシュが強くて、一度読み込んだ古い style.css が読み込まれてしまうようです（なので閲覧者がブラウザのキャッシュを消せばちゃんと表示されはします）。

子テーマで style.css を読み込んでいる部分のコードを共有してもらえないでしょうか？ 多分 wp_enqueue_style を使っているかと思うのですが、style.css を更新したらちゃんと反映されるようにそのコードを変更してみます。

♥ 0

Who liked: No user

[hurley]

んーなんでしょう、この項目は、カスタマイザーのプレビュー画面が固定ページの場合にしか表示されません。固定ページ以外のページを開いていたりはしないでしょうか？

うーん、確かに固定ページなんですが、他に検証方法はありませんでしょうか。
必要ならログインIDとパスワードをお教えいたしますのでご指示ください。

そうですね、別トピックが好ましいです。ただ、ウィジェットを既存のウィジェットエリア以外の場所に表示するのは結構コードを書かないといけないのでハードルは高いと思います。

なるほど！こちらは難しそうなのでまたの機会にいたします。

 

♥ 0

Who liked: No user

[キタジマ タカシ]

あ、いま調べてて、ちょっと間違いの訂正とご質問です。

これをインラインスタイルとかでも指定して img { height: auto; } を打ち消すのが良いのかなぁと想像しています。

これですが、すでにスタイルでの指定も入れるようなっていました！（なっていたというかつくったのは僕なのですが笑）
ただ、height については auto を指定するようにしていたので、そこは px を指定するようにしようと思うのですが、件のサイトを拝見すると、どうもこのスタイル指定が出力されてないみたいなんです。

ファイルでいえば snow-monkey/app/setup/custom-logo.php の中の wp_head で計算してスタイルを出力するようにしているのですが、これを子テーマか何かで打ち消したりされていますでしょうか？もしされていないのでしたら、jetpack の Lazyload との絡みなのかもしれません…。その場合はなにかうまい方法がないかちょっと処理を見直してみます…。

♥ 1

Who liked: No user

[キタジマ タカシ]

原因わかりました。おそらく、Jetpack？の LazyLoad を使われていると思うのですが、それが影響しているようです。LazyLoad で画像が読み込まれる前の状態ではsrcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" という仮画像がセットされています。これが 1×1 の画像なのですが、Snow Monkey は CSS で img { height: auto; } となっているため、ロゴの横幅サイズに連動して 236×236 で表示されてしまうようです。

どう対処するのがベターかちょっと悩むのですが、ロゴ画像のサイズを現状 img の height 属性と width 属性につっこんでいるので、これをインラインスタイルとかでも指定して img { height: auto; } を打ち消すのが良いのかなぁと想像しています。

ちょっとその方向でやってみますが、何か他にも良さそうなアイデアがもしあれば書き込みください！

♥ 0

Who liked: No user