添加小部件后，样式变得一团糟

我在wordpress主题中添加了一个小部件区域，但样式与htmlhere是添加小部件之前的图像

添加小部件后

小部件区域

功能。php

<?php
//Adding the css and js files
function gt_setup(){
    wp_enqueue_style(\'google-fonts\',\'https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab\');
    wp_enqueue_style(\'font-awesome\',\'https://use.fontawesome.com/releases/v5.1.0/css/all.css\');
    wp_enqueue_style(\'style\',get_stylesheet_uri());
    // wp_enqueue_script($handle,$src,$deps,$ver,$in_footer);
    wp_enqueue_script(\'main\',get_theme_file_uri(\'/js/main.js\'),NULL,\'1.0\',true);
}
add_action(\'wp_enqueue_scripts\',\'gt_setup\');

//Adding theme support

function gt_init(){
    add_theme_support( \'post-thumbnails\' );
    add_theme_support(\'title-tag\');
    add_theme_support(\'html5\',
     array(\'comment-list\',\'comment-form\',\'search-form\')
     );
    }
add_action(\'after_setup_theme\',\'gt_init\');

//Project post type
function gt_custom_post_type(){
    register_post_type(\'project\',
    array(
     \'rewrite\'=> array(\'slug\'=>\'projects\'),
     \'labels\' => array(
       \'name\' => \'Projects\',
       \'singular_name\' => \'Project\',
       \'add_new_item\' => \'Add New Project\',
       \'edit_item\' => \'Edit Project\'
     ),
     \'menu-icon\' => \'dashicons-clipboard\',
     \'public\' => true,
     \'has_archive\' =>true,
     \'supports\' => array(
       \'title\' , \'thumbnail\' , \'editor\' , \'excerpt\' , \'comments\'
     )
    )
  );
}
add_action(\'init\',\'gt_custom_post_type\');

//remove url field from comment form
 function prefix_disable_comment_url($fields){
     unset($fields[\'url\']);
     return $fields;
 }
 add_filter(\'comment_form_default_fields\',\'prefix_disable_comment_url\');
 //Sidebar
 function gt_widgets(){
     register_sidebar( 
     array(
     \'name\' => \'Main Sidebar\',
     \'id\' => \'main_sidebar\',
     \'before_title\' => \'<h3>\',
     \'after_title\' => \'</h3>\'
     )
     );

 }
 add_action(\'widgets_init\',\'gt_widgets\');
//Filters
function search_filter($query){
    if($query->is_search()){
        $query->set(\'post_type\',array(\'post\',\'project\'));
    }
}
add_filter(\'pre_get_posts\',\'search_filter\');

//front-page widget
function gt_widgets_init() {

    register_sidebar(
        array(
            \'name\'          => __( \'Frontpage\'),
            \'id\'            => \'section-source\',
            \'description\'   => __( \'Add widgets here to appear in your frontpage.\'),
            \'before_widget\' => \'<section id="section-source">\',
            \'after_widget\'  => \'</section>\',
            \'before_title\'  => \'<h2 class="section-heading">\',
            \'after_title\'   => \'</h2>\',
        )
    );

}
add_action( \'widgets_init\', \'gt_widgets_init\' );


?>

首页。php

<?php get_header();?>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="<?php echo site_url(\'/blog\');?>">
            <h2 class="section-heading">All Blogs</h2>
        </a>


        <section>
           <?php
        $args =  array(
         \'post_type\' => \'post\',
         \'posts_per_page\' => 2
        );
        $blogposts = new WP_Query($args);

        while($blogposts->have_posts()){
            $blogposts->the_post();

      ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>

        <a href="<?php echo site_url(\'/projects\');?>">
            <h2 class="section-heading">All Projects</h2>
        </a>


        <section>
           <?php
            $args =  array(
             \'post_type\' => \'project\',
             \'posts_per_page\' => 2
            );
            $projects = new WP_Query($args);

            while($projects->have_posts()){
                $projects->the_post();

          ?>
            <div class="card">
                <div class="card-image">
                    <a href="<?php echo the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="<?php echo the_permalink(); ?>">
                        <h3><?php the_title(); ?></h3>
                    </a>
                    <p>
                       <?php echo wp_trim_words(get_the_excerpt(),30); ?>
                    </p>
                    <a href="<?php echo the_permalink(); ?>" class="btn-readmore">Read more</a>
                </div>
            </div>
          <?php } 
            wp_reset_query(); 
          ?>

        </section>


              <?php 
               dynamic_sidebar( \'Frontpage\' ); 
              ?>




      <!-- <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>-->

      <?php get_footer();?>

frontpage html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
        crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>GTCoding</title>
</head>

<body>
    <div id="slideout-menu">
        <ul>
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="blogslist.html">Blog</a>
            </li>
            <li>
                <a href="blogslist.html">Projects</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <input type="text" placeholder="Search Here">
            </li>
        </ul>
    </div>

    <nav>
        <div id="logo-img">
            <a href="#">
                <img src="img/logo.png" alt="GTCoding Logo">
            </a>
        </div>
        <div id="menu-icon">
            <i class="fas fa-bars"></i>
        </div>
        <ul>
            <li>
                <a class="active" href="index.html">Home</a>
            </li>
            <li>
                <a href="blogslist.html">Blog</a>
            </li>
            <li>
                <a href="blogslist.html">Projects</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <div id="search-icon">
                    <i class="fas fa-search"></i>
                </div>
            </li>
        </ul>
    </nav>

    <div id="searchbox">
        <input type="text" placeholder="Search Here">
    </div>

    <div id="banner">
        <h1>&lt;GTCoding/&gt;</h1>
        <h3>Learn coding from scratch</h3>
    </div>

    <main>
        <a href="blogslist.html">
            <h2 class="section-heading">All Blogs</h2>
        </a>

        <section>
            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/1.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Blog Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/2.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Blog Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>
        </section>

        <a href="blogslist.html">
            <h2 class="section-heading">All Projects</h2>
        </a>

        <section>
            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/3.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Project Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>

            <div class="card">
                <div class="card-image">
                    <a href="blogpost.html">
                        <img src="img/4.jpg" alt="Card Image">
                    </a>
                </div>

                <div class="card-description">
                    <a href="blogpost.html">
                        <h3>The Project Title Here</h3>
                    </a>
                    <p>
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, ullam facilis consequuntur eligendi sit accusamus tempora
                        cum distinctio pariatur ipsa quod, odit dolorum non vero recusandae? Corporis voluptatem optio nulla.
                    </p>
                    <a href="blogpost.html" class="btn-readmore">Read more</a>
                </div>
            </div>
        </section>

        <h2 class="section-heading">Source Code</h2>

        <section id="section-source">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum neque qui delectus ad dolor blanditiis perferendis praesentium
                consectetur aut sed provident obcaecati aspernatur perspiciatis, dolores nobis pariatur ipsum vel corrupti!
            </p>
            <a href="#" class="btn-readmore">GitHub Profile</a>
        </section>

        <footer>
            <div id="left-footer">
                <h3>Quick Links</h3>
                <p>
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="#">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="blogslist.html">Blogs</a>
                        </li>
                        <li>
                            <a href="blogslist.html">Projects</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </p>
            </div>

            <div id="right-footer">
                <h3>Follow us on</h3>
                <div id="social-media-footer">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="fab fa-facebook"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <p>This website is developed by GTCoding</p>
            </div>
        </footer>

    </main>

    <script src="main.js"></script>
</body>

</html>

我看到在检查元素时生成了一个额外的div

添加小部件之前

我如何解决这个问题？

小码农CODE

相关推荐

My widgets do not save