サイドバーにプロフィールを表示する

広告

サイドバーに記事を書いた人としてプロフィールを表示することができます。ここではWordPressのテーマとしてJINを使用している場合にサイドバーにプロフィールを表示するように設定する手順について解説します。なお記事ページの記事下にプロフィールを表示する場合は「記事下にプロフィールを表示する」を参照されてください。

プロフィールに表示したい各SNSのリンク先を設定する

プロフィールに関する設定を行う前に、先にプロフィールに表示したいSNSのリンク先を設定しておきます。WordPressにログインしたあと、画面左側の「外観」メニューの中にある「カスタマイズ」をクリックして下さい。

p7-16

「カスタマイズ」画面が表示されます。

p7-17

画面左側の「SNS設定(OGP)」メニューをクリックして下さい。

p7-18

SNS設定(OGP)に関する設定画面が表示されます。

p7-19

画面左側にある「facebookのURL」「TwitterのURL」「InstagramのURL」「YouTubeのURL」「LINEのURL」の中からプロフィールにボタンを表示させたいSNSに対してリンク先のURLを入力して下さい。

p7-20

今回は「facebookのURL」と「TwitterのURL」の2つに次のように入力しました。入力が終わりましたら画面左上にある「公開」をクリックして下さい。

p7-21

これでプロフィールのリンク先に関する設定は完了です。

サイドバーにウィジェット「プロフィール」を追加する

それではサイドバーにプロフィールを表示するためのウィジェット「プロフィール」を追加します。管理画面左側の「外観」メニューの中にある「カスタマイズ」をクリックして下さい。

p7-1

「カスタマイズ」画面が表示されます。

p7-2

画面左側の「ウィジェット」メニューをクリックして下さい。

p7-3

次の画面で、画面左側の「サイドバー」メニューをクリックして下さい。

p7-4

サイドバーのウィジェットに関する設定画面が表示されます。

p7-5

画面左側下にある「ウィジェットを追加」をクリックし、その後で「プロフィール」をクリックして下さい。

p7-6

サイドバーに「プロフィール」ウィジェットの追加が完了しました。

p7-7

プロフィールウィジェットを設定する

プロフィールウィジェットの設定を行います。

p7-8

「プロフィール名」「肩書」「説明」を記述して下さい。今回は次のように記述しました。

p7-9

プロフィールに関する入力を行うと、画面右側のプレビュー画面でどのように表示されるのかを確認することができます。

p7-10

続いてプロフィールの画像をアップロードします。「画像を選択」をクリックして下さい。

p7-11

メディアライブラリに既にある画像を使用する場合は、その画像をクリックして下さい。新しい画像をアップロードする場合は、画面左上の「ファイルをアップロード」をクリックし、その後で「ファイルを選択」をクリックして画像ファイルを選択して下さい。今回は既にメディアライブラリにあった画像をクリックしました。

p7-12

p7-13

この画像でよければ「この画像で確定」にチェックをして下さい。

p7-14

プロフィールにSNSに関するボタンを表示したい場合には、「SNSボタン」の下の「表示」を選択して下さい。

p7-15

実際にボタンを表示するには、このページの最初にご紹介した手順でボタンを表示したいSNSのリンク先を設定しておく必要があります。全ての設定が終わりましたら「完了」をクリックして下さい。

p7-22

プロフィールがサイドバーの中で表示される位置を設定する

プロフィールが表示される位置は現在サイドバーの一番下です。

p7-23

位置を変更するには、「プロフィール」の部分をドラッグして表示したい位置でドロップして下さい。今回は上から2番目の位置に移動させてみました。

p7-24

位置の設定が終わりましたら画面左上の「公開」をクリックして下さい。

p7-25

これでプロフィールを表示する準備は完了です。

-- --

それではブログを表示して下さい。サイドバーにプロフィールが表示されていることが確認できます。

p7-26

モバイルから閲覧した場合、サイドバーへメインコンテンツの下に表示されますので、プロフィールもメインコンテンツの下に表示されました。

p7-27

JINを利用しているブログで、サイドバーにプロフィールを設定する手順について解説しました。

WordPressの無料/有料テーマの使い方の他の記事を見てみる

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)