css 页脚滑轨

Posted 2021-05-13

<?php

/**
 * @author  Michael White
 * @link    http://geckografix.guru
 */

add_action( 'wp_enqueue_scripts', 'load_footer_slide_files' );

function load_footer_slide_files() {
	
	wp_enqueue_script( 'genesis-footer-slide-scroll', get_stylesheet_directory_uri() . "/js/footer-slide-scroll.js", array( 'jquery' ), CHILD_THEME_VERSION, true );
	
}

 
 //* Adds widget to footer-slide

add_action( 'genesis_footer', 'villa_footer_content',5 );
function villa_footer_content() {
	genesis_widget_area ('site-footer-widget', array(
        'before' => '<div class="site-footer-widget"><div class="wrap">',
        'after' => '</div></div>',
	) );
}
add_filter( 'genesis_footer_output', 'filter_custom_footer' );

function filter_custom_footer( $output ) {
    
    $output = sprintf( '<img class="footer-image" src="%s" alt="%s" />', get_stylesheet_directory_uri() .'/assets/images/logo_light.png', get_bloginfo( 'name' ) );
    
    //$output .= genesis_seo_site_title();

	$output .= sprintf( '<p>%s<span style="color:red; line-height: 0.7;" class="dashicons dashicons-heart animated pulse infinite"></span>%s<a href="http://geckografix.guru/">%s</a>%s<a href="http://geckografix.guru/demo/villa-pro/">%s</a></p>',  __( 'Made with ' ), __( ' by ' ), __( 'GECKOGRAFIX' ), __( ' on the ' ), __( 'Villa-Pro Theme' ) );
	
	return $output;
}

jQuery(document).ready(function($) {

    $('.scroll-footer').click(function() {
        $('html, body').animate({scrollTop: $(document).height()}, 1000);
        return false;
    });
});

<?php

//* Include footer-slide and add a widget to it



include_once( get_stylesheet_directory() . '/footer-slide.php' );

genesis_register_sidebar( array(
	'id'          => 'site-footer-widget',
	'name'        => __( 'The Footer Widget', 'themename' ),
	'description' => __( 'This is a widget area in the site footer that is hidden.', 'themename' ),
) );

.site-footer {
	background-color: #D2AD37;
	bottom: 0;
	left: 0;
	height: 400px;
	line-height: 1;
	overflow: hidden;
	position: fixed;
	right: 0;
	text-align: center;
	width: 100%!important;
	z-index: -99;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}

.site-footer a,
.site-footer p {
    color: #fff;
}

.site-footer a:hover {
    color: #333;
}

.site-container {
	background-color: #fff;
    margin-bottom: 400px;
    padding-bottom: 100px;
    z-index: 99;
    box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 30px -20px;
}

.site-inner {
    box-shadow: none!important;
    margin-bottom: 0px!important;
}

.footer-image {
	background: no-repeat center center;
	background-size: contain;
	display: block;
	width: 140px;/*add width of image you want*/
	height: 140px;/*add height of image you want*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	
}

.menu-secondary {
    margin-top: 30px;
}

@media only screen and (max-width: 450px) {

    .site-footer {
        line-height: 1.5;
    }
    
    .site-footer .site-title {
        font-size: 20px;
    }
    
    .footer-image {
	    background: no-repeat center center;
	    background-size: contain;
	    display: block;
	    width: 120px;/*add width of image you want*/
	    height: 120px;/*add height of image you want*/
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 10px;
	    margin-bottom: 10px;
    }
    
}