ネットと副業

副業が本業の収入を大きく超えたので会社やめました

WordPressでサイドバーウィジェットを使ってサイドバーにプロフィールをいれよう。

投稿日:


サイドバーにこんな感じで自己紹介をいれたいです。よく見ますよね。こういうやつ。

プラグインで実現できないかなぁといろいろ調べてみましたが、機能面でちょうどいいもので、かつ安心して使えそうなものがなかったので、ちょっとがんばって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をコピーしておきます。

 

ウィジェットにこんな感じで入力します。
WordPressサイドバーにプロフィールをいれる
<a href=”自分のプロフィールページのURL”>リンクを貼りたい文章</a>

深く考えずにコピペして使いましょう。

いい感じでリンクが表示されます!

 

プロフィールは読者にとっては大事な情報です。しっかりプロフィールを充実させておくと親切ですね!

-

執筆者:

関連記事

no image

まじか!もう光学ディスクの時代はおわた。Adobe Encoreはcs6まで

改めて実感しました。 お仕事で動画を制作するのに、AdobeのAfterEffectでベースをつくって、Premiereで最終処理したわけです。最終的な納品形態にDVDを指定されて、ちょっと動揺。デー …

no image

《Mac Acrobat》のPDFファイル閉じても画面が残るのやめて

写真はアクロバット飛行の様子(=゚ω゚)ノ !   物心ついたときからMacユーザーですが、Windows版のAdobe製品ってファイルとじても画面が残るじゃないですか!何もない無地の画面が。アプリケ …

no image

iPhoneが突然落ちて、起動しなくなった時の解決策

さすがに、ちょびっと焦りました(゚д゚lll) 夕方、街を闊歩していたところ、なんだかiPhoneがいままでにないくらい熱い。 (今日は、また暑さがもどって気温高いからかな(ノ・_・)…) …

佐川急便さん、2016年は大変でしたね。佐川さん事件簿

最近、佐川急便からみのニュースが多いですね。   2、3年前は、イケメンで筋肉質、そしてさわやかな佐川男子が人気になって、写真集まで出るほど話題になっていましたが、今年はちょっと逆風です( …

no image

MAC OSを10.8から10.10Yosemiteにアップグレード作業記録〜2.バックアップ編〜

そんなこんなでMacBookのOSを10.8から10.10Yosemiteにアップグレードすることにしたわけでございます。 アップグレードまでの流れを決める お伝えしたとおり、わたくし、OSのアップグ …