SNSボタンカスタマイズ、WordPressテーマ賢威用変更箇所の記録

テーマに変更を加えたので記録　ＳＮＳボタンを大きく表示したカスタマイズ

何かあった時にすぐ元に戻せるように、変更箇所を記録しておく。

変更は「social-button2.php」と、「bss.css」

Facebook、twitter、Google+1、はてブ、ポケット、feedly、LINE、LINEいいねボタン

social-button2.phpの中身を全て削除し、下記のように記入

<div class="sns-wrap">
<?php 
if( function_exists( "enqueue_font_awesome") ):
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
endif;

$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() ); 
$twitter_account = 'ここに自分のtwitter＠以降のアカウント名を入れる'; //
?>
<ul class="sns clearfix">
<li class="twitter">
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ' | ' ); echo urlencode( get_bloginfo('name')); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related="<?php echo $twitter_account; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i><span class="pc">Twitter</span></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i><span class="pc">Facebook</span><span class="share-count"><?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></span></a>
</li>
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i><span class="pc">Google+</span><span class="share-count"><?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="hatena-icon">B!</span><span class="pc">はてブ</span><span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class="pocket">
<a class="no-deco" target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="pc">Pocket</span><span class="share-count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></a>
</li>
<li class="feedly">
<a href="http://feedly.com/i/subscription/feed/<?php bloginfo('rss2_url'); ?>" rel="nofollow" target="_blank"><i class="fa fa-rss"></i>feedly <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
</li>
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2" rel="nofollow" target="_blank"><i class="fa fa-rss"></i>RSS</a>
</li>
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="line-button">LINE</i></a></li>
</li> 
<li>
<div class="line-it-button" data-lang="ja" data-type="like" data-url="https://000363.xyz/" style="display: none;"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</li>
</ul>
</div>

ツイッターアカウント名は自分のアカウントと連携しないなら入れなくても問題ない。入れなくてもツイートボタンは利用可。

最終的にpocket、feedly、rssは不要と思い削除した

pocketのみまた復活させた。

<div class="sns-wrap">
<?php 
if( function_exists( "enqueue_font_awesome") ):
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
endif;

$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() ); 
$twitter_account = 'ここに自分のtwitter＠以降のアカウント名を入れる'; //
?>
<ul class="sns clearfix">
<li class="twitter">
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ' | ' ); echo urlencode( get_bloginfo('name')); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related="<?php echo $twitter_account; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i><span class="pc">Twitter</span></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i><span class="pc">Facebook</span><span class="share-count"><?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></span></a>
</li>
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i><span class="pc">Google+</span><span class="share-count"><?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="hatena-icon">B!</span><span class="pc">はてブ</span><span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class="pocket">
<a class="no-deco" target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="pc">Pocket</span><span class="share-count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></a>
</li>
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="line-button">LINEで送る</i></a></li>
</li> 
<li>
<div class="line-it-button" data-lang="ja" data-type="like" data-url="https://000363.xyz/" style="display: none;"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</li>
</ul>
</div>

LINEのイイネボタンはオリジナルボタン非対応なため小さくなってしまった。

見た目LINEボタンだけ浮いてるがとりあえずここままで良しとする。

無い方が見た目はいいがLINEのイイネボタンは残したい。

ツイッターアカウント名は＠以降のアカウント名を入れる。自分のアカウントと連携しなければそのままで良い。

LINEイイネボタンのURLはそのサイトに合わせる。

大きいLINEボタンは「LINEで送る」ボタンで、いいねとは異なる。

bss.cssの最後に追記

bss.cssの一番下に追記する。

影を付けるbox-shadow、色の変化のhoverを追加した最終形態。

影が不要なら　box-shadow:0 5px 0 #******;　の行だけ削除。

色の変化が不要なら　hover　に関する行全体を削除。

