みんなに教えたい時にボタンひとつでシェア出来るSNSシェアボタン、便利ですね。
今回はtwitterのシェアボタンを押した時、その記事のカテゴリーやタグをハッシュタグとして付加し、より一層拡散力を強化する方法を紹介します。
完成図
完成図はこちらです〜！ツイート内容にタイトル・URL・ハッシュタグが多数入っていますね。何もしていないのにめっちゃマメな人のツイートみたいでテンションあがります。
ハッシュタグ(#イタリアン #テイクアウト)はカテゴリーやタグを引っ張ってきて自動で追加しちゃうので楽ちんですよ！
もちろん固定のハッシュタグ(#nakolog)も追加出来ます。
便利！！
本日のメインランチ：備前黒牛ステーキランチ850円「グリル モトカラ」#西中島 #イタリアン #テイクアウトOK #西中島南方 #nakolog https://t.co/gYejDyElkW
— ナコ (@nako_x) August 6, 2020
仕様の確認
サンプルで私の書いたランチ記事をもってきました！
この記事でtwitterボタンを押すと以下の情報をピックアップしてツイート出来るよう改造していきます。
タイトル要素
「本日のメインランチ：備前黒牛ステーキランチ850円「グリル モトカラ」#西中島」
リンク要素
「https://nakox.jp/life/lunch/nisinaka_lunch_motokara」
ハッシュタグ用のタグ
「ランチレビュー」→カテゴリー
「テイクアウト」「イタリアン」「西中島南方」→タグ
「nakolog」→固定の自分ブログ用ハッシュタグ
ソースコード
それでは実際のコードを紹介します。
WordPressのタグを使ってタイトル・リンク・カテゴリー・タグを取得します。
以下のタグをsingle.phpテンプレートにはりつけてください！
<?php
//記事のURL取得
$post_link = esc_url( get_the_permalink() );
//記事のタイトル取得
$post_title = get_the_title();
//記事のカテゴリー取得
$post_categories_array = get_the_category();
//記事のタグ取得
$post_tags_array = get_the_tags();
//カテゴリーに半角スペースと＃を追加
foreach($post_categories_array as $category) {
$post_categories .= " #". $category->name;
}
//タグに半角スペースと＃を追加
foreach($post_tags_array as $tag) {
$post_tags .= " #". $tag->name;
}
//ハッシュタグをURLの前に持って行きたいので文字列合体
$post_title.= $post_categories;
$post_title.= $post_tags;
$post_title .= " #なこログ #固定だよ #腹減った";
//記号も文字も文字化け防止＆バグ防止のためエンコードしとく
$post_title = rawurlencode( html_entity_decode( wp_strip_all_tags( $post_title ), ENT_COMPAT, 'UTF-8' ) );
?>
ハッシュタグにカテゴリーがいらない場合は$post_title.= $post_categories;を削除、ハッシュタグにタグが不要な場合は$post_title.= $post_tags;を削除してください。
「#なこログ #固定だよ #腹減った」部分は自分のブログ用固定タグ等、自由な文字列を追加して使ってくだい。
こちらも不要な場合はカテゴリーやタグと同じく削除してくださいね。
続いてsingle.php内のシェアボタンを表示したいところに以下のタグをはりつけます。
<a href="https://twitter.com/share?url=<?php echo $post_link; ?>&text=<?php echo $post_title; ?>">シェア</a>
ツイートボタンを押した結果
シェアボタンを押して結果をみてみましょう！
どどーん！見事に表示されました。
一緒にtwitterカード（画像リンクみたいなやつ）を表示する方法はまた別に記事をかきたいと思います。
これでズボラなのにマメな人の仲間入りができます！
おまけ hestiaテンプレートの場合(タグのみ追加ver)
私がhestiaを使っているのでそちらの場合の対応方法です。
hestia/inc/views/blog/下の【class-hestia-additional-views.php】ファイル28行目あたり
Social sharing icons for single view.部分に以下を追加します。
コピー
$post_tags_array = get_the_tags();
foreach($post_tags_array as $tag) {
$post_tags .= " #". $tag->name;
}
$post_title .= $post_tags;
$post_title .= " #nakolog";
おまけ lionmediaテンプレートの場合(タグのみ追加ver)
lionmediaも使っているのでそちらの場合の対応方法です。
lionmedia下の【functions.php】ファイル5229行目あたり
SNSボタンリスト部分に以下を追加します。
コピー
//記事のタイトル取得
$post_title = get_the_title();
//記事のタグ取得
$post_tags_array = get_the_tags();
//タグに半角スペースと＃を追加
foreach($post_tags_array as $tag) {
$post_tags .= " #". $tag->name;
}
//ハッシュタグをURLの前に持って行きたいので文字列合体
$post_title.= $post_tags;
$post_title .= " #nakolog";
//記号も文字も文字化け防止＆バグ防止のためエンコードしとく
$post_title = rawurlencode( html_entity_decode( wp_strip_all_tags( $post_title ), ENT_COMPAT, 'UTF-8' ) );
twitter部分を以下に差し替えます
echo '<li class="socialList__item"><a class="socialList__link icon-twitter" href="http://twitter.com/intent/tweet?text='. $post_title .'&'. urlencode(get_permalink()) .'&url='. urlencode(get_permalink()) .'" target="_blank" title="Twitterで共有" rel="noopener noreferrer"></a></li>';