wordpressテーマ作成時に、sidebarのHTMLコードが反映されない

Question

概要

現在、wordpress用のテーマを作る練習をしています。

作る手順としては、
①作りたいテーマのHTMLやCSSをコーディング
②コーディングしたものを元に、wordpress用にPHPコードを組み込む
③それをサーバーにアップロード

のような感じですすめています。

起こった問題

③の段階まで終わらせ、wordpressの管理画面でテーマを反映させたところ、一部のコードが反映されていないようでした。

その、反映されていなかった部分は、サイドバーなのですが、

sidebar.phpを以下に記述します。

<div class="col-md-4 card mb-auto">
    <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
        <aside class="mb-5">
            <?php dynamic_sidebar( 'sidebar' ); ?>
            <div class="author">
                <img src="<?php echo get_template_directry_uri(); ?>/images/author.jpeg" class="mx-auto mt-5" alt="">
                <h4 class="mt-3"><span>名前</span></h4>
                <hr class="mt-4">
                <p>ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。</p>
                <a href="#" class="pull-right">プロフィールの詳細</a><br>
                <a href="#" class="pull-right">お問い合わせはコチラ</a>     
            </div> 
        </aside>
    <?php endif; ?>
</div>

このテーマはbootstrapを使っており、cardのクラスを与えたことによる、cardの外枠のようなものはしっかりと表示されていて、wordpress管理画面のウィジェット設定から、適当にウィジェットを追加してみると、そのカード内に表示されました。

試したこと

試したことは、
0. どこのタグが表示されていないのかを調べるために、各タグに背景色をつけて調べた→その結果、<aside></aside>タグまでは正常に表示されていたが、その内側の<div class="author"></div>から表示されていないようだった。

1. <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>とそのendifを<aside>タグ内に入れてみた→変化はなし。
2. <?php dynamic_sidebar( 'sidebar' ); ?>を<div class="author"></div>の直後に入れてみた結果→今まで表示されていたウィジェットが消えcardの枠線だけが残った。

2のコード

<div class="col-md-4 card mb-auto">
    
        <aside class="mb-5">
            <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar' ); ?>
            <div class="author">
                <img src="<?php echo get_template_directry_uri(); ?>/images/author.jpeg" class="mx-auto mt-5" alt="">
                <h4 class="mt-3"><span>名前</span></h4>
                <hr class="mt-4">
                <p>ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。</p>
                <a href="#" class="pull-right">プロフィールの詳細</a><br>
                <a href="#" class="pull-right">お問い合わせはコチラ</a>     
            </div> 
            <?php endif; ?>
        </aside>
    
</div>

3のコード

<div class="col-md-4 card mb-auto">
    <?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
        <aside class="mb-5">
            
            <div class="author">
                <img src="<?php echo get_template_directry_uri(); ?>/images/author.jpeg" class="mx-auto mt-5" alt="">
                <h4 class="mt-3"><span>名前</span></h4>
                <hr class="mt-4">
                <p>ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。ここに自己紹介が入ります。</p>
                <a href="#" class="pull-right">プロフィールの詳細</a><br>
                <a href="#" class="pull-right">お問い合わせはコチラ</a>     
            </div> 
            <?php dynamic_sidebar( 'sidebar' ); ?>
        </aside>
    <?php endif; ?>
</div>

ちなみに、index.phpファイルにて、しっかりと<?php get_sidebar(); ?>の記述はできております。

また、functions.phpは以下の通りです。

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
    wp_enqueue_style( 'normalize-styles', "https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
}
// Register a new sidebar simply named 'sidebar'
function add_widget_Support() {
                register_sidebar( array(
                                'name'          => 'Sidebar',
                                'id'            => 'sidebar',
                                'before_widget' => '<div>',
                                'after_widget'  => '</div>',
                                'before_title'  => '<h2>',
                                'after_title'   => '</h2>',
                ) );
}






// Hook the widget initiation and run our function
add_action( 'widgets_init', 'add_Widget_Support' );

// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
// Hook to the init action hook, run our navigation menu function
add_action( 'init', 'add_Main_Nav' );


?>

php化する際に参考にしたサイト

How to Create a WordPress Theme Using HTML5, CSS3, and Responsive Design Principles

最後に

長文失礼いたしました。

sidebar.phpの<div class="author">ないのコードがどうして反映されないのか、調べてみたのですがいまいち納得の行く答えに巡り合えませんでした。

良かったら、どうして表示されなかったのか、どうすれば表示されるのか
具体的に教えていただけたら幸いです。

他のファイルなどを参照する必要があればぜひおっしゃってください。

ご回答お待ちしています。

Answer 1

functionsでsidebarの設定はしていますか?

add_action( 'widgets_init', 'mibase_widgets_init' );
function mibase_widgets_init(){
  register_sidebar( array (
  'name' => __( 'サイドバー', 'mibase' ),
  'id' => 'sidebar-widget',
  'before_widget' => '<section id="%1$s" class="widget sidebar-widget %2$s">',
  'after_widget' => '</section>'.PHP_EOL,
  'before_title' => '<h3 class="widget-title sidebar-widget-title">',
  'after_title' => '</h3>', ) );
}

この設定が無いと表示されません。

---

###追記

上の設定があるとの事なので、よく見たら。。。

 <img src="<?php echo get_template_directry_uri(); ?>/images/author.jpeg" class="mx-auto mt-5" alt="">

ここのがスペルミスになってます

誤 get_template_directry_uri()
▼
正 get_template_directory_uri()

ここかな^^;;

Comments

[kobaryo04ysh]

ご回答ありがとうございます。

質問で示した参考にしたサイトのfunctions.php通り、設定しております。
実際のfunctions.phpのコードを質問欄に追記しておきます。

[kobaryo04ysh]

本当に、ありがとうございます！！！
できました！！

考えすぎはよくないですね(笑)

[-millmill-]

煮詰まった時の「あるある」です!! (笑