WordPress標準のソーシャルアイコンブロック。ブロックの設定では以下のことができます（完全再現していないので正しくはできるようです）。
※「テキストの変更」以外の変更は親ブロックで一括指定になります
- アイコンの色の変更
- ボタンサイズの変更
- テキスト（サービス名）の表示
- テキストの変更
- ボタンの配置（左、右、中央、均等割り付け）
- リンクを別タブで開く
ただし、クリックした先は単独のURLしか指定できないので、基本的によくあるシェアボタンのように、タイトルやリンク先URLを埋め込んだ形で投稿フォームを表示するというアクションはできず、単純にそのSNSの表示させたいページ（例えばプロフィールなど）へ遷移させることしかできません。
それでもアイコン付きで簡単にSNSへのリンクボタンが作れるので、この仕様でもよければ通常のブロックと同様簡単にシェアボタン風なものを追加することができます。
でもこのブロック、ボタン数がある程度あれば、均等割り付けにしてもそれなりに表示できるんですけど、そうでない場合はブロック間の幅が広すぎてちょっと変な感じになるんです。
そこでそれなりに見栄えよくなるようにしてみました。
- ボタン数をコンテンツ幅で割ってボタンの数に合わせてボタンの幅が均等になるようにする
- 丸やオーバル（楕円）ではなく、スタンダードな角丸の四角形のボタンにする
- アイコンと文字列を中央揃えにする
- ホーバー時の拡大が大きすぎるので大人しめにする
実際に表示させてみるとこんな感じです（アカウントを持っていないSNSなどへのリンクはこのサイトのトップページにしています）。
ただ単純にスタイルコードを追加すると、その他の形で表示させたい場合に難があるので、ブロックスタイルを追加して、スタイル選択ボタンでこの表示方法になるようにします。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
ブロックスタイルの追加
有効化しているテーマのfunctions.phpへ以下のコードを追加します。
function pwcn_register_block_design_styles_sosial_link(){
register_block_style('core/social-links', array(
'name' => 'pwcn-slink-square',
'label' => __( '四角形',''),
));
}
add_action('init','pwcn_register_block_design_styles_sosial_link');追加後に投稿編集画面などでソーシャルアイコンブロックを挿入後にスタイルタブを開くと、下図のように「四角形」というボタンが追加されます。
次項のスタイルコードを適用するまでは、このボタンを選択しても何も変化はありません。
スタイルコードの追加
以下のコードで「ハンドル名」の部分を有効化しているテーマのstyle.cssのハンドル名に変えてから、functions.phpへ追加します。
function pwcn_social_links_block_style_init(){
//スタイルコードをまとめる
$custom_css = "
.is-style-pwcn-slink-square li.wp-social-link.wp-block-social-link {
flex: 1;
border-radius: 4px;
text-align: center;
}
.is-style-pwcn-slink-square li.wp-social-link.wp-block-social-link a {
justify-content: center;
}
.is-style-pwcn-slink-square .wp-block-social-link:hover:hover {
transform: scale(1.02);
}
";
wp_add_inline_style( 'ハンドル名', $custom_css );
wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
add_action( 'init', 'pwcn_social_links_block_style_init',9999);
add_action( 'wp_enqueue_scripts', 'pwcn_social_links_block_style_init');コード追加後に先ほどソーシャルアイコンブロックを追加した投稿編集画面を保存してからリロードすると、デモのようなスタイルになるのを確認できると思います（環境によってはキャッシュの削除が必要です）
このブロックはflexボックスの中にflexボックスがあるなど少々複雑な構造になっていて、フロントエンド側とエディター側とでアイコンと文字列を中央揃えするためのスタイルが異なるようなので、数行余分なコードが入っていますが、これだけのコードで出力できれば大きな問題はないでしょう。
余談ですが、上記コードは、フロントエンドへはstyle.cssのインラインスタイルとして出力され、ブロック側にも適用されるので見た目をほぼ同じにすることができますから、コード形態を覚えておくと便利ですヨ。
