初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

ウィジェットエリアを追加して表示する方法【WordPress】

> WordPress

こんにちは。

今回はワードプレスでウィジェットエリアを追加し、追加したウィジェットを表示する方法について紹介したいと思います。

それでは、いつも通り、まずは結論から。


functions.phpを編集してウィジェットエリアを追加する

WordPressの管理画面の左サイドにあるメニューの、

[外観] → [テーマの編集]

に進み、右サイドの「テーマファイル」の中から「テーマのための関数(functions.php)」をクリック。

もちろん、FTPソフトを使ってサーバーと接続してfunctions.phpファイルを直接編集してアップロードする方法でも問題ありません。

そして、そのファイルのどこでもいいので下記のソースを入力します。

register_sidebar( array('name' => 'widget_name' ,
 'id' => 'widget_area' ,
  'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 'after_title' => '</h3>'
));




追加したウィジェットを表示する方法

では、続いて、上記ソースの解説と追加したウィジェットを表示する方法を紹介します。

'name' => 'widget_name' 

は管理画面のウィジェットエリアの名前として表示されるものです。

widget_name」の部分をお好みのウィジェットエリア名に変更しましょう。




'id' => 'widget_area'

widget_area」の部分をお好みのidに変更しましょう。

これが、ウィジェットを表示するために必要なIDとなります。

ウィジェットエリアを表示したい場所に

<?php dynamic_sidebar('widget_area'); ?>


と記述することでこのウィジェットエリアを表示することができます。


'before_widget' => '<div class="widget">'  と 'after_widget' => '</div>'

は、このウィジェットエリアを囲むタグを設定しています。

この場合、

<div class="widget">
 <!-- ウィジェットエリアの中身 -->
</div>

のように出力されます。


'before_title' => '<h3>'
'after_title' => '</h3>'

は、このウィジェットエリアに導入する各ウィジェットのタイトルを囲むタグを設定しています。

まとめ

それぞれのソースの意味の解説は以上です。

今回紹介したソースをそのまま使ってウィジェットを表示する場合、

<div class="widget">
 <h3><!-- 各ウィジェットのタイトル --></h3>
 <!-- ウィジェットコンテンツが出力される -->
</div>

のように出力されます。



関連記事

Breadcrumb NavXTでカテゴリーのURLに「?post_type=○○○○」が付く問題の対策
こんにちは。管理人です。 今回は、Wordpress管理者ご用達のパンくずリストプラグイン「Breadcrumb NavXT」を使った時にカ
Smart Custom Fields愛用者が常用する全カスタムフィールド出力方法
私の仕事柄、WordPressでサイトを1からカスタマイズして作ったりリニューアルのメンテナンスやカスタマイズ仕直しの業務が多々あり、毎回非
【wordpressのサーバー移行はこれ一択!】「All-in-One WP Migration」で一発サーバー移行!サーバー移行に苦しむすべてのエンジニアへ。
こんにちは。管理人です。 今回は私も仕事でかなり苦しんだWordPress(ワードプレス)のサイトを他のサーバーへ移行する、とてつもなく簡単
【WordPress】ネットいらず?!ローカルでワードプレスを動かしてオリジナルテーマをカスタマイズする方法
XAMPとかMAMP以外にWordPressをローカル環境でカスタマイズできたらいいのになぁーと思って何となく検索してみたら余裕で見つかった
【WordPress】「外観」に「ウィジェット」の項目が表示されないときの対処法
とりあえず後述のソースを functions.php に追記すれば出てきた。 <?php と ?>は必要に応じて消していただいて
【コピペ可】非プラグイン依存!カスタムフィールド出力の統一した書き方
私が知っているメジャーなカスタムフィールド系プラグインは以下の3つです。 Advanced Custom FieldsSmart Custo



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です