WordPressカスタマイズfromChatGPTランダム記事表示ウィジットを作成する方法
hiro
magmag
WordPressにSNSシェアボタンをプラグインなしで実装したメモ
hiro
記事内に商品プロモーションを含む場合があります
現在使用中のワードプレステーマにシェアボタンがついていなかったので実装しました。
以下のサイト様のコードを参考とさせていただきました。ありがとうございます。
https://sumibi-blog.com/wordpress-sns-button/
以下をfunctions.phpに追記です。
function add_social_share_buttons_after_post_content($content) {
// シングル投稿ページの場合のみ処理を実行
if (is_single()) {
$url_encode = urlencode(get_permalink());
$title_encode = urlencode(get_the_title()) . '｜' . get_bloginfo('name');
$social_buttons = '<div class="share-button">';
$social_buttons .= '<p>シェアする</p>';
$social_buttons .= '<ul>';
$social_buttons .= '<li><a href="//twitter.com/intent/tweet?url=' . $url_encode . '&text=' . $title_encode . '&via=777hirochanpon&tw_p=tweetbutton" onclick="javascript:window.open(this.href, \'_blank\', \'noreferrer\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600\');return false;"><span>Twitter</span></a></li>';
$social_buttons .= '<li><a href="//www.facebook.com/sharer.php?src=bm&u=' . $url_encode . '&t=' . $title_encode . '" onclick="javascript:window.open(this.href, \'_blank\', \'noreferrer\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600\');return false;"><span>Facebook</span></a></li>';
$social_buttons .= '<li><a href="//social-plugins.line.me/lineit/share?url=' . $url_encode . '" onclick="javascript:window.open(this.href, \'_blank\', \'noreferrer\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500\');return false;"><span>LINE</span></a></li>';
$social_buttons .= '<li><a href="//b.hatena.ne.jp/entry/' . $url_encode . '" onclick="javascript:window.open(this.href, \'_blank\', \'noreferrer\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=800\');return false;"><span>Hatena</span></a></li>';
$social_buttons .= '</ul></div>';
$content .= $social_buttons;
}
return $content;
}
add_filter('the_content', 'add_social_share_buttons_after_post_content');
あとはCSSは好みです
.share-button {
padding-top: 50px;
text-align: center;
}
.share-button p {
font-size: .8em;
padding-left: 20px;
}
.share-button ul {
margin-top: -20px;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.share-button li {
margin: 0;
/* リストアイテムのマージンをリセット */
}
.share-button a {
text-decoration: none;
/* リンクの下線を削除 */
}私は慣れていないために、こうしちゃったけど、長いコードなんかは、sns.phpにしちゃった方がいいんですかねえ。
もしかしたら、手動でなくプラグインでシェアボタンを実装に切り替えるかもしれません。
広告
ABOUT ME
小１娘を育児中の主婦。娘の不登校と向き合っています。ブログカスタマイズが趣味。