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

コメント

  1. cheapest buy androxal canada cost

    cheap androxal cost at walmart

  2. discount enclomiphene purchase online from india

    ordering enclomiphene buy virginia

  3. cheapest buy rifaximin usa pharmacy

    buy rifaximin overnight fedex

  4. xifaxan cheap overnight delivery

    get xifaxan price generic

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