如何解决将自定义页脚添加到页面模板
我使用“虚拟”内容制作了自定义页脚布局。
这是页脚 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
但是我的页脚根本没有显示?
<?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 中的某些内容阻止了页脚显示?
解决方法
我查看了网站,那里似乎缺少一些样式。 尝试:
.my-footer {
height: 200px;
position: absolute;
bottom: 20px;
width: 100%;
}
当然要调整高度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。