目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、 上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。
これまでは、とくに気にしなかったのですが…。
アクセス数UPや記事を拡散していただくのに効果的なので設置方法を備忘録として残しておきたいと思います。
Stinger5以前の場合はスマホの分岐コードは、 <?php if (is_mobile()) :?>という形でis_mobileでしたが、
+これまでによく読まれている記事一覧クリックでOPEN+
150,450件の PV
106,481件の PV
75,738件の PV
67,234件の PV
43,811件の PV
40,608件の PV
38,212件の PV
37,255件の PV
36,559件の PV
33,192件の PV
そして次に、重要なSNSボタンのPHPコードです。 (ここでStinger5までとStinger6以降Stinger7とでは若干記載方法が異なります。 )
アドセンス336pxPC閲覧記事下表示1つ目コード
<!-- 記事がよかったらいいね ここから -->
<?php if (st_is_mobile ()) :?>
<div class="p-shareButton p-asideList p-shareButton-bottom">
<div class="p-shareButton__cont">
<div class="p-shareButton__a-cont">
<div class="p-shareButton__a-cont__img" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
<div class="p-shareButton__a-cont__btn">
<p>この記事が気に入ったらいいね!しよう</p>
<div class="p-shareButton__fb-cont p-shareButton__fb">
<div class="fb-like" data-href="ここにFacebookページのURLを入れる " data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
<span class="p-shareButton__fb-unable"></span>
</div>
</div>
</div>
</div>
<div class="p-asideFollowUs__twitter">
<div class="p-asideFollowUs__twitter__cont">
<p class="p-asideFollowUs__twitter__item">Twitterで〇〇を </p>
<a href="ここにTwitterアカウントのURLを入れる " class="twitter-follow-button p-asideFollowUs__twitter__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @アカウント名 </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
</div>
<?php else: ?>
<div style="padding:10px 0px;"></div>
<!-- 記事がよかったらいいねPC -->
<div class="p-entry__push">
<div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
<div class="p-entry__pushLike">
<p>この記事が気に入ったら <br>いいね!しよう </p>
<div class="p-entry__pushButton">
<div class="fb-like" data-href="ここにFacebookページのURLを入れる " data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<p class="p-entry__note">最新情報をお届けします </p>
</div>
</div>
<div class="p-entry__tw-follow">
<div class="p-entry__tw-follow__cont">
<p class="p-entry__tw-follow__item">Twitterで〇〇をフォローしよう! </p>
<a href="ここにTwitterアカウントのURLを入れる " class="twitter-follow-button p-entry__tw-follow__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @ツイッターアカウント名 </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div>
<?php endif; ?>
<!-- 記事がよかったらいいね ここまで -->
というように、 はじめのis_mobileの部分をst_is_mobileに変更します。
また、 下線黄色部分は自分のFacebookページURLやTwitterのURLやTwitterアカウントを適宜記載しなおしてください。
それだけでOKです。
もし、 is_mobileのままで記載しバイラルメディア風のSNSボタンを設置させたいという場合は、
以下の分岐コードをfunction.phpの中に記載します。 (または、Stinger以外のテーマなどの場合でスマホの分岐コードが定義されていない場合は必要になります。)
参考までに)
//スマホ表示分岐
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
あとは、CSSになります。 また、上記を記述してFacebookのいいね!がうまく表示されない場合は以下のFacebookボタン設置ページ にて、 作りなおしてやってみるとうまく表示されるようです。
参考サイト)
そして最後にCSSです。 まずはスマホ用のCSSです。
/*記事がよかったら、いいねスマホ*/
.p-shareButton-bottom {
padding-bottom: 15px;
overflow: hidden;
}
.p-shareButton__buttons {
font-weight: 700;
color: #fff;
font-size: 13px;
text-align: center;
}
.p-shareButton__buttons>li {
padding-left: 3px;
padding-right: 4px;
}
.p-shareButton__buttons .c-btn {
padding: 8px 0;
border-radius: 2px;
}
.p-shareButton__buttons .c-ico {
display: block;
margin: auto auto 5px;
}
.p-shareButton__fb {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
width: 115px;
}
.p-shareButton__fb-cont {
position: relative;
width: 108px;
margin: 0 auto;
}
.p-shareButton__fb-unable {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.p-shareButton__cont {
margin: 15px 0 0;
}
.p-shareButton__a-cont {
background: #2e2e2e;
display: table;
width: 100%;
}
.p-shareButton__a-cont__img {
display: table-cell;
min-width: 130px;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.p-shareButton__a-cont__btn {
display: table-cell;
padding: 12px;
text-align: center;
}
.p-shareButton__a-cont__btn p {
font-size: 12px;
color: #fff;
font-weight: 700;
padding: 5px 0 15px;
line-height: 1.4;
margin-bottom: 0px;
}
.p-asideFollowUs__twitter {
border: 2px solid #e6e6e6;
margin-top: 15px;
padding: 12px 0;
}
.p-asideFollowUs__twitter__cont {
text-align: center;
font-size: 13px;
color: #252525;
font-weight: 700;
}
.p-asideFollowUs__twitter__item {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
}
そして、PC用のCSSです。
/*記事がよかったら、いいねPC*/
.p-entry__push {
margin-bottom: 20px;
display: table;
table-layout: fix;
width: 100%;
background-color: #2b2b2b;
color: #fff;
}
.p-entry__pushThumb {
display: table-cell;
min-width: 240px;
background-position: center;
background-size:cover;
}
.p-entry__pushLike {
display: table-cell;
padding: 20px;
text-align: center;
vertical-align: middle;
line-height: 1.4;
font-size: 20px;
}
.p-entry__pushButton {
margin-top: 15px;
display: inline-block;
width: 200px;
height: 40px;
line-height: 40px;
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.p-entry__pushButtonLike {
line-height: 1;
}
.p-entry__note {
margin-top: 15px;
font-size: 12px;
color: #999;
}
.p-entry__tw-follow {
margin-bottom: 10px;
background: #f4f4f4;
width: 100%;
padding: 15px 0;
}
.p-entry__tw-follow__cont {
text-align: center;
font-size: 15px;
color: #252525;
}
.p-entry__tw-follow__item {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
CSSは自分の好みで弄ってみてください。 (私も若干すでに弄ってますポリポリ (・・*)ゞ)
とっても参考になったお世話になったサイトです。
というか、 ほぼこちらの「ままはっく」さんのコードをコピー・アンド・ペーストで多くのテーマの方々はバイラルメディア風のSNSボタンが設置できるのではないでしょうか。
Stinger6以降(Stinger7も)は、 上記した部分を3文字程度変更するだけで大丈夫でした。 本当にありがとうございました。
本当にみんなスゴいなぁ…。 私もいつになったら多くの人の為になれるようなことが書けるようになるのだろう…。
早くこうしてお世話になったサイト様などを参考にさせて頂いて自分で何か作成していけるようになりたいです!! そしたら、 何か残せたような気になれますよね…。
あなたにおすすめな関連記事 WordPress カスタマイズ 伝えたいこと 備忘録
ショートコードって学べば学ぶほど色々な活用方法があるんだなぁ。と実感している毎日です。 もちろん、他にも様々な関数を使ってもっともっと多くのカスタマイズなどができると思います。 今の私には、 そこまで…
もっと読む
伝えたいこと 備忘録 時事ネタ
今年の夏になっての出来事です。今年の冬までは正常に動いていた(動作していた)エアコンが、クーラーがきかないのです。一切冷えない…。エアコンで冷房ではなく逆に暖房を入れてみようとこの暑い夏に暖房にスイッ…
もっと読む
伝えたいこと 備忘録 時事ネタ
今年2016年は4年に一度のオリンピックイヤーです。 そこで、WindowsXP終了までのカウントダウンカウンターやIEのサポート終了までのカウントダウンカウンター、そして、Google Reader…
もっと読む
伝えたいこと 備忘録 時事ネタ
先日(昨日)、北海道の大和君が無事に発見されましたという記事を投稿しました。 その中で教育評論家で尾木ママこと尾木直樹氏(教授)のブログ投稿に批判が殺到?しているようです。と記載しましたが、その尾木マ…
もっと読む
伝えたいこと 備忘録 時事ネタ
また今年も春が来て夏に向かい草取りもしくは草むしりが必要(必須)な時期になってきました。 昨年も、以下に記事として書きましたが今年はさらに草取りを楽にするようなコツを紹介させていただきたいと思います。
WordPress カスタマイズ 伝えたいこと 備忘録
先日公開させていただいた記事(:AMP化する方法プラグインなしで対応してみる)でWordPressにおいてプラグインを使用しないでなんとかAMP対応できないかなぁ。と思い試行錯誤中です。 先日の状態で…
もっと読む
おすすめの記事一部広告 おすすめ!! 世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
おすすめ2 楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。
Total161
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-Stinger6 , Stinger7 , WordPress , カスタマイズ , テーマ , 伝えたいこと , 備忘録 -SNSボタン , バイラルメディア
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
comment