Mută toate fișierele JS în footer, în mod corect
Pentru a accelera încărcarea site-ului și a preveni scripturile să blocheze randarea paginii, încerc să mut toate scripturile posibile (fișiere JS) din head
în footer
. După cercetare, am creat acest cod:
function footer_enqueue_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');
Dar nu funcționează deoarece unele scripturi încă se încarcă în head
, vezi rezultatul de mai jos:
<head>
<link rel="stylesheet" type="text/css" href="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.993ea9.css" media="all" />
<script type="text/javascript" src="http://elclarin.dev/wp-content/cache/minify/000000/d4587/default.include.0fe0ac.js"></script>
....
<!-- Meta-uri -->
<meta charset="utf-8">
<!-- Fișiere JS -->
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="http://elclarin.dev/wp-content/themes/elclarin_v2/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
var TEMPLATEURL = 'http://elclarin.dev/wp-content/themes/elclarin_v2';
</script>
<!-- Generat de OpenX 2.8.9 -->
<script type='text/javascript' src='http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank'></script>
<!-- Fișiere Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29394358-3']);
_gaq.push(['_trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-36592785-1']);
_gaq.push(['elclarin._trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-49334701-1']);
_gaq.push(['elclarin._trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
...
</footer>
<script type='text/javascript' src='http://elclarin.dev/wp-includes/js/admin-bar.min.js?ver=4.1'></script>
<script type='text/javascript' src='http://elclarin.dev/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://elclarin.dev/wp-includes/js/hoverIntent.min.js?ver=r7'></script>
...
Există vreo soluție pentru această problemă? Site-ul live pentru testare este aici
Actualizare
După sfatul lui @Milo am descoperit că scripturile, așa cum a spus el, nu sunt încărcate corect în temă în fișierul header.php
deoarece pot vedea acest lucru:
<!-- Fișiere JS -->
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/jquery.tools-1.2.7.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/prefixfree-1.0.6.min.js"></script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/modernizr.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/html5shiv.js"></script>
<![endif]-->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/selectivizr-1.0.2.min.js"></script>
<![endif]-->
<script type="text/javascript">
var TEMPLATEURL = '<?php echo TEMPLATEURL; ?>';
</script>
<script type="text/javascript" src="<?php echo TEMPLATEURL ?>/js/acciones.js"></script>
<!-- Generat de OpenX 2.8.9 -->
<script type='text/javascript' src='http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank'></script>
<!-- Fișiere Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29394358-3']);
_gaq.push(['_trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-36592785-1']);
_gaq.push(['elclarin._trackPageview']);
_gaq.push(['elclarin._setAccount', 'UA-49334701-1']);
_gaq.push(['elclarin._trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- Fișiere WP -->
<?php wp_head(); ?>
Întrebarea mea referitoare la aceste includeri (nu sunt dezvoltatorul temei dar sunt sigur că acest lucru poate fi rezolvat): care este modul corect|potrivit de a le încărca fără a strica tema și având în vedere performanța și viteza de încărcare a paginii?

După părerea mea personal, încă consider că încărcarea scripturilor și stilurilor direct în header este o practică proastă, deoarece eliminarea lor condiționată este întotdeauna problematică.
Cea mai bună soluție este crearea unui [child theme] și copierea fișierului header.php
în tema copil. WordPress va încărca header-ul din tema copil în locul celui din tema părinte.
Acum poți șterge toate scripturile din header și să le încarci corect folosind hook-ul wp_enqueue_scripts
în fișierul functions.php
al temei copil. Nu uita să setezi parametrul $in_footer
la `true` în funcțiile wp_enqueue_script()
și wp_register_script()
.
EDIT
Din fișierul header.php
legat, scripturile tale sunt adăugate între liniile 56 - 95. Acestea trebuie șterse. Dacă vizitezi site-ul, nu vei vedea niciun jquery încărcat.
Biblioteca jquery este deja încărcată, nu trebuie să-ți faci griji. Restul trebuie să le încarci tu. Iată un exemplu (Reține, fiecare script trebuie să aibă un identificator unic pentru a evita conflictele):
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts()
{
wp_enqueue_script('jquery-tools', get_template_directory_uri() . '/js/jquery.tools.js-1.2.7.min.js', array('jquery'), false, true);
//Fă același lucru pentru celelalte scripturi
}
Am folosit get_template_directory_uri()
pentru că folderul js rămâne în tema părinte. Dacă muți folderul js în tema copil, va trebui să folosești get_stylesheet_directory_uri()
.
NOTE DESPRE SCRIPTURILE CONDITIONALE
După patru ani de la ridicarea problemei, încă nu există o metodă integrată pentru încărcarea condiționată a scripturilor pentru browserul IE, așa cum există pentru stiluri. Poți verifica ticket-ul Trac și o altă întrebare referitoare la această problemă aici.
Nu am încercat niciodată să încarc scripturi condiționat în funcție de browser, așa că nu pot comenta pe această secțiune sau afirma dacă soluțiile menționate în răspunsul legat sau în ticket-ul Trac funcționează. Ce pot spune este că, dacă soluțiile nu funcționează, va trebui să copiezi footer.php
în tema copil și să muți liniile 61 -66 din header în footer.
NOTE DESPRE LINIILE DE SCRIPT 67 -69
Această secțiune transmită o variabilă php către jquery. Modul corect de a face acest lucru este folosirea funcției wp_localize_script()
. Va trebui să contactezi dezvoltatorul pentru asistență, deoarece aceasta este o problemă legată de temă și nu știu exact unde este folosită această variabilă în scripturile tale. Verifică link-ul pentru informații suplimentare.
NOTE DESPRE SCRIPTUL DE ANALYTICĂ LINIILE 75 - 94
Va trebui să creezi un fișier js pentru această secțiune. Dacă nu ai copiat folderul js din tema părinte în tema copil, creează un nou folder js în tema copil. Deschide-l și creează un nou fișier js, numindu-l cum dorești, de exemplu analytics.script.js
.
Apoi mută totul din tag-urile script în acest fișier, adică liniile 77 - 92. Asigură-te că folosești wrapper-ul no conflict, așa cum este descris aici.
Poți încărca acest script în mod normal, așa cum am descris mai devreme, dar folosește get_stylesheet_directory_uri()
și nu get_template_directory_uri()
.
EDIT 2
Patch-ul din răspunsul legat sub NOTE DESPRE SCRIPTURILE CONDITIONALE nu funcționează, nu a fost încă implementat și, după cum am menționat în comentarii, probabil nu va fi inclus nici în versiunea 10 în următorii 100 de ani :-). Din păcate, va trebui să trăiești cu asta, deocamdată nu există nicio modalitate de a realiza acest lucru. Acesta este un dezavantaj al suportării pentru IE6 - 8. Să fim sinceri, dacă încă suporți IE6 și 7, lupți o bătălie pierdută cu mult timp în urmă. Toți dezvoltatorii principali au abandonat suportul pentru IE6 (inclusiv WordPress), Microsoft a abandonat IE7, așa că și ceilalți dezvoltatori vor face același lucru în curând, iar IE 8 nu va supraviețui până la sfârșitul anului 2016, după părerea mea.
Pentru a depăși această problemă de compatibilitate cu jquery, ar fi mai bine să rămâi la ceea ce oferă tema în sine.
Poți încerca ceva de genul acesta:
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', PHP_INT_MAX);
function enqueue_my_scripts()
{
/**
* Asigură-te că folosești get_template_directory_uri() dacă scriptul rămâne în tema părinte
* Folosește get_stylesheet_directory_uri() dacă scriptul este în tema copil
*/
wp_enqueue_script('jquery-min', get_template_directory_uri() . '/js/jquery-1.7.2.min.js', array(), false, true);
wp_enqueue_script('jquery-tools', get_template_directory_uri() . '/js/jquery.tools.js-1.2.7.min.js', array('jquery-min'), false, true);
wp_enqueue_script('prefixfree', get_template_directory_uri() . '/js/prefixfree-1.0.6.min.js', array(), false, true);
wp_enqueue_script('modernizr', get_template_directory_uri() . '/js/modernizr.js', array(), false, true);
/**
* Cele două scripturi conditionale pentru care nu există soluție, încarcă-le sau renunță la suport
*/
wp_enqueue_script('html5shiv', get_template_directory_uri() . '/js/html5shiv.js', array(), false, true);
wp_enqueue_script('selectivizr', get_template_directory_uri() . '/js/selectivizr-1.0.2.min.js', array(), false, true);
wp_enqueue_script('acciones', get_template_directory_uri() . '/js/acciones.js', array(), false, true);
wp_enqueue_script('openx', 'http://openx.elclarinweb.com/www/delivery/spcjs.php?id=2&target=_blank', array(), false, true);
wp_enqueue_script('analytics', get_stylesheet_directory_uri() . '/js/analytics.script.js', array(), false, true);
}
Cum am spus mai devreme, există o variabilă php transmisă către un script despre care ar trebui să vorbești cu autorul temei. De asemenea, orice problemă de compatibilitate ar trebui discutată cu autorii temei. Aceasta este structura corectă și ar trebui să funcționeze în teorie. Pentru orice altă problemă legată de temă sau de compatibilitate, nu ezita să contactezi autorul temei pentru asistență.
EDIT 3
Iată cum ar trebui să arate fișierul header.php al temei copil:
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog">
<head>
<!-- Metas -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google-site-verification" content="V022hygXU9AHEdTBX2BFnTBYeo4SsaTjC7aGdoIMPL4"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<?php if (is_single()) { ?>
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta itemprop="name" content="<?php the_title(); ?>">
<meta property="og:type" content="article"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<?php
if (has_post_thumbnail()) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 490, 290 ), false );
?>
<meta property="og:image" content="<?php echo $src[0]; ?>"/>
<meta itemprop="image" content="<?php echo $src[0]; ?>">
<?php } else { ?>
<meta property="og:image" content="<?php echo TEMPLATEURL; ?>/images/logo.png"/>
<meta itemprop="image" content="<?php echo TEMPLATEURL; ?>/images/logo.png">
<?php } ?>
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>"/>
<meta itemprop="description" content="<?php the_excerpt(); ?>">
<?php } ?>
<!-- Titlu -->
<title>
<?php
if (isset($wp_query->query_vars['b'])) {
echo str_replace( "+", " ", $wp_query->query_vars['b'] )." | ";
}
wp_title( '|', true, 'right' );
bloginfo( 'name' );
if (isset($paged) && $paged >= 2 || isset($page) && $page >= 2 || isset($page_alt) && $page_alt >= 2) {
echo ' | '.sprintf( 'Página %s', max( $paged, $page, $page_alt ) );
}
?>
</title>
<!-- Fișiere stil și altele -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>?version=4"/>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo SITEURL; ?>/feed/"/>
<link rel="alternate" type="application/atom+xml" title="Atom" href="<?php echo SITEURL; ?>/feed/atom/"/>
<link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.ico"/>
<link rel="shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon.png"/>
<link rel="apple-shortcut icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png"/>
<link rel="apple-touch-icon-precomposed" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">
<link rel="apple-touch-icon" href="<?php echo TEMPLATEURL ?>/images/favicon_iphone.png">
<!-- Fișiere WP -->
<?php wp_head(); ?>
</head>
<body>
<div class="for_overlays">
<?php
if (is_front_page()) {
$prepost = $post;
$normal_args = Array(
'post_type' => 'portadadeldia',
'post_status' => 'publish',
'posts_per_page' => 1
);
$normal_query = new WP_Query( $normal_args );
if ($normal_query->have_posts()) {
while ($normal_query->have_posts()) {
$normal_query->the_post();
?>
<?php
if (has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
?>
<div id="portadadeldia" class="from_overlay">
<a href="<?php echo $large_image_url[0]; ?>" target="_blank">
<?php echo get_the_post_timthumbnail(
$post->ID,
'portadadeldia_frontpage_overlay',
array( 'alt' => trim( get_the_title() ), 'title' => trim( get_the_title() ) )
); ?>
</a>
</div>
<?php } ?>
<?php
}
}
$post = $prepost;
wp_reset_postdata();
}
?>
<svg>
<filter id="firefoxblur">
<feGaussianBlur stdDeviation="4"/>
</filter>
</svg>
</div>
<header>
<div class="center_content">
<div id="header_publicity" class="publicity">
<span>Publicitate</span>
<div>
<script type='text/javascript'><!--// <![CDATA[
/* [id18] Header Top */
OA_show(18);
// ]]> --></script>
<noscript><a target='_blank' href='http://openx.elclarinweb.com/www/delivery/ck.php?n=1073df0'><img
border='0' alt=''
src='http://openx.elclarinweb.com/www/delivery/avw.php?zoneid=18&n=1073df0'/></a>
</noscript>
</div>
</div>
<h1 id="header_logo"><a href="<?php echo SITEURL; ?>">
<?php
$prepost = $post;
$normal_args = Array(
'post_status' => 'publish',
'posts_per_page' => 1,
'post_type' => 'logos',
);
$normal_query = new WP_Query( $normal_args );
if ($normal_query->have_posts()) {
$normal_query->the_post();
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$thumbnail_object = get_post( $thumbnail_id );
$url = $thumbnail_object->guid;
?><img src="<?PHP echo $url; ?>" alt="<?php bloginfo( 'name' ); ?>"><?php
} else {
?><img src="<?PHP echo TEMPLATEURL; ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>"><?php
}
$post = $prepost;
wp_reset_postdata();
?>
</a></h1>
<?php custom_secondary_nav( "executive_menu", 'header_lateral_superior', 'Meniu corporativ' ); ?>
<div id="header_lateral_inferior">
<div id="header_buscador" role="search" title="Căutare">
<div id="header_buscador_inner">
<form method="get" action="<?php echo SITEURL; ?>">
Căutare
<input title="Căutare" type="text" name="s"
value="<?php echo str_replace( "+", " ", $wp_query->query_vars['s'] ); ?>">
</form>
</div>
</div>
<div id="header_redes">
<a href="http://twitter.com/elclarin_aragua" target="_blank"><img
src="<?php echo TEMPLATEURL ?>/images/icons/tw.png"></a>
<a href="<?php echo SITEURL; ?>/rss" target="_blank"><img
src="<?php echo TEMPLATEURL ?>/images/icons/rs.png"></a>
<a href="<?php echo SITEURL; ?>"><img src="<?php echo TEMPLATEURL ?>/images/icons/ho.png"></a>
</div>
</div>
<div id="header_menu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 3 ) ); ?>
</div>
</div>
</header>
<div role="main" id="main" class="main">
<div class="center_content">

Acest lucru este cam avansat pentru mine @Pieter, poți să oferi împreună cu întrebarea ta un exemplu simplu pentru unul sau două scripturi? Am citit răspunsul tău dar nu știu cum să procedez mai departe

Bine, un ultim lucru, cum ar trebui să arate fișierul header.php
din tema copil? Acum asta este exact ceea ce am și cred că este complet greșit, deci...

Cred că scriptul tău este corect, dar poate trebuie să corectezi acest element
add_action('after_setup_theme', 'footer_enqueue_scripts');
Schimbă în
add_action( 'wp_enqueue_scripts', 'oiw_remove_head_scripts' );
Poți găsi referința aici și am testat-o și funcționează`
