ワードプレスにブログ記事のSNSシェアボタンを自作で設置【コピペで簡単】

スポンサーリンク
man

困ってる人

ブログの記事をSNSにシェアするボタンを作りたいんだけど
プラグインを使うと表示が遅くなったりするんだよなぁ
何か簡単に出来る方法ってないかなぁ?


こんにちは、ヨロと申します。

という事で今回は、こちらのブログでも使用中のプラグインなしで作るシェアボタンについて。

今回は「HTML」「CSS」だけのパターンではなく「sns.php」を使うパターンを紹介。

今回作るのは、

  • Twitter
  • Facebook
  • Line
  • はてなブックマーク
  • の4つのシェアボタン

    PCで見た場合

    タブレットで見た場合

    スマートフォンで見た場合

    という事でまずは「sns.php」に書く内容から。

    スポンサーリンク

    ワードプレスにブログ記事のSNSシェアボタンを自作で設置【sns.php】

    今回は「share」というクラス名の中にシェアボタンを入れてみました。

    // sns.php
    
    <?php
    $url_encode=urlencode(get_permalink());
    $title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
    ?>
    
    <div class="share">
      <ul>
        <!--Twitter-->
        <li class="button twitter">
          <a href="//twitter.com/intent/tweet?text=<?php echo urlencode(the_title("","",0)); ?>&t=<?php echo urlencode(get_permalink()); ?>&url=<?php echo urlencode(get_permalink()); ?>" target="_blank" title="Twitterでシェアする">ツイート</a>
        </li>
        <!--Facebook-->
        <li class="button facebook">
          <a href="//www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="facebookでシェアする">Facebook</a>
        </li>
        <!--Pocket-->
        <li class="button line">
          <a href="//timeline.line.me/social-plugin/share?url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" title="LINEでシェアする">LINE</a>
        </li>
        <!--はてなブックマーク-->
        <li class="button hatena">
          <a href="//b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(the_title("","",0)); ?>" target="_blank" data-hatena-bookmark-title="<?php the_permalink(); ?>" title="このエントリーをはてなブックマークに追加する">はてブ!</a>
        </li>
      </ul>
    </div>
    スポンサーリンク

    ブログ記事のシェアボタンを自作で設置【CSS:デザイン部分】

    // CSS部分
    
    .share {
    	text-align: center;
    	margin: 20px 0px 30px 0px;
    }
    
    .share li {
    	padding: 10px 0px;
    	border-radius: 5px;
    }
    
    .button {
    	display: inline-block; /* ここで横並び */
    	width: 24%; /* ボタン間の空白を作るためにmarginが入っているので25%だとボタンが端で折り返してしまう */
    	margin-bottom: 5px;
    }
    
    .button a {
    	display: block;
    	width: 100%;
    	height: 100%;
    	color: #fff;
    	font-size: 14px;
    	font-weight: bold;
    	text-decoration: none;
    	letter-spacing: 1px;
    }
    
    .button:hover {
    	opacity: 0.8;
    }
    
    .button:active {
    	transform: translateY(3px);
    	margin-bottom: 8px;
    	border-bottom: none;
    }
    
    .twitter {
    	background-color: #55acee;
    	border-bottom: 3px solid #008fde;
    }
    
    .facebook {
    	background-color: #315096;
    	border-bottom: 3px solid #2c4373;
    }
    
    .line {
    	background-color: #00c300;
    	border-bottom: 3px solid #009d00;
    }
    
    .hatena {
    	background-color: #008fde;
    	border-bottom: 3px solid #16679e;
    }
    スポンサーリンク

    ワードプレスにブログ記事のSNSシェアボタンを自作で設置【HTML部分】

    HTMLファイル内の、実際に表示させたい場所にこのタグを貼り付ける

    <?php get_template_part( 'sns' ); ?>

    そうする事によって「sns.php」内に書かれた内容が、HTML側で表示されるようになる。

    もしも「sns.php」の事なんかよく分からないから使いたくないという事でしたら、

    上のタグやPHPを使わずに、それぞれのシェアする為の記述を、直接HTML内に書き込むだけ。

    タブレットとスマートフォンで見る時は、見た目の面や使いやすさの事も考えて、ボタンの並びを縦並びにした方がいいかも。

    今の横並びから、縦方向並び変える場合は「CSS」ファイルの、

    .button「width」を、

    タブレットの場合は :49%; → これで2列になる
    スマートフォンの場合は :100%;にすればOK → これで縦1列になる

    ボタンのデザイン部分を変えたい場合は、CSSを直接編集するか、

    文字やアイコンなどを追加したい場合Font Awesomeのサービスなんかが割と便利かも。

    終わり

    コメント

    タイトルとURLをコピーしました