Главная - Без рубрики - Как удалить из верхней части страницы код Javascript

Как удалить из верхней части страницы код Javascript

Для того, чтобы улучшить время загрузки вашего блога WordPress, Google рекомендует переместить код Javacsript и CSS из верхней части страницы HTML вниз.

К сожалению, это не всегда просто сделать. Одна из причин в том, что некоторые установленные дополнительно плагины WordPress добавляют свои скрипты в заголовок автоматически, и повлиять на этот процесс не всегда можно.

Я напишу вам сейчас простое решение.

Желательно, мой пример, который я опишу, применить не на «живом» сайте. И еще желательно, понимать немного о каких функциях в примере идет речь и где они расположены.

Первый шаг.

Добавляем следующий код в файл functions.php вашей активной темы:

[slh lang=»php»] /**
* Filter HTML code and leave allowed/disallowed tags only
*
* @param string $text Input HTML code.
* @param string $tags Filtered tags.
* @param bool $invert Define whether should leave or remove tags.
* @return string Filtered tags
*/
function theme_strip_tags_content($text, $tags = », $invert = false) {

preg_match_all( ‘/<(.+?)[\s]*\/?[\s]*>/si’, trim( $tags ), $tags );
$tags = array_unique( $tags[1] );

if ( is_array( $tags ) AND count( $tags ) > 0 ) {
if ( false == $invert ) {
return preg_replace( ‘@<(?!(?:’. implode( ‘|’, $tags ) .’)\b)(\w+)\b.*?>.*?@si’, », $text );
}
else {
return preg_replace( ‘@<(‘. implode( ‘|’, $tags ) .’)\b.*?>.*?@si’, », $text );
}
}
elseif ( false == $invert ) {
return preg_replace( ‘@<(\w+)\b.*?>.*?@si’, », $text );
}

return $text;
}

/**
* Generate script tags from given source code
*
* @param string $source HTML code.
* @return string Filtered HTML code with script tags only
*/
function theme_insert_js($source) {

$out = »;

$fragment = new DOMDocument();
$fragment->loadHTML( $source );

$xp = new DOMXPath( $fragment );
$result = $xp->query( ‘//script’ );

$scripts = array();
$scripts_src = array();
foreach ( $result as $key => $el ) {
$src = $result->item( $key )->attributes->getNamedItem( ‘src’ )->value;
if ( ! empty( $src ) ) {
$scripts_src[] = $src;
} else {
$type = $result->item( $key )->attributes->getNamedItem( ‘type’ )->value;
if ( empty( $type ) ) {
$type = ‘text/javascript’;
}

$scripts[$type][] = $el->nodeValue;
}
}

//used by inline code and rich snippets type like application/ld+json
foreach ( $scripts as $key => $value ) {
$out .= ‘‘;
}

//external script
foreach ( $scripts_src as $value ) {
$out .= ‘‘;
}

return $out;
}
[/slh]

Второй шаг

Редактируем файл header.php. Найдем функцию wp_head() и заменим ее кодом:

[slh lang=»php»] ‘;<br /> print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );<br /> ?><br /> [/slh] <p>И в завершении, в файле <code>footer.php</code> перед закрывающимся тегом BODY добавьте</p> [slh lang=»php»] <?php theme_insert_js( HEAD_CONTENT ); ?><br /> [/slh] <div class="post-views post-14299 entry-meta"> <span class="post-views-icon dashicons dashicons-chart-bar"></span> <span class="post-views-label">Post Views: </span> <span class="post-views-count">47</span> </div> </div><!-- .entry /--> <span style="display:none" class="updated">2016-08-21</span> <div style="display:none" class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><strong class="fn" itemprop="name"><a href="http://skininfo.info/author/admin/" title="Записи admin" rel="author">admin</a></strong></div> <div class="share-post"> <script> window.___gcfg = {lang: 'en-US'}; (function(w, d, s) { function go(){ var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { if (d.getElementById(id)) {return;} js = d.createElement(s); js.src = url; js.id = id; fjs.parentNode.insertBefore(js, fjs); }; load('//connect.facebook.net/en/all.js#xfbml=1', 'fbjssdk'); load('https://apis.google.com/js/plusone.js', 'gplus1js'); load('//platform.twitter.com/widgets.js', 'tweetjs'); } if (w.addEventListener) { w.addEventListener("load", go, false); } else if (w.attachEvent) { w.attachEvent("onload",go); } }(window, document, 'script')); </script> <ul> <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/" data-text="Как удалить из верхней части страницы код Javascript" data-via="oldpepper1959" data-lang="en">tweet</a></li> <li> <div class="fb-like" data-href="http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false"></div> </li> <li style="width:80px;"><div class="g-plusone" data-size="medium" data-href="http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/"></div> </li> </ul> <div class="clear"></div> </div> <!-- .share-post --> </div><!-- .post-inner --> </article><!-- .post-listing --> <div class="post-navigation"> <div class="post-previous"><a href="http://skininfo.info/magtone-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/" rel="prev"><span>Предыдущий</span> MagTone| Многофункциональная бесплатная адаптивная премиум-тема WordPress</a></div> <div class="post-next"><a href="http://skininfo.info/realnaya-prichina-pochemu-obratnyie-ssyilki-ne-rabotayut/" rel="next"><span>Следующий</span> Реальная причина, почему обратные ссылки не работают</a></div> </div><!-- .post-navigation --> <section id="author-box"> <div class="block-head"> <h3>О admin </h3> </div> <div class="post-listing"> <div class="author-avatar"> <img alt='' src='http://0.gravatar.com/avatar/35874fbc284780b2409a72f429257d29?s=60&d=mm&r=g' srcset='http://0.gravatar.com/avatar/35874fbc284780b2409a72f429257d29?s=120&d=mm&r=g 2x' class='avatar avatar-60 photo' height='60' width='60' /> </div><!-- #author-avatar --> <div class="author-description"> </div><!-- #author-description --> <div class="author-social"> </div> <div class="clear"></div> </div> </section><!-- #author-box --> <section id="related_posts"> <div class="block-head"> <h3>C этим обзором читают еще:</h3><div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail"> <a href="http://skininfo.info/turno-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/" title="Постоянная ссылка на Turno | Многофункциональная бесплатная адаптивная премиум-тема WordPress" rel="bookmark"> </a> </div><!-- post-thumbnail /--> <h3><a href="http://skininfo.info/turno-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/" title="Постоянная ссылка на Turno | Многофункциональная бесплатная адаптивная премиум-тема WordPress" rel="bookmark">Turno | Многофункциональная бесплатная адаптивная премиум-тема WordPress</a></h3> <p class="post-meta"><span class="tie-date">20.04.2017</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="http://skininfo.info/tradis-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/" title="Постоянная ссылка на Tradis | Многофункциональная бесплатная адаптивная премиум-тема WordPress" rel="bookmark"> </a> </div><!-- post-thumbnail /--> <h3><a href="http://skininfo.info/tradis-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/" title="Постоянная ссылка на Tradis | Многофункциональная бесплатная адаптивная премиум-тема WordPress" rel="bookmark">Tradis | Многофункциональная бесплатная адаптивная премиум-тема WordPress</a></h3> <p class="post-meta"><span class="tie-date">16.04.2017</span></p> </div> <div class="related-item"> <h3><a href="http://skininfo.info/timber-mnogofunktsionalnaya-adaptivnaya-premium-tema-wordpress/" title="Постоянная ссылка на Timber | Многофункциональная адаптивная премиум-тема WordPress" rel="bookmark">Timber | Многофункциональная адаптивная премиум-тема WordPress</a></h3> <p class="post-meta"><span class="tie-date">15.04.2017</span></p> </div> <div class="clear"></div> </div> </section> <div id="comments"> <h3 id="comments-title"> 2 комментария </h3> <ol class="commentlist"> <li id="comment-718"> <div class="comment even thread-even depth-1 comment-wrap" > <div class="comment-avatar"><img alt='' src='http://1.gravatar.com/avatar/442fe2c7d4b2370c04ada03799259002?s=45&d=mm&r=g' srcset='http://1.gravatar.com/avatar/442fe2c7d4b2370c04ada03799259002?s=90&d=mm&r=g 2x' class='avatar avatar-45 photo' height='45' width='45' /></div> <div class="author-comment"> <cite class="fn">Александр</cite> <div class="comment-meta commentmetadata"><a href="http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/#comment-718"> 19.09.2016 at 12:04</a></div><!-- .comment-meta .commentmetadata --> </div> <div class="clear"></div> <div class="comment-content"> <p>Попытался реализовать на сайте,установленном на денвере.После того как вставил код в файле functions сайт перестал отображаться, появилось сообщение об ошибке Parse error: syntax error, unexpected T_STRING in Z:homelocalhostwwwmyblogwp-contentthemestwenty-plus-litefunctions.php on line 194 Вот эта строчка 194 $src = $result->item ( $key ) ->attributes->getNamedItem ( ‘src’ ) ->value;<br /> код вставлял в конце файле functions, вроде бы ничего не пропустил, если можно, то посоветуйте в чем причина, установлена дочерняя тема twentytwelve<br /> Спасибо</p> </div> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/?replytocom=718#respond' onclick='return addComment.moveForm( "comment-718", "718", "respond", "14299" )' aria-label='Комментарий к записи Александр'>Ответить</a></div><!-- .reply --> </div><!-- #comment-## --> <ul class="children"> <li id="comment-719"> <div class="comment byuser comment-author-admin bypostauthor odd alt depth-2 comment-wrap" > <div class="comment-avatar"><img alt='' src='http://0.gravatar.com/avatar/35874fbc284780b2409a72f429257d29?s=45&d=mm&r=g' srcset='http://0.gravatar.com/avatar/35874fbc284780b2409a72f429257d29?s=90&d=mm&r=g 2x' class='avatar avatar-45 photo' height='45' width='45' /></div> <div class="author-comment"> <cite class="fn">Олег Власов</cite> <div class="comment-meta commentmetadata"><a href="http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/#comment-719"> 19.09.2016 at 17:11</a></div><!-- .comment-meta .commentmetadata --> </div> <div class="clear"></div> <div class="comment-content"> <p>Функция, которую я вставил в статье, «обрезалась» и опубликована не корректно.Перейдите сюда.<br /> На этой странице в пункте #3 вы найдете пример, который я пытался опубликовать.</p> </div> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://skininfo.info/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/?replytocom=719#respond' onclick='return addComment.moveForm( "comment-719", "719", "respond", "14299" )' aria-label='Комментарий к записи Олег Власов'>Ответить</a></div><!-- .reply --> </div><!-- #comment-## --> </li><!-- #comment-## --> </ul><!-- .children --> </li><!-- #comment-## --> </ol> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Оставить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/kak-udalit-iz-verhney-chasti-stranitsyi-kod-javascript/#respond" style="display:none;">Отменить написание</a></small></h3> <form action="http://skininfo.info/wp-comments-post.php" method="post" id="commentform" class="comment-form"> <p class="comment-notes">Ваш email нигде не будет показанОбязательные для заполнения поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-url"><label for="url">Сайт</label><input id="url" name="url" type="text" value="" size="30" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Комментировать" /> <input type='hidden' name='comment_post_ID' value='14299' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div><!-- #comments --> </div><!-- .content --> <aside class="sidebar-narrow"> </aside> </div> <!-- .content-wrap --> <aside class="sidebar"> <div id="recent-posts-2" class="widget widget_recent_entries"> <div class="widget-top"><h4>Свежие записи</h4><div class="stripe-line"></div></div> <div class="widget-container"> <ul> <li> <a href="http://skininfo.info/whitenews-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/">WhiteNews | Многофункциональная бесплатная адаптивная премиум-тема WordPress</a> </li> <li> <a href="http://skininfo.info/turno-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/">Turno | Многофункциональная бесплатная адаптивная премиум-тема WordPress</a> </li> <li> <a href="http://skininfo.info/tradis-mnogofunktsionalnaya-besplatnaya-adaptivnaya-premium-tema-wordpress/">Tradis | Многофункциональная бесплатная адаптивная премиум-тема WordPress</a> </li> <li> <a href="http://skininfo.info/timber-mnogofunktsionalnaya-adaptivnaya-premium-tema-wordpress/">Timber | Многофункциональная адаптивная премиум-тема WordPress</a> </li> <li> <a href="http://skininfo.info/seo-chek-list-chast-2/">SEO чек лист (часть 2)</a> </li> </ul> </div></div><!-- .widget /--><div id="recent-comments-2" class="widget widget_recent_comments"><div class="widget-top"><h4>Свежие комментарии</h4><div class="stripe-line"></div></div> <div class="widget-container"><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link">vic</span> к записи <a href="http://skininfo.info/obzor-plaginov-wordpress-vsplyivayushhih-okon/#comment-642">Обзор плагинов WordPress всплывающих окон</a></li><li class="recentcomments"><span class="comment-author-link">Алексей Викторович</span> к записи <a href="http://skininfo.info/kak-udalit-pole-vyibora-kolichestva-v-korzine-plagina-woocommerce/#comment-645">Как удалить поле выбора количества в корзине плагина WooCommerce</a></li><li class="recentcomments"><span class="comment-author-link">Павлова Мария</span> к записи <a href="http://skininfo.info/last-modified-kak-nastroit-i-zachem-on-nuzhen/#comment-702">Last-Modified — как настроить и зачем он нужен?</a></li><li class="recentcomments"><span class="comment-author-link">Владимир</span> к записи <a href="http://skininfo.info/kak-sdelat-vsplyivayushhuyu-kontaktnuyu-formu-plagina-contact-form-7/#comment-713">Как сделать всплывающую контактную форму плагина Contact Form 7</a></li><li class="recentcomments"><span class="comment-author-link">Роман</span> к записи <a href="http://skininfo.info/order-subscriber/#comment-773">Подписка на платный раздел сайта</a></li></ul></div></div><!-- .widget /--><div id="categories-2" class="widget widget_categories"><div class="widget-top"><h4>Рубрики</h4><div class="stripe-line"></div></div> <div class="widget-container"> <ul> <li class="cat-item cat-item-1"><a href="http://skininfo.info/category/%d0%b1%d0%b5%d0%b7-%d1%80%d1%83%d0%b1%d1%80%d0%b8%d0%ba%d0%b8/" >Без рубрики</a> </li> <li class="cat-item cat-item-358"><a href="http://skininfo.info/category/plaginy/" >ПЛАГИНЫ ВОРДПРЕСС</a> </li> <li class="cat-item cat-item-359"><a href="http://skininfo.info/category/temy/" >ТЕМЫ WORDPRESS</a> </li> <li class="cat-item cat-item-362"><a href="http://skininfo.info/category/uroki-sajtostroeniya/" >УРОКИ САЙТОСТРОЕНИЯ</a> </li> </ul> </div></div><!-- .widget /--></aside> <div class="clear"></div> <div class="clear"></div> </div><!-- .container /--> </div><!-- .container --> <footer class="fade-in animated4"> <div id="footer-widget-area" class="footer-1c container"> </div><!-- #footer-widget-area --> <div class="clear"></div> </footer><!-- .Footer /--> <div class="clear"></div> <div class="footer-bottom fade-in animated4"> <div class="container"> <div class="social-icons icon_flat"> <a class="ttip" title="Rss" href="http://skininfo.info/feed/" target="_blank"><i class="tieicon-rss"></i></a><a class="ttip" title="Google+" href="https://plus.google.com/102817614825436502729/posts" target="_blank"><i class="tieicon-gplus"></i></a><a class="ttip" title="Facebook" href="http://facebook.com/vlasov.oleg" target="_blank"><i class="tieicon-facebook"></i></a><a class="ttip" title="Twitter" href="http://twitter.com/oldpepper1959" target="_blank"><i class="tieicon-twitter"></i></a><a class="ttip" title="Youtube" href="https://www.youtube.com/user/MrOldpepper" target="_blank"><i class="tieicon-youtube"></i></a> </div> <div class="alignleft"> 2009 - 2017 | Коллекция WordPress </div> </div><!-- .Container --> </div><!-- .Footer bottom --> </div><!-- .Wrapper --> <div id="topcontrol" class="tieicon-up-open" title="На верх"></div> <div id="fb-root"></div> <script type='text/javascript'> /* <![CDATA[ */ var tie = {"go_to":"\u041f\u0435\u0440\u0435\u0439\u0442\u0438","ajaxurl":"http:\/\/skininfo.info\/wp-admin\/admin-ajax.php","your_rating":"\u0412\u0430\u0448 \u0440\u0435\u0439\u0442\u0438\u043d\u0433:","is_singular":"1","reading_indicator":""}; /* ]]> */ </script> <script type='text/javascript' src='http://skininfo.info/wp-content/themes/jarida/js/tie-scripts.js'></script> <script type='text/javascript' src='http://skininfo.info/wp-content/themes/jarida/js/validation.js'></script> <script type='text/javascript' src='http://skininfo.info/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='http://skininfo.info/wp-includes/js/wp-embed.min.js'></script> </body> </html>