WordPressで自作のJavaScript・CSSを読み込む方法

WordPressで自作のJavaScript・CSSを読み込む方法

WordPressで自作したJavaScript・CSSのファイルを読み込む方法をご紹介します。

CSSに関しては「style.css」に直接書き込んでいくことが多いと思うので、自作テーマを作成するときくらいしか使用しないと思います。

JavaScriptは、プラグインを利用したり、jQuery利用することが多々あると思いますので、使う機会が多いと思います。




前提条件

前提条件

今回は、自作したJavaScript・CSSファイルをサーバーにアップロードするためにFTPという技術を利用します。

FTPに関しては、以下の記事を参考にしてみてください。

FTPとは?ロリポップでの使い方
サーバにファイルをアップロードするために使用するftpの説明をしていきます。ロリポップ!FTPとFFFTPを使用して、ロリポップでのftpの使い方を説明します。

やっぱりFTPがわからないという場合は、WordPressのプラグインに「WP File Manager」という便利なプラグインがあります。

※使い方については、おいおい書こうと思います

ただ、プラグインは使えば使うほどサーバーに負荷がかかってしまい、サイトが重くなってしまう可能性がありますので、できればFTPを使うようにしましょう。

JavaScript・CSSファイルを読み込む手順

JavaScript・CSSファイルを読み込む手順

読み込むファイルをサーバーにアップロードする

まずは、読み込ませたい「JavaScript・CSSファイル」をサーバーにアップロードしていきます。

先ほど、説明した通り「FTP」を利用してアップロードします。

FTPソフトでも、サーバー会社のFTPサービスでもどちらでもOKです。

今回は、「FFFTP」というFTPソフトを利用します。

読み込むサイトのサーバに接続してください

読み込むサイトのサーバに接続し、

/サイトトップディレクトリ/wp-content/themes/使用しているテーマディレクトリ

に移動してください。

jsもしくはcssディレクトリを作成してください

次に、アップロードするファイルがJavascript ならjs、CSSならcssという名前のディレクトリを作成してください。

すでに存在する場合は、作成しなくても大丈夫です。

※他の名前でも問題ないですが、一般的にこの名前がよく使われます。

ディレクトリを作成したら、作成したディレクトリの中に読み込ませるファイルをアップロードしてください。

 ファイルを読み込ませる

アップロードしたファイルを読み込ませます。

ファイルを読み込ませるためには、

JavaScript

※親テーマの場合

<script type=”text/javascript” src=”<?php echo get_template_directory_uri(); ?>/js/読み込ませたファイル名”></script>

※子テーマの場合

<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/読み込ませたファイル名”></script>

CSS

※親テーマの場合

<link rel=”stylesheet” type=”text/css” href=”<?php echo get_template_directory_uri(); ?>/css/読み込ませたファイル名”>
※子テーマの場合
<link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(); ?>/css/読み込ませたファイル名”>

を記述します。

<?php echo get_template_directory_uri(); ?>は使用しているテーマディレクトリまでのパスを出力する
子テーマを利用している場合は<?php echo get_stylesheet_directory_uri(); ?>を利用する

上記のようにPHPのコードを利用することによってドメインを変更した際に編集する手間を省くことができます。

あとは、上記のコードをJavaScriptなら</body>の直前、CSSなら<head>内に記述すれば完了です。

ファイルを読み込ませる位置について

ファイルを読み込ませる位置について

JavaScriptファイルの読み込む位置についてですが、CSSと同じように「<head>内」に読み込ませる方法と「</body>の直前」方法があります。

詳しい説明は省きますが、「</body>の直前」で読み込むほうがサイトの速度的に良いです。

しかしながら、スクロールイベントを記述していたりするとちらつきがあったりと、必ずしも良いわけではありませんので注意してください。

まとめ

WordPressで自作した「JavaScript・CSSファイル」を読み込む際は、

get_template_directory_uri()

もしくは

get_stylesheet_directory_uri() 

を使用することで、メンテナンス性を高くすることができます。

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク