[Kmical Lights]

最近、最初はなにもないけどスクロールするとまずベタ塗りのマスクみたいなのがシュッとでてきて、

あれ？？多分、ソレって…正確にはアニメーションじゃないやつ…では？
GatsbyJSとかだとsharp系のプラグインで設定すると、ほぼ自動でされるやつだと思う…。
ベタ塗りマスクはただのSVG、または超軽量なjpgで、ページ高速化の為に使われてます。
画像の読み込みが終わっている際に、スクロールに合わせた形でフワッと読み込んだ画像に切り替わるように出来るんです。
そう言う仕組みで、とりあえず軽い画像を差し込んでページ読み込みを軽量化するのにも役立ってます。

本当にアニメーションとして、ブラー効果100%近くからスクロールなどに合わせてシャープになっていくアニメーションは、昔の流行で割とありましたけど…無駄にGPU使う負荷の高い効果なので最近のスマホサイトでは嫌われている傾向(海外パターン)があります。アニメーション効果としてはオススメできなくなりつつあるかと。

♥ 0

いいねをした人: 居ません

[Kmical Lights]

うーん…何故でしょう。
カスタマイザーの「SEO」→「構造化データ」によって並び順などが変更されますがそちらの設定はどのようになっているでしょうか？もし、設定されていないのであれば、if文は削除しても問題ないと思いますので、下記のように差し替えてください。

add_action(
	'snow_monkey_entry_meta_items',
	function() {
		remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_modified', 20 );
		remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_modified', 10 );
	},
	9,
	0
);

—

また、よくあるケースを下記に書いておきます。

