ワードプレステーマSWELLとTHE THORの違いについて、設定方法ごとに解説していきます。
今回は「シェアボタン機能」についてです。SWELLとTHE THORでは情報を拡散するためのシェアボタンをカスタマイズして表示することができます。
![SWELL シェアボタンイメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button.png)
この記事のSWELL公式マニュアルはこちら
シェアボタンの設定場所
SWELLでの設定場所
SWELLのシェアボタンの設定は「外観」→「カスタマイズ」→「投稿・固定ページ」→「SNSシェアボタン」で行います。
![SWELL シェアボタンの設定場所](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button-1024x779.png)
THE THORでの設定場所
投稿ページでの表示設定
「外観」→「カスタマイズ」→「投稿ページ設定[THE]」→「シェアボタン設定」
![THE THOR 投稿ページのシェアボタン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button_post-page-1024x771.png)
固定ページでの表示設定
「外観」→「カスタマイズ」→「固定ページ設定[THE]」→「シェアボタン設定」
![THE THOR 固定ページのシェアボタン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button_fix-page-1024x727.png)
シェアボタンのデザイン設定
「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」→「シェアボタン設定(個別ページ用)」
![THE THOR シェアボタンのデザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button-1024x951.png)
シェアボタンのデザイン設定場所
シェアボタンの表示位置設定
SWELLの場合
SWELLでは「シェアボタンを表示する位置」でシェアボタンを最大3ヶ所に表示することができます。
![SWELL シェアボタンの表示位置設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button-display.png)
- 記事上部
- 記事下部
- 固定表示(画面左端にPCのみ表示)
PCでの表示場所
![SWELL シェアボタンの表示位置イメージ(PC)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button-display_pc.png)
スマホでの表示場所
![SWELL シェアボタンの表示位置イメージ(スマホ)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button-display_sp.png)
特定のページでシェアボタンを非表示にする
SWELLでは特定のページでシェアボタンを非表示にすることが可能です。
非表示にしたいページのエディター右側サイドバー内にある「シェアボタンを隠す」にチェックを入れるとシェアボタンが非表示になります。
![SWELL 特定ページでのシェアボタン非表示](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button_hide_page-by-page.png)
THE THORの場合
THE THORではシェアボタンの表示を投稿ページと固定ページで別々に設定します。
次の画面は投稿ページの「シェアボタン設定」ですが、固定ページでも全く同じ設定項目が表示されます。
![THE THOR シェアボタンの表示位置設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button-display.png)
- 記事上部
- 記事下部
PCでの表示場所
![THE THOR シェアボタンの表示位置イメージ(PC)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button-display_pc.png)
スマホでの表示場所
![THE THOR シェアボタンの表示位置イメージ(スマホ)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button-display_sp.png)
特定のページでシェアボタンを非表示にする
THE THORでもSWELLと同様、特定のページでシェアボタンを非表示にすることができます。
非表示にしたいページのエディター右側サイドバー内にある「個別非表示設定」で「シェアボタンを非表示にする」にチェックを入れるとシェアボタンが非表示になります。
![THE THOR 特定ページでのシェアボタン非表示](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button_hide_page-by-page.png)
表示できるシェアボタン
SWELLのシェアボタンは6種類
SWELLでは「表示するボタンの種類」でシェアボタンの表示設定を行います。
![SWELL 表示できるボタンの種類](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button_select-media.png)
- はてブ
- LINE
THE THORのシェアボタンは8種類
THE THORでは投稿ページと固定ページそれぞれで表示するシェアボタンを選択します。
![THE THOR 表示できるボタンの種類](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button_select-media.png)
- はてブ
- LINE
- Google+(サービス終了)
シェアボタンのデザイン
SWELLのシェアボタンデザインは5種類
SWELLではシェアボタンのデザインを5種類から選べるようになっています。
![SWELL シェアボタンのデザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button_design.png)
ブロック
![SWELL シェアボタンデザイン(ブロック)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_design_block-2-1024x532.png)
ボタン
![SWELL シェアボタンデザイン(ボタン)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_design_button-2-1024x532.png)
ボタン(小)
![SWELL シェアボタンデザイン(ボタン小)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_design_button_small-2-1024x531.png)
アイコン
![SWELL シェアボタンデザイン(アイコン)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_design_icon-2-1024x586.png)
ボックス
![SWELL シェアボタンデザイン(ボックス)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_design_box-2-1024x556.png)
THE THORのシェアボタンデザインは11種類
THE THORではシェアボタンのデザインを11種類から選びます。
シェアボタンデザインの設定場所は、先の通り「パーツスタイル設定[THE]」配下です。
![THE THOR シェアボタンのデザイン設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_set_share-button_design.png)
パターン1
![THE THOR シェアボタンデザイン(パターン1)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-1-1024x329.png)
パターン2
![THE THOR シェアボタンデザイン(パターン2)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-2-1024x342.png)
パターン3
![THE THOR シェアボタンデザイン(パターン3)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-3-1024x266.png)
パターン4
![THE THOR シェアボタンデザイン(パターン4)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-4-1024x266.png)
パターン5
![THE THOR シェアボタンデザイン(パターン5)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-5-1024x411.png)
パターン6
![THE THOR シェアボタンデザイン(パターン6)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-6-1024x413.png)
パターン7
![THE THOR シェアボタンデザイン(パターン7)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-7-1024x580.png)
パターン8
![THE THOR シェアボタンデザイン(パターン8)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-8-1024x586.png)
パターン9
![THE THOR シェアボタンデザイン(パターン9)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-9-1024x479.png)
パターン10
![THE THOR シェアボタンデザイン(パターン10)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-10-1024x487.png)
パターン11
![THE THOR シェアボタンデザイン(パターン11)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/thor_share-button_design-11-1024x290.png)
SWELLのみのSNSシェアボタン機能
SWELLにはTHE THORにはないシェアボタン機能がいくつかあるのでこちらでまとめて紹介します。
URLコピーボタン
SNSのシェアボタンと並べてページのURLをコピーするボタンを設置できます。
![SWELL URLコピーボタンの設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button_url-copy.png)
![SWELL URLコピーボタンのイメージ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_url-copy-1024x699.png)
URLコピーボタンのサイズは2種類です。
小さく表示
![SWELL URLコピーボタン(小さく表示)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_url-copy_small-1024x573.png)
大きく表示
![SWELL URLコピーボタン(大きく表示)](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_share-button_url-copy_big-1024x669.png)
「記事下部シェアボタン」上のメッセージ
「記事下部シェアボタン」の上に表示するメッセージを編集することができます。
![SWELL 「記事下部シェアボタン」上のメッセージ](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button_message-1024x616.png)
Twitterシェア時の追加設定
SWELLでは「Twitter用の追加設定」で、Twitterシェアボタンで記事がシェアされた時に自動挿入されるハッシュタグとメンション先を設定することができます。
![SWELL Twitterシェア時の追加設定](https://lifestyle-analytics.com/wp-content/uploads/2020/12/swell_set_share-button-twitter_option.png)
まとめ 総合的にはSWELLがおすすめ
機能面で大きな差はなし
流石にシェアボタンの機能でクリティカルな差はありませんでした。
SWELLとTHE THORどちらも簡単に設定することができますし、設置できるSNSシェアボタンも主要どころ抑えています。
デザインはきれいに表示されるSWELLが優位
シェアボタンのデザインは数だけを見ればSWELL(5種類)よりもTHE THOR(11種類)の方が多いですが、THE THORのシェアボタンのデザインパターンはかなり似たり寄ったりのものが多く、またボタンサイズが均一でないため、2段表示になった途端、かなり歪な印象が目立ちます。
SWELLのシェアボタン
![SWELL シェアボタン サンプル スマホ](https://lifestyle-analytics.com/wp-content/uploads/2021/02/swell_share-button_design_sp.png)
THE THORのシェアボタン
![THE THOR シェアボタン サンプル スマホ](https://lifestyle-analytics.com/wp-content/uploads/2021/02/thor_share-button_design_sp.png)
THE THORのシェアボタンは一番きれいに並ぶデザインを選んだつもりです。
どうですか?
シェアボタンがガタガタしているとちょっとカッコ悪いですよね?
SWELLならどのボタンデザインを選んでもボタンがきれいに配列されるので気持ちいいです。
デザインのパターンも5種類とも違いがはっきりしています。
塵も積もれば山となる、と言います。
小さな違いかもしれませんが、こうした機能一つひとつ見ていくと、SWELLの良さが伝わると思います。
この記事でSWELLを購入する決心がついた人がいれば嬉しいです。