勉強したことのメモ

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

  関連記事

Contact form7で送信数を測定(トラッキングタグ)
Contact form7で送信数を測定(トラッキングタグ)

contact form7でフォーム送信が完了した時点で計測されるようにトラッキ ...

WordPressのContact Form 7プラグインで入力内容確認及び送信完了ページを実装する方法
WordPressのContact Form 7プラグインで入力内容確認及び送信完了ページを実装する方法

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

WordPressのContact Form 7プラグインでユーザーに対して自動返信メールを送信する方法
WordPressのContact Form 7プラグインでユーザーに対して自動返信メールを送信する方法

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

WordPressのユーザー画像とプロフィールの登録及び表示方法
WordPressのユーザー画像とプロフィールの登録及び表示方法

WordPressでユーザー毎に画像とプロフィール部分にHTMLタグを登録したか ...

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

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