WordPress Avada, Newspaper 一部のテーマでは、テーマオプションを通じてソーシャルアイコンを表示する機能を提供することもあります。 WordPress 5.8以降、ブロックウィジェットが導入され、ウィジェットでもブロックエディタのブロックを使用できるようになりました。ブロックエディタのソーシャルアイコンブロックを使用して、トップバー、フッタ、サイドバーなどのウィジェット領域にソーシャルアイコンを表示できます。
WordPress ブロックウィジェット：ソーシャルアイコンブロックを使用してSNSアイコンを表示する
WordPress ブロックエディタ（Gutenberg）は WordPress バージョン 5.0 以降、基本エディタとして搭載されています。
トップバーやフッターなどのウィジェット領域にソーシャルアイコンを追加することもできます。このブログにインストールされている GeneratePress テーマにはトップバーウィジェットエリアがあります。このトップバーウィジェットエリアにソーシャルアイコンを追加する方法を見てみましょう。他のテーマでも同様の方法で、希望のウィジェット領域にソーシャルアイコンを配置できます。
ちなみに、ソーシャルアイコンはソーシャル共有アイコンとは機能が異なります。ソーシャルアイコンブロックでは Facebook、X（旧」Twitter"）、 Instagram、YouTubeチャンネルなどに移動するリンクを設定できます。ソーシャル共有アイコンを表示したい場合は、SNS共有プラグインを使用するか、下の記事で紹介するコードを使用できます。
GeneratePress テーマのトップメニューバーにソーシャルアイコンを表示する
ツェナーレートプレスのテーマのトップバーエリアには、ナビゲーションメニューやソーシャルアイコン、またはこのブログのようにバナーなどを配置できます。
GPテーマのトップバーエリアにバナーを表示する方法については、次の記事を参照してください。
GeneratePress テーマを使う WordPress サイトのソーシャルアイコンをトップバー領域に表示するには WordPress お知らせ»外観»ウィジェットに移動して、Top Barウィジェットエリアで ブロックの追加 アイコンをクリックします。
ブロック追加ポップアップが表示されたら、検索フィールドに「ソーシャル」（①）を入力し、 ソーシャルアイコン ブロック（②）を選択します。
ソーシャルアイコンブロックが追加されると ウィジェットの追加 アイコン（①）をクリックし、検索欄に追加するSNSチャンネル名を入力します。例えば、 Facebook アイコンを表示したい場合は、検索ボックスに Facebokを入力（②）して Facebook アイコン（③）を選択します。
すべて閲覧 ボタンをクリックすると、追加可能なすべてのSNSチャンネルが表示されます。 （ブロックウィジェットでは表示されない場合があります。
Facebook, Twitter、X、 Instagram、YouTube、Pinterest、GitHub、TikTok、Twitch、WatsApp、WhatsApp、Reddit、Skype、Skype、 テュールグル（Telegram）など、ほとんどのSNSチャンネルやメッセンジャーを追加できます。 （しかし Naverナカカオトークなど国内SNSはサポートされていません。）
Facebook アイコンを選択すると、以下のように追加されます。
アイコンをクリックしてURLを入力します。
同様に、X、YouTubeなどの希望のSNSアイコンを追加します。追加して完了したら、アイコンを並べ替えるか、色、形などを設定できます。
アイコンの並べ替えを設定するには、並べ替えオプションを選択し、 左揃え、中央揃え、右揃え など、目的のソートオプションを選択します。
右側のブロック設定で「スタイル」タブをクリックすると、アイコンのスタイルとアイコンの色、アイコンの背景色などを指定できます。
スタイルは基本、ロゴのみ、ピル形状の中から選択できます。基本的に 기본 スタイルが適用されており、 ロゴのみ 또는 錠剤の形 スタイルボタンをクリックすると、ボタンがどのように変わるかを確認できます。
たとえば、ピルシェイプスタイルを選択すると、下図のように楕円形にアイコンに変わります。
アイコンの背景色を変更したい場合 アイコンの背景をクリックして背景色を指定します。
すべての設定が完了したら、[更新]ボタンを押して変更を保存し、サイトにアクセスしてSNSアイコンが必要に応じて表示されることを確認してください。
アイコンサイズを変更したい場合は、次のCSSコードを 外観 » カスタム » 追加 CSSに追加したり、 チャイルドテーマのスタイルシートファイルに入力できます。
.wp-block-social-links, .wp-block-social-links.has-normal-icon-size {
font-size: 2.0em;
}アイコンのフォントサイズは、必要なサイズになるように適切に変更してください。基本的な CSSはそれほど難しくなく、習うのに時間がかかりません。😄
コメントを残す