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

WordPressではじめるWEBの仕組みづくり7日間メール講座

オトナ女子にピッタリ!ブログ運営に集中できるWordPressテーマプレゼント
  • 「@luelue.com」というドメインからメールが届きます。あらかじめフォルダ分け設定を行って頂きますようお願い致します。
      Yahoo、hotmailなどのフリーメールアドレスでは受信できない場合がありますので、プロバイダーメールアドレスを推奨いたします。
  • メールアドレスは個人情報の観点より、プライバシーを遵守しております。
  • 本メール講座及びメールマガジンは利益の保証や損失の補填を行うものではなく、効果には個人差があります。
  • いつでも解除可能です。

Pickup Article同じカテゴリーの記事

ブログ一覧へ戻る