いつのバージョンからか。最近のワードプレスでは <?php wp_head(); ?> のときに「mediaelementplayer-legacy.min.css」と「wp-mediaelement.min.css」というスタイルシートが読み込まれる仕様になっています。

また同じように JavaScript も「mediaelement-and-player.min.js」「mediaelement-migrate.min.js」「wp-mediaelement.min.js」「vimeo.min.js」の4つが読み込まれています。

  • mediaelementplayer-legacy.min.css
  • wp-mediaelement.min.css
  • mediaelement-and-player.min.js
  • mediaelement-migrate.min.js
  • wp-mediaelement.min.js
  • vimeo.min.js

実際に出力されているコードを見ると次のとおり。

CSS類

<link rel='stylesheet' id='mediaelement-css' href='https://example.com/wordpress/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='wp-mediaelement-css' href='https://example.com/wordpress/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all'/>

JavaScript類

<script src='https://example.com/wordpress/wp-includes/js/mediaelement/mediaelement-and-player.min.js' id='mediaelement-core-js'></script>
<script src='https://example.com/wordpress/wp-includes/js/mediaelement/mediaelement-migrate.min.js' id='mediaelement-migrate-js'></script>
<script src='https://example.com/wordpress/wp-includes/js/mediaelement/wp-mediaelement.min.js' id='wp-mediaelement-js'></script>
<script src='https://example.com/wordpress/wp-includes/js/mediaelement/renderers/vimeo.min.js' id='mediaelement-vimeo-js'></script>

これらmediaelement系のCSSとJavaScriptは、ワードプレスの投稿や固定ページで動画を埋め込んでいるような場合を除き、通常は不要なんですよね。

そんなわけで今回は、これらのCSSとJavaScriptを削除する方法を紹介します。

functions.php にコードを記述

やり方は簡単です。
使用しているテーマファイル内の functions.php に次のコードを記述するだけ。

function custom_deregister_mediaemlements() {
	wp_deregister_style('wp-mediaelement');
	wp_deregister_script('mediaelement');
}
add_action('wp_enqueue_scripts','custom_deregister_mediaemlements', 100);

これで上記すべての余分なCSSとJavaScriptの出力を無効化できます。

特定のページだけは読み込みたい場合

もし「投稿ページだけではmediaelement系ライブラリを読み込みたい！」という場合は、次のように記述しましょう。

function custom_deregister_mediaemlements() {
	if(! is_singular("post") ) {
		wp_deregister_style('wp-mediaelement');
		wp_deregister_script('mediaelement');
	}
}
add_action('wp_enqueue_scripts','custom_deregister_mediaemlements', 100);

上記のコード内、if(! is_singular("post") ) { 〜 } は「投稿以外のとき」を意味します。

ぜひお試しください。

改訂版WordPress 仕事の現場でサッと使える! デザイン教科書WordPress 5.x対応版 (Webデザイナー養成講座)