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

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

UX/UI Designer luelue

イラストレーター→デザイナー→Webデザイナー→Webディレクターとして働く小学一年生のママ。
出産前に描いた「仕事と子育てとの両立」についての見通しが甘く、出産してはじめて、今までのようには働けないのだと気づきました。
好きな仕事だからこそ諦めることが悔しくて、以来、今の自分にできる最善な働き方を求め行動しています。
どんな立場であれ、女性は人生のステージが変わるたびに「生き方が180度ひっくり返ってしまう」と感じた経験から、人生の転機に少数精鋭で働くことを選んだ女性オーナー様を、起業とは切っても切れない 「自分メディアづくり」で応援しています。

コメントは受け付けていません。

ブログ一覧へ戻る