コピペOK！WordPressのサイドバーに写真入りプロフィールを設置する方法

こんにちは！世界をめぐるWebクリエイターNao（@nao_tips）です。
自身の体験を元にWeb＆デザイン、海外生活などについての情報を発信しています。
初めての方はぜひプロフィールもご覧ください。

今回はワードプレスブログのサイドバーに写真付きのプロフィール欄をつける方法をご紹介します。

写真付きプロフィールってどんなもの？

まずはじめに出来上がり図を確認してみましょう！

私の今のブログにも付いているこんな感じの写真入りプロフィールを設置できます。

写真付きプロフィールにはプラグインが必要？

今回はプラグインなしで作る方法をご紹介します。

理由は、

• コピペでちょっといじればhtmlがわからない人でもCSSをいじらずできるから
• プラグインを入れすぎるとサイトが重くなってよくないから

です。

では早速始めましょうー！

プロフィール設置の大まかな流れ

サイドバーにプロフィールを設置する大まかな流れはこんな感じです。

1. 外観＞ウィジェットでウィジェット設定画面を開く
2. ウィジェットの「サイドバー」に「カスタムHTML」を入れる
3. カスタムHTMLの中身にHTMLコードをコピペする
4. プロフィール写真をアップロードする
5. 3でコピペしたHTMLの必要な箇所を書き換える

ウィジェット設定画面を開く

ワードプレス管理画面の左側の「外観」を押します。

すると、さらに詳しいメニューが出て来ます。

その中に「ウィジェット」というものがあるので、クリックして開いてください。

ウィジェットの「サイドバー」に「カスタムHTML」を入れる

開いた画面の右半分くらいに色々な「ウィジェットを入れる箇所」が並んでいますが、

その中から「サイドバー」を選びます。

この「ウィジェットを入れる箇所」はテーマによって変わりますので、人によっては数が多かったり少なかったりします。

（ちなみに上の写真は有名テーマ「Stork」の場合です。Storkの場合は「PCメインサイドバー」が該当するものになります。）

カスタムHTMLの中にHTMLをコピペする

「サイドバー」に「カスタムHTML」をドラッグ＆ドロップすると、

ガバッと「カスタムHTML」の編集画面が開いたような状態になります。

※「カスタムHTML」はワードプレスのバージョンが低いと入っていない場合があります。
その場合はワードプレスのバージョンをアップグレードしてください。

ここで、「タイトル」に「プロフィール」、

その下の編集画面に下記のHTMLコードをコピペして入れましょう。
（枠内をダブルクリックすると、コピペしやすいです。）

<div>
<center>
<img alt="プロフィール"  style="border-radius:50%;" src="
https://nomaddesignerstips.com/wp-content/uploads/2018/02/dammy.jpg
" width="180" height="180"></center></div>
<br>
このサイトを運営している○○です。
<br>
自己紹介が入ります。自己紹介が入ります。自己紹介が入ります。<br><br>
自己紹介が入ります。<br>
改行したいところにはカッコ・小文字のb小文字のr・カッコ閉じるを入れましょう。こんなの→<br>

↓こんな感じになります。

入力が完了したら、右下の「保存」ボタンを押しておきましょう。

タグが一つでも抜けているとエラーで保存できないことがあります。
もしエラーになった場合はタグにモレがないか確認してみてください。
タグにモレもないのにエラーが直らない場合は、コメント欄かお問合せよりご連絡ください。

プロフィール写真をアップロードする

このままでは、プロフィール画像のところが、Naoお手製のダミー画像になったままなので、

この部分にご自身のお写真を入れていきます。

まずは、ワードプレスの管理画面左側から、

メディア＞新規追加

で、自分の写真をアップロードします。

アップロードが完了したら「編集」というリンクを押します。

上のような画面が開くので、右側にある、ファイルのURLをコピーします。

▼URLはこんな感じ
http://あなたのドメイン/wp-content/uploads/20xx/xx/dammy.jpg

先ほどコピペしたHTMLの必要な箇所を書き換える

もう一度ウィジェット画面を開きます。

管理画面の左側から「外観」＞「ウィジェット」です。

先ほど「サイドバー」のウィジェットの中に入れた「カスタムHTML」の文の中から

下記の黄色でハイライトされた1行部分を、今メディアで自分がアップロードした写真のURLに変更します。

<div>
<center>
<img alt="プロフィール" style="border-radius:50%;" src="
https://nomaddesignerstips.com/wp-content/uploads/2018/02/dammy.jpg
" width="180" height="180"></center></div>
<br>
このサイトを運営している○○です。
<br>
自己紹介が入ります。自己紹介が入ります。自己紹介が入ります。<br><br>
自己紹介が入ります。<br>
改行したいところにはカッコ・小文字のb小文字のr・カッコ閉じるを入れましょう。こんなの→<br>

最後に、自己紹介文のところを好きに書き換えます。

書き換えていいのは「このサイトを運営している〇〇です。」から「カッコ閉じるを入れましょう→」までの間です。

改行を入れたいところには<br />を入れると改行できます。

完了したら「保存」を押してください。

保存を押した後におもてのページを見てみると、、、

↑この画像はダミーのままですが、実際にはあなたの写真が写っているはずです。

まとめ

写真入りプロフィールは

ウィジェットにHTMLコードを入れて作る
上で紹介したHTMLの写真部分をご自身のものに変える
文章を好きに変える（改行は<br />）

思ったより簡単にできたのではないでしょうか？

もしわからない点などあればお問合わせかコメント欄よりご質問ください^^

以上、Naoでした！

※免責事項：カスタマイズは自己責任でお願いします。記事を参考にカスタマイズをして生じたいかなる問題も責任は負えません。有償でサポートを行うことも可能ですので、ご心配な方はお問合せからご相談ください。