2026年7月18日

WordPressのテーマにソーシャルシェアボタンを追加するコード例（プラグインなし）

テーマ・デザイン

プラグインを使わずにソーシャルシェアボタンを付けるなら、各SNSが用意している「シェア用URL」へのリンクを、子テーマの functions.php で記事末尾に差し込む方法が手軽で軽量です。この記事では、X・Facebook・LINE・はてなブックマークのボタンを出すコード例と、クラシックテーマ／ブロックテーマそれぞれでの組み込み方、表示されないときの確認ポイントまでを解説します。

リンク型のシェアボタンを選ぶ理由

シェアボタンの作り方は大きく2通りあります。SNSが配布する公式スクリプト（JavaScript SDK）を読み込む方法と、シェア画面を開くURLへ普通のリンクを張る方法です。

公式スクリプトは「いいね数」などを表示できる反面、ページ表示のたびに外部のスクリプトや Cookie が読み込まれ、表示速度やプライバシーの面で負担になります。リンク型は外部への通信がクリックした時だけで済み、テーマ側のCSSで見た目も自由に整えられます。数の表示が不要なら、リンク型で十分なことがほとんどです。

なお、ブロックエディターにある「ソーシャルアイコン」ブロックは、自分のSNSアカウントのプロフィールへ誘導するためのものです。読者が記事をシェアするボタンとは役割が違うので、今回のような用途には向きません。

作業前の準備

コードは親テーマではなく子テーマの functions.php に書きます。親テーマに直接書くと、テーマの更新で消えてしまうためです。子テーマがまだない場合は先に作成してください。

また、functions.php の書き間違いはサイト全体を表示できなくする原因になります。編集前にファイルのバックアップを取り、管理画面のテーマファイルエディターではなく、FTPやサーバーのファイルマネージャーで編集すると、エラー時にすぐ元へ戻せます。

シェアボタンのHTMLを作る関数

まず、記事のURLとタイトルからボタン一式のHTMLを返す関数を用意します。ここでは出力と組み込みを分けておき、後でクラシックテーマ・ブロックテーマのどちらにも使い回せるようにします。

<?php
// 子テーマの functions.php に追記
function mytheme_share_buttons( $post = null ) {
	$post = get_post( $post );
	if ( ! $post ) {
		return '';
	}

	$url   = get_permalink( $post );
	// タイトルの &#8217; などの文字参照を元の文字に戻してからURLエンコードする
	$title = html_entity_decode( wp_strip_all_tags( get_the_title( $post ) ), ENT_QUOTES, get_bloginfo( 'charset' ) );

	$services = array(
		'x'        => array(
			'label' => 'X',
			'href'  => 'https://twitter.com/intent/tweet?url=' . rawurlencode( $url ) . '&text=' . rawurlencode( $title ),
		),
		'facebook' => array(
			'label' => 'Facebook',
			'href'  => 'https://www.facebook.com/sharer/sharer.php?u=' . rawurlencode( $url ),
		),
		'line'     => array(
			'label' => 'LINE',
			'href'  => 'https://social-plugins.line.me/lineit/share?url=' . rawurlencode( $url ),
		),
		'hatena'   => array(
			'label' => 'はてブ',
			'href'  => 'https://b.hatena.ne.jp/add?mode=confirm&url=' . rawurlencode( $url ) . '&title=' . rawurlencode( $title ),
		),
	);

	$html = '<nav class="share-buttons" aria-label="この記事をシェア"><ul class="share-buttons__list">';
	foreach ( $services as $key => $service ) {
		$html .= sprintf(
			'<li><a class="share-buttons__link share-buttons__link--%1$s" href="%2$s" target="_blank" rel="noopener noreferrer">%3$s</a></li>',
			esc_attr( $key ),
			esc_url( $service['href'] ),
			esc_html( $service['label'] )
		);
	}
	$html .= '</ul></nav>';

	return $html;
}

ポイントは3つあります。

タイトルの文字参照を戻す: get_the_title() は表示用に整形された値を返すため、アポストロフィなどが ’ のような文字参照になっていることがあります。そのままURLに入れるとシェア文に記号の羅列が出るので、html_entity_decode() で戻してから rawurlencode() します。
URLパラメータは rawurlencode()、属性は esc_url(): パラメータ部分をエンコードしたうえで、href 全体を esc_url() でエスケープします。
別タブで開くリンクには rel="noopener noreferrer": 開いた先のページから元のページを操作されないようにするためです。

各SNSのシェア用URLの形式は、サービス側の都合で変わることがあります（2026年10月現在、上記の形式で動作するものとして記載しています）。X は x.com ドメインのURLも案内されていますが、twitter.com の形式も転送されて使える状態です。公開前に実際にクリックして、シェア画面が開くかを確かめてください。

