サイドバーにプロフィールやリンク集を表示させる

技術メモ

巷の無料ブログからWordPressに乗り換えて最初に戸惑ったのが、サイドバーに配置できる「プロフィール」や「リンク集」といったウィジェットが存在しないことでした。普通にあると思いこんでいたけど、WordPressでは自作する必要があります。

リンク集の作り方

結論からいうと、WordPressのリンク集は「固定ページ」として作ったほうが管理がラクだし、沢山書けるし、閲覧もしやすいです。そのリンク集をグローバルメニューに追加しておけば、ナビゲーションも容易です。

どうしてもサイドバーにウィジェットの形でリンク集を設置したければ、「テキスト」ウィジェットにリンク集をガリガリ書いていけばOK。ビジュアルエディタを使えば簡単にリンクも追加できます。ただし、そのHTML用のスタイル等は自前で追記する必要があるのでちょっと面倒です。

プロフィールの作り方

WordPressにはプロフィール用ウィジェットもありませんが、これも「テキスト」ウィジェットに直接HTMLを書けばOKです。

①サイドバーに「テキスト」ウィジェットを追加。

②「テキスト」ウィジェット内では「ビジュアル」タブと「テキスト」タブがあるが、後者の編集画面には直接HTMLを書ける。自分の名前を「自己紹介」ページにリンクしておく。

③プロフィール画像については、「テキスト」ウィジェット内の「メディアを追加」ボタンでもプロフ画像を取り込める。該当するプロフ画像の「リンクをコピー」機能で画像URLを取得しておき、②のHTMLで読み込み。

実際のHTMLはこんな感じ(たとえば):

<div style="padding: 0 10px 20px 20px;">
<img style="float: left; margin-right: 10px; border-radius: 15px;" src="画像プロフのURL" width="60" />
<div><a href="自己紹介ページURL">My Name</a>
自己紹介 自己紹介 自己紹介 自己紹介 自己紹介 自己紹介 </div>
</div>

にほんブログ村 その他日記ブログ ひとりごとへ
にほんブログ村 「ひとりごと」ランキング参加中です。ポチッと応援お願いします♪

コメント

この記事へのコメントはありません。

naochka

長年IT業界でWeb+デザインをやってました。いまはWordPress中心です。やや技術的な話が多いですが、なぜか世界中あちこち放浪してた関係でたまに想い出を綴ってたりもします。 Wall Street Journalを読む会の英語ナビゲーターやってました。(実は帰国子女)

最近の記事

  1. 第15回 Wall Street Journalを読む会(最終回):市場が再び短期思考に回帰する理由

  2. 第14回 Wall Street Journalを読む会:アメリカ発の技術革新が、かつてない長期のドル高トレンドを牽引

  3. 第13回 Wall Street Journalを読む会:アメリカで実体経済と株価が乖離している理由とは?

  4. UAの二重計測問題の確認方法と解決策:UAとGA4を共存運用+All in One SEOで連携してる人は注意

  5. 初めてのWordPressテーマ選び、美麗デザインを購入するときは設定の難易度に気をつけて

アーカイブ

次回のWSJ会開催@Peatix

TOP