WordPressWordPressはテーマやプラグインが使えるので自分でCSSを書いてデザインを追加したりjQuery(JavaScript)で独自の機能を追加したり、ということは少ないと思います。それでもテーマやプラグインでカバーできない部分はオリジナルのコードやスクリプトを書かなければ実現できないことも当然あります。全てのページではなく、特定のページでだけ動作させたいCSSやスクリプトもあるかもしれません。そこでここでは特定のページでだけオリジナルのCSSやjQueryコードを読み込ませる方法について紹介します。各ページでのCSS・スクリプトの出力を制御カスタムフィールドが機能するかどうかの確認まとめそのやり方とは・・・ではどうやって特定のページでだけ特定のCSSやスクリプトを読み込ませるかというと「カスタムフィールド」を使います。これは記事のタイトルと本文以外の情報をページに埋め込むためのWordPress独自の機能のことです。その他色々などなど・・・これらの情報を記事とは切り離して埋め込むことで後から編集もしやすくなり、情報を利用しやすくなりますよね。ここでやることはカスタムフィールドを使って編集画面上で独自のCSSやスクリプトの埋め込みのオン・オフを切り替えできるようにすることです。Fields」というプラグインの力を借りましょう。このプラグインを使えば次の画像のように独自の設定を用意し、チェックボックスがチェックされているときだけCSSやjQurtyなどのコードを読み込む、といったことが可能になります。編集画面にオリジナルのフィールドを簡単に作成できるので、特別な知識は必要ありません。設定手順それでは独自CSS・JSの埋め込みを行う設定を編集画面に作ってみましょう。その手順は次の通りです。各ページでのCSS・スクリプトの出力を制御この3つの手順について順に解説します。Fields」をWordPressに導入します。これは誰でもカスタムフィールドを簡単に扱えるように作られたプラグインで編集画面に次のようなフィールドを作成することが可能です。難しくなく標準機能だと扱いの難しいカスタムフィールドを簡単に作成することができるのでおすすめです。このプラグインの導入から基本的な使い方については次の記事でまとめてあるので、インストール・有効化して使える状態にしておきましょう。Fields」の使い方WordPressで記事内に記事本文とは別の情報を埋め込みたい場合に役に立つのが「カスタムフィールド」という機能です。Fields」というプラグインの導入・使い方について解説します。このプラグインを導入するとフィールド値を入力するのにテキストだけでなくチェックボックスやセレクトボックスなどが使えるのでおススメです。13:11カスタムフィールドの作成プラグインをインストール・有効化したら次に投稿ページの編集画面にCSS・jQueryなどのカスタムコードの埋め込みをオン・オフできるフィールドを作成します。WordPressメニューから「カスタムフィールド」と書かれた項目を開いてください。開いたら新しいフィールドグループを作成するために「新規追加」ボタンを押しましょう。新規追加画面が開いたらまず上の方に「ここにタイトルを入力」と表示されたテキスト欄があるのでフィールドグループのタイトルを入力します。タイトルは分かりやすければ何でもいいですが、ここでは「カスタムコードの切り替え」という名前をつけておきます。タイトルを入力したら編集画面に表示するフィールドを追加するために「フィールドを追加」ボタンを押してください。このボタンを押すとフィールドの設定項目がずらずらと出てきますが、絶対に入力しなくてはならないのは次のオレンジで囲った3つの項目です。ここではこの3つの項目に次のような内容を入力・選択します。フィールドラベル編集ページに表示される名前。ここでは分かりやすいように「コードの切り替え設定」と入力フィールド名フィールドの値を取得するために必要な名前。ここでは「enable_custom_code」と入力フィールドタイプ編集画面に表示されるフィールドの種類。ここでは「真/偽」を選択つまり次の画像のように設定すればOKです。フィールドタイプには「真/偽」を選んでいるので、チェックボックスがフィールドとして表示されます。この3つを設定し終わったら次は下の方に進み、「メッセージ」の横にあるテキスト欄にチェックボックスの右側に表示したいメッセージを入力しましょう。ここでは「カスタムコードを有効にする」というメッセージに設定しておきます。この設定が済んだらさらに下の方に進み、「オプション」ー>「Style」からフィールドのスタイルを選びます。metabox)」を選んでおけばOKです。最後に「公開」ボタンを押してカスタムフィールドを公開しましょう。以上でカスタムフィールドの作成は完了です。各ページでのCSS・スクリプトの出力を制御ここまでで作成したカスタムフィールドは投稿ページの編集画面で次のように表示されるようになります。このようにそれらしく表示されるもののこの段階では単にチェックボックス付きの設定項目がが編集画面上に追加されただけです。次はこのフィールド内のチェックボックスのON・OFFに応じてカスタムCSSやJSコードを書くページで切り替えできるように設定していきます。今使っているテーマに切り替え用のPHPコードを追加する必要があるので、まずは「functions.php」というファイルを開きましょう。WordPress内でこのファイルを編集するならメニューから「外観」ー>「テーマの編集」を開くことで直接funtions.phpが編集可能です。functions.phpを開いたらファイルの最後に次のような内容を追加します。*/」という部分にカスタムJSコードを挿入してください。この内容を追加してfunctions.phpを保存すれば各ページでカスタムコードの出力の制御が可能になります。最後に、ここまでで作成したカスタムフィールドが正常に正常に機能するかを確認します。確かめ方は簡単で適当な投稿ページの編集画面を開き、先ほど追加したカスタムフィールドのチェックボックスにチェックを入れるだけです。チェックを入れて投稿を保存したらページのソースを開いてみてください。U」キーを同時押しすることで開けます。コードに間違いがなく、カスタムフィールドが正常に機能しているなら次のようにカスタムコードが埋め込まれているはずです。以上が特定ページでカスタムコードを切り替える手順です。自分でコードを追加しなくてはならない部分はあるものの、プラグインを使えば簡単にカスタムフィールドが作れて最初からコードを書かかなくて済むのでこれが一番楽な方法だと思います。まとめ特定のページでだけ特定のCSSやJSコードを埋め込みたいならここで紹介した方法がおすすめです。一部のページでしか使われていないコードを全てのページで読み込むのはパフォーマンス的には良くないので表示速度を犠牲にしたくないならこの方法を試してみてください。以上ここでは編集画面にカスタムフィールドで設定を作り、特定のページでだけオリジナルのコードを読み込ませる方法について紹介しました。昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします。最近WordPressプラグインを開発・公開しました。自分の「好き」をブログで表現したい、情報発信をしたい方に役立つWordPress術・ブログ構築術を発信中。今までできなかったことを"デキル"に変えるお手伝いをします「WordPressは難しい」、「ブログ初心者には向いてない」・・・こういう固定観念を捨てればWordPressほど効率よく記事編集できて安全にブログ運営できるツールはありません。ワードプレス!最近WordPressプラグインを開発・公開しました。Press当サイトでは利便性向上や閲覧の追跡のためにGoogle・他提携サービスによりCookieが使用されています。サイトの閲覧を続けた場合Cookieの使用に同意したことになります。「WordPressって特別な知識がないと難しそう・・・」こういう風に思い込んでいないですか?でも実は・・・WordPressブログは1日もあれば即日で作ることができるんです。「面倒なことせずブログを今すぐパパッと始めたい」そういう方必見です。Pressブロガーが使うべき超お得なASPまとめ【2019年最新】W報酬制度のあるASP、報酬+税金分受け取れるASPなどなど・・・個人ブロガーに特にお得なASPをまとめました。アフィリエイトで成果を出したい「個人ブロガー」に優しいASP中心に紹介します。「これからA8.netで楽天アフィリエイトを始めてみたい」「今まで楽天アフィリエイトをA8.netでやっていた」こういう方は多いと思いますが、実は損しています。確かにASPのなかでもA8.netの評判がいいのは事実ですが楽天アフィリエイトをA8.netでやるのは損するので絶対におすすめしません。「IT・プログラミング・開発の相談」カテゴリーから質問可能です。相談もオススメ「IT・プログラミング・開発の相談」カテゴリーから質問可能です。