/* ----------------------------------------------------
SNSボタン
-----------------------------------------------------*/
.sns-wrap {
width:100%;
margin-top: 1em;
}
.sns {
margin: 0 auto;
list-style: none;
}
.sns a {
text-decoration: none;
font-size: 13px;
}
.sns {
text-align: center;
}
.sns li {
float: left;
width: 19%;
margin: 0 1% 3% 0;
}
.sns a {
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 5px;
text-align: center;
}
.sns span,
.sns .fa {
margin-right: .4em;
color: #fff;
}
.sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}
.sns .twitter a {
background: #55acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .facebook a {
background: #315096;
box-shadow:0 5px 0 #2c4373;
}
.sns .googleplus a {
background: #dd4b39;
box-shadow: 0 5px 0 #ad3a2d;
}
.sns .hatebu a {
background: #008fde;
box-shadow: 0 5px 0 #016DA9;
}
.sns .line a {
background: #00b833;
box-shadow: 0 5px 0 #359A34;
}
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns .rss a {
background:#ffb53c;
box-shadow:0 5px 0 #e09900;
}
.sns .feedly a {
background:#87c040;
box-shadow:0 5px 0 #74a436;
}
.sns .twitter a:hover {
background: #0092ca;
}
.sns .facebook a:hover {
background: #2c4373;
}
.sns .googleplus a:hover {
background: #ad3a2d;
}
.sns .hatebu a:hover {
background: #016DA9;
}
.sns .line a:hover {
background: #359A34;
}
.sns .pocket a:hover {
background: #c0392b;
}
.sns .rss a:hover {
background: #e09900;
}
.sns .feedly a:hover {
background: #74a436;
}
@media only screen and ( max-width: 736px ) {
.sns li {
width: 30%;
margin: 0 3% 4% 0;
}
.sns a {
padding: 6px;
}
}

2018/9/1　調整

social-button2.php

すっきりさせるため、文字を2文字に。

LINEのいいねボタンのみカスタムボタンではないため途中で切れてしまう。

これをリストから外して2行目に表示。

<div class="sns-wrap">
<?php 
if( function_exists( "enqueue_font_awesome") ):
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}
endif;

$url_encode = urlencode( get_permalink() );
$title_encode = urlencode( get_the_title() ); 
$twitter_account = 'Nron_Man'; //
?>
<ul class="sns clearfix">
<li class="twitter">
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ' | ' ); echo urlencode( get_bloginfo('name')); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related="<?php echo $twitter_account; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i><span class="pc">Tw</span></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i><span class="pc">Fa</span><span class="share-count"><?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></span></a>
</li>
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-google-plus"></i><span class="pc">G+</span><span class="share-count"><?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></span></a>
</li>
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="hatena-icon">B!</span><span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a>
</li>
<li class="pocket">
<a class="no-deco" target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="pc">Po</span><span class="share-count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></a>
</li>
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="line-button">Li</i></a></li>
</li> 
</ul>
<div class="line-it-button" data-lang="ja" data-type="like" data-url="https://000363.xyz/" style="display: none;"></div>
<script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
</div>

base.css

ボタンサイズを微調整。

/* ----------------------------------------------------
SNSボタン
-----------------------------------------------------*/
.sns-wrap {
width:100%;
margin-top: 1em;
}
.sns {
margin: 0 auto;
list-style: none;
}
.sns a {
text-decoration: none;
font-size: 13px;
}
.sns {
text-align: center;
}
.sns li {
float: left;
width: 15%;
margin: 0 1% 3% 0;
}
.sns a {
position: relative;
display: block;
padding: 10px;
color: #fff;
border-radius: 5px;
text-align: center;
}
.sns span,
.sns .fa {
margin-right: .4em;
color: #fff;
}
.sns li a:hover {
-webkit-transform: translate3d(0px, 5px, 1px);
-moz-transform: translate3d(0px, 5px, 1px);
transform: translate3d(0px, 5px, 1px);
box-shadow:none;
}
.sns .twitter a {
background: #55acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .facebook a {
background: #315096;
box-shadow:0 5px 0 #2c4373;
}
.sns .googleplus a {
background: #dd4b39;
box-shadow: 0 5px 0 #ad3a2d;
}
.sns .hatebu a {
background: #008fde;
box-shadow: 0 5px 0 #016DA9;
}
.sns .line a {
background: #00b833;
box-shadow: 0 5px 0 #359A34;
}
.sns .pocket a {
background:#f03e51;
box-shadow:0 5px 0 #c0392b;
}
.sns .rss a {
background:#ffb53c;
box-shadow:0 5px 0 #e09900;
}
.sns .feedly a {
background:#87c040;
box-shadow:0 5px 0 #74a436;
}
.sns .twitter a:hover {
background: #0092ca;
}
.sns .facebook a:hover {
background: #2c4373;
}
.sns .googleplus a:hover {
background: #ad3a2d;
}
.sns .hatebu a:hover {
background: #016DA9;
}
.sns .line a:hover {
background: #359A34;
}
.sns .pocket a:hover {
background: #c0392b;
}
.sns .rss a:hover {
background: #e09900;
}
.sns .feedly a:hover {
background: #74a436;
}
@media only screen and ( max-width: 736px ) {
.sns li {
width: 13.5%;
margin: 0 3% 4% 0;
}
.sns a {
padding: 2px;
}
}

完成画像。

PC

スマホ

この記事は自分用に書いたメモです。