制作の現場から  
  特定のページにだけ css や javascript を投稿画面から適用する方法、ついでにmeta descriptionも
2018
11
Aug

特定のページにだけ css や javascript を投稿画面から適用する方法、ついでにmeta descriptionも

クライアントからの依頼でワードプレスを使ってサイトを作ることが多いですが、久しぶりに自分のためのサイトを作りました。
あらためて気づいたことがあります。

それはfunctions.phpに書き込むコードがとても少なくて済むということです。プラグインもあまり使いません。自分のサイトではプラグインはインストール時に元から入っている日本語パッチ用と、テスト用のmts-simple-bookingだけです。それでも自分でワードプレスを使うのであれば追加するコードはとても少なくて済みます。

顧客サイトでは必ずといって導入するのがカスタムフィールドプラグインですが、自分で使うなら最初から備わっているカスタムフィールドで十分です。お問い合せ用の有名なプラグインも使いません。

前置きが長くなりましたが、本題に入ります。このサイトのように投稿ページで色々なことを試すようなサイトでは、そのページでしか使わないスタイルやjavascriptが必要になります。ですが、サイト全体に適用するcssやjsファイルにコードを追加するのはコード量が増えて効率が悪い気がします。特定の投稿ページだけに適用するスタイルやjavascriptがあれば便利だと思います。

ついでに meta description も投稿ページごとに設定できるようにします。

css javascript を、特定のページだけに適用する方法

 

テキストエディタに書き込めば済む話でしょ?その通りなのですが、私は前述のカスタムフィールドをつかって css は header に javascript は fooeter に書き込んでいます。何故かと言えば管理者権限で投稿しないときは javascript が書き込めないからです。

header.php


$custom_fields = get_post_custom();  //カスタムフィールドの値をまとめて取得します
$desc = $custom_fields['desc'][0];   //投稿ページ用のdescription
$tn_css = $custom_fields['css'][0];  //追加するcss
$jssrc = $custom_fields['jssrc'][0]; //読み込むjsファイル用
$tn_js = $custom_fields['js'][0];    //追加するjs



/*それぞれ適当な場所へ記述します。入力値をエスケープする場合は追加処理してください。*/
if( $desc ){ echo '<meta name="description" content="'.$desc.'">'; }
if( $tn_css ){ echo '<style>'.$tn_css.'</style>'; }
if( $jssrc ){ echo '<script src="'.$jssrc.'"></script>'; }
if( $tn_js ){ echo '<script>'.$js.'</script>'; }

/*javascriptのappendをつかえば実際には、
カスタムフィールド一つで済むかもしれませんが分かり易いようにこうしています。*/

 

top