カスタマイズ【WordPress】投稿ごとに独自のCSSやjsを読み込ませるカスタマイズfacebookTwittepocketはてなFeedlyRSSranking投稿ごとに独自のCSSやjsを読み込ませたい場合ってありませんか?実はこれ、多くの方が実現したいと考えています。今回は、投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご紹介します。・投稿ごとに独自CSSを読み込むカスタマイズ・投稿ごとに独自jsを読み込むカスタマイズいずれのカスタマイズも、プラグインは使いません。テーマを直接カスタマイズします。WordPressに関わって10年目の私が実際に使っている方法です。5分程度で実装することができますので、ぜひ挑戦してみてください。それでは、投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご覧ください。今回のカスタマイズは、新旧どちらのエディタにも対応しています。WordPressのカスタマイズはお任せください。WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。詳しくはこちらをクリック投稿ごとに独自のCSSを読み込むカスタマイズカスタマイズの手順は以下の通りです。functions.phpにコードを追加する。header.phpにコードを追加する。投稿画面に独自CSSの入力項目が追加されているのを確認する。独自CSSが読み込まれているのを確認する。個別にみていきましょう。手順1:functions.phpにコードを追加するfunctions.phpに以下のコードを追記してやります。$custom_css);}参考:Webお役立ちネタ帳カスタマイズ自体は、上記のコードをfunctions.phpに追加することで完了です。手順2:header.phpにコードを追加するCSSを出力したい箇所に以下のコードを記述します。?>の上あたりに記述すればよいかと思います。この辺りは臨機応変に変更してください。手順3:投稿画面に独自CSSの入力項目が追加されているのを確認する投稿編集画面を開いてください。投稿編集画面の下部に、上記の独自CSSの入力項目が表示されていれば、第一段階は成功です。上記の項目に入力したCSSが、その投稿で読み込まれるようになります。適当なCSSを入力して投稿を保存してください。手順4:独自CSSが読み込まれているのを確認する投稿ページのソースを確認してみましょう。head内に先ほど入力したCSSが表示されていれば、カスタマイズは成功です。投稿ごとに独自のjsを読み込むカスタマイズカスタマイズの手順は以下の通りです。functions.phpにコードを追加する。header.phpにコードを追加する。投稿画面に独自CSSの入力項目が追加されているのを確認する。独自CSSが読み込まれているのを確認する。個別にみていきましょう。手順1:functions.phpにコードを追加するfunctions.phpに以下のコードを追記してやります。endif;rewind_posts();}}参考:Webお役立ちネタ帳カスタマイズ自体は、上記のコードをfunctions.phpに追加することで完了です。手順2:header.phpにコードを追加するCSSを出力したい箇所に以下のコードを記述します。?>の上あたりに記述すればよいかと思います。この辺りは臨機応変に変更してください手順3:投稿画面に独自jsの入力項目が追加されているのを確認する投稿編集画面を開いてください。投稿編集画面の下部に、上記の独自jsの入力項目が表示されていれば、第一段階は成功です。上記の項目に入力したjsが、その投稿で読み込まれるようになります。適当なjsを入力して投稿を保存してください。手順4:独自jsが読み込まれているのを確認する投稿ページのソースを確認してみましょう。head内に先ほど入力したjsが表示されていれば、カスタマイズは成功です。ここで入力した内容は【<script>と</script>の間】に出力されます。jsを記述する時は、この部分に注意してください。今回ご紹介した方法は、投稿以外にも固定ページ、カスタム投稿でも利用可能です。【投稿ごとに独自のCSSを読み込むカスタマイズ】でfunctions.phpに追加したコードの中にある、以下の部分を調整することで、固定ページやカスタム投稿でも独自CSSを読み込めるようになります。'high');}このコードを以下のように修正してやります。以下のように修正します。'high');}赤文字部分のコードを追加しました。以下のように修正します。'high');}赤文字部分のコードを追加されました。追加されたコードの中に【カスタム投稿名】という部分があります。独自CSSを読み込ませたいカスタム投稿の名前に書き換えてください。カスタム投稿名が【test】であれば【test】と書き換えます。カスタム投稿名の調べ方は、以下のコンテンツを参考にしてください。【投稿ごとに独自のjsを読み込むカスタマイズ】でfunctions.phpに追加したコードの中にある、以下の部分を調整することで、固定ページやカスタム投稿でも独自CSSを読み込めるようになります。'high');}このコードを以下のように修正してやります。以下のように修正します。'high');}赤文字部分のコードを追加しました。以下のように修正します。'high');}赤文字部分のコードを追加されました。追加されたコードの中に【カスタム投稿名】という部分があります。独自CSSを読み込ませたいカスタム投稿の名前に書き換えてください。カスタム投稿名が【test】であれば【test】と書き換えます。カスタム投稿名の調べ方は、以下のコンテンツを参考にしてください。カスタム投稿名とカスタムタクソノミー名の調べ方まとめ投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご紹介しました。functions.phpにコードを追加する。header.phpにコードを追加する。(独自jsはfooter.php)投稿画面に独自CSSの入力項目が追加されているのを確認する。独自CSSが読み込まれているのを確認する。基本的にコピペだけで行える簡単なカスタマイズです。興味のある方は、挑戦してはいかがでしょうか?facebookTwittepocketはてなFeedlyRSSrankingWordpressサイトのカスタマイズでお困りではありませんか?あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。次に該当する方は、お気軽にご相談下さい。Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。一つでも該当する方は、以下のリンクからチェックしてみてください。kondo岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。Wordpress関連の記事でお役に立てれば幸いです。【関連記事】あなたが興味のありそうな関連記事をご紹介します。2020/01/05WordPressのログイン画面と管理画面にIP制限を設ける方法セキュリティ対策の一環としてログイン画面と管理画面にIP制限を設けたいと考えたことはありませんか?このコンテンツでは、IP制限を設ける方法を詳しく解説しています。興味のある方は参考にしてください。記事を読む2020/01/04【WordPress】メールアドレスとパスワード変更時のメール通知を停止する方法WordPressでメールアドレスやパスワードを変更した際に送信されるメール通知を停止する方法をご紹介しています。コピペだけで行えるカスタマイズです。興味のある方は参考にしてください。記事を読む2020/01/04WordPressのカスタムメニューで画像を使う方法WordPressのカスタムメニューで画像を使いたいと考えたことはありませんか?このコンテンツでは、カスタムメニューのテキストを画像に置き換える方法をご紹介しています。興味のある方はご覧ください。記事を読む2020/01/04管理者のメール確認機能に関するカスタマイズを2つご紹介WordPressに新しく実装された管理者の【メールアドレスが正しいかをチェックする機能】に関するカスタマイズをご紹介します。チェック間隔を変更する、チェック機能自体を停止させる方法に興味のある方は、今回のコンテンツをご覧ください。記事を読む2020/01/04WordPressのカテゴリーウィジェットで投稿のないカテゴリーも表示させる方法WordPressのカテゴリウィジェットで投稿が一件もないカテゴリーも表示させたいことってありませんか?このコンテンツでは、投稿が一件もないカテゴリーを表示させる方法をご紹介しています。興味のある方はご覧ください。上に表示された文字を入力してください。kondoWordPress専門のフリーランサーです。WordPressを使ったホームページ制作とカスタマイズをメインに、岡山県を中心に10年ほど活動しています。このサイトではこれまでの経験を生かし、WordPressに関連したコンテンツを中心に配信しています。あなたのお役に立てるコンテンツを見つけてください。詳しいプロフィールはコチラサービス一覧(人気順)WPカスタマイザーWordPressのカスタマイズを代行するサービスです。WPクリエイターWordPressを使ってオリジナルサイトを0から作成するサービスです。既存のWEBサイトをWordPressで再構築するサービスです。WPレスキューWordPressのエラーや不具合を解決するサービスです。WP-SSLWordPressで構築されたサイトを常時SSL化するサービスです。【WordPress】テーマフォルダの画像を呼び出すときの画像パスを短くする方法893pvレスポンシブ対策!電話番号リンク(tel:)をスマホのみ有効にする3つの方法レスポンシブ対策!電話番号リンク(tel:)をスマホのみ有効にする3つの方法733pvWordpressの改行と段落が消える原因と解決方法Wordpressの改行と段落が消える原因と解決方法617pvWordPressに新着記事の一覧を表示する方法。get_postsで簡単!WordPressに新着記事の一覧を表示する方法。