記事の末尾に自動で差し込む

関数ができたら、the_content フィルターで投稿本文の後ろに追加します。

<?php
add_filter( 'the_content', function ( $content ) {
	// 投稿の個別ページで、表示中の記事そのものの本文にだけ付ける
	if ( ! is_singular( 'post' ) || get_the_ID() !== get_queried_object_id() ) {
		return $content;
	}
	return $content . mytheme_share_buttons();
} );

条件を付けている理由は、the_content フィルターが「関連記事の抜粋」や「ウィジェット内の投稿表示」など、本文以外の場面でも呼ばれることがあるためです。表示中のページのIDと処理中の投稿IDが一致する時だけ追加すれば、関連記事の一覧にまでボタンが並ぶといった重複を防げます。固定ページにも出したい場合は、is_singular( 'post' ) を is_singular( array( 'post', 'page' ) ) に変えます。

この方法は、クラシックテーマでもブロックテーマでも動きます。ブロックテーマの「投稿コンテンツ」ブロックも本文の出力時に the_content フィルターを通すためです。

好きな位置に置きたい場合

記事の冒頭や、タイトル直下など本文以外の場所に置きたいときは、組み込み方を変えます。

クラシックテーマでは、親テーマの single.php（または single.php から呼ばれる template-parts 内のファイル）を子テーマに同じパスでコピーし、置きたい位置に次の1行を書きます。関数内でエスケープ済みなので、そのまま echo して問題ありません。

<?php echo mytheme_share_buttons(); ?>

ブロックテーマでは、ショートコードとして登録しておき、サイトエディターで「単一投稿」のテンプレートを開いて「ショートコード」ブロックを置く方法が扱いやすいです。この場合は、前の節の the_content フィルターは外しておかないと、ボタンが2か所に表示されます。

<?php
add_shortcode( 'share_buttons', function () {
	return mytheme_share_buttons();
} );

ショートコードブロックには [share_buttons] と入力します。

見た目を整えるCSS

スタイルは子テーマ内のCSSファイルにまとめ、投稿ページでだけ読み込みます。

<?php
add_action( 'wp_enqueue_scripts', function () {
	if ( is_singular( 'post' ) ) {
		wp_enqueue_style(
			'mytheme-share',
			get_stylesheet_directory_uri() . '/css/share.css',
			array(),
			'1.0.0'
		);
	}
} );

/* 子テーマの css/share.css */
.share-buttons__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 2em 0 0;
	padding: 0;
	list-style: none;
}
.share-buttons__link {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.share-buttons__link--x { background: #000; }
.share-buttons__link--facebook { background: #1877f2; }
.share-buttons__link--line { background: #06c755; }
.share-buttons__link--hatena { background: #00a4de; }

CSSを変更しても見た目が変わらないときは、wp_enqueue_style() の最後の引数（バージョン）を上げると、ブラウザやCDNに古いCSSが残っていても新しいファイルが読み込まれます。

表示・動作を確認する

組み込んだら、次の順で確かめます。

ログアウトした状態で表示を見る: キャッシュプラグインを使っている場合、ログイン中はキャッシュを通らないため、ログアウト時だけ古いページが出ることがあります。表示されなければページキャッシュを削除します。
各ボタンをクリックする: シェア画面にURLとタイトルが入っているかを確認します。タイトルが文字化けしていたら、エンコード前の文字参照の戻しが効いていない可能性があります。
シェア時のプレビュー（カード）を確認する: 画像や説明文が意図どおりに出るかは、ボタンではなくページ側のOGPタグで決まります。Facebook はシェアデバッガーで取得内容を確認できます。OGPが未設定なら、SEOプラグインなどで設定しておきます。
PHPエラーが出ていないか: 画面が真っ白になった、ボタンの位置に警告文が出た、という場合は wp-config.php で WP_DEBUG と WP_DEBUG_LOG を有効にし、wp-content/debug.log を確認します。確認が済んだら本番では無効に戻してください。

スマートフォンのブラウザ標準の共有シートを使いたい場合は、JavaScript の Web Share API（navigator.share）を組み合わせる方法もあります。対応していないブラウザ向けに、今回のリンク型ボタンを残しておくと安心です。

まとめ

シェアボタンは、各SNSのシェア用URLへのリンクで作ると外部スクリプトが不要で軽量です。
コードは子テーマの functions.php に書き、タイトルは文字参照を戻してから rawurlencode()、href は esc_url() でエスケープします。
記事末尾に出すなら the_content フィルター、位置を指定したいならクラシックテーマは single.php、ブロックテーマはショートコードブロックを使います。
シェア時のカード表示はOGP次第なので、ボタンと合わせて確認します。シェアURLの形式は変わることがあるため、定期的にクリックして動作を確かめてください。