WordPress、[Cocoon]サイドバーに「プロフィール」と「SNSフォロー」をウィジェットで簡単に設定

2019年2月19日

Worepressの無料人気テーマ「Cocoon」には、色々な便利ウィジェットが用意されてます、この記事では「プロフィール」と「SNSフォローボタン」をウィジェットを利用し、ユーザーのプロフィールとの連携で簡単に設定できる方法についてご紹介します。

プロフィールはブログのサイドバー設定では外せない項目です、ブログを訪れてくれたユーザーへ、次のアクションを起こさせ集客や販売へ続けていくステップとして重要です、是非設定しておきましょう。

また、SNSフォローボタンは、管理人のSNSにリンクしフォローしてもらうためのボタンです、プロフィール同様ユーザーに対して管理人に興味を持ってもらう有力なツールです積極的に利用しましょう。

Cocoonではこの両者がプラグイン等を利用することなく、専用のウィジェットでとても簡単に設定できます、

ウィジットでサイドバー設定

プロフィール

ダッシュボードのサイドバーにて[外観]>>[ウィジェット]をクリックします。

キャプチャー、ウイジェット

ウィジェットの一覧が表示されます。

[C]プロフィール」 をクリックします。
*[C]プロフィールはテーマCocoon専用のウイジェットです。
キャプチャー、プロフィール

 

プロフィールの設置場所選択のウィンドウが出ます
[サイドバー]を選択します。

[ウィジェットを追加]をクリックします。
キャプチャー、プロフィール場所

サイドバーの設定欄に「[C]プロフィール」が表示されて設定画面が開きます。

①「タイトル」を入力します
*「肩書きラベル」があれば入力します。
②「画像を円形にする」、は好みでチェックを入れます。
③ [保存] ボタンをクリックします。
④「あなたのプロフィール」をクリックします。
キャプチャー、プロフィール1

 

プロフィール画面が表示されます。

キャプチャー、プロフィール画面

①ニックネームを入力します。
②ブログ上の表示名を選びます。
*ニックネームかユーザー名か選べます
③メールアドレスを入力します。
キャプチャー、プロフィール2

④プロフィール情報を入力します。
キャプチャー、プロフィール3

プロフィール画像のアップロード欄で[選択]をクリックします。
キャプチャー、プロフィール4

メディアライブラリーの画面が表示されます、
プロフィールに使う写真を選択します。
[画像を選択]のボタンをクリックします。
キャプチャー、プロフィール画像選択

プロフィール画像が設定されました。
キャプチャー、プロフィール写真選択

あらかじめ作成した、プロフィールページがある場合はそのURLを入力します。
[プロフィールを更新]のボタンをクリックします。
キャプチャー、プロフィールURL

画面上部に「プロフィールを更新しました。」と表示されました。

キャプチャー、設定完了

これで、プロフィール設定は完了です。

 

SNSフォローボタン

続いて、SNSのフォローボタンを設定します。
これも、Cocoon専用のウィジェットを利用します。

ウィジェット一覧画面で、「[C]SNSフォローボタン」をクリックします。
*これはCocoon専用のウィジェットです。
キャプチャー、ウィジェット

表示位置で[サイドバー]を選択します。
[ウィジェットを追加]のボタンをクリックします。
キャプチャー、SNSボタン

 

サイドバーの設定欄に「[C]SNSフォローボタン」が表示されて設定画面が開きます。
①タイトルを入力します。
②「表示設定」をクリックします。
キャプチャー、SNS設定

SNSフォローボタンを表示させるまたは表示させないページの設定ができます。

[保存]ボタンをクリックします。

キャプチャー、SNS表示

 

ユーザー設定

まず、ユーザー設定の画面で、SNSのURLを入力します。
ダシュボードの左メニューで [ユーザー]>>[あなたのプロフィール]をクリックします。
キャプチャー、ユーザー設定画面

プロフィール画面が表示されます、
キャプチャー、プロフィール画面

表示させるSNSのURLを入力します。
*URLはアカウントだけでなく、フルでアドレスを入力します。
キャプチャー、URLの入力

画面右下の[プロフィールを更新] ボタンをクリックします。
キャプチャー、保存

これでプロフィール画面の設定は完了です。

 

CocoonのSNS設定画面

Cocoonの専用設定画面でSNSボタンの表示設定をします。
ダシュボードの左メニューで [Cocoon設定]>>[Cocoon設定]をクリックします。

キャプチャー、Cocoon設定

Cocoon設定の画面が開きます、[SNSフォロー]のタブをクリックします。

プレビューに、URLを設定したボタンと、デフォルトで設定されいる「feedlyフォロー」「RSS購読」が表示されています。

キャプチャー、フォローボタン

①本文下のフォローボタンを表示するはデフォルトでチェックが入っています。
*問題なければそのままにしておきます。
②フォローメッセージ:フォローボタン欄に表示されるメッセージです。
*これもあらかじめ入力されています、そのままでもOKです。
キャプチャー、フォローボタン設定1

③ニュースフィードの購読ボタンの表示を選択します
*デフォルトでは両方チェックが入っています(今回はボタンの数の関係でfeedlyを外します)

④ボランのカラーを選びます
*「ブランドカラー」「ブランドカラー(白抜き)」「モノクロ」から選べます

⑤デフォルトユーザーを選びます
*ユーザーが複数存在する場合に(投稿や固定ページ以外で)フォローされるユーザーを指定します

⑥フォロー数の表示の有無を選びます

⑦feedlyの購読者数がエラーで表示できない場合に表示される人数を指定します。

キャプチャー、SNSフォロー設定2

キャッシュ設定をします、(デフォルトのままで問題ありません)

[変更をまとめて保存]のボタンをクリックします。
キャプチャー、SNSフォロー設定キャッシュ

これでSNSフォローボタンの設定は完了です。

 

サイトバーの表示位置設定

サイドバーに表示させる位置を設定します。

ダシュボードの左メニューで [外観]>>[ウイジェット]をクリックします、
ウィジェット画面が開きます。

サイドバーの一覧で、「[C]プロフィール」をドラッグして一番上部に設置します。
2番目に「[C]SNSフォローボタン」を設置します。

キャプチャー、サイドバーの表示位置

 

表示確認

ブログ画面で表示を確認します。
プロフィールとSNSのフォローボタンが表示されています。

キャプチャー、ブログ表示

 

実際のサンプルサイトはこちらです
↓↓↓↓↓↓↓
https://applired.xsrv.jp/cocoon/

 

 

これで、完了です。とっても簡単です(^^)