WordPress

【WordPress】「タイッツーでシェアする」ボタンの設置方法

記事タイトル、URLリンクがタイーツに入力された状態でタイーツ画面が開く。

タイッツーでシェアする時は以下の形式でリンクを作成します。

https://taittsuu.com/share?text=シェアしたいテキスト

これをaタグとかでHTMLボタンにすれば完成なのですが、

記事毎にこれを毎回作成するのはとても面倒です。

なので、今回は「タイッツーでシェアする」ボタン用のショートコードを用意してみました。

ショートコードといってもシンプルなもので、
functions.phpに以下を追加すればOKです。

// ----------------------------------------------------------------------------
// タイッツーでシェアするボタンのショートコード
// ----------------------------------------------------------------------------
function taittsuu_share_button() {
$share_title = get_the_title(); // シェアするページのタイトル(ボタンを設置したページのタイトル)
$share_url = get_permalink(); // シェアするページのURL(ボタンを設置したページのURL)
if ($share_url == false) {return "share url is not found.";}

// タイトルとURLでシェアするテキストを作成
$share_text = $share_title . " " . $share_url;

// シェアボタンのHTML
$share_button = "
<a href='https://taittsuu.com/share?text=" . urlencode($share_text) . "' target='_blank'>
<img src='画像のURL(※)' alt='タイッツーでシェアする' width='50' height='50'>
</a>
";

return $share_button;
}
add_shortcode('wp_taittsuu_share_button', 'taittsuu_share_button');

(※)画像のURLの部分はボタンとして使用する画像のURLです。
使用したい画像をお使いWordPressにアップロードし、そのURLを指定してください。
この記事では、タイッツー公式が配布しているアイコン画像を使用しています。


これを記事に追加すると以下のように表示されます。

タイッツーでシェアする


クリックすると以下のように、タイトルとURLをタイーツできます。

記事タイトル、URLリンクがタイーツに入力された状態でタイーツ画面が開く。


ショートコードの設置場所はどこでもOKです。

ショートコードブロックを使って記事中に設置してもいいですし、

①ブロック一覧の検索窓に"short"と入力し、ショートコードブロックを検索 ②ショートコードブロックを記事に追加 ③ショートコードを入力


外観のカスタマイズから、ウィジェットとして追加してもいいと思います。

①シェアボタンを追加したい場所のウィジェットを開く ②「カスタムHTML」を追加 ③ショートコードを入力 ④適用をクリックするとボタンがプレビュー画面に表示される

上述のコードをそのまま使用する場合は、ショートコード名の部分は以下でOKです。(コピペ用)

[wp_taittsuu_share_button]


これで「タイッツーでシェアする」ボタンの設置は完了です。

私はCocoonのテーマを使用しているので、次回はCocoonのSNSシェアの欄にこのボタンを追加してみたいと思います。

参考
https://www.yururito.net/entry/taittsuu-share-button
https://taittsuu.com/share_link

コメント

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