ブログサイトでサイドバーにウィジェットに「プロフィール」を追加して画像を貼り付けて、実際のブログサイトでその画像をクリックした際に、ランダムで投稿ページに飛んでしまう。
ウィジェット「プロフィール」の画像に対してURL設定がないため自身のプロフィールページを作る方法がわからない。
WordPressテーマ「JIN」のプロフィールページの作り方について解説します。
・プロフィールページイメージ画像↓
ウィジェットにプロフィール追加
まずは、プロフィールのウィジェットをサイドバーに追加します。
WordPress管理画面→外観→ウィジェットを選択。
プロフィール→サイドバーに追加します。
プロフィール名、肩書、説明を入力して、画像を選択して完了を選択。
サイトに戻って確認すると設定したものが反映されています。
プロフィールページを作る(固定ページ)
プロフィールページは「投稿」ではなく「固定ページ」で作ります。
WordPress管理画面→新規追加を選択。
プロフィールページと認識させる必要があるので、パーマリンクのURLスラッグをprofileと入力します。
後は、自身のプロフィール内容を入力して公開をします。
ブログトップページと記事内のサイドバーの画像をクリックして、固定のプロフィールページに移動できれば完了です。
スラッグをprofileにすることによって、固定ページを優先して呼び出しています。
プロフィールボタン
クリックする箇所と知ってもらうための「プロフィールボタン」追加についても解説します。
説明の項目にHTMLの記述をします。
<div id="profile_link">
<a href="プロフィールのURL入力">プロフィール</a>
</div>
HTMLの記述をし終わった後は、「完了」をクリックして、外観→カスタマイズに移動します。
追加CSSに下記のCSSを追加します。
/* サイドバープロフィールボタン */
#profile_link a {
display: block;
text-align: center;
padding: 0.7em 1em;
background: #3b5d82;
width: 50%;
margin: 0 auto;
margin-top: 20px;
border-radius: 20px;
border: 3px double #fff;
font-size: .75rem;
color: #fff;
}
#profile_link a:hover {
opacity: 0.7;
color: #fff;
}
これで、プロフィールボタンの完成です。
更にJINテーマを使いやすくする方法
追加でテーマをカスタマイズしたい方向けに記事を書きましたので合わせてカスタムしてみてください。
▪jinテーマ追加cssで自由にカスタマイズ【カテゴリーリスト】⇩
▪JINテーマでページネーションにアニメーションを追加する方法(フワッと順番に表示させる)【jQuery】⇩
今回のプロフィールのカスタマイズはコピーペーストで実装できますが、自分なりにいろいろカスタマイズしてみたい場合は、HTMLとCSS基礎知識が必要になってきます。