WEB DESIGN

プラグインなし・Bluesky対応!WordPressにSNSシェアボタンを表示する方法

2024-03-25 20:09
Webデザイン

SNSボタン

先日、Blueskyにもシェア用URLが実装されましたね。
早速ブログやサイトに追加してみました。

プラグインなしでもサクッとできたのでやり方をメモしておきます。

記事のタイトル・記事のURLが投稿できるリンクが表示されます。
XとBlueskyはサイト名のハッシュタグつき。

Facebookもハッシュタグつけられるのかもしれないけど、わたしがアカウント持ってないのでスルー。

はてなはログインした状態でボタンをクリックしないと投稿できません。
これは仕様っぽくてどうしようもなかったです。

ヘッダーでFont Awesomeを読み込む

アイコンの表示にはFont Awesomeをお借りします。

<head>内に


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.0/css/all.css">

と書いてFont AwesomeのCSSを読み込みます。(jsの方でもOKです)

BlueskyロゴのSVG画像をダウンロードする

まだFont AwesomeにBlueskyのアイコンは実装されていません。
BlueskyのアイコンはCSSでSVG画像を読み込みます。

Blueskyのmedia kit(Googleドライブ)が公開されているのでダウンロードしてください。

BlueskyロゴのSVG画像をダウンロードする

「i_bluesky.svg」というファイル名にしてテンプレートフォルダ内のimgフォルダに保存します。

テンプレート「single.php」を編集

テンプレートフォルダの「single.php」を編集します。
SNSボタンを表示したい場所に下記をコピペしてください。


<div class="sns">
	<ul>
		<li><a class="twitter" href="https://twitter.com/share?url=<?php echo get_the_permalink();?>&text=<?php echo get_the_title();?>&hashtags=<?php bloginfo('name'); ?>" rel="nofollow noopener"><i class="fab fa-x-twitter fa-fw" aria-hidden="true"></i></a></li>
		<li><a class="bluesky" href="https://bsky.app/intent/compose?text=<?php echo get_the_title();?>%0D%0A<?php echo get_the_permalink();?>%0D%0A%23<?php bloginfo('name'); ?>" rel="nofollow noopener"><i class="fab fa-bluesky fa-fw" aria-hidden="true"></i></a></li>
		<li><a class="facebook" href="http://www.facebook.com/share.php?u=<?php echo get_the_permalink(); ?>" rel="nofollow noopener"><i class="fab fa-facebook-f fa-fw" aria-hidden="true"></i></a></li>
		<li><a class="hatena" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo get_the_title();?>"><i class="fa fa-hatena fa-fw" aria-hidden="true" rel="nofollow noopener"></i></a></li>
		<li><a class="line" href="http://line.me/R/msg/text/?<?php echo urlencode(get_permalink()); ?>" rel="nofollow noopener"><i class="fab fa-line fa-fw" aria-hidden="true"></i></a></li>
	</ul>
</div>

テンプレート「style.css」を編集

テンプレートフォルダの「style.css」に下記をコピペしてください。

●はスマホだと36px、iPad以上だと48pxで表示されます。
パソコンだとLINEのアイコンは消えます。

この辺の調整はお好みでどうぞ。

そういや、はてブもFont Awesomeにアイコンがないんですが、はてブのロゴに似たフォントで「B!」と表示し、お茶を濁しています。


.sns ul ,
.sns li ,
.sns li i {
	margin: 0;
	padding: 0;
}
.sns ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.sns li a {
	display: inline-block;
	margin: 0 3px;
	padding: 0;
	text-align: center;
	font-weight: bold;
	color: #fff;
	width: 36px;
	height: 36px;
	line-height: 36px;
	font-size: 20px;
	border-radius: 36px;
}

/* 背景色の指定 */
.twitter {
	background: #000;
}
.facebook {
	background: #3b5998;
}
.line {
	background: #1dcd00;
}
.hatena {
	background: #00A4DE;
}
.fa-hatena:before {
	content: "B!";
	font-family: Verdana; /* はてブのフォントに近いフォント */
	font-weight: bold
}
.bluesky {
	background: #0081ff;
}

/* Font AwesomeにBlueskyアイコンが実装されたら削除 */
.fa-bluesky:before {
	content: "";
	display: block;
	width: 20px;
	height: 17px;
	margin: 10px auto;
	background-color: #fff;
	mask: url("img/i_bluesky.svg");
	mask-size: cover;
	-webkit-mask: url("img/i_bluesky.svg");
	-webkit-mask-size: cover;
}

/*****************************************************************
 * 16.2 Tablet Small 740px 以上の場合に適用(=min-width)
 * iPad
*****************************************************************/
@media screen and (min-width: 740px) {
	.sns li a {
		width: 48px;
		height: 48px;
		font-size: 24px;
		line-height: 48px;
		border-radius: 48px;
	}
	.fa-bluesky:before {
		height: 22px;
		width: 24px;
		margin: 14px auto;
	}
}

/*****************************************************************
 * 16.4 Desktop Small 1000px 以上の場合に適用(=min-width)
*****************************************************************/
@media screen and (min-width: 1000px) {
	/* PCでLINE使ってる人いなそうなので */
	.sns .line {
		display: none;
	}
}

完成

↓のように表示されていたら成功です。

♥はWP ULikeプラグインを入れたら追加できます。
WP ULike込みのCSSが見たい方は、このブログで使っている生ファイル「parts-share.css」を参考にどうぞ。
画像のパスなど、一部この記事に記載したソースとは異なります。

\ SHARE & LIKE /

関連記事

関連記事はありません

\ SHARE & LIKE /

歴ヲタ女子向けの幕末・歴史グッズのお店「小間物屋歴創」