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

标签 javascript php html css wordpress

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

我想要做的是找到一种方法，希望是动态地，将 javascript 文件移动到页脚。我意识到如果使用 enqueue_scripts 正确引用它们，那么使用 $in_footer 会容易得多，但遗憾的是，情况并非如此。

由于这是一个摄影工作室网站，我需要尽我所能来减少加载时间。现在，显然我不会像 google page speed 建议的那样将 CSS 移动到页脚，因为我不希望我的网站在访问者首次查看时呈现为未格式化。

在做了所有我能做的事情之后(我显然不能做任何关于最小化或设置利用浏览器缓存的事情，而不是托管在我的网站上的文件，即谷歌分析 js 文件)，页面速度洞察力建议，“删除渲染 -在首屏内容中阻止 JavaScript 和 CSS”是我剩下的全部了。我希望一旦我将 js 移动到页脚，我的页面加载时间将低于 5 秒，考虑到它现在不到 6 秒并且有 19 个脚本资源。

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

编辑 这是 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 文件调用的。

最佳答案

Enqueue 脚本有第五个参数，它是一个 bool 值，默认为 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 ); ?>

关于javascript - 如何动态(或不)将javascript移动到页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32534404/

上一篇：javascript - YQL 不按文档顺序返回带有联合运算符 (a|b) 的 xpath 选择查询

下一篇：javascript - 拖动事件不适用于 onload 功能

相关文章：

javascript - 在React中动态添加输入标签，显示一会儿然后消失

javascript - 为什么 localStorage 不持久存在于 Chrome 中？

javascript - 未设置值时删除输入

php - 依赖大量读/写时在 php/mysql/ajax 中应避免什么

javascript - 下拉菜单更改时调用 Javascript 函数

Javascript:安排稍后的 HTTP 请求

JavaScript 日期和时间

PHP5 - OOP - 多态性 - 帮我重写这个简单的开关

javascript - 为什么样式分配在创建后立即执行而不是动画？

java - Selenium，验证字段格式是否正确

©2024 IT工具网  联系我们