将自定义页脚添加到页面模板

Posted 2023-03-21

【中文标题】将自定义页脚添加到页面模板

【英文标题】：Adding Custom Footer to page Template

【发布时间】：2021-04-29 14:14:17

【问题描述】：

我已经使用“虚拟”内容制作了自定义页脚布局。

这是页脚html

                                  <!-- MY FOOTER -->
                                    <div class="my-footer">
                                <div class="my-column" style="background-color:#aaa;">
                                <h2>Column 1</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#bbb;">
                                <h2>Column 2</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ccc;">
                                <h2>Column 3</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ddd;">
                                <h2>Column 4</h2>
                                <p>Some text..</p>
                              </div>
                            </div>
                            <!-- END MY FOOTER -->

/* Create four equal columns that floats next to each other */
.my-column 
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */


/* Clear floats after the columns */
.row:after 
  content: "";
  display: table;
  clear: both;

为了让它显示在我最后一个“滚动部分”的底部（#contact） 我已将此 html 页脚添加到：

page-templates/template-full-page.php

但是我的页脚根本不显示？

Link to view site

<?php
/*
Template Name: Scrolling Full Screen Sections
*/
?>
<?php get_header(); ?>

<?php the_post(); ?>

<?php

    $scrolling_page = movedo_grve_post_meta( '_movedo_grve_scrolling_page' );
    $responsive_scrolling_page = movedo_grve_post_meta( '_movedo_grve_responsive_scrolling', 'yes' );
    $scrolling_lock_anchors = movedo_grve_post_meta( '_movedo_grve_scrolling_lock_anchors', 'yes' );
    $scrolling_loop = movedo_grve_post_meta( '_movedo_grve_scrolling_loop', 'none' );
    $scrolling_speed = movedo_grve_post_meta( '_movedo_grve_scrolling_speed', 1000 );

    $wrapper_attributes = array();
    if( 'pilling' == $scrolling_page ) 
        $scrolling_page_id = 'grve-pilling-page';
        $scrolling_direction = movedo_grve_post_meta( '_movedo_grve_scrolling_direction', 'vertical' );
        $wrapper_attributes[] = 'data-scroll-direction="' . esc_attr( $scrolling_direction ) . '"';
     else 
        $scrolling_page_id = 'grve-fullpage';
    
    $wrapper_attributes[] = 'id="' . esc_attr( $scrolling_page_id ) . '"';
    $wrapper_attributes[] = 'data-device-scrolling="' . esc_attr( $responsive_scrolling_page ) . '"';
    $wrapper_attributes[] = 'data-lock-anchors="' . esc_attr( $scrolling_lock_anchors ) . '"';
    $wrapper_attributes[] = 'data-scroll-loop="' . esc_attr( $scrolling_loop ) . '"';
    $wrapper_attributes[] = 'data-scroll-speed="' . esc_attr( $scrolling_speed ) . '"';

?>

            <!-- CONTENT -->
            <div id="grve-content" class="clearfix">
                
                <div class="grve-content-wrapper">
                    
                    <!-- MAIN CONTENT -->
                    <div id="grve-main-content">
                        <div class="grve-main-content-wrapper clearfix" style="padding: 0;">

                            <!-- PAGE CONTENT -->
                            <div id="page-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <div <?php echo implode( ' ', $wrapper_attributes ); ?>>
                                    <?php the_content(); ?>
                                    **<!-- MY FOOTER -->
                                    <div class="my-footer">
                                <div class="my-column" style="background-color:#aaa;">
                                <h2>Column 1</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#bbb;">
                                <h2>Column 2</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ccc;">
                                <h2>Column 3</h2>
                                <p>Some text..</p>
                              </div>
                              <div class="my-column" style="background-color:#ddd;">
                                <h2>Column 4</h2>
                                <p>Some text..</p>
                              </div>
                            </div>
                            <!-- END MY FOOTER -->**
                                </div>
                                
                            </div>

                            <!-- END PAGE CONTENT -->
                        </div>
                    </div>
                    <!-- END MAIN CONTENT -->
                </div>
                
            </div>

            <!-- END CONTENT -->
            
            <!-- SIDE AREA -->
            <?php
                $movedo_grve_sidearea_data = movedo_grve_get_sidearea_data();
                movedo_grve_print_side_area( $movedo_grve_sidearea_data );
            ?>
            <!-- END SIDE AREA -->

            <!-- HIDDEN MENU -->
            <?php movedo_grve_print_hidden_menu(); ?>
            <!-- END HIDDEN MENU -->

            <?php movedo_grve_print_search_modal(); ?>
            <?php movedo_grve_print_form_modals(); ?>
            <?php movedo_grve_print_language_modal(); ?>
            <?php movedo_grve_print_login_modal(); ?>
            <?php movedo_grve_print_social_modal(); ?>
            <?php do_action( 'movedo_grve_footer_modal_container' ); ?>
            
            </div> <!-- end #grve-theme-content -->
            <?php movedo_grve_print_safebutton_area(); ?>
        </div> <!-- end #grve-theme-wrapper -->

        <?php wp_footer(); // js scripts are inserted using this function ?>

    </body>

</html>

我是否将 html 添加到模板文件中的错误位置？还是模板文件或 css 中的某些内容阻止了页脚显示？

【参考方案1】：

我检查了该网站，那里似乎缺少一些样式。 尝试：

.my-footer 
    height: 200px;
    position: absolute;
    bottom: 20px;
    width: 100%;

当然要调整高度。

【讨论】：

谢谢！您能看到是什么阻止了我的“联系表单”按钮彼此垂直对齐吗？