如何动态(或不)将javascript移动到页脚

时间:2015-09-12 02:00:05

标签: javascript php html css wordpress

我有一个wordpress网站,我需要将一些javascript移动到页脚。我使用的主题(photocrati)只在header.php文件中使用wp_enqueue_scripts标签共4次。

我要做的是找到一种方法,希望动态地将javascript文件移动到页脚。我意识到使用$ in_footer会更容易使用enqueue_scripts正确引用它们,但是唉,事实并非如此。

由于这是一个摄影工作室网站,我需要尽我所能来减少加载时间。现在,显然我不打算像谷歌页面速度建议那样将CSS移动到页脚,因为我不希望在访问者第一次查看时我的网站被无格式化。

在完成其他所有工作之后(我显然无法做任何关于最小化或设置利用浏览器缓存不在我的网站上托管的文件,即google analytics js文件),页面速度见解建议,“删除渲染 - 阻止JavaScript和CSS在上面的内容“是我剩下的。我希望一旦我将js移动到页脚,我的页面加载时间将在5秒以下,考虑到它现在只有不到6,并且有19个脚本资源。

希望有人可以通过添加到functions.php文件中的一些PHP代码为我提供一些指导,因为我(大多数情况下)在编写时了解PHP代码的用途。但是,我很难解读头文件中发生的事情,并且能够找到所有19个js文件以从头文件中删除它们并正确地将它们排队。

EDIT 这是header.php文件。我注意到有些脚本甚至没有以任何方式在这里调用,因为当我搜索文件说“hoverintent.js”时,它无处可寻,但如果我在页面加载后搜索源代码,当然它在标题中。

<?php

$preset = Photocrati_Style_Manager::get_active_preset();

extract($preset->to_array());



$rcp = $wpdb->get_results("SELECT fs_rightclick,lightbox_mode,lightbox_type FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");

foreach ($rcp as $rcp) {

    $fs_rightclick = $rcp->fs_rightclick;

    $lightbox_mode = $rcp->lightbox_mode;

    $lightbox_type = $rcp->lightbox_type;

}

$music = $wpdb->get_results("SELECT music_blog,music_blog_auto,music_blog_file,music_blog_controls,music_cat,music_cat_auto,music_cat_file,music_cat_controls FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");

foreach ($music as $music) {

    $music_blog = $music->music_blog;

    $music_blog_auto = $music->music_blog_auto;

    $music_blog_controls = $music->music_blog_controls;

    $music_blog_file = $music->music_blog_file;

    $music_cat = $music->music_cat;

    $music_cat_auto = $music->music_cat_auto;

    $music_cat_controls = $music->music_cat_controls;

    $music_cat_file = $music->music_cat_file;

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--[if IE 9 ]> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> class='ie9'><!--<![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><!--<![endif]-->

<head profile="http://gmpg.org/xfn/11">

<?php

Photocrati_Fonts::render_google_font_link(array(

    array($font_style, $font_weight, $font_italic),

    array($sidebar_font_style, $sidebar_font_weight, $sidebar_font_italic),

    array($sidebar_title_style, $sidebar_title_weight, $sidebar_title_italic),

    array($title_style, $title_font_weight, $title_italic),

    array($h1_font_style, $h1_font_weight, $h1_font_italic),

    array($h2_font_style, $h2_font_weight, $h2_font_italic),

    array($h3_font_style, $h3_font_weight, $h3_font_italic),

    array($h4_font_style, $h4_font_weight, $h4_font_italic),

    array($h5_font_style, $h5_font_weight, $h5_font_italic),

    array($description_style, $description_font_weight, $description_font_italic),

    array($menu_font_style, $menu_font_weight, $menu_font_italic),

    array($submenu_font_style, $submenu_font_weight, $submenu_font_italic),

    array($footer_widget_style, $footer_widget_weight, $footer_widget_italic),

    array($footer_font_style, $footer_font_weight, $footer_font_italic)

));

?>

<title><?php

    if ( is_single() ) { single_post_title(); }       

    elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }

    elseif ( is_page() ) { single_post_title(''); }

    elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }

    elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }

    else { bloginfo('name'); wp_title('|'); get_page_number(); }

?></title>



<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta http-equiv="X-UA-Compatible" content="IE=9" />



<!-- IMPORTANT! Do not remove this code. This is used for enabling & disabling the dynamic styling -->

    <?php if($dynamic_style) { ?>



        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/dynamic-style.php" />

        <?php if($logo_menu_position == 'left-right') { ?>

        <!--[if lt IE 8]>

        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />

        <![endif]-->

        <?php } ?>



    <?php } else { ?>



        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/style.css" />

        <?php if($logo_menu_position == 'left-right') { ?>

        <!--[if lt IE 8]>

        <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />

        <![endif]-->

        <?php } ?>



    <?php } ?>

