マストドンのシェアボタンをWordPressテーマ「Simplicity2」に設置する方法

この記事は約4分で読めます。

うちのブログに Mastoshare(マストシェア)のボタンを設置して、しばらく経ちます。

Mastoshare
Mastoshare(マストシェア)とはTwitter共有ボタンのようなMastodon共有ボタンです。簡単に設置が出来ます。
登録不要のマストドンのシェアボタンを作って更新した - Qiita
久しぶりのQiitaなので初投稿です。 #作った経緯 皆さん、マストドンブーム(?)が落ち着きましたが、いかがでしょうか。 私はTwitterからすっかりマストドンに生活スタイルが変わりました。 マストドン、楽しいですよね。 でも...

うちで使ってるテーマ「Simplicity2」に標準対応して欲しいなと思うわけです。しかし、まだまだお時間がかかりそうだなぁ、、、と考えていたところ、こんな記事を見かけました。ありがたい!

WordPressテーマのSimplicityにマストドンのシェアボタンを設置してみた
mastodon.social - Mastodon以前に何度かマストドンという分散型のSNSをご紹介いたしました。そのマストドンのシェアボタンの機能を作成した方がいたので、当サイトでも設置してみることにしました。sns-buttons.p

おぉ、早速!と思ったのも束の間、実際にやってみると二時間くらいハマってしまったので、その悔しさをバネにノウハウ共有したいと思います。

2018年7月にテーマを Cocoon に変更しました。そのため、現在ではシェアボタンを付けていない点、ご了承下さい。
スポンサーリンク

WordPressテーマ「Simplicity2」

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

非常に便利で多機能です。というか、匠はこれ以外はほとんど使ったこと無いです(汗

スポンサーリンク

前提

このテーマのカスタマイズ設定のうち、「SNS」に関する設定が下記のとき限定の設定とご理解下さい。汎用的ではありません。

マストドン:simplicity2 SNS設定の前提

PC向けにバイラルタイプを選択されている方は下記のページを参考にされる方が良いと思います。

WordPressテーマのSimplicityにマストドンのシェアボタンを設置してみた
mastodon.social - Mastodon以前に何度かマストドンという分散型のSNSをご紹介いたしました。そのマストドンのシェアボタンの機能を作成した方がいたので、当サイトでも設置してみることにしました。sns-buttons.p
スポンサーリンク

設置方法

PHPファイルのカスタマイズ

/wp-content/themes/simplicity2/sns-buttons-balloon.php

下記のファイルのうち、</ul> がある二つ前の行に下記を挿入します。

<li class="mastodon-btn-icon"><a target="_blank" href="https://mastoshare.net/post.php" target="blank" class="balloon-btn-link mastdon-balloon-btn-link" rel="nofollow"><span class="icon-mastodon"></span></a></li>

CSSファイルのカスタマイズ

PC向け

/wp-content/themes/simplicity2/style.css の最下部に下記のコードを追加しました。

/************************************
** Mastodonシェアボタン向けCSS
************************************/
li.mastodon-btn-icon a.balloon-btn-link{
    background-color:#313543;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration-line: none;
}

span.icon-mastodon::before {
    content: "M";
}

ul.snsp li a span.icon-mastodon-square{
  font-size:34px;
  position: relative;
}

モバイル向け

/wp-content/themes/simplicity2/mobile.css の最下部に下記のコードを追加しました。

/************************************
** Mastodonシェアボタン向けCSS
************************************/
ul.snsbs li.mastodon-btn-icon a span:before {
    content: "M";
    font-family: Arial, sans-serif;
    font-weight: bold;
}
スポンサーリンク

実行結果

PCブラウザの場合

マストドン:simplicity2 snsボタン設置結果(PC)

※画面はChromeでの表示になります。

スマホの場合

マストドン:simplicity2 snsボタン設置結果(mobile)

※画面はiPhoneのSafariでの表示になります。

スポンサーリンク

おわりに

これらはあくまで Simplicity 2 が正式対応してくれるまでの繋ぎですし、個別カスタマイズです。

恐らくなんですが、テーマをアップデートする度に追記しないといけない点は注意かな、と考えます。

早くもっとマストドンがメジャーになって、キッチリ対応して欲しいですね!