プラグインなしでワードプレスにソーシャルメディアアイコンを追加する方法

プラグインなしでソーシャルメディアアイコンをWordPressサイトに追加したいですか?

素晴らしいフォントを使用してアイコンを追加する方法を示す投稿はたくさんありますが、外部アイコンを追加することなく、はるかに簡単な方法を紹介します。

あなたがページ速度を真剣に受け止めている人なら、あなたはこれを気に入るはずです。

ダシコンは公式のWordPressアイコンフォントです。これらは、すべてのWordPressサイト管理バックエンドの左側のサイドバーに表示されます。

外部アイコンの代わりにこれらのアイコンを使用します。これにより、ブラウザは追加のファイルを要求する必要がなくなります。

次の手順に従ってください。

ステップ1

サイドバーまたはフッターにカスタムHTMLウィジェットを追加します。ウィジェットは、ダッシュボード>>>外観>>>ウィジェットで管理できます。

ステップ2

このコードをコンテンツボックスに貼り付けます


このコードでは、FacebookとTwitterのアイコンのみを表示しています。
アイコンをさらに追加するには、アイコンの3つの部分をカスタマイズする必要があります。

hrefはあなたのソーシャルページへのリンクです
aria-labelは、リンクを説明するテキストです

3番目で最も重要なものはclass =” dashicons dashicons-facebook-alt”です。

Dashiconsの各フォントには、アイコンの表示に使用される特定のクラスがあります。アイコンをクリックすると、そのクラスを見つけることができます。

この部品を使用したい部品と交換してください

たとえば、dashicons-facebook-altを次のように置き換えます dashicons-ハート ハートのアイコンが表示されます。

ステップ3。

このCSSを子テーマのStyle.cssファイルまたはカスタマイザーの追加のCSSオプションに追加します

.social-link-container {display:flex; } .social-link-container .social-link {パディング:3px;マージン右:10px; } .dashicons {font-size:30px;色:#fff;幅:40px;高さ:40px;境界半径:50%;表示:フレックス; justify-content:center; align-items:center; }

上記のコードは、色を除くアイコンのすべての属性を追加します。以下のコードを使用して、そのときだけ表示されるアイコンに色を追加します。

.dashicons-facebook-alt {背景:#1877F2; } .dashicons-twitter {背景:#1DA1F2; }

アイコンをさらに追加する場合は、クラスと上記のCSSを使用して、アイコンごとに異なる背景色を追加できます。

簡単なホバー効果を追加したいですか? 「成長」ホバー効果を表示したい場合は、これをCSSに追加してください

.dashicons:hover {-webkit-transform:scale(1.2); -ms-transform:scale(1.2);変換:scale(1.2); }

それでおしまい!ウェブサイトのキャッシュをクリアしてウィジェットを確認すると、次のように表示されます

手順を正確に実行すると、機能するようになります。
そうでない場合は、以下にコメントしてください。解決のお手伝いをさせていただきます。

コメントを残す