内容上方的 WordPress 页脚

Question

抱歉，我是这方面的新手，我的问题对某些人来说可能听起来很愚蠢。我已经接管了由另一位不再联系的开发人员完成的 WordPress 网站的维护工作。我无法在下一页 https://www.covalin.com/product-category/boxes/metallic-boxes/ 上正确显示内容，当我将要在页面上显示的产品数量更改为大于 9 时，它会将页脚推到中间页面并在页脚下方显示产品。我希望能够在每个子类别下的所有产品。请查看下面的屏幕截图以了解问题。任何指导将不胜感激，我花了数小时试图弄清楚这一点。

当我使用下面的 CSS 时，它部分解决了问题，但创建了另一个问题，其中所有内容都是可滚动的，但出现在页脚后面。

CSS 代码 - 使用

.footer {
 position: fixed;
 bottom:0;
 }

PHP 更改产品显示数量的代码，由上一个开发者添加：

/*---------- woo-product pagination number setting ------------*/

add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
// $cols contains the current number of products per page based on the value 
stored on Options -> Reading
// Return the number of products you wanna show per page.
$cols = 27; //I changed this from 27 to 9 for the page to display properly.
return $cols;
}

How the site looks like with 9 products on a page

How the site looks like with 27 products on a page

已更新 - 下面有 footer.php 文件

