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

[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アイコンが表示出来ません。

[うなこ]

具体的には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はもう少し調整がいるかもしれませんが、いかがでしょうか。

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

• この返信は1年、 10ヶ月前にうなこが編集しました。

[対馬 俊彦]

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

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

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

まず、子テーマの 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）カスタマイズ方法徹底解説

[takeshi819]

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

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

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

[うなこ]

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

「カスタマイズ」の「追加 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を貼っていただくと解決が早いかもしれません

[takeshi819]

うなこさん

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

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

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

ホーム

[うなこ]

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

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

【修正前】

/*　Googleカレンダー（PC表示） */

@media (min-width: 960px) {

.googleCalender iframe {
height:600px;
}

【修正後】

/*　Googleカレンダー（PC表示） */

@media (min-width: 960px) {

.googleCalender iframe {
height:600px;
}
}

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

[takeshi819]

うなこさん

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

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

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

[うなこ]

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

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

• この返信は1年、 10ヶ月前にうなこが編集しました。

[投稿者]

投稿