WordPress ソーシャルボタン 設置 重い

WordPress(賢威7.0)でブログ/サイト運営をしていると、ソーシャルメディアの力を借りたくなるものです。

そこで、オススメなのがソーシャルボタン設置して、訪問ユーザーにシェアしてもらうこと。

 

今回は読み込みが重いプラグインの方法ではなく、

賢威のソーシャルボタンでのカスタマイズ方法を解説します。

プラグインの “WP Social Bookmarking Light” は重い??

以前に書いたこちらの記事では、

>> WP Social Bookmarking Lightの使い方!表示位置のオススメは?

WPプラグインである “WP Social Bookmarking Light” のソーシャルボタンでした。

このプラグインによって設置したソーシャルボタンはこんな感じになります。

 

WordPress ソーシャルボタン 設置 重い

 

慣れていない初心者にとっては難しいコードの修正も不要なので、一番ラクにSNSボタンをブログに導入できる方法ですよね。

ただし、WP Social Bookmarking Lightはソーシャルボタンを簡単に設置できる反面、

 


『動作が重い・・・』

『そもそも、ボタンが押しにくい・・・』


 

といった不満がある人も少なくないです。

 

そこで、今回は僕のブログでも採用している、こちらのソーシャルボタンの設置方法を紹介したいと思います。

立体感のあるボタンでブログの見栄えが凄く変わります。

WordPress ソーシャルボタン 設置 重い

やはり、↑のようなデザインで大きなボタンだと、ユーザーが押してくれやすい印象がありますよね。

 

以降では、本ブログと同様のソーシャルボタン設置方法を解説していきますね。

WordPress(賢威7.0)でソーシャルボタンを設置

まず、賢威の設定のところから、【SNSの設定】をクリックしてください。

WordPress ソーシャルボタン 設置 重い

 

すると、賢威が表示させてくれるソーシャルボタンの設定画面に入れます。

以下の画像のように、【投稿ページの表示しない】のチェックを外します。

WordPress ソーシャルボタン 設置 重い

 

そして、【変更を保存】を押してください。

WordPress ソーシャルボタン 設置 重い

 

続いて、【外観】⇒【テーマの編集】を選択しましょう。

WordPress ソーシャルボタン 設置 重い

 

テーマの編集に入ったら、【social-button2.php】をクリック。

WordPress ソーシャルボタン 設置 重い

 

ここで、元からあったコードを【コメントアウト】します(もちろん、元のコードをパソコンに保存するなら、消去してもOKです)。

コメントアウトとはコードを無効化することであり、WordPressからは見えない状態(無視状態)となります。

 

以下の画像のように、

で挟むとコメントアウトになります。

WordPress ソーシャルボタン 設置 重い

 

コメントアウトができたら、【新しいコード】を貼り付けます。

つまり、以下のような状態になりますね。

 

ただし、『34行目』の “$twitter_account = ‘あなたのID’;” には、

『あなたのTwitterアカウントのID』にしてくださいね。

※TwitterアカウントのIDは、”@” から始まるいつものIDです。

 

ここまでの作業ができたら、【ファイルを更新】のボタンを押して保存しましょう。

WordPress ソーシャルボタン 設置 重い

 

さらに、次は【style.css】をクリックしてください。

WordPress ソーシャルボタン 設置 重い

 

そして、以下の【コードをstyle.cssの末尾】に貼ってください。

 

ちょうど以下のようになります。

WordPress ソーシャルボタン 設置 重い

 

ここまでの手順によって、例のソーシャルボタンが設置されているハズです。

 

もし仮に、サイトに反映されない場合は、

  • スマホでチェックしてみる
  • ブラウザのキャッシュをクリアしてみる
  • シークレットモードで開いてみる
  • 時間を置いてみる

を試してみてください。

WordPressの変更が反映されるまで、少しばかり時間が掛かることがあります。

記事下のみにソーシャルボタンを設置すべき??

さて、ここからは個人の好みの問題になりますが、ソーシャルボタンの設置場所をどこにするか??

もしこのままWordPressの設定を変更しなければ、ソーシャルボタンが記事の上下両方に表示されているハズです。

 

しかし、ブログの記事というのは、読み終わった後にユーザーがシェアをするものですよね。

つまり、記事上にソーシャルボタンを設置するのは、もしかすると無意味かもしれません。

 

なので、僕のブログではユーザーがコンテンツを読むのに集中できるようにソーシャルボタンは記事下だけに限定しています。

ソーシャルボタンを記事下だけに設置する方法

まず、【single.php】をクリックして開いてください。

WordPress ソーシャルボタン 設置 重い

 

そして、こちらのコードを以下の画像のようにコメントアウトしてください。

↑このコードが2箇所ありますが、上の方が記事上のソーシャルボタンに該当します。

つまり、記事上のソーシャルボタンだけをコメントアウトし、表示させないようにするワケです。

WordPress ソーシャルボタン 設置 重い

まとめ-ソーシャルボタン

いかがだったでしょうか??

 

今回は、プラグイン “WP Social Bookmarking Light” ではなくて、賢威をイジる方法でソーシャルボタンを設置してみました。

ちょうど、↓このようなSNSボタンを設置できたかと思います。

 

【関連記事】

  WP Social Bookmarking Lightの使い方!表示位置のオススメは?