Liberty

こんにちは、yutaです。

WordPressでオリジナルテーマを制作している時にウィジェットを表示させたくなったのでやり方をメモしておきます。全部コピペで使えます。

1.functions.phpにWordPressのウィジェット機能を使うためのコードを追加

functions.phpに下記コードをコピペします。

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => 'サイドバー1',
        'id' => 'sidebar-1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget_title"><u>',
        'after_title' => '</u></h2>',
    ));
}

書いてある中身が気になる方は以下を見てください。書き換えればカスタマイズできます。

【上記コード内の配列の各要素について】
・name : ウィジェットエリアの名前。WordPress管理画面のウィジェット画面に表示される名前です。

・id : ウィジェットエリアのid。

・before_widget : ウィジェットエリアの開始用HTMLタグ。上記ではdivになっていますが、liなど好きな要素に変えられます。idやclassをつければCSSでスタイルの設定もできます。

・after_widget : ウィジェットエリアの終了用HTMLタグ。開始用HTMLタグと合わせてください。

・before_title : 追加したウィジェットのタイトル開始用HTMLタグ。上記ではh2とuにしていますが、pなどでもOKです。こちらもidやclassを付けることでCSSでスタイルの設定ができます。

・after_title : 追加したウィジェットのタイトル終了用HTMLタグ。

2.ウィジェットを表示したい場所に表示用コードを追加

ウィジェットを表示したい場所に下記コードをコピペします。

<?php if( !function_exists('dynamic_sidebar') || !dynamic_sidebar()): ?>
<?php endif ?>

例えば、サイドバーに表示したければ、sidebar.phpの好きなところに上記コードをコピペすればOKです。僕は、サイドバーを上段・下段に分けて、上段はプロフィール欄、下段はウィジェット欄にしています。(このブログじゃないですけど。)

要するに↓こんな感じ。

<div id =“sidebar”>
   <div id = “profile”>
      プロフィールを記載
   </div>
   <div id = “profile”>
      ここに上記コードをコピペ
   </div>
</div>

以上、WordPressでウィジェットを表示する方法のメモでした。では、また！

ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)