انتقال تمامی کد های جاوا اسکریپت به فوتر (بهبود سرعت سایت)

سلام به همراهان عزیز بانک وردپرس.

یکی از مواردی که صاحبان سایت بسیار به آن اهمیت می دهند سرعت بارگزاری میباشد.صد البته باید اهمیت دهند!

اولاً الکسا و گوگل به سرعت بارگزاری شما نمره میدهند و باعث بهبود جایگاه سایت میشود.

ثانیاً کاربران بسیار کم حوصله میباشند و با وجود رقیبان بی رحم شما براحتی به سایت دیگری که سرعت بالا آمدن بهتری دارد مراجعه میکنند.

از دست دادن 1 کاربر هم برای شما فاجعه است چه برسد تعداد زیاد|

حالا با استفاده از این آموزش میتوانید بهبود خوبی به سرعت سایت وردپرسی خود بدهید.

طبق توصیه های GTMTRIX یکی کردن کدها درون یک فایل بسیار مهم میباشد در نتیجه کد های جاوااسکریپتی که در جاهای مختلف سایت شما پراکنده هستند را میتوانید به فوتر منتقل نمایید.

آموزش انتقال کدهای جاواسکریپت به فوتر

ابتدا فایل   [highlight color=”gray”]Functions.php[/highlight]   را باز نمایید و کد زیر را به آن اضافه کنید

کد مورد نظر

/**
 * 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.*?>.*?</\1>@si', '', $text );
        }
        else {
            return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text );
        }
    }
    elseif ( false == $invert ) {
        return preg_replace( '@<(\w+)\b.*?>.*?</\1>@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 .= '<script type="'.$key.'">';

        foreach ( $value as $keyC => $valueC ) {
            $out .= "\n".$valueC;
        }

        $out .= '</script>';
    }

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '<script src="'.$value.'"></script>';
    }

    return $out;
}

=================

بعد از قرار دادن کد بالا حالا باید به سروقت [highlight color=”gray”]header.php[/highlight] بروید و آن را به این صورت ویرایش نمایید.

باید wp_head() پیدا کرده و با کد زیر جایگزین آن کنید.

<?php
ob_start();
wp_head();
$themeHead = ob_get_contents();
ob_end_clean();
define( 'HEAD_CONTENT', $themeHead );
$allowedTags = '<style><link><meta><title>';
 print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );
 ?>

================

در آخر در فوتر عزیزمان یعنی [highlight color=”gray”]footer.php[/highlight] کد زیر را  قبل از تگ </body> اضافه میکنیم و تمام :

<?php theme_insert_js( HEAD_CONTENT ); ?>

مزیت این آموزش

مزیت این اموزش این است که این کار به صورت اتوماتیک انجام میشود و نیازی نیست تمامی کدهایی که در پلاگین ها و محل های مختلف سایت موجود است پیدا کرده و یکجا قرار دهید.

موفق و پیروز باشید