はじめに
こんにちは！
春が近づいてきましたね！（2021/04/12）
本日もブログを執筆しております。
本日共有させていただく内容は、ずばり
プラグインなしでSNS共有ボタンを作成する方法！
になります！
いろんな記事を見てみたのですが、意外と細かいところの解説がない・・・・
Twitterが上手く連携しない・・・
そもそもsingle.phpないからどこに入れればいいかわからない・・・
などなど
ブログ初心者でも0から設定できるように詳しく解説させていただければと思います！
ちなみに、プラグインを利用しない理由としては、
ページの読み込み速度を考慮しているからです！
プラグインは非常に簡単に設定ができて便利ですが、
少しページが遅くなってしまうので、自作できる箇所は
なるべく自作しようと考えております！
この記事を読んで頂くと下記のようなSNSシェアボタンが作成できます！
まったくプログラミングがわからないという方は、
下記から無料のテキストがメアド登録だけでもらえるのでお時間ある際に！
・プラグインを使わないでSNSシェアボタンを設定したい！
・自作コードで共有ボタンを設置したい！
・共有ボタンのテンプレートがほしい！
・共有ボタンのデザインを自分で変更したい！
プラグインでの設定を希望の方は下記記事を参考にしていただければと思います。
プラグインなし自作でSNS共有ボタンを設置
この記事では、
・Twitter
・Facebook
・はてなブログ
・LINE
・Pintarest
こちらのボタンを設置いたします。
追加がある場合の対応方法も記載させていただきます。
まず簡単にプラグインなしで自作のSNSシェアボタンを設置する
流れを共有させていただければと思います。
■簡単な流れ☆
1. PHPファイルの作成
2. PHPファイルのアップロード
3. CSSでデザイン設定
4. ショートコードの設定
5. 任意の箇所にショートコードを挿入
1.PHPファイルの作成
最初にSNSボタンを設定するためのPHPファイルを作成いたします。
こちらに関しては下記のタグをそのままコピーしていただくだけで
問題ありません。
※ファイル名はsns.phpで保存をお願いします。
SNSのアイコンに関してはFont awsomeを使っております。
まだ設定されていない方は下記記事をご参考にしていただけると
|
1 |
<?php $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name'); ?> <div class="snsShareArea box26"> <span class="box-title"><i class="fas fa-share-alt-square"></i>Let`s Share Happy!</span> <!-- Twitter --> <a class="btn--twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank"> <i class="fab fa-twitter"></i></a> <!-- Facebook --> <a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" class="btn--facebook"> <i class="fab fa-facebook-f"></i></a> <!-- B! Hatena --> <a class="btn--hatena" target="_blank" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"> B!<i class="fas fa-question"></i></a> <!-- Line --> <a class="btn--line" href="http://line.naver.jp/R/msg/text/?url=<?php the_permalink(); ?>" target="_blank"> <i class="fab fa-line"></i></a> <!-- Pinterest --> <a class="btn--pinterest" href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>" target="_blank"> <i class="fab fa-pinterest-p"></i></a> </div> |
もしこちらにのっていないSNSボタンの追加をされたい場合は
こちらのsns.phpに追加をお願いいたします。
2.PHPファイルのアップロード
つづいて、①で作成したsns.phpファイルをアップロードします。
他の記事ですと、single.phpに追記などが記載されていますが、
私の使っているWordpressのテーマの
lion-mediaには該当ファイルがないのでこちらの対応方法を用いました。
格納先は
ブログ名/public_html/wp-content/thema/テーマ名（読者によって違います）/
こちらになります。
詳しい格納方法は下記記事で紹介しております。
3.CSSでデザイン設定
クラス名や、CSSを書き換えることで自由にデザインができます。
CSSなどに関してもう少し詳しく知りたいという方は
下記の無料の講座を受けてみましょう！
知っているか、知らないかで全く理解度が変わります！
このブログで使っているデザインは下記になります。
|
1 |
/* Share button&box */ .box26 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #95ccff; border-radius: 8px; } .box26 .box-title { position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #95ccff; font-weight: bold; } .box26 p { margin: 0; padding: 0; } .snsShareArea:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .snsShareArea a{ box-sizing: border-box; display: block; float: left; width: 31.3%; margin: 1%; padding: .7em 0; border-radius: 3px; color: white; text-decoration: none; text-align: center; font-weight: bold; } .btn--twitter{ background: #55acee; } .btn--facebook{ background: #3b5998; } .btn--line{ background: #54bc4d; } .btn--hatena{ background: #008FDE; } .btn--pocket{ background: #ee4056; } .btn--pinterest{ background: #c60120; }こ |
こちらのファイルをテーマの追加CSSに追記いたします。
CSSの追記方法は下記記事で紹介しております。
4.ショートコードの設定
つぎに上記で作成したSNS共有ボタンを読み込みするための
ショートコードの設定をしていきます。
下記コードをテーマのfunctions.phpに追記しましょう。
|
1 2 3 4 5 6 |
function sns_original() { ob_start(); get_template_part('sns'); return ob_get_clean(); } add_shortcode('sns', 'sns_original'); |
もしPHPの追記方法がわからないという方は下記記事をご参考にください。
5.任意の箇所にショートコードを挿入
④で作成したショートコードは下記になります
上記のテキストを記事内などに挿入することで、
SNS共有ボタンが反映されます！
全ての記事などに一括で設定したい場合は
wordpressのウィジェット機能のカスタムHTMLで挿入をしましょう！
詳しくは下記記事をご参考にしていただければと思います。
最後に
いかがでしたでしょうか？
フローティングでSNSボタンを設定する方法は下記で紹介しております！
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
