• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › プラグイン › 記事ごとに個別のCSSやJavaScriptを追加

記事ごとに個別のCSSやJavaScriptを追加

プラグイン名 Custom CSS and JS

記事ごとに個別のCSSやJavaScriptを追加できるようになります。技術系のクリエーターや好奇心の強い人は、その記事にのみ使いたいスタイルや、JavaScriptがあると思います、そんな時に便利なプラグインです。

インストール手順

プラグイン > 新規追加 > Custom CSS and JS > プラグインを検索 > いますぐインストール > プラグインを有効化

検索でヒットしない場合は、こちらから「custom-css-js.zip」をダウンロードできます。

設定はありません。

使い方

投稿 > 新規追加

カスタムフィールド(JavaScript)外部ファイル

テーマフォルダ内にjsというフォルダを作成し、その中にtest.jsを作成しました。

このtest.jsを読み込ませるように記述します。

それでは、カスタムフィールドの新規追加をクリックします。

  • 名前
    custom_js
  • 値
    wp-content/themes/○○○○/js/test.js
  • もしくは、https://で始まる絶対パス↓でもOK
    値
    https://○○○○/○○○○/wp-content/themes/○○○○/js/test.js
  • カスタムフィールドを追加をクリック。ちなみに値を修正したら更新をクリックです。
    プレビューで確認してみてください。初めての人は、ソースを確認するのもいいかもしれません。

パスが通っているかどうかチェックします。↑をクリックしてtest.jsが開くならOKです。

カスタムフィールド(CSS)外部ファイル

こちらも同じくテーマフォルダ内にcssというフォルダを作成し、その中にtest.cssを作成。

カスタムフィールドの新規追加をクリックします。

  • 名前
    custom_css
  • 値
    wp-content/themes/○○○○/css/test.css
  • もしくは、https://で始まる絶対パス↓でもOK
    値
    https://○○○○/○○○○/wp-content/themes/○○○○/css/test.css

カスタムフィールドを追加をクリック。プレビューで確認してみてください。

カスタムフィールド(JavaScript)直接コードを記入する場合

直接コードを記入する場合、ファイル(test.js)を作成する必要はありません。

  • 名前
    custom_js_code
  • 値
    ここに直接test.jsの中身を記入

カスタムフィールドを追加をクリックし完了です。プレビューでソースを確認すると分かると思いますが、直接記入されているはずです。

カスタムフィールド(CSS)直接コードを記入する場合

  • 名前
    custom_css_code
  • 値
    ここに直接test.cssの中身を記入

カスタムフィールドを追加をクリックし完了です。

タグ: CSS, JavaScript
カテゴリー: プラグイン, CSS

コメントを残す コメントをキャンセル

関連記事
スタイルシート、JavaScriptを軽量化
特定のカテゴリに個別のCSSを適応させる
外部JavaScriptを読み込ませる
個別にJavaScriptを振り分ける
投稿、固定ページ内にウィジェットを挿入
記事データの一括検索、一括置換
人気記事
高機能でオシャレな実用的メニュー(HTMLテンプレート)
Webページ全体をフェードイン、フェードアウト
投稿、固定ページ内にウィジェットを挿入
記事の続きを読むを消す
最新記事を自動でスライドショー
コメントに画像を挿入できるようにする
フリーの高機能HTMLテンプレート
指定したカテゴリIDのカテゴリ名のみ取得
記事ごとに個別のCSSやJavaScriptを追加
カテゴリ別に違うカテゴリ(テンプレート)を表示
タイトルや本文からタグを自動生成
特定のカテゴリに個別のCSSを適応させる
非表示、置換テクニック
カテゴリー別に違うサイドバーを出す
CSS3のみで画面外からメニューをスライド表示
画像や動画をポップアップし再生
Contact Form7の送信完了画面をカスタマイズ
スライドショー Meteor Slides
phpMyAdminのユーザー名とパスワードの確認方法
アイキャッチ(サムネイル)を呼び出す
管理画面の投稿一覧で投稿IDを表示する
CSSやJavaScriptのハンドル名(id)を確認
カテゴリに別々のアイコンを表示
レスポンシブなLightbox jQuery プラグイン Strip
コメントのメールアドレス入力覧を消す
スライドショー Skitter Slideshow
記事をランダムに表示させる
背景をスライドショーにする
パスワードを間違えると一定時間ログインできないようにする
ショートコードを追加するプラグイン
全記事のアイキャッチをまとめて自動作成
CSS3 角を丸くする
CSS3 ボックスシャドウ
ページごとに違うヘッダーを読み込む
リンクの表示順を並べ替える
購読者にパスワードを変更させない
スライドショー WP Slider Plugin
個別にJavaScriptを振り分ける
管理画面の投稿一覧へアイキャッチを表示
サイト全体のサムネイルサイズを変更
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2022 Plus WordPress