<?php
/**
 * The template for displaying the footer
 *
 * Contains footer content and the closing of the #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?>

<?php // Check if site turned to boxed version
   $boxed = ''; $boxed_element = ''; $row_class = '';
   if (get_option('site_layout')=='boxed') {$boxed = 'container'; $boxed_element = 'col-md-12 col-sm-12'; $row_class = 'row';}
?>

  <?php if ($boxed && $boxed!='') { ?>
   </div>
   <div class='row'>
  <?php } ?>


<?php if ( class_exists('Woocommerce') ): ?>
 <?php  if(is_shop() || is_product() && is_active_sidebar('footer-bottom-shop')): ?>
     
 <?php if (!$boxed || $boxed=='') : ?><div class="container">
          <div class="row"><?php endif; ?>
           <div class="shop-bottom-sidebar col-xs-12 col-sm-12 col-md-12">
            <?php dynamic_sidebar('footer-bottom-shop'); ?>
           </div>
 <?php if (!$boxed || $boxed=='') : ?></div>
         </div><?php endif; ?>
 <?php endif ?>
<?php endif ?>
  
  <footer id="colophon" class="site-footer <?php echo esc_attr($boxed_element);?>">

   <?php 
    if (get_option('site_footer_top_background_option') && get_option('site_footer_top_background_option')!=''){
     $site_footer_top_background_option = get_option('site_footer_top_background_option');
    }
    else{$site_footer_top_background_option='';}
   ?>
  
  <?php if(is_active_sidebar('footer-top-sidebar-1') || is_active_sidebar('footer-top-sidebar-2')): ?>
   <div class="footer-top widget-area <?php echo esc_attr($row_class);?>" style="background:<?php echo esc_attr($site_footer_top_background_option); ?>;"> 
    <?php if (!$boxed || $boxed=='') : ?><div class="container">
    <div class="row"><?php endif; ?>

    <div class="col-xs-12 col-sm-6 col-md-6 footertopsidebarone">
     <?php if(is_active_sidebar('footer-top-sidebar-1')): ?>
      <?php dynamic_sidebar('footer-top-sidebar-1'); ?>
     <?php endif;?>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 footertopsidebartwo">
     <?php if(is_active_sidebar('footer-top-sidebar-2')): ?>
      <?php dynamic_sidebar('footer-top-sidebar-2'); ?>
     <?php endif;?>
    </div>
    
    <?php if (!$boxed || $boxed=='') : ?></div></div><?php endif; ?>
   </div>
  <?php endif; ?>

  <?php 
    if (get_option('site_middle_background_option') && get_option('site_middle_background_option')!=''){
     $site_middle_background_option = get_option('site_middle_background_option');
    }
    else{$site_middle_background_option='';}
  ?>
   <div class="footer-middle widget-area <?php echo esc_attr($row_class);?>" style="background:<?php echo esc_attr($site_middle_background_option);?>">
    <?php if (!$boxed || $boxed=='') : ?><div class="container">
     <div class="row"><?php endif; ?>
     <?php
      if (get_option('footer_bg_img') && get_option('footer_bg_img')!=''){
      $footer_bg_img_url = get_option('footer_bg_img');
     }
     else{$footer_bg_img_url='';}
     
     if (get_option('footer_bg_img_position') && get_option('footer_bg_img_position')!=''){
      $footer_bg_img_position = get_option('footer_bg_img_position');
      switch($footer_bg_img_position){
       case "right":
        $storex_footer_bg_position='96%';
        break;
       case "left":
        $storex_footer_bg_position='4%';
        break;
      }
     }
     else{$storex_footer_bg_position='';}
     
     ?>
      <div class="fotter-bg-img" style="background: url(<?php  echo esc_url($footer_bg_img_url)?>)  no-repeat transparent; background-position:<?php echo esc_attr($storex_footer_bg_position)?> 90%">
     
       <div class="col-xs-12 col-sm-6 col-md-3">
        <?php if ( is_active_sidebar( 'footer-sidebar-1' ) ) : ?>
         <?php dynamic_sidebar( 'footer-sidebar-1' ); ?>
        <?php endif; ?>
       </div>
       <div class="col-xs-12 col-sm-6 col-md-3">
        <?php if ( is_active_sidebar( 'footer-sidebar-2' ) ) : ?>
        <?php dynamic_sidebar( 'footer-sidebar-2' ); ?>
        <?php endif; ?>
       </div>
       <div class="col-xs-12 col-sm-6 col-md-3">
        <?php if ( is_active_sidebar( 'footer-sidebar-3' ) ) : ?>
         <?php dynamic_sidebar( 'footer-sidebar-3' ); ?>
         <?php endif; ?>
       </div>
       <div class="col-xs-12 col-sm-6 col-md-3">
        <?php if ( is_active_sidebar( 'footer-sidebar-4' ) ) : ?>
         <?php dynamic_sidebar( 'footer-sidebar-4' ); ?>
        <?php endif; ?>
       </div>
      </div>
      
     <?php if (!$boxed || $boxed=='') : ?></div>
    </div><?php endif; ?>
   </div>

   <?php 
    if (get_option('site_footer_bottom_background_option') && get_option('site_footer_bottom_background_option')!=''){
     $site_bottom_background_option = get_option('site_footer_bottom_background_option');
    }
    else{$site_bottom_background_option='';}
    
   ?>
   
   <div id="footer-bottom" style="background:<?php echo esc_attr($site_bottom_background_option); ?>;" class="<?php echo esc_attr($row_class);?> footer-bottom">
    <?php if (!$boxed || $boxed=='') : ?><div class="container">
     <div class="row"><?php endif; ?>
      <div class="col-xs-12 col-sm-6 col-md-6">
       <?php if (has_nav_menu('footer-nav')) : ?><!-- Footer navigation -->
        <nav id="site-navigation-footer" class="footer-navigation">
         <?php wp_nav_menu( array('theme_location'  => 'footer-nav') ); ?>       
        </nav>
      <?php endif; ?><!-- Footer navigation -->

      <div class="site-info">
       <?php $copyright = esc_attr(get_option('site_copyright'));
       if ($copyright != '') {
        echo esc_attr($copyright);
       } else {
        echo 'Storex &copy; '.date('Y') .''.esc_html__(' Theme by Themes Zone. All rights reserved', 'storex');
       }
       ?>
      </div>

      </div>

      <div class="col-xs-12 col-sm-6 col-md-6">
       <?php if ( is_active_sidebar( 'footer-bottom' ) ) : ?>
                             <?php dynamic_sidebar( 'footer-bottom' ); ?>
                         <?php endif; ?>
      </div>

     <?php if (!$boxed || $boxed=='') : ?></div>
    </div><?php endif; ?>
   </div>
   
  </footer><!-- #colophon -->
  <?php if ($boxed && $boxed!='') { ?>
   </div>
  <?php } ?>
</div><!-- #page -->

<script>
 jQuery( document ).ready(function() {
  
  jQuery('.quantity').append("<span class='qty-cus'>Qty</span>");
  
  jQuery('.wc-forward').val('View Order');
jQuery('.update_cart').val('Update Order');
  
  });

  //review order table text changes
  jQuery(window).on('load',function(){
    setTimeout(function() {   //calls click event after a certain time
     jQuery('.cart-subtotal th').text('Order SubTotal'); 
   }, 3000);
    jQuery('.update_cart').val('Update Order');

    jQuery('.page-template-special-offer .header-stripe h1.title').text('SPECIAL OFFERS');

    jQuery('.product-description-wrapper > .quantity').remove();
  });

  var cloned_field = jQuery('.register p.form-row.full').clone();
  jQuery('#custom_fax_no').append(cloned_field);
  jQuery('.register p.form-row.full').eq(0).remove();


  
  jQuery(window).scroll(function(){
         var winScroll= jQuery(window).scrollTop();
   console.log(winScroll);

         if(winScroll>0){
          jQuery('.header-top').addClass('sticky');
         }else{
          jQuery('.header-top').removeClass('sticky');
         }
  });

</script>

  <?php wp_footer(); ?>
 </body>
</html>

Answer 1

问题是您没有正确关闭 <div>。

目前好像

<div id="page" class="hfeed site container">
    <div class='row custom_header'>
       <!-- some contents..... -->
    </div>
    <div class='row'>
        <div id="main" class="site-main col-md-12 col-sm-12">
           <!-- some contents..... -->
        </div>
        <div class='row'>
            <footer id="colophon" class="site-footer col-md-12 col-sm-12">
               <!-- some contents... -->
            </footer>
        </div>
    </div>
</div>

应该是，

<div id="page" class="hfeed site container">
    <div class='row custom_header'>
        <!-- some contents... -->
    </div>
    <div class='row'>
        <div id="main" class="site-main col-md-12 col-sm-12">
            <!-- some contents... -->
        </div>
    </div>
    <div class='row'>
        <footer id="colophon" class="site-footer col-md-12 col-sm-12">
            <!-- some contents... -->
        </footer>
    </div>
</div>

不需要更改CSS。

内容上方的 WordPress 页脚

WordPress footer above content

css

wordpress

footer

woocommerce