1. My Snow Monkey が有効化されているか確認してみてください。
2. ダウンロードされた My Snow Monkey の記述は削除せず、行を追加する形で記述してください。
3. サポートフォーラムやWordPress上のエディター仕様によっては、コードのコピー＆ペーストを行う際に、 ‘(アポストロフィ） になる場合があります。 その部分の記述を '（シングルクォーテーション） に修正してみてください。

記載されているコードはアポストロフィになっているので、3のケースが該当している可能性もあるかもしれません。一度、そちらも確認をお願いできますか？

♥ 0

いいねをした人: 居ません

[Kmical Lights]

すみません、記述間違っていました。
remove_action が記載されている行の　//　を消してください。

♥ 0

いいねをした人: 居ません

[Kmical Lights]

@キタジマさん
あ…… _hierarchy を書いてたつもりが抜けてました…(たまにやるミス)

フック一覧も、非推奨になったフックは非推奨のエリアに分けてまとめた方が良いのかなー…(余談

♥ 0

いいねをした人: 居ません

[Kmical Lights]

add_filter(
	'snow_monkey_template_part_root',
	function( $root, $slug, $name, $vars ) {
		return MY_SNOW_MONKEY_PATH . '/view';
	},
	10, // 正常に動作しない場合、優先度を調整して対応
	4
);

で、プラグインのviewディレクトリをテンプレートパーツのルートディレクトリ配列に追加します。
それで、テーマの先にプラグインのviewディレクトリに置いたファイルを代わりに読まれるようになります。（子テーマの上書きみたいな事がプラグインでできます）
※ snow_monkey_template_part_root_(slug)のようなフックもありますが、この場合はややこしくなるので割愛します。

そして、テンプレートを独自の箇所で読み込みたい場合は get_header などを使わず、

My Snow Monkey の
define( 'MY_SNOW_MONKEY_PATH' ....
の次の行に

use Framework\Helper;

を追加した上で、テンプレートを読み込みたい箇所に
Helper::get_template_part( 'header' );
を記述すれば、その箇所で該当のテンプレートファイルが読まれると思います。
この読み込み方をすると snow_monkey_template_parts_**** などのフックも該当のテンプレートに対して変わらずに使用できます。

お試しください。

♥ 1

いいねをした人: 居ません

[Kmical Lights]

投稿のヘッダー部分というのはタイトル下部のメタアイテムの事でしょうか？

My Snow Monkey でコードを書いてみてください。

各要素の消し方としては、下記のトピックも参考にしてください。

記事内エントリーメタアイテム要素の消し方

このトピックには0件の返信、1人の参加者があり、最後にKmical Lightsにより3ヶ月、 1週前に更新さ…

snow-monkey.2inc.org

add_action(
	'snow_monkey_entry_meta_items',
	function() {
		if ( 'modified-date' === get_theme_mod( 'post-date' ) ) {
			// 更新日を削除
//			remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_modified', 20 );
			//
		} elseif ( 'modified-date-high' === get_theme_mod( 'post-date' ) ) {
			// 更新日を削除
//			remove_action( 'snow_monkey_entry_meta_items', 'snow_monkey_entry_meta_items_modified', 10 );
		}
	},
	9	// 優先度は9必須
);

♥ 1

いいねをした人: 居ません

[Kmical Lights]

こちらこそ世話になってます。
昨日のミートアップは知人や案件チームメンバーとYoutubeで見てました。
GitHub の フック一覧……は…今では（こういう風にまとめなきゃ良かった）って思う時とかも…色々あってですね…。と言っても「どうまとめるべきか」の答えは未だ見つかりませんが。北島さんと同じ悩みですねー。
「どう解らないのかがわからない」「どうマニュアル化すれば良いのか」と。
Happy Snow Monkeyなり、フック一覧を基に色々広がってる動きもあるのでそこは各自が広げてくれたら良いんじゃない？と思いますが。

逆引きは面白そうなネタでしたね。（作る時間も金もないけど…）

単純に遅延機能を追加しても各々の関係性がないため、たとえば１→２→３の動作のうち１のみが発火しちゃうということですね。

スクロールと合わせた視線誘導アニメーションって結構難しくて…。
本来は文字と画像を出したいとなっても、画像が出ないとか…または画像を出しては駄目なスクロール量の場合にも連続して出てしまうとか色んなパターンが考えられそうです。

また、最初の意味（視線誘導）をする場合で考えた返信なので。
知識不足と言う事も無いと思います。

同じ高さの要素の場合でもアニメーションで変化を付けたら面白いと思いますがいかがでしょうか？

同じ高さの要素や、同一座標からのアニメーションは同時発動でもタイミングをズラすだけで変化が付くのでアリですよね。
視線誘導とはならないかもですが、このアニメーション遅延効果なら、CSS の animation-delay とか transition-delay とかを設定値に加えるだけなので、そんな難しくなさそうですね。

アニメーションを考えると、Flashって良かったなあ…アクションスクリプトとか便利だったなあ…年末に消えちゃうの悲しい

♥ 0

いいねをした人: 居ません

[Kmical Lights]

今の Snow Monkey Editor は、アニメーション設定は各ブロック（各要素）で設定してると思うんですが、アニメーションの遅延になる場合のパターンは大体が下記ので設定する感じになると思います。

例) Intersection Observer などの交差法を使ったパターン：

セクションの中心が交差した（セクションの中央座標が表示された）
→ セクション内の各要素のアニメーションを順番に行う（遅延）で、各要素のアニメーションを連続化させる

例えば… 字、WORKS、写真を順番にアニメーションさせたいとなると…
それらが入っている大基のセクションに対して、イベントを発火させなければ、
それぞれの要素のアニメーションは関係性が無いので繋がらず、綺麗な連続アニメーションにならない場合があります。

ブロックエディターは、各ブロックに対してのバラバラなアニメーションは簡単に設定を作成する事は可能です。とは言え、各ブロック別にアニメーションが設定されていると、それぞれの要素（各ブロック）は関係性を持てず、トピックで想定している連続的なアニメーションにするとなった場合に、やや難しい or 複雑となる部分があると思えます。

Snow Monkey Editor の場合でも連続アニメーションなどをやる場合は、たとえばアニメーション用のセクションブロックを作り、その中の各ブロックは該当の親セクションブロックに準じさせた遅延設定にするなどをしないと難しいのではと。

…知らんけど（関西定番の後付け文句ネタは、こう言う時に使ってはいけまへんで…）

♥ 0

いいねをした人: 居ません

[Kmical Lights]

フックの引数に Setting や MailParser も追加したほうが良いかもですね。

なるほど…。追加されているといろいろ整形しやすそうですね。
急ぎではないので、また落ち着いた際に追加お願いします。

♥ 0

いいねをした人: 居ません

[Kmical Lights]

最新版 v0.10.1? で動作確認ができたのでクローズします。
※ Chrome、Safari、Firefoxは問題なしでした。（IE、Edgeは確認できず）

♥ 1

いいねをした人: 居ません

[Kmical Lights]

なるほど。
失敗時と完了時で class が別れているのも良いですねー。

一つ確認したいんですが、データの取得の value と label に別れている場合は
value のみ取得できる形でしょうか？

♥ 0

いいねをした人: 居ません

[Kmical Lights]

んー、パターンに合わせて、記載されている以上の詳細度を使用したスタイルカスタマイズをする形で対応するのが良さそうですね。

一応の解決策は理解できたので、クローズします。

♥ 1

いいねをした人: 居ません

[Kmical Lights]

やりたいパターンによって変化すると思いますが、この部分のCSSの上書きのベストプラクティスってどうするべきなんでしょう？

♥ 0

いいねをした人: 居ません

[Kmical Lights]

そうですねー。
滅多な事では並列のメニューにしないとも思えますが、孫、ひ孫の時と言うケースも存在するんですよね…。

となりますと、特定のメニュー項目の下線を外すなどの場合、フックでpost IDなどを基にして下線などの装飾クラス(data-active-menu=”true” ?)を置換するのがベストですか？

♥ 0

いいねをした人: 居ません

[Kmical Lights]

エラーメッセージだけじゃなくて何でも…の方がこの場合は有難いかも知れません。

その際に、もし可能であれば入力した内容などもフックの引数で渡せたら最高です。

と言いますのも、送信に失敗した際に「失敗したので、こちら宛にメールをお願いします。」みたいな形で、入力された項目を元に整形した文章をメール本文として、テキストエリアで表示してあげることが可能になればすごく良いと思っているからです。

そこまで複雑なものとなるとMW WP Formを使う方が良いのでしょうけど、エラーによって消えてしまうメッセージなどを再度入力させるリスクを可能であれば下げたいと考えています。
よろしくお願いします。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