WordPressテーマSANGOの質問

記事タイトル下の円形シェアボタンを、PCでは表示し、スマートフォンでは表示しないように

アバター
イカ男

お世話になっております。
記事タイトル下の円形シェアボタンを、PCでは表示し、スマートフォンでは表示しないようにすることは可能でしょうか。

カスタマイザーでデザインや細かな設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2018/09/05
@media screen and (max-width:768px) { 
  .article-header .fab-btn {
    display: none;
  }
}/*Do not delete*/

というCSSを追加することで768px以下のデバイスでのみボタンを非表示にすることができます。

アバター
イカ男
2018/09/05

さっそくのご回答ありがとうございます。
サイトを見ていただければわかるかと思うのですが、PC版では丸いシェアボタンを画面右下に固定表示するようにカスタマイズしております。
逆に、スマホやタブレットなど、フッター固定メニューが表示される条件下では、シェアボタンは固定メニュー内にありますので、丸いボタンは消すようにしたいのです。
固定メニューの表示・非表示と連動して、シェアボタンの表示・非表示を切り替える方法はないでしょうか?

サルワカくん
サルワカくん
2018/09/06

なるほど。
それでは先程のCSSは一旦削除したうえで、以下の手順を踏んで頂くのが良いと思います。
①子テーマの中に、partsという名前のフォルダーを作成し、さらにその中にsingleという名前のフォルダーを作成します。
②作成したsingleフォルダーの中に、親テーマからentry-header.phpというファイルを複製してきます(ファイルの内容は、一旦親テーマのものと全く同じにしてください)。
③子テーマのparts/single内のentry-header.phpを開き、18行目の

if(!get_option('no_fab')) :

if(!get_option('no_fab') || !wp_is_mobile() ) :

に書き換え。
これで、デバイス判定となり、タブレット、スマホ表示でのみ「フッター固定メニューが表示&円形シェアボタンは非表示」となるかと思います。

アバター
イカ男
2018/09/06

教えていただいた通りに操作したところ、無事できました!
当方、PORIPUを使用しておりentry-header.phpは複製済みでした。
コード内のif(!get_option(‘no_fab’) || !wp_is_mobile() ) :
の || を && にしたところ、うまく表示切替できるようになりました。
ありがとうございました!

サルワカくん
サルワカくん
2018/09/06

うまくいったようで良かったです!ご報告ありがとうございました。