ブログで発信したい、だけどデザインもこだわりたい、そんなあなたへ贈るWordPress テーマblanc note.

customizeblanc note.のカスタマイズ
blanc note.のカスタマイズ

WordPressウィジェットで簡単なメッセージボードをつくる方法

blanc note.のカスタマイズ

WordPressには「ウィジェット」という便利な機能があります。
ウィジェットエリアは、利用できるウィジェットを追加することで、自由にカスタマイズできます。使い方次第でとっても簡単にサイトを更新できるようになるのが特徴です。
今回はアメブロの「メッセージボード」のように、お知らせを表示するウィジェットを設置する方法をお伝えします。

ウィジェットを増やす手順

1.functions.phpに追記

子テーマを使っている場合は、親テーマのfunctions.phpに追記してください。
ウィジェットを追加するPHPが重複するとエラーが出る場合があります。
親テーマのfunctions.phpを開き、

を探してください。
この記述の下に、ウィジェット登録用のPHPが書いてあります。
当たり障りなさそうな位置に、下記のコードをコピペしてください。

アップロードはFTPソフトや、サーバーの管理ツールから行ってください。

小粋空間:WordPress 3でウィジェットを作るカスタマイズ

2.ウィジェットを呼び出すためのコードを記述

表示したい位置に、下記のPHPをコピペしてください。
header.phpを開き、一番最後にいれると無難かも。

今回は、アメブロのメッセージボードをイメージしています。
ブログのトップページ(フロントページ)を開いたときのみ表示されるように、条件分岐しています。
すべてのページで表示したい場合は、1行目と5行目のコードを削除してください。

アップロードはFTPソフトや、サーバーの管理ツールから行ってください。

子テーマをお使いの場合、親テーマのheader.phpに追記しても反映されません。

3.CSSを追記

ウィジェットエリアを追加しただけでは、表示がおかしなことなるため、style.cssにCSSを追記してください。

  • 幅を調節したい場合は、width:90%;を変更。
  • 最大幅を変更したい場合は、max-width:1088px;を変更。
  • 線の太さや色を変えたいときは、border:〜;を変更。
  • 角丸を変えたい時は、border-radius: 10px;数値を変更。角丸にしたくない時は削除する。
  • 余白を変更したい時は、padding:10px;の数値を変更。

4.ダッシュボード>外観>ウィジェットを開く

message-board02メッセージボード用のウィジェットが増えました。

右の利用できるウィジェットから「テキスト」をドラッグ&ドロップしてください。

5.完成!

テキストの中にお知らせしたいことを入力すれば完成です!
お知らせしたい内容を変えたいときは、ウィジェットから都度変更するだけ。
入力したものが、こんな風に表示されます。
message-board01

Category : blanc note.のカスタマイズ
ほんわかクリエイター るこ

Web系のお仕事をしています。
むちゅめ(6歳/早生まれ/小学生1年生)大好きな親バカ系。
LOFT、無印、生活の木、伊東屋が好き。
自然溢れる場所に惹かれはするものの、めんどくさがりの省エネ派。ぐでたまを尊敬してます。

ブログ一覧へ戻る