CSSスプライトを使用してWordPressにソーシャルメディアアイコンを追加する
公開: 2015-05-12ソーシャルメディアアイコンをサイトに追加するのに役立つプラグインはたくさんありますが、すべてが同じように作成されているわけではありません。 それらのいくつかは、カスタマイズ性が低いことは言うまでもなく、サーバーのドレインになる可能性もあります。
幸いなことに、サイトを超高速に保つのに役立つ代替手段があります。CSSスプライトです。
通常、ソーシャルメディアリンクごとに個別の画像がサイトに追加されます。 これはサウンドコーディングと見なされますが、訪問者がページをロードするときに、各画像に対する追加のサーバー要求を意味します。 そしてもちろん、ページのサーバーリクエストが多いほど、読み込み時間が長くなります。
CSSスプライトの利点は、対応するすべてのリンクを適切にマッピングしながら、ソーシャルメディアアイコンのすべての画像を含めることができることです。 これにより、サーバーリクエストが減り、帯域幅が節約され、ページの読み込みが速くなります。 お互いに有利な状況！
このチュートリアルでは、CSSを使用して、WordPressサイト用に完全にカスタマイズ可能な独自のソーシャルメディアアイコンを作成する方法を示します。これには、時間を節約し、このプロジェクトを簡単に完了できるようにするコードも含まれます。
読み続けるか、次のリンクを使用して先に進んでください。
- 画像の作成
- リンクと画像をサイトに追加する
- アイコンとスタイルを追加する
画像の作成
独自のCSSスプライトを作成するための最初のステップは、使用するソーシャルメディアアイコンを使用して画像を作成することです。 2つのしっかりと積み重ねられたレイヤーが必要です。
- トップレイヤー–ページに表示されるアイコン
- 最下層–マウスホバーで表示されるアイコン
アイコンがどのように表示されるかの例を次に示します。
このチュートリアルで画像を明確に表示するために、この画像には透明な背景を使用しなかったことを覚えておいてください。 テーマのスタイルや背景色を変更してもアイコンを使用できるように、画像の背景は理想的には透明である必要があります。
また、後でCSSを使用して追加できるため、各画像の間にスペースを追加する必要はありません。 それは完全にあなた次第です。
この例では、アイコンはサイト上で灰色で表示されますが、マウスをその上に置くと、色付きのバージョンが表示されます。
独自のソーシャルメディアアイコンのセットを作成したら、次のステップに進む準備ができています。
先に進む前に、各シンボルの幅と高さをピクセル単位で知っておく必要があるので、必ずメモしておいてください。 画像編集プログラムは、このちょっとした情報を識別するのに役立ちます。
リンクと画像をサイトに追加する
画像をサイトにアップロードし、画像が配置されている場所をメモして、後でコードで呼び出すことができるようにします。
次に、これらのアイコンが機能するために、ソーシャルメディアリンクをサイトに追加する必要があります。 これはHTMLで実行できます。
これは、リンクに必要な基本構造です。 上記の例のsocialSiteのインスタンスとName of Social Media Site置き換えて、リンクするサイトの実際の名前を追加します。 また、URLも必ず置き換えてください。
作成した画像の一番上の行にあるアイコンごとに、上記のコードの2行目を繰り返し、途中でダミーテキストを置き換えます。 また、 div idの名前をニーズにより適した名前に変更することもできます。
このコードを配置するのに最適な場所は、アイコンを表示するテーマのファイルに直接配置することです。 たとえば、 sidebar.php 、 footer.php 、 header.php 、またはページテンプレートファイルへのリンクを追加できます。
恥ずかしがらないでください。 説明的なタイトルまたはその他の必要なコードを含むヘッダーテキストを自由に追加してください。 終わったら保存することを忘れないでください。
完了したら、サイトに違いは見られませんが、次に画像を追加するので問題ありません。 後でスタイリング、パディング、間隔についても心配することができます。
テストサイトのリンクにタイトルを追加して、リンクがどこにあるかを示しました。
アイコンとスタイルを追加する
CSSを使用してアイコンを追加するときが来ました。 必要に応じて、テーマのstyle.cssファイルにコードを追加するか、カスタムCSSプラグインを使用してコードを追加できます。
追加する必要のあるコードは次のとおりです。
画像パスとともに、クラスを独自のクラスに置き換えます。 ハッシュタグはファイルに基づいて正しい値に置き換えることができますが、ゼロは変更しないでください。アイコンを正しく表示するには、ハッシュタグをそのままにしておく必要があります。
追加するソーシャルメディアアイコンごとに、クラスsocialSiteTwoをコピーして貼り付けることもできます。 特定のスタイリングのニーズに合わせて、位置、マージン、パディング、トップを変更することもできます。
すばやく参照できるように、このCSSの例の内訳を次に示します。
-
#social a.social {height:#px;}–ハッシュタグを、画像の全高ではなく、各アイコンの高さに置き換えます。 -
#social a.socialSiteOne {left:0px;}–これは、最初のシンボルが画像の左端から始まる場所です。 -
#social a.socialSiteOne {width:#px;}–これは最初のソーシャルメディアアイコンの幅です。 この番号は、他のすべてのアイコンでも同じである必要があります。 -
#social a.socialSiteOne {background:url('your-image.png') 0 0;}–画像が呼び出され、位置が左右両方でゼロピクセルに設定されます。 -
#social a.socialSiteTwo {left:#px;}–ハッシュタグを画像の2番目のアイコンが始まる位置のピクセル値に置き換えます。 最初のアイコンの幅が50ピクセルの場合、この値は51ピクセルになります。 -
#social a.socialSiteTwo {background:url('your-image.png') -#px 0;}–ハッシュタグを、画像の左端から2番目の記号がカウントを開始するピクセル数に置き換えます。
作成した画像のアイコンの間に間隔を入れた場合、左と背景の位置セレクターは同じになります。 最初に間隔を追加しなかった場合は、ピクセルで追加する追加の間隔を考慮する必要があるため、左側のセレクターは背景位置セレクターよりも大きくする必要があります。
これで、ホバー時に表示される画像を追加できます。 簡単にするためにここで行ったように、上記の例の下に次のコードを追加するか、それらを混ぜ合わせることができます。
前の例で行ったように、ハッシュタグを正しい値に置き換えます。 最初の値はアイコンが左から配置されているピクセル数で、2番目の値は上から数えます。
完了したら、ファイルを保存して結果を表示します。
結論
希望の外観を実現するには、CSSスタイルシートをさらに微調整する必要があるかもしれませんが、ここで説明するコードで素晴らしいスタートを切ることができます。
アイコンのスタイル設定に役立つCSSの詳細については、WordPress初心者からプロまでの投稿の1つをご覧ください：200以上のキャリアアップリソースと35以上のリソースでKickAssWordPress開発者になりましょう。
あなたのサイトやネットワークのソーシャルシェアリングを後押しすることに興味があるなら、私たちの他の投稿のいくつかをチェックしてください：これらの5つの無料のWordPressソーシャルメディアプラグイン、50のベストWordPressソーシャルメディアプラグイン（2020）であなたのシェアを増やしてください。
編集者注：この投稿は、正確さと関連性のために更新されました。
[初版：2015年5月/改訂：2022年4月]