[ 解決済 ] SNSボタンをヘッダー部に設置したい

VWSとは フォーラム Lightning [ 解決済 ] SNSボタンをヘッダー部に設置したい

[ 解決済 ] SNSボタンをヘッダー部に設置したい

  • このトピックには8件の返信、3人の参加者があり、最後にうなこにより2ヶ月、 1週前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #65709

    takeshi819
    参加者

    ■ WordPress のバージョン
    6.0

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    14.20.3

    ■ Pro Unit のバージョン
    9.76.0.1

    ■ スキンの種類
    Origin III

    ■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
    確認しました。

    ■ 期待する動作
    SNSボタンをヘッダーに設置したいです。
    具体的にはLINEのお友達追加ボタンを表示させ、目立たせたく、ボタンをひとつだけ設置したいです。
    特にモバイル表示で、ヘッダーロゴの右隣りに表示させたいです。

    宜しくお願いします。

    ■ 自分で試した事
    こちらを試しました。

    ヘッダー上部設定

    ■ 症状が発生するブラウザ
    chrome

    ■ 実際の症状
    ヘッダー部分にSNSアイコンが表示出来ません。

    #65713

    うなこ
    モデレーター

    具体的にはLINEのお友達追加ボタンを表示させ、目立たせたく、ボタンをひとつだけ設置したいです。
    特にモバイル表示で、ヘッダーロゴの右隣りに表示させたいです。

    いろいろ方法があると思いますが、一つの案を提案します。

    【01】「外観」→「カスタマイズ」の「Lightning ヘッダー設定」を「ヘッダーウィジェットあり & ナビ貫通」にします。
    【02】「ウィジェット」→「ヘッダー右側エリア」に「カスタムHTML」ブロックを配置して、LINEのお友達追加ボタンのソースコードを貼ります。
    【03】「カスタマイズ」の「追加 CSS」に以下のCSSを貼り付けてください。

    /* ヘッダーコンテナ */
    @media (max-width: 991.98px){
    .site-header-container {
        display: flex;
        justify-content: space-around;
    }
    }
    /* ヘッダー右側ウィジェットを表示 */
    @media (max-width: 991.98px){
    .site-header-sub {
        display: block;
        float: none;
        padding: 0;
    }
    }

    CSSはもう少し調整がいるかもしれませんが、いかがでしょうか。

    ★もし他の案がある方はいろいろ参考になりますので、ぜひご提案お願いいたします。★

    • この返信は2ヶ月、 1週前にうなこが編集しました。
    #65735

    うなこさんが回答されたやり方でオッケーなら、たぶんそれがベストだと思います。

    ★もし他の案がある方はいろいろ参考になりますので、ぜひご提案お願いいたします。★

    ヘッダーレイアウトはナビゲーション回り込みのままがいいんだよ~」って方向けのやり方を書きます。

    まず、子テーマの functions.php などに以下のフックを追加します。

    add_action( 'lightning_site_header_logo_after', 'my_lightning_site_header_logo_after' );
    
    function my_lightning_site_header_logo_after(){
        echo '<div class="line_friend_add">**********</div>';
    };

    ********** は LINE のソースコードです。

    そして、子テーマの CSS などに ↓ こんなかんじの行を追加します。

    .line_friend_add {
        position: absolute;
        top: 15px;
        right: 10px;
        width: 120px;
    }
    
    @media (min-width: 992px) {
    .line_friend_add {
        display: none;
    }
    }

    できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦!

    できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説

    #65747

    takeshi819
    参加者

    うなこさん
    ご回答ありがとうございました。

    ご提案頂いた内容を行ってみました。
    PCでは期待通りのLINEお友達追加ボタンを追加する事が出来ました。
    しかしモバイルでは、ボタンが表示されませんでした。
    スマホでは表示できないでしょうか?

    対馬さん
    ご回答ありがとうございました。
    子テーマはまだ使ったことがなく、試すことが出来ませんでした。
    申し訳ございません。もう少しレベルアップしたら
    子テーマもトライしたいと思っております。

    #65750

    うなこ
    モデレーター

    しかしモバイルでは、ボタンが表示されませんでした。

    「カスタマイズ」の「追加 CSS」に以下のCSSは貼っていますか?

    /* ヘッダーコンテナ */
    @media (max-width: 991.98px){
    .site-header-container {
        display: flex;
        justify-content: space-around;
    }
    }
    /* ヘッダー右側ウィジェットを表示 */
    @media (max-width: 991.98px){
    .site-header-sub {
        display: block;
        float: none;
        padding: 0;
    }
    }

    もし差し支えなければ、サイトのURLを貼っていただくと解決が早いかもしれません

    #65756

    takeshi819
    参加者

    うなこさん

    ご連絡ありがとうございます。

    >「カスタマイズ」の「追加 CSS」に以下のCSSは貼っていますか?
    はい。貼り付けしましたがスマホでは表示されませんでした。
    iPhone12、ios15.5

    サイトはこちらになります。

    ホーム

    #65757

    うなこ
    モデレーター

    ご連絡ありがとうございます。
    ソースを確認しましたところ、追加CSSにかいてある一部の閉じカッコがなくて、そこから下のCSSが効いていないようです。

    具体的には「Googleカレンダー(PC表示)」の閉じカッコがありません。

    【修正前】

    /* Googleカレンダー(PC表示) */
    
    @media (min-width: 960px) {
    
    .googleCalender iframe {
    height:600px;
    }

    【修正後】

    /* Googleカレンダー(PC表示) */
    
    @media (min-width: 960px) {
    
    .googleCalender iframe {
    height:600px;
    }
    }

    ここを修正しますと表示されると思います。

    #65758

    takeshi819
    参加者

    うなこさん

    早速ありがとうございました。
    こちらの確認不足で申し訳ございません

    希望通りの事が出来ました。
    いつも助けていただき感謝しております。

    以上、よろしくお願いいたします。

    #65760

    うなこ
    モデレーター

    解決できて良かったです!
    もしよければ 子テーマでのアイディアを出していただいた対馬さんの回答の所にベストアンサーをつけるボタンが表示されていると思いますので、表示されていたら是非ベストアンサーをつけていただけますと嬉しいです。

    わたしはスタッフになりますので、 モデレーター以上にはベストアンサーが付与できなくなっております。

    • この返信は2ヶ月、 1週前にうなこが編集しました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。