スマートフォンにも適用した自作のSNSシェアボタン

息抜きでPhoneからサイトの確認をしたところ、ナナナナんと「自作のSNSシェアボタン」がみっともない姿をしてた。早速調べたところ「header.phpのheader」の部分に「FontAwesome」のWebフォントを使用するためのタグを追加していなかったことが判明した。

SNS Share Button

―装飾的意味合いのSNSシェアボタンの作成-

自作のSNSシェアボタンのソースコードのファイル作成
 設定したSNSシェアボタンのソースコードのファイル作成←sns.php
 作成した「sns.php」を子テーマ内に格納

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
<div class="share">
<ul>
    <!--Facebookボタン-->
    <li class="facebooklink">
     <a href="//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=300,width=600');return false;"><i class="fa fa-facebook"></i>
    </a>
    </li>
    <!--ツイートボタン-->
    <li class="tweet">
    <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-twitter"></i>
    </a>
    </li>
<li class="pocket">
    <a href="//getpocket.com/edit?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fab fa-get-pocket"></i>
	</a>
</li>
    <!--はてなボタン-->
    <li class="hatena">
    <a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i>
    </a>
    </li>
    <!--LINEボタン-->
    <li class="line">
    <a href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><span>LINE</span>
	</a>
    </li>
</ul>
</div>

content.phpにコードの追加
wordpress/wp-content/themes/子テーマ/template-parts/postcontent.php内にコードを追加
content.phpにコードを追加

	<?php
	if ( is_single() ) {追記→:get_template_part( 'sns' );
		twentyseventeen_entry_footer();
	}
	?>

SNSシェアボタンの装飾←style.cssに追加

/*--sns--*/
.fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
}
.share {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-right: 2em;
}
.share ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.share ul:after {
    display: block;
    clear: both;
    content: '';
}
.share li {
    float: left;
    width: 15%;
    margin: 0 0.5%;
    margin-top: 10px;
}
.share li a {
    font-size: 12px;
    display: block;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    color: #fff;
	  border-radius: 4px; /* 丸み調整 */
    box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */

}
.share li a:hover {
    opacity: .8;
	  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: none;

}
.share li a:visited {
    color: #fff;
}
.tweet a {
    background-color: #55acee;
}
.facebooklink a {
    background-color: #315096;
}
.pocket a{
    background-color: #EF4156;
}
.hatena a {
    background-color: #008fde;
}
.line a {
    background-color: #00b900;
}
@media screen and (max-width:768px){
    .share li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 3px;
    }
    .share li i {
        font-size: 1.3em;
        padding-top: 3px;
    }
}

各NSのアイコン表示
「FontAwesome」のWebフォントを使用(はてなブックマークとLINEは別)←Webアイコンを利用する設定は「header.phpのheader」タグに追加。

 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

装飾的な意味合いのSNSシェアボタンなので、前もってカスタマイズのスマホ用画面でチェックすれば良かったけど、今度はOK!。

サイトのアニメのスクロールボタン、ログイン画面のロゴと「QRCODE」

インストールしたプラグインの多くもそうだけど、以前のサイトでの目玉と言うか気に入ってたスクロールボタンを今度のホームページにも加えた。

① 興味があれば是非、「妻と僕」さんのサイトのページへどうぞ。このサイトには、他に参考になるカスタマイズが沢山用意されてる。他に透明色のメニューバーを設置なども参考にさせていただいた。感謝!

② 以前にも利用したログイン画面のカスタマイズと「QR Code」の作成プログラム(確かGoogle?から得たプログラムだったと思う)、も同時に行った。

#ログイン画面のカスタマイズ:コードをfunction.phpに追加
function my_login_logo() { ?>
  <style>
    body.login div#login h1 a {
      background: url(<?php echo get_theme_file_uri('/images/login-logo.png'); ?>) no-repeat;
   border-radius: 50%;
      width: 84px;
      height: 84px;
      border: 1px #3C74AC solid;
    }
  </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
function my_login_logo_url() {
  return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

#QR Codeの作成:QRコード出力関数をfunction.phpに追加
function get_qrcode_tag($atts) {
	extract(shortcode_atts(array(
		'url' => home_url('/'),
		'size' => '180',
	), $atts));
	// イメージタグを返す
	return '<img src="https://chart.googleapis.com/chart?chs=' . $size . 'x' . $size . '&cht=qr&chl=' . $url . '&choe=UTF-8 " alt="QR Code"/>';
}
       // 呼び出しの指定
       add_shortcode('qrcode', 'get_qrcode_tag');

既にワードプレスがバージョンアップして以前のコードではエラーが出るのではないかと心配したが、保存してたデータからピックアップして追加してみた。取り合えず安心だ。

テーマ「Twentyseventeen」のカスタマイズに関して

「Twentyseveteen」のメインページを4段階に分けているレイアウトは、個人的なサイトでは奇抜すぎる感があり、メインページ(ホームのページ)のみにしてメインメニューをダイアリー、ワードプレス、自宅サーバとした。メニューにWindowsを加えなかったのは、いつの間にかWindows11が発表されてWindows10のサポートが2025年との噂、10が発表された時の約束が違う?、商魂逞しいWindowsと言うことで、Windowsに関する記事は諦めることにした。
WindowsでのWordpressインストールはサーバに問題なければ簡単、その後の作業もPC上からサーバ本体を気にせずスムーズに行える。

Twentyseventeenのカスタマイズ

―Childの作成、トップページのレイアウト、投稿スタイルのカスタマイズの準備-

レイアウト(デザイン)に関しては決めてたプラグインが使えないことで、描いていたホームページのイメージと違ってしまったが、先々入れ替えたり加えたりすることにした。

サイト、メインページにインストールしたプラグイン

 1.recent-posts-widget-extended
 2.simple-CSS
 3.limit-login-attempts-reloaded
 4.throws-spam-away
 5.photection
 6.WP-Optimize
 7.font-awesome(all.min.css,webfonts)*

投稿ページ(2カラム)に追加インストールしたプラグイン

 1.classic-editor
 2.classic-widgets
 3.easy-fancybox
 4.enlighter
 5.wp-multibyte-patch
 6.fixed-widget
 7.AGP-icons
 8.metaSlider

以前にも経験したが、「PHPやCSS」に余程精通していないと独自のカスタマイズは難しい。なんとか自分で気に入るサイトにしたいと思い選ぶプラグインだから結構苦労した。

プラグインの多くは、基本的にインストールして「有効化」して問題なく作動する。当然乍ら細かな使い方を覚える必要があるけど、ある程度好みに合わせたカスタマイズが可能。

TOP

Copyrighted Image