WordPressにSlack・chatworkのシェアボタンをつけてみた（Simplicityテーマ）

「IcoMoon」でSlackとchatworkのアイコン作成
「IcoMoon」からダウンロードしたファイルをサーバーにアップロード
sns-buttons-icon.phpに追記
「IcoMoon」用CSSに追記
Simplicityテーマのstyle.cssに追記
Slack・chatworkのシェアボタンの表示形式

こんにちは、連クミコです。

この「主婦の知恵いかがですか」サイトですが、このご時世にPCでのアクセス割合が8割強あります。

これは、レスポンシブ対応していないなど「スマートフォン対策」を怠っているわけではなく、どうも企業の方や作業中のエンジニアさんがよくいらっしゃっているようなんです。参照元にイントラネットらしきものが計測されていることからも、この仮設はあながち間違ってはいないのではないかと思います。

そこで、上記の方がより便利に使っていただけるように、Slackとchatworkのシェアボタンを追加してみました。

当サイトでは、構築に無料のWordPressテーマであるSimplicityを利用させていただいていますので、SimplicityテーマでのSlackとchatworkのシェアボタンの追加方法をご紹介します。

カスタマイズにあたり、下記の記事を参考にさせて頂きました、ありがとうございました。

「IcoMoon」でSlackとchatworkのアイコン作成

FacebookやTwitterのアイコンは「fontawesome」を使えばいいのですが、chatworkは「fontawesome」にはありません。さらにSlackは「fontawesome」にあるのですが、当サイトで使っている「fontawesome」のバージョンが5に対応していないため、使えません。

ということで、「IcoMoon」でSlackとchatworkのアイコンを作成しました。

1. 「IcoMoon」でSlackとchatworkのアイコンを登録・選択

まずは下記サイトにアクセスしてください。

Slackのアイコンは登録されているものがありますので、下のキャプチャの①で「slack」と検索するとでてきます。

chatworkは検索してもでてこないので、予め下記からロゴ画像をダウンロードし、SVGファイルで保存します。

その後②からSVGファイルを登録すると、キャプチャのようにchatworkのアイコンを選択できるようになります。

2. アイコン名の確認・修正

下のメニューの「Generate SVG & More」に進みます。そうすると、アイコン画像と一緒にアイコン名が表示されています。

このアイコン名は、後ほど設定するCSSのclass名にも影響しますので、わかりやすい名前をつけておくと良いです。

3. アイコンのコードの修正・ファイルのダウンロード

下のメニューの「Generate Font」に進みます。そうすると、それぞれのアイコンのコード（e93a など）が表示されています。このコードが、サイトで既に利用しているものとかぶらないように修正します。

修正の後、右下の「Download」をクリックして、アイコン用ファイルをダウンロードしてください。

「IcoMoon」からダウンロードしたファイルをサーバーにアップロード

Simplicityの場合は　ドメイン配下の　public_html＞wp-content＞themes＞simplicity2＞webfonts＞icomoon　を見ると、「fonts」というフォルダがあるのがわかるかと思います。

この「icomoon」ディレクトリに、先程ダウンロードしたファイルの中の「icomoon」フォルダ内にある「fonts」を「fonts1」という名前に変更してアップロードします。

sns-buttons-icon.phpに追記

sns-buttons-icon.phpを開くと、末尾に下記のようなソースがあります。

<li class="comments-btn-icon">
    <a href="#reply-title" class="btn-icon-link comments-btn-icon-link" rel="nofollow"><span class="social-icon fa fa-comment"></span><span class="social-count comments-count"><?php echo get_comments_number(); ?></span></a></li>
    <?php endif; //is_comments_visible?>
  </ul>
</div>
<?php endif; ?>

これを以下のように書き換えます。

<li class="comments-btn-icon">
    <a href="#reply-title" class="btn-icon-link comments-btn-icon-link" rel="nofollow"><span class="social-icon fa fa-comment"></span><span class="social-count comments-count"><?php echo get_comments_number(); ?></span></a></li>
    <?php endif; //is_comments_visible?>
<!-- slack icon -->
   <li class="slack-btn-icon">
	   <script src="https://slackbutton.herokuapp.com/widget.js" type="text/javascript"></script><a class="btn-icon-link slack-btn-icon-link" rel="nofollow" data-source="https://slackbutton.herokuapp.com/embed" href="https://slackbutton.herokuapp.com/post/new" data-url="<?php the_permalink();?>"><span class="social-icon icon-slack"></span></a>
   </li>
<!-- chatwork icon -->
   <li class="chatwork-btn-icon">
	   <script>!function(e,t){"use strict";var r,n="script",s=e.getElementsByTagName(n)[0];e.getElementById(t)||(r=e.createElement(n),r.id=t,r.src="https://widgets.chatwork.com/1.0/javascript/sdk.js",s.parentNode.insertBefore(r,s))}(document,"chatwork-widget-sdk");</script>
<a  class="btn-icon-link chatwork-btn-icon-link" href="javascript:window.open('https://www.chatwork.com/packages/share/new.php?url=<?php the_permalink(); ?>&title=<?php the_title();?>','windowname','width=350,height=450');"><span class="social-icon icon-chatwork"></span></a>
   </li>
  </ul>
</div>
<?php endif; ?>

書き換えが完了したら「コードを更新」ボタンを押して保存してください。

「IcoMoon」用CSSに追記

「IcoMoon」からダウンロードしたファイルの中にCSSがあり、下記のように書かれている部分があると思います。

.icon-chatwork:before {
  content: "\e93a";
}
.icon-slack:before {
  content: "\e93b";
}

これを　public_html＞wp-content＞themes＞simplicity2＞webfonts＞icomoon　内のstyle.cssに追記して、保存してください。

Simplicityテーマのstyle.cssに追記

Simplicityテーマのstyle.cssに以下のコードを追加してください。

/* シェアボタン */
ul.snsbs a.slack-btn-icon-link{background-color:#33B17C;}
.sns-group-viral .icon-slack:after{content: 'Slack';}
ul.snsbs a.chatwork-btn-icon-link{background-color:#F9423A;}
.sns-group-viral .icon-chatwork:after{content: 'chatwork';}

書き換えが完了したら「コードを更新」ボタンを押して保存してください。

これで全てのカスタマイズが完了です。