本文下のLINEシェアボタンをPCでも表示させたい

PR 2016/11/16

このトピックには5件の返信、2人の参加者があり、最後にわいひらにより8年前に更新されました。

5件の返信スレッドを表示中

投稿者

投稿
- 2016年11月16日 7:48 PM #47500
  
  おざわ
  ゲスト
  
  お世話になります。
  私のブログは完全レスポンシブをオンにして、キャッシュ系プラグインを使用しています。
  この状態だとスマホでグーグル検索からページへ訪れた場合もPC用として作成されたキャッシュが表示されるため、記事下部にLINEシェアボタン（バイラル）が表示されません。
  そこでPCでもLINEシェアボタンが表示されるようにする方法を教えていただけないでしょうか。
  よろしくお願いします。
- 2016年11月16日 9:37 PM #47511
  Hidekichi
  ゲスト
  sns-buttons-icon.phpの
```
<?php if ( is_line_btn_visible() )://LINEボタンを表示するか ?>
  <?php if (is_mobile()): //モバイルの時のみ表示?>
    <li class="line-btn-icon"><a href="//line.me/R/msg/text/?<?php echo strip_tags( get_the_title() ); ?>%0D%0A<?php the_permalink(); ?>" class="btn-icon-link line-btn-icon-link" target="blank" rel="nofollow"><span class="social-icon icon-line"></span></a></li>
  <?php endif; ?>
<?php endif; ?>
```
  の
```
  <?php /*if (is_mobile()): //モバイルの時のみ表示*/?> これ
  //...
  <?php /*endif;*/ ?>　これ
```
  の2つを上記のようにコメントアウトすればひとまずPCでも表示できるようになると思います。後はバイラルのcssがあればバイラルで表示できると思いますが、それがあったかどうかは僕は記憶にありません。
  もしなければ子テーマstyle.cssにバイラルのline用スタイルを追加すればよいかと思います。
  
  sns-buttons-icon.phpは親テーマのファイルなのでアップデートのたびに元に戻るため、その都度修正する必要があります。どうしてPCの時にボタンが表示されないかはわいひらさんが答えてくれるでしょう。
- 2016年11月16日 9:41 PM #47513
  
  わいひら
  キーマスター
  
  僕も、「LINEボタンをパソコンでも表示させなきゃな」と以前から思っていて、実行していなかったので、良い機会なので、次のバージョンで全て表示するようにしたいと思います。
  とりあえず、表示されるようにしたものをアップしてみました。試してみてもらえると幸いです。
  https://wp-simplicity.com/wp-content/uploads/2016/11/simplicity2-10.zip
  
  CSSのキャッシュが残っていると、正常表示されないかもしれません。
  ですので表示がおかしいときは、テーマをインストールしたら、ブラウザで再読み込み、もしくは、ブラウザキャッシュの削除を行ってみてください。
- 2016年11月16日 9:42 PM #47514
  
  わいひら
  キーマスター
  
  あら、ポストしたらhidekichiさんが書き込んだ後でした。
- 2016年11月18日 4:30 PM #47595
  
  おざわ
  ゲスト
  
  お返事が遅れて大変申し訳ありません。
  Hidekichi様、わいひら様、ご教示いただきありがとうございます。
  sns-buttons-icon.phpに当該部分があったんですね、勉強になります。
  今から表示版をアップロードしつつ、どの辺の記述が変わっているのかも合わせて確認してみます。
  ありがとうございました。
- 2016年11月18日 6:05 PM #47605
  わいひら
  キーマスター
  #47513のやつは、表示させるようにしたけど、
  なんか動作がイマイチだったので、最新版ではCSSでLINEボタンが非表示になっています。
  表示させるには、以下の例のようなCSSを書いて表示させる必要があるかもしれません。
```
.sns-buttons .line-btn, 
.sns-buttons .line-balloon-btn {
    display: block;
}
```
  ただ、パソコンでLINEボタンをクリックした時の動作自体がこんなので良いのかは、いまだによくわかんないです。
投稿者

投稿