ネットと副業

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

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

〈Macの小ネタ〉ユーザのライブラリフォルダが見つからないんですけど・・・

かれこれ1〜2年気づきませんでした… 今は昔、Mac OS9のころ。Macで使うフォントは「システムフォルダの中のフォントフォルダにドラッグ&ドロップでぶっ込め」、と教わりました、 …

堀江貴文 99%の会社はいらない

99%の会社はいらない (堀江貴文)読みました。勇気づけられる一冊です。

堀江さんの本です。タイトルのインパクトの強さに買っちゃいました。堀江さんのイメージで『99%の会社はいらない』と言われると、どうせ「クソみたいなくだらないことしかしてない企業なんて、潰れてもいっしょだ …

エクセルの数字が計算されないので、ヒーヒー言いながら解決策を探しました。

わたくし、エクセルは、足し算しか使わないライトユーザーです。 複雑なマクロに頼ることはございませんので、足し算さえうまく機能してくれれば、それでいいのです! しかし、その足し算すら機能してくれない事象 …

起業の4原則

堀江貴文氏の「お金はいつも正しい」にでてくる堀江氏の提唱する起業の4原則。 1.在庫を持たない 2.元手がかからない 3.定期的な売り上げが上がる 4.利益率がたかい なんとなーく、本の中でこの4項目 …

no image

Googleの新サービスアプリInboxダウンロードしてみたら使えんかった

  普段、Macbookもって、iPadもって、iPhoneつかって、会社ではiMacでて、すっかりapple信者みたいに思われがちですが、どちらかというとappleよりGoogle先生を崇拝していま …