WordPressWordPressではテーマを使うことでサイトのデザインを変えたり、独自の機能を付け加えることができます。テーマのテンプレートやCSSをさらに改造して独自のスタイルや機能をつける場合、「子テーマ」という親となるテーマから派生したものが使われます。この子テーマではテンプレートなどは親からコピーするだけで動せるものの、javascriptファイルは子テーマフォルダ内に置いただけでは実行できません。そこでここでは子テーマ内で独自のスクリプトを呼び出す方法についてまとめました。子テーマとは子テーマでスクリプトを呼び出す手順1.ファイルマネージャーのインストール2.子テーマにJavaScriptファイルを追加3.スクリプトをfunctions.phpから呼び出しまとめ子テーマとは冒頭に書いたように子テーマとは親テーマから派生させて自分好みのスタイルやテンプレートを追加できるようにしたテーマのことです。子テーマを使うかというと親テーマを直接編集すると次のようなデメリットがあるからです。テーマのアップデートがあると上書きされるテーマがアップデートされると今までの変更も全て消されるWordPressで配布されているテーマの場合、テーマのアップデートをWordPressを感知して自動的に更新されてしまい、今までのカスタマイズが全て消されてしまいます。それを防ぐために親テーマと分離させたいファイルを別のフォルダに移すために子テーマが使われます。親テーマと子テーマはWordPressをインストールしたフォルダ内にある「themes」フォルダの中に次のような関係で作られます。この図のようにWordPressで子テーマを作るのに子テーマフォルダ内に最低限必要なのは「functions.php」と「style.css」の2つで、これだけあれば子テーマとして認識されます。Configurator」プラグインを使うと楽に作れます。このプラグインを使って子テーマを作成する方法については次の記事で解説してあります。WordPress子テーマを面倒なことせず1分で作成する方法WordPressで子テーマを作る場合、手動作成するのは慣れない人にとって無駄に手間と時間がかかる作業です。11:52子テーマでテンプレートをカスタマイズするにはただ単にテンプレートを書かれたPHPファイルをコピーするだけですが、javascriptなどのスクリプトファイルはただファイルを作成するだけでは子テーマ内では呼び出すことができません。そこでここでは子テーマ内でスクリプトを呼び出す手順を解説します。子テーマでjavascriptファイルを作成してスクリプトを実行する手順は次の通りです。ここではプラグインを使って子テーマフォルダのファイルを操作しますが、もしFTP操作に慣れているならFTPソフトを使ってください。Manager」というプラグインをインストールして有効化します。manager」というキーワードを入力しばらくすると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。ちなみに手動インストールする場合は次ページからzipでのダウンロードも可https://ja.wordpress.org/plugins/wp-file-manager/インストールしたら「有効化」ボタンを押して有効化するのも忘れないでください。次にファイルマネージャーを使ってスクリプトファイルを追加します。Manager」を開きます。開くと次のようなファイルマネージャーが開きます。左のファイルエクスプローラーから「wp-content」ー>「themes」フォルダを開き(1)、子テーマのフォルダを開いてください(2)。「simplicity」というテーマの子テーマとして「simplicity-child」を作ったならその名前のフォルダを開きます。子テーマフォルダを開いたら上のツールボタンから新規追加ボタンを押し(1)、ファイル名に「javascript.js」などの名前をつけてスクリプトファイルを作成(2)してください。スクリプトファイルを編集するにはファイルを選択した状態で上のツールボタンから編集ボタンを押してください。するとファイルエディターが開くのでそこに実行したいスクリプトを入力してください。3.スクリプトをfunctions.phpから呼び出しjavascriptファイルを作成しただけではスクリプトは実行されないので、functions.phpにスクリプトを呼び出す処理を追加します。手順ですがまずファイルマネージャーの子テーマフォルダの中にある「functions.php」を開いて次のコードを追加してください。'link_scripts');こうすることで適切なタイミングでスクリプトファイルがページの中でリンクされます。ここでは「javascript.js」というスクリプトファイル名にしましたが、PHPコードで呼び出すファイル名を変えればどんな名前でも構いません。親テーマにも「javascript.js」という名前のファイルがあっても子テーマのそれとは違うものだと認識されます。以上が子テーマでスクリプトファイルを追加して読み込む手順です。まとめこのように子テーマではスクリプトファイルをただ作成するだけでは実行されず、functions.phpに読み込む処理を追加する必要があります。スクリプトを作って独自機能を付け加えるときはこの手順を忘れないようにしましょう。以上子テーマにjavascriptファイルを追加する方法についてでした。昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします。最近WordPressプラグインを開発・公開しました。自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします「WordPressは難しい」、「ブログ初心者には向いてない」・・・こういう固定観念を捨てればWordPressほど効率よく記事編集できて安全にブログ運営できるツールはありません。ワードプレス!最近WordPressプラグインを開発・公開しました。Press当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合Cookieの使用に同意したことになります。「WordPressって特別な知識がないと難しそう・・・」こういう風に思い込んでいないですか?でも実は・・・WordPressブログは1日もあれば即日で作ることができるんです。「面倒なことせずブログを今すぐパパッと始めたい」そういう方必見です。Pressブロガーが使うべき超お得なASPまとめ【2019年最新】W報酬制度のあるASP、報酬+税金分受け取れるASPなどなど・・・個人ブロガーに特にお得なASPをまとめました。アフィリエイトで成果を出したい「個人ブロガー」に優しいASP中心に紹介します。PressA8.netなどセルフバックが使えるASPと利用方法まとめセルフバックというのはASPで利用できるキャッシュバックサービスのことこれを利用して買い物するとASP側からキャッシュバックされてお得に買い物ができる、という仕組みになっています。ここではそのセルフバックに対応しているASPをまとめました。「IT・プログラミング・開発の相談」カテゴリーから質問可能です。相談もオススメ「IT・プログラミング・開発の相談」カテゴリーから質問可能です。