- このトピックには18件の返信、3人の参加者があり、最後に
により2年、 11ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】
【当該サイトのURL】いつもお世話になっております。
タイトルの通り、固定ページで1カラムやランディングページを選択した際にスクロールしても追従してくるコンテンツを表示させたいです。
表示させる内容は未定ですが、画像で作成したバナーだったりボタンだったり、たとえばメルマガへの登録や資料請求、問い合わせフォームへ誘導するCTAとして利用したいです。
イメージとしては下記のトピックのボタンのようなもので、トップページ以外でも任意の場所に出せたらと思っています。
1カラムじゃない場合は追従サイドバーのウィジェットエリアに表示させたいものを入れれば解決すると思いますが、1カラムやランディングページを選択した場合は当然追従サイドバーは表示されないので、専用のウィジェットエリアを作成するのか？何か使いやすいプラグインがあるか？と色々考えましたが、実装方法に悩んでいます。
何か良い方法はありますでしょうか？
またこちらは要望になってしまいますが、snow monkeyはブログ形式よりもコーポレートサイトやサービスサイトとして利用されるシーンも多いと思いますので、機能（ウィジェット？）として実装されたら嬉しいなと思いました。
よろしくお願い致します。
Who liked: No userどういうふうに表示させたいのかがわからないので、思われているものとは違うかもしれませんが、上記のトピックで共有されているコードの中にある
if ( is_front_page() ) { //トップページのみを消せば全ページにでるようになります。Who liked: No user>キタジマさん
返信ありがとうございます。
試しにコードをmy snow monkeyに記述し、デベロッパーツールでcssもそのまま拝借して追記してみたのですが、トピックと同じバナーは表示されませんでした。
私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合にはCSSでposition: sticky;を利用して、指定したHTMLなどの要素を追従スクロールにできるものだと思っています。
ただその場合、ブロックエディタなどであらかじめコンテンツを設置できる場所にしか指定できないため、今回はmy snow monkeyに追加したコードでエディタの縛りに関係なく、より自由度高く任意の場所に任意のコンテンツを表示、CSSでそれを装飾…といった具合になっているのかと思うのですが、ここまで合っていますでしょうか？
そうなると、my snow monkeyに追加したコードとそれを装飾するCSSで完結するのかと思ったのですが実際に記述してみると表示されないので…何をどうすれば良いか見当もつかなくなってしまいました…
何を、どこに指定すれば任意の場所に追従スクロールするコンテンツを表示させることができるでしょうか？
＞GONSYさん
ありがとうございます！たしかにプラグインでも似たような挙動はできるので、共有いただいたものなど導入するのも手っ取り早いですね。
プラグインのほうが使い勝手が良い場合そちらも検討してみます。
Who liked: No user私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合には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 を追記されてなぜそれで実現できていないのかがわからないので、実際にやってみられたページを見せてもらえると原因がわかるかもしれません。
Who liked: No user>キタジマさん
返信いただきありがとうございます。
私の解釈が間違いで、キタジマさんの仰るように
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; }と、丸々同じものを記述してみましたがどこにも丸いバナーは表示されませんでした。
何か見当違いをしていますでしょうか。。。
Who liked: No user何度も連投失礼致します。
GONSYさんに紹介いただいた「LIQUID CONNECT」プラグインでの実装も検討してみたのですが、任意のウィジェットエリアに設置する形なので、結局のところそのままではLPや1カラムを選んだ際には表示できないようでした。
わりと自由のきくプラグインのようなので、細かい機能実装はプラグインを利用して1カラム時（トップページ専用等？）のウィジェットエリアだけでも作成できたら解決できるのかなとも思ったのですが…
※こちらのトピックにあるプラグインに「フロントページ」項目があるのでトップページだけなら併用でもできそうでしょうか…？
my snow monkey等でいちからカスタマイズするか、プラグインを使いつつウィジェットエリアをカスタマイズするか…何か良い解決策ありましたらアドバイスいただけると嬉しいです。。
Who liked: No userどこにも丸いバナーは表示されませんでした
どこにも表示されないということは、そもそも .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 プラグインが有効化されていないというのが一番可能性が高いと思います。
Who liked: No user>キタジマさん
ご返信ありがとうございます。
ソースを覗いて検索してみたところ、ご指摘の通りソースが出力されていませんでした。
ちなみにMy Snow Monkeyプラグインは有効化されていて、WordPressのプラグインエディターからmy-snow-monkey.phpを確認してみても、php内には問題なくコード記述されているように見えます。
コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…？
Who liked: No userif ( is_front_page() ) { // トップページのみの上の行に1行コードを追加して、下記のようにしてみてもらえますか？
var_dump( 'あいうえお' ); if ( is_front_page() ) { // トップページのみこれで画面上（HTML ソース上）に「あいうえお」が表示されるようであればフック自体は正しく動いていて、条件分岐の問題になります。「あいうえお」が表示されないようであればプラグインの読み込みかフック自体が効いていないのどちらかになりますかね。
コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…？
それ自体が今回の問題の原因となる可能性は無いと思いますが、プラグインエディターから編集するとシンタックスエラーになったときに編集中のコードが全部飛んでしまうことがありますしなにかあったときにもとに戻しにくくなるので個人的には推奨できません。テキストエディター等でで編集するのが良いと思います。
Who liked: No user＞キタジマさん
お世話になっております。
いただいたコードを追記後、デベロッパーツールでトップページ内のソースも検索してみたのですが、文字等表示されていないようです。。
My Snow Monkey自体は有効になっているのですが、何か原因わかりそうでしょうか。。。
Who liked: No userんーとなるとやはり My Snow Monkey が実行されていないですね、なんでだろう…。
可能性は低いかもしれませんが、以下は考えられるかなと思います。
– テーマが Snow Monkey ではない（あるいは、Snow Monkey ではあるけどテーマ名を変えている）
– My Snow Monkey が複数インストールされていて、思っているのと違う My Snow Monkey を書き換えているWho liked: No user＞キタジマさん
お世話になっております。
返信いただきありがとうございます。
テーマの確認、プラグインの停止や再インストール等も試してみたのですが変化なしでした。
その後色々試しているとMy snow Monkeyへ記述した内容が問題なく表示される場合もありまして、どうやら固定ページのテンプレートがLP系の場合にのみバナーが表示されないようでした。
私の環境では、
・ランディングページ
・ランディングページ（スリム幅）
・ランディングページ（ヘッダー・フッターあり）
と、いずれのLPテンプレートを選択してもバナーが表示されず、それ以外のテンプレートではバナーが表示されました。
また何も記述していない空の固定ページを用意して設定してみても同様でしたので、固定ページの内容は関係なく、テンプレートの種類によって何かMy snow Monkeyへの記述内容と干渉したり優先度の問題で表示されないのでは？と思っております。
私に調べられるのはここまででした。。。
Who liked: No userあーなるほど！ フックの場所を
snow_monkey_prepend_bodyかwp_footerにするとどうでしょうか？snow_monkey_before_contents_innerはランディングページ系のページテンプレートでは実行されないのでした。Who liked: No user
- トピック「LPや1カラム時に追従スクロールするコンテンツを表示したい」には新しい返信をつけることはできません。