如何将javascript动态(或不动态)移动到页脚
我有一个wordpress网站,我需要将一些javascript移到页脚。我使用的主题(photocrati)在header.php文件中总共只使用了4次wp_enqueue_scripts标记 我想做的是找到一种方法,希望是动态的,将javascript文件移动到页脚。我意识到,如果使用enqueue_脚本正确引用$in_footer,那么使用$in_footer会容易得多,但遗憾的是,事实并非如此 由于这是一个摄影工作室网站,我需要尽我所能减少加载时间。现在,很明显,我不会像google page speed推荐的那样将CSS移动到页脚,因为我不希望我的站点在访问者第一次查看时呈现为未格式化 在做了所有我能做的事情之后(我显然不能做任何事情来最小化或设置浏览器缓存在我的网站上没有托管的文件上,例如google analytics js文件),page speed insights建议,“删除折叠内容上方的渲染阻塞JavaScript和CSS”就是我所剩下的。我希望,一旦我把js移到页脚,我的页面加载时间将在5秒以下,因为现在只有6秒,还有19个脚本资源 希望有人能通过添加到functions.PHP文件中的一些PHP代码为我提供一些指导,因为我(在大多数情况下)在编写PHP代码时了解PHP代码的情况。但是,我很难理解头文件中发生了什么,并且能够找到所有19个js文件,将它们从头文件中删除,并将它们正确地排队 编辑这里是header.php文件。我注意到有些脚本甚至没有在这里以任何方式调用,因为当我在文件中搜索say“hoverintent.js”时,找不到它,但是如果我在页面加载后搜索源代码,它肯定在标题中如何将javascript动态(或不动态)移动到页脚,javascript,php,html,css,wordpress,Javascript,Php,Html,Css,Wordpress,我有一个wordpress网站,我需要将一些javascript移到页脚。我使用的主题(photocrati)在header.php文件中总共只使用了4次wp_enqueue_scripts标记 我想做的是找到一种方法,希望是动态的,将javascript文件移动到页脚。我意识到,如果使用enqueue_脚本正确引用$in_footer,那么使用$in_footer会容易得多,但遗憾的是,事实并非如此 由于这是一个摄影工作室网站,我需要尽我所能减少加载时间。现在,很明显,我不会像google p
<?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>
Enqueue脚本有第五个参数,它是一个布尔值,默认为false。如果设置为true,脚本将位于页脚中。在这种情况下,主题的页脚中有wp\u 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 ); ?>
您还可以在脚本中添加一个defer
属性。在10版之前的IE中不支持它,但在这里也有帮助。看看你是否有一些代码要发布,我们可以@WhiteHat,我添加了一些代码。@MarcBaumbach,这似乎是一个可行的选择,至少现在是这样。根据W3Schools的统计数据,只有不到2%的学校使用IE9或更早版本,而且由于这是一个摄影网站,并且加载了大量高分辨率的图像,我猜那些使用IE9的学校不会一直等待图像加载;然而,要么我不理解你的答案,要么你不理解我的问题。在我的问题中,我解释说我使用的主题没有正确使用wp_enqueue_脚本;因此,我不能简单地使用第五个参数。