WordPress.org

日本語

WordPress を入手
WordPress.org

Plugin Directory

Simple Custom CSS and JS

Simple Custom CSS and JS

作者: SilkyPress.com
ダウンロード

説明

利用中のテーマやプラグインのファイルを変更することなく、独自の CSS と Javascript のコードを追加することで、あなたの WordPress のサイトの外観を簡単にカスタマイズします。サイトの CSS を調整するのにぴったりでしょう。

機能

  • 構文ハイライト機能のあるテキストエディター
  • インラインや外部ファイルに含めてのコードの出力
  • ヘッダーやフッターにコードを出力
  • フロントエンドか管理画面に CSS や JS を追加
  • 追加したい多くのコードを追加
  • テーマを変更しても変更点を維持

スクリーンショット

  • 独自コードの管理

  • Javascript の追加・編集

  • CSS の追加・編集

  • Add/Edit HTML

インストール

  • WordPress の管理画面で「プラグイン」->「新規追加」とクリックします。
  • ブラウザーの入力欄に Simple Custom CSS and JS と入力します。
  • Simple Custom CSS and JS プラグインを選択しインストールをクリックします。
  • プラグインを有効化する。

または…

  • このページからプラグインをダウンロードします。
  • ZIP ファイルをコンピューターに保存します。
  • 管理ページを開き「プラグイン」->「新規追加」とクリックします。
  • 「アップロード」をクリックし、このページからダウンロードした ZIP ファイルを選択します。
  • 「インストール」をクリック後、「有効化」をクリックしてください。

または…

  • このページからプラグインをダウンロードします。
  • その ZIP ファイルをコンピューター上で展開します。
  • あなたのサイトのファイルディレクトリへのアクセスを取得するため、FTP かホストのコントロールパネルのどちらかを使います。
  • wp-content/plugins ディレクトリを開きます。
  • 展開した custom-css-js のフォルダをこのディレクトリにアップロードします。
  • WordPress の管理画面を開き、「プラグイン」ページを開き、新たに追加された Simple Custom CSS and JS プラグインの「有効化」をクリックします。

FAQ

外部の CSS を複数追加すると ?

同じ種類 (例: 2つの外部 CSS コード) の複数のコードを記述した場合、すべてのコードは次々に出力されます。

このプラグインは読み込み時間に影響しますか ?

保存ボタンをクリックすると、そのコードはファイルとしてキャッシュされます。なので、長々としたデータベースのクエリーは発生しません。

本プライグインは、エディターで書いたコードを修正しますか ?

いいえ。コードはエディター中の通りに出力されます。修正、チェック、妥当性のチェックはありません。エディター中に書いた内容の責任はあなたにあります。

私の書いたコードがサイトに表示されない

いずれかをお試しください:
1. キャッシュ用プラグイン (W3 Total Cache や WP Fastest Cache) を利用中であれば、サイトにコードが出力されたか確認する前に、これらのキャッシュの削除をお忘れなく。
2. 公開状態になっていますか? (下書きやゴミ箱でなく)
3. wp-content/uploads/custom-css-js フォルダーが存在し、書き込み可能になっているか確認してください

マルチサイトネットワークで動作しますか ?

はい。

テーマを変更するとどうなりますか ?

カスタムの CSS や JS はそれらのテーマとは独立しており、テーマが変更されても存続します。特にプラグインの出力を修正するのに CSS や JS を適用させる場合に便利でしょう。

LESS や Sass のような CSS プリプロセッサを使えますか ?

今のところ、プレーンな CSS のみに対応しますが、CSSプリプロセッサが必要であれば Pro版 をチェックしてみてください。

CSS で使う画像をアップロードできますか ?

はい。メディアライブラリに画像をアップロードすれば、CSS スタイルシート中から直接 URL にて参照できます。例:
div#content {
background-image: url(‘http://example.com/wp-content/uploads/2015/12/image.jpg’);
}

@import や @font-face のような CSS の書式は使えますか ?

はい。

誰が独自コードを公開・編集・削除できますか ?

