サイドバーにこんな感じで自己紹介をいれたいです。よく見ますよね。こういうやつ。
プラグインで実現できないかなぁといろいろ調べてみましたが、機能面でちょうどいいもので、かつ安心して使えそうなものがなかったので、ちょっとがんばってHTMLを使って実現させましょう!
まずはウィジェットを用意
サイドバーはウィジェット機能で簡単にいじくれますので、ウィジェットを使っていきましょう。
外観>ウィジェットを開きます。
左側の利用できるウィジェットからテキストを、右側にドラッグアンドドロップします。
右側にいれこんだテキストをクリックすると、タイトルと内容を編集できる画面がひらきます。
とにもかくにも、自己紹介を入力していきましょう。タイトル部分は表示されません。
入力できたら保存をお忘れなく。
こんな感じでツラツラと入力してみますた。
表示するとこんな感じ。
これだけでも悪くないすが、なんとも味気ないのでカスタマイズしていきましょう!!
HTMLを使ってカスタマイズ
ここでちょころびっと、HTMLが必要になってきます。サイドバーウィジェットのテキストは、なんと申しましょうか、ただのテキストです。記事投稿のときは入力した情報を、ある程度自動的にHTMLとして装飾してくれますが、サイドバーウィジェットのテキストはそれをしてくれません。
HTMLとか苦手だなーって方も、コピペでできちゃうのでチャレンジしてみましょう!
画像をいれてみる。
固定ページでプロフィールを作成したときに、自分のプロフィール画像をWordPressにアップロードしたかと思われます。その画像を使います。
メディアからプロフィール画像を開きます。
URLの箇所を全選択してコピー!
プロフィールを入力したウィジェットを開いて、↓こんな感じで入力します
<img src=コピーした画像のURL>
わたしの場合こうなります。
<img src=http://dafneta.com/wp-content/uploads/2017/04/profile.jpg>
保存してページを表示してみましょう。
どどーん。
改行をいれてみる。
プロフィール文章の中の、《部屋の管理人 自己紹介》とWordPressの間に改行がほしいところです。
ウィジェット上は改行されてますが、表示上はされておりません。なぜなのか….
ここもHTMLを入力して解決します。
改行したい箇所に
<br>
と入力します。
HTMLの改行指示です。
できました!!
プロフィールページへのリンクをいれてみる。
最後に前回作成したプロフィール詳細へのリンクをはっておきましょう。
まずは自分のプロフィールページを開いて、ページのURLをコピーしておきます。
ウィジェットにこんな感じで入力します。
<a href=”自分のプロフィールページのURL”>リンクを貼りたい文章</a>
深く考えずにコピペして使いましょう。
いい感じでリンクが表示されます!
プロフィールは読者にとっては大事な情報です。しっかりプロフィールを充実させておくと親切ですね!