神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

WordPressのウィジェットをサイトに表示させる

2015.03.10
WordPress

 WordPressでオリジナルサイトを制作するとなった時に、WordPressの管理画面のウィジェットから“最新の投稿”や“カテゴリー”などといったものを追加できるようにさせる方法を紹介したいと思います!

 自作のオリジナルテーマでウィジェットを適用させるには、

  1. functions.phpにコードを挿入する
  2. ウィジェットを表示させたいところにコードを挿入する

の2つの作業を行う必要があります。それでは今回はサイドバーにウィジェットを適用させるために順に作業を紹介したいと思います!

1. functions.phpにコードを挿入する

 まずfunctions.phpにWordPressの外観メニューからウィジェットを表示させるコードを記述してあげる必要があります!そのコードとは

<?php
    register_sidebar(array(
    'name' => 'ウィジェット内の表示名' ,
    'id' => 'ウィジェットを表示させるところに記述する文言' ,
    'before_widget' => '任意のidやclass',
    'after_widget' => '任意のidやclassの閉じ',
    'before_title' => '<h2>や<h3>など',
    'after_title' => '</h2>や</h3>など'
    ));
; ?>

になります。
試しに以下のように設定しました。

<?php
    register_sidebar(array(
    'name' => 'サイドバー' ,
    'id' => 'sidebar' ,
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
    ));
; ?>

こうすることでWordPressの外観メニューにウィジェットが表示されるようになります。

2. ウィジェットを表示させたいところにコードを挿入

 2つ目に、ウィジェットを表示させたいところにウィジェットを表示させるためのコードを挿入させる必要があります。そのコードは以下になります。

<?php dynamic_sidebar('functions.phpで設定したidを記述'); ?>

このコードを挿入します。今回はsidebarというidをfunctions.phpで設定したので、上の見本コードにある“functions.phpで設定したidを記述”にsidebarを入れた
<?php dynamic_sidebar(‘sidebar’); ?>
をsidebar.php内のウィジェットを表示させたいところに記述してあげます。

まとめ

 以上の作業を行うことでウィジェットの編集画面にいくとsidebar.phpのウィジェットを編集できるようになり、項目を追加していくことが可能になります(^^)

また、他にも例えばフッターにウィジェットを表示させたい場合は上記に紹介した2つの作業をそれぞれ当てはまるところを変更すればウィジェットを表示できるようになりますので、いろいろ試してみて慣らしていきましょう!

スポンサーリンク
検 索