初期状態では、管理者のみが独自コードの公開・編集・削除できます。プラグインを有効化すると、ウェブデザイナーと呼ばれる権限が作成されます。管理者以外のユーザーが、独自コードを公開・編集・削除できるようにするために、この権限を割り当てることができます。プラグインの設定ページに、この権限を除去するオプションがあります。

サイトに HTTPS の URL を使用中だがコードが HTTP としてリンクされている

リンクされたコードの URL は、このスクリーンショットのように、管理画面 -> 設定 -> 一般 に見つかる WordPress アドレスの設定を使って、ほかのメディア (メディアライブラリ) の URL と同様に構築されています。WordPress アドレスの URL が HTTPS となっているなら、独自コードやほかのすべてのメディアの URL は HTTPS になっています。

評価

Really useful tool

2024年9月2日
This is a relatively small simple plugin but recently I’ve found it invaluable for adding small CSS and JS snippets to the site. It’s been great for adding things RocketChat and Webpushr snippets tiny css quick fix adjustments to cope with UI inconsistencies.

Great plugin but…

2024年6月20日 2 replies
Hello. I just updated custom CSS name permalink, but it doesnt’t change. I need that “wp-content/uploads/custom-css-js/8103.css?v=4903” was converted in “wp-content/uploads/custom-css-js/custom_footer.css”. Thanks a lot in advnace.

Love it but it needs configuration for linting.

2024年2月21日 1 reply
I’ve been using this plugin for a little over 2 years on over 50 sites (free and pro). It’s really been an amazing tool, especially the pro version with the ability to prioritize which CSS and HTML blocks are loaded. That is the only downside to the free version honestly. In the free version, using CSS and an HTML for something like the Bootstrap CDN causes the CDN to always load the Bootstrap CSS after causing me to either add !important to everything or using a less convenient solution. My biggest issue with the current update is the change in the stylelint and it is the reason I’m giving this plugin 3 stars. The new rules are too aggressive and are demanding many new conditions on the coding in CSS. I don’t want a linter to force me into what style of CSS I write in. Please set it back or begin to include a setting to configure the stylelint so that if I want to use the prefix for media queries, or not use kebab casing for Ids and classes, I don’t constantly have the editor giving me useless warnings. It really became an issue after having updated multiple sites and now the error is everywhere. I’ve commented out the sections for kebab-casing and changed the rule for the media queries in .js file but the time required to change it on every site, plus the next time there’s an update, I’d end up having to redo it all again. If this can be changed great. If not, I’m going to end up having to find another solution because it’s throwing error messages everywhere now and makes debugging more difficult.
93件のレビューをすべて表示

貢献者と開発者

Simple Custom CSS and JS はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Simple Custom CSS and JS” は16ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Simple Custom CSS and JS” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログを RSS で購読してみてください。

変更履歴

3.48

  • 09/24/2024
  • Feature: add JS/CSS custom codes to the Block editor

3.47

  • 05/27/2024
  • Fix: use the GMT time for showing when a custom code was published or modified

3.46

  • 01/31/2024
  • Tweak: update the Bootstrap and jQuery library links
  • Tweak: remove the qTranslate-x warning. The qTranslate-x plugin was removed from wp.org since Aug 2021

3.45

  • 10/17/2023
  • Fix: enqueue the jQuery library only if there is a frontend JS custom code that requires it

3.44

  • 06/07/2023
  • Compatibility with the WooCommerce “custom order tables” feature

3.43

  • 03/13/2023
  • Fix: PHP8.1 deprecation notices
  • Fix: after adding a JS/HTML custom code with empty content will show the CSS default message in the editor

3.42

  • 01/17/2023
  • Fix: the “LH Archived Post Status” plugin was removing the “Publish” button on the add/edit custom code page
  • Feature: multiple values for the “Where in site” option

See changelog for all versions.

メタ

評価

すべて表示
レビューを申請するにはログインしてください。

サポート

過去2ヶ月以内に解決した問題:

2 / 3

サポートフォーラムを表示