WordPress WordPressカスタマイズ サイドバー プロフィール

ワードプレスのサイドバーにプロフィールを表示する方法

今回はタイトルのとおり、サイドバーにプロフィールを表示する方法を記録するが、この方法はプラグインを使わずにHTMLを記述して作成します。

手順は簡単で、たったの3工程でできます。プラグインを使うと重くなるから使いたくないなと思っている方は試してみてください。


先に完成画像を載せておきます。

プロフィール作成の準備

ダッシュボードの外観からウィジェットを選択します。ウィジェットの選択画面になるので、右側の逆三角形をクリックして、テキストウィジェットを移動します。

移動するとテキストウィジェットが開くので、タイトルとプロフィールに表示する内容を書き込んでいきます。書き込むときにHTMLで以下のように書き込みます。

<img src="画像のURL" align="left" vapace="5" hspace="5">
性別：男<br />
年齢：秘密<br />
HTML、CSS、PHP初心者。<br />

箇条書きではなく文章にしてもいいです。書き込む内容は任意で変更してください。
画像のURLは後で取得して置き換えます。

ul liで作るプロフィール

また、上記はbrで改行していますが、liを使う方法もあります。

<img src="画像のURL" align="left" vapace="5" hspace="5">
<ul>
<li>性別：男</li>
<li>年齢：秘密</li>
<li>HTML、CSS、PHP初心者。</li>
</ul>

CSSで装飾する場合は、classを追加しておきます。

ツイッターボタンの設置

ツイッターボタンを設置する場合は下のサイトでソースコードを取得後に、テキストウィジェットに貼り付けます。

ツイートボタン作成

プロフィールに使う画像をアップする

まずは、アップロードする画像を用意します。
サイズは100px前後で十分でしょう。今回は84px×84pxの画像を使いました。
用意ができたらワードプレスにアップロードします。

画像のアップロード方法

ダッシュボードのメディアから新規追加を選択します。

メディアのアップロード画面になり、ここにファイルをドロップまたはファイルを選択と出るので好きなほうを選んでください。
ファイルを選択をクリックするとブラウザが開くのでアップロードしたい画像を選んで開くボタンを押します。

すると、メディアのアップロード画面の下の方に、今アップした画像が小さく出るので右側にある編集をクリックします。
メディアの編集画面になるので、ファイルのURLをコピーして、上の「画像のURL」部分に貼り付けます。

プロフィールなどにGoogle+のフォローボタンを設置する方法

スポンサーリンク