えいきゅうのやみ

日々の出来事、感想、備忘録等、気ままな日記帳

[コード有] icomoonを使ってWordPressに自作SNSボタンを設置する

time 2015/11/26

[コード有] icomoonを使ってWordPressに自作SNSボタンを設置する

snsボタン見本

この記事に記載しているコードは、主婦ライフさんの記事で紹介されているコードをicomoon用に改変したものになります。icomoonで必要なアイコンフォントをダウンロードして使って下さい。

icomoonの使い方については、以下のサイトで詳しく解説されています。

必要なアイコンフォントをダウンロード後、icomoonからダウンロードしたフォルダ内にあるfontsフォルダとstyle.cssを wp-content > themes > 使用中のテーマフォルダ内へアップロードします。

上書きを避けるため、アップロードする前にstyle.cssのファイル名をicomoon.cssに変更しておきましょう。(既存のファイルと被らなければ、ファイル名は何でもOKですが、以降はicomoon.cssに変更したものとして説明)

次に、アップロードしたファイルを読み込ませるために、以下の記述をheader.phpのhead内へ追加します。テーマ名の部分は、使用中のテーマのフォルダ名に変更して下さい。

<link rel="stylesheet" href="./wp-content/themes/テーマ名/icomoon.css">

もしも外部ファイルを使いたくない場合は、icomoonからダウンロードしたCSSファイルの中身を、WordPressのCSSへ追加すればOKです。その際、以下の様に、パスのfonts直前に./を追加します。WordPressのCSSへコードを追加するのであれば、先ほど説明したheader.php内への記述は必要ありません。

/*icomoon*/
@font-face {
	font-family: 'icomoon';
	src:url('./fonts/icomoon.eot?p1l8kn');
	src:url('./fonts/icomoon.eot?p1l8kn#iefix') format('embedded-opentype'),
		url('./fonts/icomoon.ttf?p1l8kn') format('truetype'),
		url('./fonts/icomoon.woff?p1l8kn') format('woff'),
		url('./fonts/icomoon.svg?p1l8kn#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-Pocket:before {
	content: "\e008";
}
.icon-hatena:before {
	content: "\e00a";
}
.icon-googleplus:before {
	content: "\e608";
}
.icon-facebook:before {
	content: "\e60d";
}
.icon-twitter:before {
	content: "\e611";
}

続いて、WordPressのCSSに以下を追加します。

/*自作SNSボタンCSS*/
.follow {
    margin-bottom:1em;
}
.follow ul{
    list-style:none;
    position:relative;
    margin:-10px 0 0 -10px;
    overflow:hidden;
}
.follow ul li{
    float:left;
    width:100px;
    margin:10px 0 0 10px;
}
.follow ul li a{
    padding-top:10px;
    padding-bottom:5px;
    display:block;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    color:#fff;
    font-family:'Open Sans',sans-serif;
    text-align:center;
    text-decoration:none;
}
.follow ul li a:before{
    position:relative;
    display:block;
    -webkit-transition:.15s ease-in-out;
    transition:.15s ease-in-out;
    color:#fff;
    font-size:26px;
    font-family: "icomoon";
}
.follow ul li a:hover{
    background-color:#fff;
}

/*ツイッター*/
.follow ul .twitter a{
    background-color:#00aced;
    border:2px solid #00aced;
}
.follow ul .twitter a:before{
    content: "\e611";
}
.follow .twitter a:hover,.follow .twitter a:hover::before{
    color:#00aced;
}

/*フェイスブック*/
.follow .facebook a{
    background-color:#3c5a98;
    border:2px solid #3c5a98;
}
.follow .facebook a:before{
    content:"\e60d";
}
.follow .facebook a:hover,.follow .facebook a:hover::before{
    color:#3c5a98;
}

/*グーグルプラス*/
.follow ul .googleplus a{
    background-color:#db4a39;
    border:2px solid #db4a39;
}
.follow ul .googleplus a:before{
    content:"\e608";
}
.follow ul .googleplus a:hover,.follow ul .googleplus a:hover::before{
     color:#db4a39;
}

/*はてなブックマーク*/
.follow ul .hatena a{
    background-color:#008cd2;
    border:2px solid #008cd2;
}
.follow ul .hatena a:before{
    content: "\e00a";
}
.follow ul .hatena a:hover,.follow ul .hatena a:hover::before{
    color:#008cd2;
}

/*ポケット*/
.follow ul .pocket a{
    background-color:#ee4156;
    border:2px solid #ee4156;
}
.follow ul .pocket a:before{
    content: "\e008";
}
.follow .pocket a:hover,.follow .pocket a:hover::before{
    color:#ee4156;
}

最後に、管理画面の外観⇒テーマの編集から、SNSボタンを表示させたい場所に下記のphpコードを貼り付ければ完成です。content-single.phpの

辺りに貼り付けると、良い感じだと思います。

<div class="follow">
    <ul>
        <li class="twitter"><a href="http://twitter.com/share?url=<?php echo get_permalink();?>&text=<?php echo urlencode(the_title('','',0));?>" target="_blank" rel="nofollow" title="このページをツイート">twitter</a></li>
        <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink();?>&t=<?php the_title();?>" target="_blank" rel="nofollow" title="Facebookでシェアする">Facebook</a></li>
        <li class="googleplus"><a href="https://plus.google.com/share?url=<?php the_permalink();?>" target="_blank" rel="nofollow" title="Google+でシェアする">Google+</a></li>
        <li class="pocket"><a href="https://getpocket.com/edit?url=<?php the_permalink();?>" target="_blank" rel="nofollow" title="Pocketに保存">Pocket</a></li>
        <li class="hatena"><a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" target="_blank" rel="nofollow" title="はてなブックマークに追加">Hatena</a></li>
    </ul>
</div>

URLや記事タイトルは各ページのデータを参照して自動的に取得するので特に変更しなくても大丈夫です。

URLを固定で使いたい場合

URLを固定で使いたい場合は、以下のコードをコピペ後、【表示させたいテキスト】、【サイトのURL】の部分を ご自身のサイトに合わせて変更すればOKです。【表示させたいテキスト】については、UTF-8にエンコードしたものを挿入しないと、エラーが出たり、文字化けする場合があります。(詳細は関連記事で・・・)

<div class="follow">
    <ul>
        <li class="twitter"><a href="http://twitter.com/share?text=【表示させたいテキスト】&url=【サイトのURL】" target="_blank" rel="nofollow" title="このページをツイート">twitter</a></li>
        <li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=【サイトのURL】" target="_blank" rel="nofollow" title="Facebookでシェアする">Facebook</a></li>
        <li class="googleplus"><a href="https://plus.google.com/share?url=【サイトのURL】" target="_blank" rel="nofollow" title="Google+でシェアする">Google+</a></li>
        <li class="pocket"><a href="https://getpocket.com/edit?url=【サイトのURL】" target="_blank" rel="nofollow" title="Pocketに保存">Pocket</a></li>
        <li class="hatena"><a href="http://b.hatena.ne.jp/entry/【サイトのURL】" target="_blank" rel="nofollow" title="はてなブックマークに追加">Hatena</a></li>
    </ul>
</div>

down

コメントする




スポンサーリンク

管理人

マスクドライダー17号

マスクドライダー17号

面白いゲームが多過ぎて困っているおじさん。心に闇を抱えている。

姉妹サイト

ポイントサイト研究所
各ポイントサイトの詳しい解説や体験記など