LPや1カラム時に追従スクロールするコンテンツを表示したい

0
いいねをした人: 居ません
  • このトピックには18件の返信、3人の参加者があり、最後にshoneにより2年、 3ヶ月前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全19件中)
  • 投稿者
    投稿
  • #92624
    shone
    参加者
    44

    【お使いの Snow Monkey のバージョン】
    【お使いの Snow Monkey Blocks のバージョン】
    【お使いの Snow Monkey Editor のバージョン】
    【お使いのブラウザ】
    【当該サイトのURL】

     

    いつもお世話になっております。

    タイトルの通り、固定ページで1カラムやランディングページを選択した際にスクロールしても追従してくるコンテンツを表示させたいです。

     

    表示させる内容は未定ですが、画像で作成したバナーだったりボタンだったり、たとえばメルマガへの登録や資料請求、問い合わせフォームへ誘導するCTAとして利用したいです。

    イメージとしては下記のトピックのボタンのようなもので、トップページ以外でも任意の場所に出せたらと思っています。

     

     

    1カラムじゃない場合は追従サイドバーのウィジェットエリアに表示させたいものを入れれば解決すると思いますが、1カラムやランディングページを選択した場合は当然追従サイドバーは表示されないので、専用のウィジェットエリアを作成するのか?何か使いやすいプラグインがあるか?と色々考えましたが、実装方法に悩んでいます。

    何か良い方法はありますでしょうか?

     

    またこちらは要望になってしまいますが、snow monkeyはブログ形式よりもコーポレートサイトやサービスサイトとして利用されるシーンも多いと思いますので、機能(ウィジェット?)として実装されたら嬉しいなと思いました。

     

    よろしくお願い致します。

    0
    いいねをした人: 居ません
    #92633
    キタジマ タカシ
    参加者
    2234

    どういうふうに表示させたいのかがわからないので、思われているものとは違うかもしれませんが、上記のトピックで共有されているコードの中にある if ( is_front_page() ) { //トップページのみ を消せば全ページにでるようになります。

    0
    いいねをした人: 居ません
    #92641
    GONSY
    参加者
    803

    こんにちは。
    shoneさんの質問されている“追従”ではなく、“固定”になりますが、比較的簡単にCTAを設置できるものがあります。

    1つめは、先日発売されたSnow Monkey専用ブロックパターンプラグイン「類人猿」(有料)。
    こちらにCTAを設置する機能があるようです。


    画像は設置イメージ

    2つめは、公式ディレクトリで公開されているプラグイン「LIQUID CONNECT」。
    こちらも同じような機能を持っています。

    いずれも日本の方がつくっているので、扱いやすいのではないかと思います。

    1
    いいねをした人:
    #92680
    shone
    参加者
    44

    >キタジマさん

     

    返信ありがとうございます。

    試しにコードをmy snow monkeyに記述し、デベロッパーツールでcssもそのまま拝借して追記してみたのですが、トピックと同じバナーは表示されませんでした。

     

    私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合にはCSSでposition: sticky;を利用して、指定したHTMLなどの要素を追従スクロールにできるものだと思っています。

    ただその場合、ブロックエディタなどであらかじめコンテンツを設置できる場所にしか指定できないため、今回はmy snow monkeyに追加したコードでエディタの縛りに関係なく、より自由度高く任意の場所に任意のコンテンツを表示、CSSでそれを装飾…といった具合になっているのかと思うのですが、ここまで合っていますでしょうか?

    そうなると、my snow monkeyに追加したコードとそれを装飾するCSSで完結するのかと思ったのですが実際に記述してみると表示されないので…何をどうすれば良いか見当もつかなくなってしまいました…

    何を、どこに指定すれば任意の場所に追従スクロールするコンテンツを表示させることができるでしょうか?

     

    >GONSYさん

     

    ありがとうございます!たしかにプラグインでも似たような挙動はできるので、共有いただいたものなど導入するのも手っ取り早いですね。

    プラグインのほうが使い勝手が良い場合そちらも検討してみます。

    0
    いいねをした人: 居ません
    #92756
    キタジマ タカシ
    参加者
    2234

    私に知識が無く理解が追い付いていないのですが、単純に要素を追従スクロールしたい場合には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 を追記されてなぜそれで実現できていないのかがわからないので、実際にやってみられたページを見せてもらえると原因がわかるかもしれません。

    0
    いいねをした人: 居ません
    #93245
    shone
    参加者
    44

    >キタジマさん

     

    返信いただきありがとうございます。

    私の解釈が間違いで、キタジマさんの仰るように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;
    }

     

    と、丸々同じものを記述してみましたがどこにも丸いバナーは表示されませんでした。

    何か見当違いをしていますでしょうか。。。

    0
    いいねをした人: 居ません
    #93248
    shone
    参加者
    44

    何度も連投失礼致します。

    GONSYさんに紹介いただいた「LIQUID CONNECT」プラグインでの実装も検討してみたのですが、任意のウィジェットエリアに設置する形なので、結局のところそのままではLPや1カラムを選んだ際には表示できないようでした。

    わりと自由のきくプラグインのようなので、細かい機能実装はプラグインを利用して1カラム時(トップページ専用等?)のウィジェットエリアだけでも作成できたら解決できるのかなとも思ったのですが…

     

    ※こちらのトピックにあるプラグインに「フロントページ」項目があるのでトップページだけなら併用でもできそうでしょうか…?

     

    my snow monkey等でいちからカスタマイズするか、プラグインを使いつつウィジェットエリアをカスタマイズするか…何か良い解決策ありましたらアドバイスいただけると嬉しいです。。

    0
    いいねをした人: 居ません
    #93271
    キタジマ タカシ
    参加者
    2234

    どこにも丸いバナーは表示されませんでした

    どこにも表示されないということは、そもそも .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 プラグインが有効化されていないというのが一番可能性が高いと思います。

    0
    いいねをした人: 居ません
    #93293
    shone
    参加者
    44

    >キタジマさん

     

    ご返信ありがとうございます。

    ソースを覗いて検索してみたところ、ご指摘の通りソースが出力されていませんでした。

     

    ちなみにMy Snow Monkeyプラグインは有効化されていて、WordPressのプラグインエディターからmy-snow-monkey.phpを確認してみても、php内には問題なくコード記述されているように見えます。

     

     

    コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…?

    0
    いいねをした人: 居ません
    #93322
    キタジマ タカシ
    参加者
    2234
    if ( is_front_page() ) { // トップページのみ
    

    の上の行に1行コードを追加して、下記のようにしてみてもらえますか?

    var_dump( 'あいうえお' );
    if ( is_front_page() ) { // トップページのみ
    

    これで画面上(HTML ソース上)に「あいうえお」が表示されるようであればフック自体は正しく動いていて、条件分岐の問題になります。「あいうえお」が表示されないようであればプラグインの読み込みかフック自体が効いていないのどちらかになりますかね。

    コードを追加するときもこのWordPressのプラグインエディターから編集しているのですが、それがまずかったりしますでしょうか…?

    それ自体が今回の問題の原因となる可能性は無いと思いますが、プラグインエディターから編集するとシンタックスエラーになったときに編集中のコードが全部飛んでしまうことがありますしなにかあったときにもとに戻しにくくなるので個人的には推奨できません。テキストエディター等でで編集するのが良いと思います。

    0
    いいねをした人: 居ません
    #93657
    shone
    参加者
    44

    >キタジマさん

     

    お世話になっております。

    いただいたコードを追記後、デベロッパーツールでトップページ内のソースも検索してみたのですが、文字等表示されていないようです。。

    My Snow Monkey自体は有効になっているのですが、何か原因わかりそうでしょうか。。。

    0
    いいねをした人: 居ません
    #93676
    キタジマ タカシ
    参加者
    2234

    んーとなるとやはり My Snow Monkey が実行されていないですね、なんでだろう…。

    可能性は低いかもしれませんが、以下は考えられるかなと思います。

    – テーマが Snow Monkey ではない(あるいは、Snow Monkey ではあるけどテーマ名を変えている)
    – My Snow Monkey が複数インストールされていて、思っているのと違う My Snow Monkey を書き換えている

    0
    いいねをした人: 居ません
    #93747
    shone
    参加者
    44

    >キタジマさん

     

    お世話になっております。

    返信いただきありがとうございます。

     

    テーマの確認、プラグインの停止や再インストール等も試してみたのですが変化なしでした。

    その後色々試しているとMy snow Monkeyへ記述した内容が問題なく表示される場合もありまして、どうやら固定ページのテンプレートがLP系の場合にのみバナーが表示されないようでした。

    私の環境では、

    ・ランディングページ

    ・ランディングページ(スリム幅)

    ・ランディングページ(ヘッダー・フッターあり)

    と、いずれのLPテンプレートを選択してもバナーが表示されず、それ以外のテンプレートではバナーが表示されました。

     

    また何も記述していない空の固定ページを用意して設定してみても同様でしたので、固定ページの内容は関係なく、テンプレートの種類によって何かMy snow Monkeyへの記述内容と干渉したり優先度の問題で表示されないのでは?と思っております。

    私に調べられるのはここまででした。。。

    0
    いいねをした人: 居ません
    #93770
    キタジマ タカシ
    参加者
    2234

    あーなるほど! フックの場所を snow_monkey_prepend_bodywp_footer にするとどうでしょうか? snow_monkey_before_contents_inner はランディングページ系のページテンプレートでは実行されないのでした。

    0
    いいねをした人: 居ません
    #94121
    shone
    参加者
    44

    >キタジマさん

     

    ご確認いただきありがとうございます。

     

    snow_monkey_prepend_bodywp_footerどちらでもバナー表示されました!

     

    ページレイアウトごとに実行されるフックが違ったのですね。勉強になりました。

    GONSYさんに紹介いただいた「LIQUID CONNECT」プラグインのほうではまだ表示できていませんが、こちらもフックで解決できる問題でしょうか?

    ともかく、当初の目的通りの表示はできました。ありがとうございました。

    1
    いいねをした人:
15件の投稿を表示中 - 1 - 15件目 (全19件中)
  • トピック「LPや1カラム時に追従スクロールするコンテンツを表示したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。