WordPressのウィジェットを使って投稿とは別で重要なお知らせを作る

本日のWordPressの小ネタ。たまにお知らせとは別に目立つところに重要なお知らせなるものを出したいというご要望を頂きまして、今まではindex.phpに直書きしていたのですが、最近PCとスマホサイトを分けてテーマを作ってるのが多くて、PCとスマホの2箇所を修正せにゃならんのでメンドかったんですよね。取り下げじに漏れも出るし。

なもんで、WordPressの管理画面から入力する形にしたいなぁと思っていたのですが、やはりそれを実現するにはウィジェットが簡単で手っ取り早い!という結論に至りましたのでちょっとやってみました。

目次

WordPressでウィジェットの作り方

1.jpg

やりたいのはこんなの。投稿のループとは別でこんな感じのHTMLが出力したい。サイドバーのウィジェットとは分けたいので、重要なお知らせ領域のウィジェットを作りたい。

WordPressに独自のウィジェットをつくるのは超絶ウルトラ簡単。functions.phpにちょろっと指定のコードを書いて、ウィジェットを出したいとこにphpコードを書くだけで良い。ほんと便利な機能である。

1.function.phpにウィジェットを作るコードを書く

ウィジェットを作るコードはこんなの。

// ウィジェット
register_sidebar( array(
	'id' => 'important',
	'name' => '重要なお知らせ',
	'description' => '重要なお知らせを表示',
	'before_widget' => '',
	'before_title' => '

', 'after_title' => '

' ) );

出力したいHTML等はお好みで改造しておくんなまし。このコードを書いたらWordPressの管理画面の「外観」->「ウィジェットに」行くと。

2.jpg

「重要なお知らせ」欄が出現!管理画面はこれでOK。

2.出力したいテンプレートにウィジェットを出力コードを書く

今回はPCとスマホのトップに出したいので、両方のindex.phpにコードを書く。ウィジェットを出力するコードはこちら。上記で書いたコードの「id」がキーになっております。

It's シンプル!これだけでウィジェットが出力出来る。これでウィジェットはもう完成。管理画面から情報を入れればテンプレートに出力されているはずです。

3.jpg

これでお客さんの方でも自由に追加・編集が可能なので、今後はこの方式にしてお客さんの方でやってもらう事にしよう。その方がお客さんもいちいち連絡してこなくていいし好きに文章変えれるからきっと楽でしょう。

4.jpg

今回のウィジェットの作り方はWordPressデザインブックを参照。ソシムのこのWordPress入門本は大体毎年アップデートされてるので、これからWordPress始める方にオススメ。

[amazonjs asin="4802610068" locale="JP" title="WordPressデザインブック HTML5&CSS3準拠 (WordPress DESIGN BOOK)"]

さて、まぁウィジェットも良いが、今度はプラグイン化して独自に管理画面に入れてみるのも面白そうなのでそれやってみよ〜。

SPONCERD

コメントはまだありません


Warning: Undefined variable $user_ID in /home/yogawa/yogawa.com/public_html/wp-content/themes/youkaichi/comments.php on line 55

※承認後に反映されます