勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ

WordPressで自作テーマにウィジェットを登録する方法

   2024/02/22  WordPress

WordPressで自作したテーマでウィジェットを登録しようとしたところダッシュボードの「外観」内にウィジェットの項目が無かった。ウィジェットを導入するには多少手順があるみたいなのでその方法をメモ。

 

functions.phpに追記

//ウィジェット対応
function arphabet_widgets_init() {

    register_sidebar( array(
        'name' => 'ヘッダー', //ダッシュボード上に表示されるので分かりやすい名前が良い
        'id' => 'header_widget', //呼び出しの際に使う
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="rounded">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );

widgets_initのリファレンスは以下。

widgets_init

ウィジェットを表示させるファイルに追記

<?php if ( is_active_sidebar( 'header_widget' ) ){ //functions.phpで追記したidを引数に入れる?>
    <div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
        <?php dynamic_sidebar( 'header_widget' ); //functions.phpで追記したidを引数に入れる?>
    </div>
<?php } ?>

 

まとめ

functions.phpとウィジェットを表示させたいファイルに追記し、通常通りダッシュボードの「外観→ウィジェット」から登録することで表示される。

 - WordPress

  関連記事

WordPressのデータベースの整理について(リビジョン削除、MyISAMからInnoDBに変更)
WordPressのデータベースの整理について(リビジョン削除、MyISAMからInnoDBに変更)

WordPressのデータベースを直接変更・削除することは今まであまりなかった。 ...

WordPressのContact Form 7から送信した内容をダッシュボードから確認及びCSVファイル化する方法
WordPressのContact Form 7から送信した内容をダッシュボードから確認及びCSVファイル化する方法

WordPressのContact Form 7プラグインで実装されたお問い合わ ...

WordPressにてACFで設定したカスタムフィールドの値を元に記事を並べ替える方法
WordPressにてACFで設定したカスタムフィールドの値を元に記事を並べ替える方法

WordPressにてAdvanced Custom Fieldsで設定したカス ...

WordPressにてAdvanced Custom Fieldsを用いて連載(シリーズ)記事機能を実装する方法
WordPressにてAdvanced Custom Fieldsを用いて連載(シリーズ)記事機能を実装する方法

先日「Series」プラグインで連載(シリーズ)記事機能の実装方法をメモしたが、 ...

Contact form7でフォーム送信時に別サーバへもデータを送信する方法
Contact form7でフォーム送信時に別サーバへもデータを送信する方法

contact form7でフォーム送信時に別サーバーでフォーム内容をPOST送 ...