customizeWordPressテーマのカスタマイズ
WordPressテーマのカスタマイズ

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

WordPressテーマのカスタマイズ

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 : WordPressテーマのカスタマイズ
スポンサーリンク

ルールーはエックスサーバーを使ってます♡

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

Webデザイナー るこ

Webデザイナーの立場から、個人事業主のWeb活用をテーマに発信しています。
得意分野はWebデザイン。イラストレーション。コーディングもぼちぼち。
WordPressテーマblanc note.を作ったり、お絵かきにブログと、収集がつかなくなり最近自粛してます。
手帳・文具・万年筆をこよなく愛する親バカ系。

ブログ一覧へ戻る