<!-- End dynamic styling -->



<!--[if IE 8]>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie.css" type="text/css" />

<![endif]-->



<!--[if lt IE 8]>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7.css" type="text/css" />

<![endif]-->



<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.lightbox-0.5.css" />



<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>



<?php

if( !is_admin()){

    wp_enqueue_script('jquery');

    wp_enqueue_script('jquery-effects-core');

    if ($preset->custom_js) wp_enqueue_script('photocrati-custom-js', site_url('?photocrati-js'));

 }

?>



<?php wp_head(); ?>



<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />



<?php if($fs_rightclick == "ON") { ?>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/clickprotect.js"></script>

<?php } ?>



<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.jplayer.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/jplayer.style.css" />



<?php if($lightbox_type == 'fancy'): ?>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />

<?php elseif($lightbox_type == 'light'): ?>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-light.css" type="text/css" />

<?php elseif($lightbox_type == 'thick'): ?>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-thick.css" type="text/css" />

<?php endif ?>



<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup.css" type="text/css" />

<?php endif ?>



<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/admin/js/jquery.fancybox-1.3.4.pack.js"></script>



<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup-v0.9.9.min.js"></script>

<?php endif ?>



<?php if($style_skin == 'modern' && is_front_page()): ?>

<?php

// when selecting multiple images as background then $home_bg_image is an array

if (!is_array($home_bg_image)) {

$home_bg_image = array($home_bg_image);

}



$home_bg_list = array();



foreach ($home_bg_image as $bg_image) {

if ($bg_image != null) {

    $bg_img = Photocrati_Style_Manager::get_image_url($bg_image, true);



    if ($bg_img != null) {

        $home_bg_list[] = array(

            'image' => $bg_img,

            'thumb' => Photocrati_Style_Manager::get_image_url($bg_image, true, 'thumbnail'),

            'title' => $bg_image,

        );

    }

}

}



// check that there are 1 or more images selected, otherwise fallback to default

if ($home_bg_list == null) {

$home_bg = 'default';

}



?>

<?php if($home_bg == 'slideshow'): ?>

    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?  >/scripts/supersized/slideshow/css/supersized.css" type="text/css" />

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.css" type="text/css" media="screen" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/js/supersized.3.2.7.min.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.min.js"></script>

    <script type="text/javascript">



        jQuery(function($){



            $.supersized({



                // Functionality

                slideshow               :   1,          // Slideshow on/off

                autoplay                :   1,          // Slideshow starts playing automatically

                start_slide             :   1,          // Start slide (0 is random)

                stop_loop               :   0,          // Pauses slideshow on last slide

                random                  :   0,          // Randomize slide order (Ignores start slide)

                slide_interval          :   <?php echo (floatval($home_bg_interval_speed) * 1000) ?>,       // Length between transitions

                transition              :       <?php echo ($home_bg_transition_effect) ?>,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left

                transition_speed        :   <?php echo (floatval($home_bg_transition_speed) * 1000) ?>,     // Speed of transition

                new_window              :   1,          // Image links open in new window/tab

                pause_hover             :   0,          // Pause slideshow on hover

                keyboard_nav            :   1,          // Keyboard navigation on/off

                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

                image_protect           :   1,          // Disables image dragging and right click with Javascript



                // Size & Position                         

                min_width               :   0,          // Min width allowed (in pixels)

                min_height              :   0,          // Min height allowed (in pixels)

                vertical_center         :   1,          // Vertically center background

                horizontal_center       :   1,          // Horizontally center background

                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)

                fit_portrait            :   1,          // Portrait images will not exceed browser height

                fit_landscape           :   0,          // Landscape images will not exceed browser width



                // Components                           

                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')

                thumb_links             :   1,          // Individual thumb links for each slide

                thumbnail_navigation    :   0,          // Thumbnail navigation

                slides                  :   <?php echo json_encode($home_bg_list) ?>,



                // Theme Options               

                progress_bar            :   1,          // Timer for each slide                         

                mouse_scrub             :   0



            });

        });



    </script>

header.php文件中包含js文件引用的部分。正如我之前所说,并非所有这些都是通过header.php文件调用的。

1 个答案:

答案 0 :(得分:0)

排队脚本有第五个参数,它是一个布尔值,默认为false。如果设置为true,则脚本将位于页脚中。如果您的主题在页脚中有wp_footer()方法。

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

一个例子:

<?php wp_enqueue_script( 'mysript', get_template_directory_uri() . '/js/myscript.js', array(), false, true ); ?>