スポンサーリンク

【WordPress】自分で作成したCSSやJavaScriptファイルをテーマに追加する

WordPress

WordPressテーマのカスタマイズなどで、自作したスタイルシートファイル(.css)やJavaScriptファイル(.js)を追加する方法について解説します。

CSSファイルやJSファイルを追加する場合、直接htmlテンプレートのhead部分にファイルパスを書くのではなく、「wp_enqueue_scripts」アクションにフックします。

WordPressで追加のCSS、JavaScriptを読み込む

ここでは、子テーマのディレクトリ(get_stylesheet_directory_uri())の配下にcss、jsディレクトリを作り、その配下のファイルを読み取る場合の例です。

以下をfunctions.phpなどに記載します。

function ext_css_script() {
  if (is_singular('post') || is_category() || is_page() || is_archive() || is_search() ) {
    wp_enqueue_style('ext-style', get_stylesheet_directory_uri().'/css/ext.css');
    wp_enqueue_script('ext-script', get_stylesheet_directory_uri().'/js/ext.js');
  }
}
add_action('wp_enqueue_scripts', 'ext_css_script');

WordPress&Cocoonのお悩みにお答えします

クラベルではWordPressのブログサイト構築、Cocoonテーマの導入やカスタマイズに関するご相談を承っております。

お困りの方はぜひ一度お問い合わせください。また、現在ココナラをつかったサービス出品も始めてみました。お悩みおひとつの解決からお手軽にお申込みできますので、こちらもぜひあわせてご覧ください。

最短当日★ワードプレスの疑問質問トラブル解決します ご相談無料!初心者歓迎!優しく丁寧、徹底的にサポートします!
Cocoonテーマサイト構築&カスタマイズします ご相談無料★公式サポート対象外もOK!プログラミングはお任せ
WordPressWeb開発
この記事は良かったですか?
最新情報をお届けします。
クラベル(Cravel)をフォローする
スポンサーリンク
この記事を書いた人
クラベル(Cravel)

Webサイト構築、Wordpressのカスタマイズやphpプログラミングなどやってます。BPM(ビジネスプロセス管理)、BPR(業務改革)コンサルなどにも従事。世の中すべてピタゴラ装置をモットーに自動化します。ブログは省エネ運営中。Cocoonカスタマイズやゲーム、ガジェットの話題など。

プロフィール詳細、お仕事のご依頼はこちら

クラベル(Cravel)をフォローする
クラベル

コメント

タイトルとURLをコピーしました