PR

WordPressプラグインを使わずfaceBook風フォローボタンを追加する方法

WordPress

faceBookのいいねボタン風Twitterフォローボタンが設置したくなったので作ってみました。
※このブログではないので注意!

PCの場合はWordPressからアイキャッチ画像を表示してくれる機能付き!

スマートフォンの場合はアイキャッチ画像部分が消えるようにしています。

スポンサーリンク

コード

html(㊟PHPを含みます)

ここにTwitterIDの部分へご自分のTwitterIDを入れてください

<div class="p-entry__push">
 <div class="p-entry__pushThumb" ><img src="<?php the_post_thumbnail_url('medium'); ?>" alt="<?php the_title(); ?>"></div>
 <div class="p-entry__pushLike">
 <p>この記事が気に入ったら
 <br>フォローお願いします。
 </p>
 <ul class="social-icon">

<a href="https://twitter.com/elder0bear?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-lang="ja" data-show-count="false">Follow @ここにTwitterID</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
 </ul>
 <p class="p-entry__note">登録で最新情報をお届け</p>
 </div>
</div>

CSS

ul.social-icon {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: center;
 justify-content: center;
 list-style-type: none;
 -webkit-padding-start: 0;
}
.p-entry__push {
 margin-bottom: 20px;
 display: table;
 table-layout: fixed;
 width: 100%;
 background-color: #2b2b2b;
 color: #fff;
}
 
.p-entry__pushThumb {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
}
 
.p-entry__pushLike {
 display: table-cell;
 padding: 20px;
 text-align: center;
 vertical-align: middle;
 line-height: 1.4;
 font-size: 18px;
}
 
.p-entry__note {
 margin-top: 15px;
 font-size: 12px;
 color: #fff;
}
@media screen and (max-width: 600px) {
.p-entry__pushThumb {
 display:none
 }
}

PHPを使用するので直接テーマ編集かウィジェットでPHPが使えるようになるものを使用してください。(ショートコードでも可)

参考サイト(変えすぎてしまいクラス名くらいしか参考になっていません。)

これでfaceBook風Twitterフォローボタンは完了です

細かいところは各自調整してみてください。

コメント

intel 13世代/14世代CPUのマイクロコード不具合の症状がCORE i9 13900Kに出たので返品交換(マイクロコード不具合CPU返品交換方法!)
【DaVinci Resolve】Speed Editorが「DaVinci Control Panels」には認識されるけどダヴィンチリゾルブ側で認識されない場合の対処方法!
アドセンスのお支払い情報画面に「お支払いが遅れることなく、税金の源泉徴収も適切に行われるようにするために、できる限り早急にシンガポールの税務情報をご提出ください。」と表示された?!(対処方法)
auスマホ・タブレットのSIMロックを無料で解除する方法(auスマホで格安MVMO SIMが使えるようになる!)
Windows11で高速スタートアップを無効にする方法(稀にハードウエア不具合を招くことも!?)
DaVinci Resolveの課金有料版「DaVinci Resolve Studio」をポイントも合わせてなるべくお得に購入する方法(実際に買ってみた)
【ライティング】キーボードなどのライティング設定を邪魔してくるWindws機能「動的ライティング」の切り方(無効にする方法)
【100均】ペン型セラミックカッターが便利すぎるのに100円で買える!?
【AI】初めてChatGPTに登録して聞いてみた(AI初体験)
入院時の暇つぶし最強アイテムは家でも使っているアレ!
2024年11月
 123
45678910
11121314151617
18192021222324
252627282930  
タイトルとURLをコピーしました