WordPressで検索窓と読んで欲しい記事がサイドバーに表示されない

Question

サイドバーに検索窓と読んで欲しい記事をおきたいのですが、メインコンテンツとして中央に配置されてしまうのをなおしたいです。

   <!--サイドバー-->
          <div class="col-md-4 col-12">
            <?php dynamic_sidebar( 'sidebar_widget01' ); ?>
            <!--読んで欲しい記事-->
            <div class="container bg-white mb-5 py-5">
              <div class="text-center pb-5">
                <h4 class="d-inline-block py-3 border-bottom border-info">読んで欲しい記事</h4>
              </div>
              <?php $side_query = new WP_Query( 'tag=sidepickup' ); ?>
              <?php if ( $side_query->have_posts() ) : ?>
              <?php while ( $side_query->have_posts() ) : $side_query->the_post(); ?>
            <div class="pb-5"> 
              <!--サムネイル-->
              <div class="pb-3">
              <?php if ( has_post_thumbnail() ) : ?>
              <?php the_post_thumbnail('', array( 'class' => 'img-fluid' )); ?>
              <?php else : ?>
                <img class="img-fluid" width="100%"  src="<?php echo get_template_directory_uri(); ?>/img/wordpress.png" alt="">
                <?php endif; ?>
              </div>
              <!--記事タイトル-->
              <h5 class="h5"><a class="text-secondary" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
            </div>
             <?php endwhile; ?>
             <?php wp_reset_postdata(); ?>
             <?php endif; ?>
            </div>
          </div>

<?php
// サムネイル
add_theme_support('post-thumbnails');

// メニュー機能
register_nav_menus(
array(
'gloval-navigation' => 'グローバル', 
'footer-navigation' => 'フッター',
)
);

// ウィジェットの登録
function my_widgets_init() {

	register_sidebar( array(
		'name' => 'サイドバー',
		'id' => 'sidebar_widget01',
		'before_widget' => '<div class="container bg-white mb-5 py-5>',
		'after_widget' => '</div>',
    ) );
}
add_action( 'widgets_init', 'my_widgets_init' );

<form method="get" action="<?php home_url(); ?>">
<input class="form-control" type="txt" name="s" placeholder="Search for">
</form>

Answer 1

ウィジェットの登録のbefore_widgetのclassが閉じていなかったのが原因でした。

Answer 2

ご提示の情報からですと、

1. floatでどちらかに寄せる
2. flexでmainとsidebarを横並びにする
3. position:absolute;で左右のどちらかに絶対配置する
4. display:grid;を用いて左右のどちらかに配置する

お好みで選んでくださいね、となります。

以下蛇足です。
inputのtypeはtextに直しましょう。
bootstrapだとrowにmainとsidebar入れる構成が最近のマイブームです。

Comments

[yu_ky_program]

ご回答ありがとうございます。
こちらはYou Tubeを見ながら作成しました。ぜひ見ていただけないでしょうか。
https://www.youtube.com/watch?v=fyHZH526wpo&list=PLv2-sHurmDBtMD5ZGA3abvX2YUTuMXSyP&index=9
ご回答していただいたfloatやflexがでてきていないので。

[yu_ky_program]

申し訳ありません。
ウィジェットの登録のbefore_widgetのclassが閉じていなかったのが原因でした。

[退会済みユーザー]

＠yu_ky_program様
いえいえ、自己解決されたようで何よりです。