WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【WordPress】特定の個別記事・ページだけにヘッダ、CSS、JavaScriptを追加できるカスタムフィールドを作る

この記事は約3分21秒で読めます

【WordPress】 HEAD、CSS、JavaScriptカスタムフィールド
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

WordPressで特定の記事だけ、デザインを変えたい時や、動作確認やデモページのために特定のページだけにJavaScriptを使いたい時はないでしょうか。

技術系の記事を書く人はそういった機会が多いのではないかと思います。

サンプルのCSSを書くときにそのままstyle.cssに追記すると他の記事ではまったく使わないCSSサンプル集がどんどん溜まってしまいます。
使わないページでも定義したスタイルが読み込まれるとその分、読み込みに時間がかかる要因になるかもしれません。

今回の記事では特定の個別の記事、特定の固定ページだけに反映されるヘッダ、CSS、JavaScriptのカスタムフィールドを追加する方法をご紹介します。

この方法を使えば、より使い勝手良く記事を書くことができます。

サーバーにファイルをアップロードしなくても済むので、ちょっとした確認をしたいときにも重宝しています。

今回はプラグインを使わない方法をご紹介します。

カスタムフィールドの作り方

WordPress Custom Widget

カスタムフィールドを登録すると上記のようなイメージとなります。

ヘッダの記述を追加するウィジェット

「Custom HEAD」ウィジェットを追加します。
<head></head>内に記述を追加することができます。

外部のCSSファイル、JavaScriptファイルを読み込んだり及びメタタグを追加できます。

CSSの記述を追加するウィジェット

「Custom CSS」ウィジェットを追加します。
ちょっとしたスタイルの変更をしたいときはこちらのウィジェットにスタイルを書き込んでください。

CSSファイルをアップロードすることなく、スタイルを変更できるのでとても便利です。

JavaScriptの記述を追加するウィジェット

「Custom JS」ウィジェットを追加します。
JavaScript専用のウィジェットです。

JavaScriptファイルをアップロードすることなく、処理を追加できるのでとても便利です。

カスタムフィールドの使い方

試しに「bxslider」というjQueryのスライダーをこのページだけに反映させたいと思います。

記事内にbxsliderのコードを追加

ulタグも使えますが、テーマによってはulタグにmarginやpaddingが設定されている場合もあり手間がかかっちゃいます。
なので、bxsliderはdivタグで作るのが安定かなと思います。

カスタムフィールドを使ってbxsliderを使ってみる

Custom HEADでbxsliderライブラリを読み込む

まずはダウンロードしたbxsliderライブラリを読み込むため「Custom HEAD」ウィジェットに追加します。
パスは絶対パスで「jquery.bxslider.min.js」を指定してください。

カスタムフィールド(Custom HEAD)でショートコードを使いたい

実際にWordPressでheadにcssやjsを追加する場合はテーマフォルダ内に配置するかと思われます。
動的にURLを生成してファイルを呼び出す場合の方法をご紹介します。

テーマが変更される場合も考えるとショートコードで動的に生成された方が良いかもしれません。

上記のソースコードをfunctions.phpへ追記してください。
Custom HEADカスタムフィールドへ入力する場合は次の通りです。

実際の表示は次の通りです。

【2015.04.24追記】
ショートコードを使う場合はapply_filters()関数を使う必要があるのですが、
下記のように余計なタグが表示されてしまっていました。

動作はするのですが、気持ちが悪いです。。

この気持ち悪いコードをガマンするか、テーマ変更の際は直接編集するようにするか、悩みどころです。
他にもっとスマートな方法があればご教示ください。

Custom CSSでbxsliderのスタイルを変更する

今回はCSSでbxsliderの画像に灰色の枠線を付けてみました。

スタイルが反映されるかの確認です。
もちろん、ファイルとして保存して「Custom HEAD」で読み込ませるようにしてもオッケー。

スタイルシートをいくつかのグループに分けておけば、記事ごとにスタイルの変更ができます。

bxsliderを実行するJavascriptを追加します。
ページャーもコントローラーも非表示のシンプルなスライダーとなっています。

こんな感じで、bxsliderが表示され、カスタムフィールドに設定したCSSが読み込まれ、JavaScriptで指定したオプションが適用されています。
他の記事ではこの記事のカスタムフィールドの設定は読み込まれません。

さいごに

個別の記事ごとにHEAD、CSS、JavaScriptを設定できるカスタムフィールドはいかがでしょうか。

参考サイト

関連記事

  1. WordPress 下書き プレビュー 真っ白
  2. N1 mono-lab
  3. クリップアート, 鳥, 動物 / 生き物, 青い鳥, Twitter / ツイッター, EPS
  4. 青白く光るフレア
  5. wordpress
  6. Webサイト構築を依頼したときにかかる費用

PR

カテゴリー