今回使用するソーシャルボタンの種類
- feedly
- Hatena
プラグインなしで５つのボタンを『アイコン』と『サービス名』横並びで表示させます。そして、スマートフォンにも対応できるようレスポンシブデザインで実装していきます。なお、画像は一切使いません。
完成形のイメージ
下の画像のように表示されれば完成です！
ソーシャルボタン作成の事前準備
Font Awesomeの呼び出し
アイコンの表示に「Font Awesome」というツールキットを使います。ツールキットの実装方法は、下記の呼び出しlinkタグを<head></head>の中に置きます。<head></head>が置いてあるファイルは、themesディレクトリのご自身で選んだテーマの中にあるheader.phpという名前のファイルです。使用しているテーマによっては、content-header.phpなど別のファイルから呼び出している場合もあります。
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">CSSをコピペで貼り付ける
下記のCSSをstyle.cssなどに貼り付けてください。なお、はてなブックマークはFont Awesomeにはないので、CSS内でfa-hatenaとして書き込まれています。
/* ---------- [+] ソーシャルボタンのデザイン ---------- */
.fa-hatena:before {
content: "B!";
font-family: Verdana;
font-weight: bold
}
.sns_box_wrap ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sns_box_wrap ul li {
float: left;
font-size: clamp(12px, 1vw, 16px);
width: 20%;
text-align: center;
}
.sns_box_wrap ul li:hover {
opacity: 0.8;
}
.sns_box_wrap ul li::after{
clear: both;
}
.sns_box_wrap ul li a {
color: #FFF;
display: block;
padding: 8px 0 8px 0;
}
.sns_box_wrap ul li a:hover {
color: #FFF;
text-decoration: none;
}
li.twitter_btn {
background-color: #1DA1F2;
}
li.facebook_btn {
background-color: #1877F2;
}
li.hatena_btn {
background-color: #00A4DE;
}
li.feedly_btn {
background-color: #87C040;
}
li.pocket_btn {
background-color: #EF4154;
}
@media screen and (max-width:374px) {
.sns_box_wrap ul li span {
display: block;
width: 100%;
font-size: 10px;
}
}
/* ---------- [+] ソーシャルボタンのデザイン ---------- */functions.phpに出力用のプログラムを仕込む
下記のコードをfunctions.php内の最後に貼り付けてください。注意点としてはコード内の下の方にある「EOM;」のところで、左側のインデントを合わせようとしてスペースを入れたり、タブを入れたりするとサーバーエラーになります。ここでは詳しく触れませんが、PHPヒアドキュメントという書き方の仕様です。
ソーシャルボタンの表示方法
事前準備が整ったら、実際に表示させたいファイルを開いてください。大抵の人は、single.phpになると思いますが、使用しているテーマによってはcontent-single.phpなど別の場所から呼び出している場合もあります。
表示させたいファイルを開いたら、表示させたい場所に下記のコードをコピペしてください。
<?php putSocialBtn(); ?>これで完成です！
シンプルなコードで書いたつもりですので、いろいろ弄ってカスタマイズしてみてください！
Be the first to comment