@media screen and (max-width:768px) {
.article-header .fab-btn {
display: none;
}
}/*Do not delete*/
というCSSを追加することで768px以下のデバイスでのみボタンを非表示にすることができます。
さっそくのご回答ありがとうございます。
サイトを見ていただければわかるかと思うのですが、PC版では丸いシェアボタンを画面右下に固定表示するようにカスタマイズしております。
逆に、スマホやタブレットなど、フッター固定メニューが表示される条件下では、シェアボタンは固定メニュー内にありますので、丸いボタンは消すようにしたいのです。
固定メニューの表示・非表示と連動して、シェアボタンの表示・非表示を切り替える方法はないでしょうか?
なるほど。
それでは先程の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() ) :
に書き換え。
これで、デバイス判定となり、タブレット、スマホ表示でのみ「フッター固定メニューが表示&円形シェアボタンは非表示」となるかと思います。
教えていただいた通りに操作したところ、無事できました!
当方、PORIPUを使用しておりentry-header.phpは複製済みでした。
コード内のif(!get_option(‘no_fab’) || !wp_is_mobile() ) :
の || を && にしたところ、うまく表示切替できるようになりました。
ありがとうございました!
うまくいったようで良かったです!ご報告ありがとうございました。
WordPressテーマSANGOの質問
記事タイトル下の円形シェアボタンを、PCでは表示し、スマートフォンでは表示しないように
お世話になっております。
記事タイトル下の円形シェアボタンを、PCでは表示し、スマートフォンでは表示しないようにすることは可能でしょうか。