勉強したことのメモ

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ダッシュボードに投稿・固定ページ・カテゴリ・タグ一覧ページにIDを表示させてソート可能にする方法
WordPressダッシュボードに投稿・固定ページ・カテゴリ・タグ一覧ページにIDを表示させてソート可能にする方法

WordPressダッシュボードの投稿(記事)・固定ページ・カテゴリー・タグ一覧 ...

WordPressで複数のカテゴリーを取得する方法(get_the_category_list)
WordPressで複数のカテゴリーを取得する方法(get_the_category_list)

WordPressで1つの記事に対して複数カテゴリを設定していた場合、テーマによ ...

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

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

WordPressにインスタグラムの画像を表示させる方法
WordPressにインスタグラムの画像を表示させる方法

WordPressにインスタグラムへ投稿している画像を表示させたかった。プラグイ ...

WordPressサイトのロードアベレージが高い際の対応方法
WordPressサイトのロードアベレージが高い際の対応方法

あるWordPressサイトのロードアベレージが先月ぐらいまでは通常0.5前後で ...