-
投稿者投稿
-
2021年11月25日 11:42 PM #92624
【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】いつもお世話になっております。
タイトルの通り、固定ページで1カラムやランディングページを選択した際にスクロールしても追従してくるコンテンツを表示させたいです。
表示させる内容は未定ですが、画像で作成したバナーだったりボタンだったり、たとえばメルマガへの登録や資料請求、問い合わせフォームへ誘導するCTAとして利用したいです。
イメージとしては下記のトピックのボタンのようなもので、トップページ以外でも任意の場所に出せたらと思っています。
1カラムじゃない場合は追従サイドバーのウィジェットエリアに表示させたいものを入れれば解決すると思いますが、1カラムやランディングページを選択した場合は当然追従サイドバーは表示されないので、専用のウィジェットエリアを作成するのか?何か使いやすいプラグインがあるか?と色々考えましたが、実装方法に悩んでいます。
何か良い方法はありますでしょうか?
またこちらは要望になってしまいますが、snow monkeyはブログ形式よりもコーポレートサイトやサービスサイトとして利用されるシーンも多いと思いますので、機能(ウィジェット?)として実装されたら嬉しいなと思いました。
よろしくお願い致します。
♥ 0Who liked: No user2021年11月26日 11:30 AM #92633どういうふうに表示させたいのかがわからないので、思われているものとは違うかもしれませんが、上記のトピックで共有されているコードの中にある
if ( is_front_page() ) { //トップページのみ
を消せば全ページにでるようになります。♥ 0Who liked: No user2021年11月26日 1:24 PM #92641こんにちは。
shoneさんの質問されている“追従”ではなく、“固定”になりますが、比較的簡単にCTAを設置できるものがあります。1つめは、先日発売されたSnow Monkey専用ブロックパターンプラグイン「類人猿」(有料)。
こちらにCTAを設置する機能があるようです。
画像は設置イメージ2つめは、公式ディレクトリで公開されているプラグイン「LIQUID CONNECT」。
こちらも同じような機能を持っています。いずれも日本の方がつくっているので、扱いやすいのではないかと思います。
2021年11月27日 12:14 AM #92680>キタジマさん
返信ありがとうございます。
試しにコードをmy snow monkeyに記述し、デベロッパーツールでcssもそのまま拝借して追記してみたのですが、トピックと同じバナーは表示されませんでした。
私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合にはCSSでposition: sticky;を利用して、指定したHTMLなどの要素を追従スクロールにできるものだと思っています。
ただその場合、ブロックエディタなどであらかじめコンテンツを設置できる場所にしか指定できないため、今回はmy snow monkeyに追加したコードでエディタの縛りに関係なく、より自由度高く任意の場所に任意のコンテンツを表示、CSSでそれを装飾…といった具合になっているのかと思うのですが、ここまで合っていますでしょうか?
そうなると、my snow monkeyに追加したコードとそれを装飾するCSSで完結するのかと思ったのですが実際に記述してみると表示されないので…何をどうすれば良いか見当もつかなくなってしまいました…
何を、どこに指定すれば任意の場所に追従スクロールするコンテンツを表示させることができるでしょうか?
>GONSYさん
ありがとうございます!たしかにプラグインでも似たような挙動はできるので、共有いただいたものなど導入するのも手っ取り早いですね。
プラグインのほうが使い勝手が良い場合そちらも検討してみます。
♥ 0Who liked: No user2021年11月29日 7:50 AM #92756私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合にはCSSでposition: sticky;を利用して、指定したHTMLなどの要素を追従スクロールにできるものだと思っています。
「追従」について僕と shone さんで思っているものが違うのかも?と思いました。先のトピックのものだと「初回体験」という丸バナーの部分のことだと思いますがあっていますでしょうか? その場合、これは
position: fixed
で実現されています。なので厳密に言うと「追従」ではなく「固定」になりますかね。position: sticky
は「画面端まではスクロールするけど画面端までいったら固定される」というような挙動になります。<div class="sticky"> <span class="web_rsv">...</span> /div>
の
.sticky
の部分で固定表示が実現されています。何を、どこに指定すれば任意の場所に追従スクロールするコンテンツを表示させることができるでしょうか?
この丸バナーと同じものを表示したいということであれば、先のトピックにあったコードを My Snow Monkey に追加して、あとはそれに対して CSS を適用することで同じ表示にはできます。「デベロッパーツールでcssもそのまま拝借して追記してみたのですが、トピックと同じバナーは表示されませんでした。」とのことですが、どのような CSS を追記されてなぜそれで実現できていないのかがわからないので、実際にやってみられたページを見せてもらえると原因がわかるかもしれません。
♥ 0Who liked: No user2021年12月5日 1:05 AM #93245>キタジマさん
返信いただきありがとうございます。
私の解釈が間違いで、キタジマさんの仰るように
position: fixed
でバナー等を固定表示させたいです。この丸バナーと同じものを表示したいということであれば、先のトピックにあったコードを My Snow Monkey に追加して、あとはそれに対して CSS を適用することで同じ表示にはできます。
ローカル環境でテストしているためサイト公開することができないのですが、先のトピックにあったコードをMy Snow Monkeyの最下部に追記して、CSSには同じくサンプルサイトを拝見し
.sticky { display: block; position: fixed; z-index: 100; top: 29em; left: calc(97vw - 150px); padding: 0; width: 150px; height: 150px; text-align: center; border-radius: 100px; background: #6CC7CD !important; }
と、丸々同じものを記述してみましたがどこにも丸いバナーは表示されませんでした。
何か見当違いをしていますでしょうか。。。
♥ 0Who liked: No user2021年12月5日 3:42 AM #93248何度も連投失礼致します。
GONSYさんに紹介いただいた「LIQUID CONNECT」プラグインでの実装も検討してみたのですが、任意のウィジェットエリアに設置する形なので、結局のところそのままではLPや1カラムを選んだ際には表示できないようでした。
わりと自由のきくプラグインのようなので、細かい機能実装はプラグインを利用して1カラム時(トップページ専用等?)のウィジェットエリアだけでも作成できたら解決できるのかなとも思ったのですが…
※こちらのトピックにあるプラグインに「フロントページ」項目があるのでトップページだけなら併用でもできそうでしょうか…?
my snow monkey等でいちからカスタマイズするか、プラグインを使いつつウィジェットエリアをカスタマイズするか…何か良い解決策ありましたらアドバイスいただけると嬉しいです。。
♥ 0Who liked: No user2021年12月5日 1:55 PM #93271どこにも丸いバナーは表示されませんでした
どこにも表示されないということは、そもそも .sticky な要素の追加自体がされていない可能性はないですかね?
add_action( 'snow_monkey_before_contents_inner', function() { ?> <div class="sticky"> <span class="web_rsv"> <a href="https://sample01.glasscoope.com/syokaitaiken/"><p class="font-size-large font-weight-bold">初回体験</p><p class="font-size-small">予約は<br>こちらから!</p></a> </span> </div> <?php } );
を My Snow Monkey プラグインに追加すると、表示場所は置いておいて、「予約はこちらから!」という文字がページ上に追加されるはずです。まずそれは追加されていますか? ページ上を眺めても確認できない場合はブラウザから HTML ソースを開いてページ内検索をして存在を確認してみてください。
もし目視でも HTML ソースにも存在しないということであれば追加に失敗しています。その場合は My Snow Monkey プラグインが有効化されていないというのが一番可能性が高いと思います。
♥ 0Who liked: No user2021年12月5日 6:04 PM #93293>キタジマさん
ご返信ありがとうございます。
ソースを覗いて検索してみたところ、ご指摘の通りソースが出力されていませんでした。
ちなみにMy Snow Monkeyプラグインは有効化されていて、WordPressのプラグインエディターからmy-snow-monkey.phpを確認してみても、php内には問題なくコード記述されているように見えます。
コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…?
♥ 0Who liked: No user2021年12月6日 10:25 AM #93322if ( is_front_page() ) { // トップページのみ
の上の行に1行コードを追加して、下記のようにしてみてもらえますか?
var_dump( 'あいうえお' ); if ( is_front_page() ) { // トップページのみ
これで画面上(HTML ソース上)に「あいうえお」が表示されるようであればフック自体は正しく動いていて、条件分岐の問題になります。「あいうえお」が表示されないようであればプラグインの読み込みかフック自体が効いていないのどちらかになりますかね。
コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…?
それ自体が今回の問題の原因となる可能性は無いと思いますが、プラグインエディターから編集するとシンタックスエラーになったときに編集中のコードが全部飛んでしまうことがありますしなにかあったときにもとに戻しにくくなるので個人的には推奨できません。テキストエディター等でで編集するのが良いと思います。
♥ 0Who liked: No user2021年12月7日 4:34 PM #93657>キタジマさん
お世話になっております。
いただいたコードを追記後、デベロッパーツールでトップページ内のソースも検索してみたのですが、文字等表示されていないようです。。
My Snow Monkey自体は有効になっているのですが、何か原因わかりそうでしょうか。。。
♥ 0Who liked: No user2021年12月8日 8:59 AM #93676んーとなるとやはり My Snow Monkey が実行されていないですね、なんでだろう…。
可能性は低いかもしれませんが、以下は考えられるかなと思います。
– テーマが Snow Monkey ではない(あるいは、Snow Monkey ではあるけどテーマ名を変えている)
– My Snow Monkey が複数インストールされていて、思っているのと違う My Snow Monkey を書き換えている♥ 0Who liked: No user2021年12月8日 6:58 PM #93747>キタジマさん
お世話になっております。
返信いただきありがとうございます。
テーマの確認、プラグインの停止や再インストール等も試してみたのですが変化なしでした。
その後色々試しているとMy snow Monkeyへ記述した内容が問題なく表示される場合もありまして、どうやら固定ページのテンプレートがLP系の場合にのみバナーが表示されないようでした。
私の環境では、
・ランディングページ
・ランディングページ(スリム幅)
・ランディングページ(ヘッダー・フッターあり)
と、いずれのLPテンプレートを選択してもバナーが表示されず、それ以外のテンプレートではバナーが表示されました。
また何も記述していない空の固定ページを用意して設定してみても同様でしたので、固定ページの内容は関係なく、テンプレートの種類によって何かMy snow Monkeyへの記述内容と干渉したり優先度の問題で表示されないのでは?と思っております。
私に調べられるのはここまででした。。。
♥ 0Who liked: No user2021年12月9日 7:30 AM #93770あーなるほど! フックの場所を
snow_monkey_prepend_body
かwp_footer
にするとどうでしょうか?snow_monkey_before_contents_inner
はランディングページ系のページテンプレートでは実行されないのでした。♥ 0Who liked: No user2021年12月13日 8:24 PM #94121 -
投稿者投稿
- トピック「LPや1カラム時に追従スクロールするコンテンツを表示したい」には新しい返信をつけることはできません。