カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

プラグイン関連のjsファイルをheadから移動、削除したい【サイト軽量化&高速化計画】

ちょっと気を抜くと2ヶ月放置してました、、、こんにちは。
最近はまじめに(?)お仕事しているのでブログが停滞気味、そしてwordpressをあまりいじっていないのでぶっちゃけこの【サイト軽量化&高速化計画】の内容を忘れつつありまして、、(どっかいけ

そんな時こそ自戒をこめて復習! 一人で勝手にシリーズ化しているこの【サイト軽量化&高速化計画】もこれで一応ひと段落です。忘れそうだから今のうちに残しておかねば(出た本音)

さて、この計画最大の難関「頼んでもないのにヘッダーにwordpressプラグイン関連のjsやcssファイルがちゃっかり入ってるからこれを移すか消し去りたい」です。

正直勝手に入ってるから知らんがな、が感想なんですが(笑)Speed insightにはそんな無関心主義通用しません。。ちゃんと直せよ!とのお達し、、、知るかー!!!!
というか私、特にjqueryファイルはhead内に書かないとプラグインが動かないのかと思ってましたw だからSpeed insightで「読み込みの邪魔になるから後ろの方にどかせよ」的なツッコミを受けた時には「なーに抜かしとんじゃゴルァ!!!」と思いましたw(久々に更新すると遠慮なく素が出ますなw)

まあコンテンツ下部にどけても問題ないとのことなので、まずはどの記述がどのプラグイン由来なのかを解明するところから始めました。
当サイトで扱っているプラグインはこちら

⚫︎wp-to-top
⚫︎Syntax Highlighter
⚫︎contactForm7

あとプラグインではないけどjqueryファイルはこちら
⚫︎respond.src.js

一通りプラグインを調べたらfunction.phpに以下に記述を追記します。
あ、その前になぜ勝手にhead内にファイルが挿入されるのかというとhead内に書くwp_header();で呼び出されるからだそうです。
こいつをwp_footer();で呼び出させる為の作業です。

■function.php

if (!is_admin()) {
    function deregister_script(){
        wp_deregister_script('jquery');
        wp_deregister_script('comment-reply');
		wp_deregister_script('contact-form-7');
    }
    function register_script(){
        wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js', false, '2.0.0', true );
	   wp_register_script('wp-to-top', plugins_url().'/wp-to-top/js/wp-to-top.js', array('jquery'), '1.0', true);
		wp_register_script('comment-reply', includes_url().'js/comment-reply.min.js', array(), '1.0', true);
        wp_register_script('respond-src', get_stylesheet_directory_uri().'/js/respond.src.js', array(), '1.0', true);
	   wp_register_script('crayon-syntax', plugins_url().'/crayon-syntax-highlighter/js/min/crayon.min.js', array('jquery'), '1.0', true);
    }
    function add_script() {
        deregister_script();
        register_script();
        wp_enqueue_script('jquery');
        wp_enqueue_script('wp-to-top');
        wp_enqueue_script('respond-src');
    }
}
    add_action('wp_enqueue_scripts', 'add_script');

この機会にもともとwordpressに同梱されているjqueryからgoogleapisのものに切り替えました。
deresister_script()でもともとのファイルを削除、resister_script()で新しいファイルを登録(定義?)、add_script()で実行しています。
まあここにたどり着くまでにお約束でやはり四苦八苦してるんですが(もはや割愛w)、ここまで書けばさすがに大概の記述はwp_footerの方に読み込まれるのですが、head内にないと動作に影響を及ぼすものはhead内に残ります。

そして。。。かなり邪魔なソースが残ったままorz

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/animation/animation-min.js"></script>

どけよ!!!ヽ(#`Д´)ノ

いろいろ調べたものの、もはやfunction.phpでどうこうできる気がしなくなってきた。。
もしかして、、プラグインファイルいじれば解決しちゃう?? もうアップデートしなさそうだし、、、よしいじろう(良い子、優秀なクリエイターさんはマネしないでね!←しない)

function addScrollingMechanism(){
		// YUI library
		/*echo '<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js&2.7.0/build/animation/animation-min.js"></script>';*/
		// our js file located in the js folder
		wp_enqueue_script('wp-to-top', '/wp-content/plugins/wp-to-top/js/wp-to-top.js');
		// our CSS file located in the css folder
		/*echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-to-top/css/wp-to-top.css" />';*/

		// for stupid IE6
		/*echo '<!--[if lte IE 6]>';
		echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('wpurl').'/wp-content/plugins/wp-to-top/css/wp-to-topie6.css" />';
		echo '<![endif]-->';*/
	}

「こうなった」もクソも、ただ表示したくない部分をコメントアウトしただけですがww

一応プラグインファイルなのであまりいじらずに済むように、本来wp_header()で呼び出されるソース部分をコメントアウトして空にすることで対処。そしたら以下に続くwp_footer()で呼び出すソースが読み込まれると思うので。
こんな野生のカンでいじったものの、ちゃんと反映されたw

これでまあうっとおしかったソースも下の方に移ってくれたのでなかなかすっきりしてきたものの、cssソースがまだまだhead内に燦然と輝いとります。。。orz

このcssも懲りずに四苦八苦したので(苦笑)、長くなるため次回にまわしますw
あともう一息(誰へのエール?)!!

Leave a Reply

メールアドレスが公開されることはありません。