【WordPress】プラグインなしで作るサイドバープロフィール

プラグインを入れずにサイドバーにプロフィール欄を作りたいな。

こんな疑問を解決していきます。

本記事の内容

サイドバーの一番上って目に付きやすいところだと思うので、その場所にプロフィール欄を作っておくと「このブログの運営者はどんな人なんだろう？」といった感じで見てもらいやすいですよね。

当サイトでもサイドバーの一番上に簡易的なプロフィール欄を作り、そこから詳細プロフィールの固定ページへとリンクを飛ばしています。

今回はコピペかつスタイルシートなどを編集せずに作成できるプロフィール欄の作り方をご紹介していきます。

サイドバーのプロフィール欄の作り方【コピペでOK】

以下の3ステップで作成していきます。

①サイドバーウィジェットに「カスタムHTML」を追加する

1. WordPress管理画面の左メニューから、「外観」>「ウィジェット」と選択する。

2. ページ真ん中あたりにある「カスタムHTML」をサイドバーウィジェットに追加する。

3. 画面の一番上に戻り、「サイドバーウィジェット」の欄の一番下にカスタムHTMLが追加されているので、それをドラッグ&ドロップでサイドバーの表示させたい位置に移動する。

②プロフィール欄のソースコードを「カスタムHTML」にコピペする

1. 「カスタムHTML」のタイトルを入力する。

タイトルは、サイドバーの見出しとして表示されます。今回は「プロフィール」としています。

2. 以下のソースコードを「カスタムHTML」の内容にコピペする。

<style>
.profile{
    background: #fff;
    text-align: center;
    padding: 20px 20px;
}

.profile > img {
    background: #9eceff;
    border: 1px solid #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    padding: 20px;
}

.profile-name{
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.profile-content{
    text-align: left;
    margin: 40px 0;
}

.profile > button {
    background: #9eceff;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: none;
}

.profile > button:hover {
    opacity: 0.8;
}
</style>

<div class="profile">
    <img src="ここにプロフィール画像のURLが入ります">

    <p class="profile-name">ここに名前が入ります</p>

    <p class="profile-content">
        ここに本文が入ります。<br><br>
        改行する際はbrタグで改行しています。<br><br>
    </p>

    <button onclick="location.href='ここにリンク先のURLが入ります'">ここにボタン名が入ります</button>
</div>

③必要な情報を入力する

1. コピペしたURLについて、HTMLソースコードの以下の個所を編集する。

(a)～(e)の手順を順番に解説していきます。

(a)プロフィール画像のURLを入力します。

まず初めに、WordPress管理画面の左メニューから、「メディア」>「新規追加」と選択し、プロフィールに設定したい画像をアップロードしておきます。

次に、アップロードされた画像をメディアライブラリから選択し、「リンクをコピー」から画像のURLをコピーします。

画像のURLがコピー出来たら、(a)のダブルクォーテーションで囲まれている部分にURLをペーストします。

(b)名前を入力します。

ここは特に説明することはありませんが、長い名前の場合はサイドバー幅に応じて改行される点に注意してください。

(c)プロフィール本文を入力します。

入力例にも書いてありますが、文章を改行する場合には<br>タグを使って改行を行ってください。

(d)ボタンのリンク先URLを入力します。

今回の例では、クリックすると別の固定ページなどに飛ばしてくれるボタンをプロフィール欄に配置しています。

例えばリンク先を詳細プロフィールページや最初に見て欲しい記事の一覧ページなどに設定することで、サイト内の見やすい位置に重要なページへの導線を作ることができ、アクセスの増加が見込めるでしょう。

(e)ボタン名を入力します。

ボタンをクリックした後に飛ばすページに沿ったボタン名を入力します。

2. 「保存」ボタンを押して編集内容を保存する。

保存完了後、トップページなどで編集した通りにプロフィール欄が表示されていれば作業は完了です！

例として、私のサイトのサイドバープロフィールは以下のように表示されます。

割とシンプルな作りですが、プロフ画像や名前、自己紹介文など最低限必要なものだけであればこのように簡単に作ることができます。

まとめ

今回はHTMLとCSSのみで作るサイドバープロフィール欄の作り方をご紹介しました。

冒頭でも書きましたが、サイドバーの一番上って目に付きやすいところなので、その場所にプロフィール欄を作ることで「自分がどういう人なのか？」ということを端的に知ってもらうことができるので、ぜひこの記事を参考にして自分だけのプロフィール欄を作ってみてください。

それでは次の記事でまたお会いしましょう！