モバイル端末でもパソコン画面と同じSNSシェアボタンを表示するカスタマイズ方法 #Simplicityテーマ

モバイルでもはPCと同じSNSシェアボタンを表示したいにて以下のような質問をいただきました。

タイトルの通りなのですが、モバイルの画面の場合、SNSのシェアボタンが
小さく表示されますが、PCとおなじアイコンを表示したいのですが、
ご教示いただけないでしょうか？

よろしくお願いします。

（この記事はどのくらい共有されているか？モバイルでも見たいです！）

今回はそのアンサーとなるカスタマイズ方法を紹介したいと思います。

カスタマイズの前に

このカスタマイズを行うには以下の点に注意してください。

• Simplicity20140918時点でのカスタマイズ方法
• Simplicityでテンプレートを編集する場合は、子テーマを使用したカスタマイズを推奨

子テーマをインストールしてカスタマイズするには、まずは以下を参考に子テーマのインストールを行ってください。

Simplicityの子テーマをインストールする方法

カスタマイズ方法

では、カスタマイズを始めます。

通常モバイル画面では、SNSシェアボタンは、以下のように表示されます。

これを、常に通常のパソコン画面のシェアボタンが表示されるように変更します。

今回のカスタマイズ方法は、いろいろありますが、なるべく今後のアップデートに影響を及ばさないようにカスタマイズしたいと思います。

（例えばsingle.php、page.phpなの重要なファイルに変更を加えてしまうと、バージョンアップ後のアップデート時に、影響が出る可能性が高い。もしくは重要な変更があっても適用されていないテーマが表示されることになるので。）

子テーマにファイルの移動

まずは、親テーマから以下のファイルをコピーして子テーマフォルダ内にペーストしてください。

• sns-buttons-top.php
• sns-buttons-icon.php

sns-buttons-top.phpの編集

sns-buttons-top.phpの以下の部分を

<?php if (is_mobile()) {//モバイルの時は単なるアイコン

以下のように変更してください。

<?php if ( false ) {//モバイルの時は単なるアイコン

これを行うことで、常にパソコン画面が表示されることになります。

ただこうすると、タイトル下にもLINEボタンが表示されてしまうので以下のようになってしまいます。

これを消すには子テーマのstyle.cssに以下のように追記する必要があります。

.line-btn{
    display: none;
}

これで非表示にならない場合は、CSSセレクタを「.snsb .line-btn」などというように付け加えていくか、「none;」を「none !important;」としてもOKです。

こうするとこのようになります。

sns-buttons-icon.phpの編集

sns-buttons-icon.phpは、モバイル用アイコンボタン用のテンプレートです。

ただ、今回モバイル場面で使用しないとのことなので、これの中身を大胆に全て消してしまってから編集します。

まずはsns-buttons-icon.phpの中身をすべて削除してください。

その後、以下の一行を記入します。

<?php get_template_part('sns-buttons'); //パソコンでのSNSシェアボタン?>

これで以下のようにモバイル画面でもSNSシェアボタンが表示されます。

まとめ

カスタマイズは以上です。

今回のカスタマイズは、もし編集に失敗したとしても、大丈夫です。

子テーマを利用したカスタマイズをしている場合、コピペした子テーマのsns-buttons-top.php、sns-buttons-icon.phpを削除してしまえば元に戻ります。

子テーマは、バージョンアップ管理が楽になるとともに、カスタマイズに失敗してもすぐに戻せるという利点があります。

ですので、安心して子テーマを利用したカスタマイズを行ってみてください。