Simple Custom CSS and JS

説明

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

機能

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

スクリーンショット

  • 独自コードの管理

  • Javascript の追加・編集

  • CSS の追加・編集

インストール

  • 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 の書式は使えますか ?

はい。

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

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

qTranslate X プラグインとの互換性

  • qTranslate X プラグインがあなたのコードに [:][:en] の文字列を追加している場合は、qTranslate の設定の投稿種別から custom-css-js を削除する必要があります。その方法については、このスクリーンショットをご覧ください。

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

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

評価

2020年10月29日
No doubt this plugin is good, but I've found that, in the code editor Search is not works properly. This review is for admin to make better the plugin.
2020年10月27日
I run my own custom code on the site. So, I must have the solution to do with it. ..and "Simple Custome CSS and JS" is only one of the best for my custom code. Thanks to Silkypress.
2020年10月14日
The PRO version solved everything I needed from a CSS/JS plugin. I make lots of CSS customisations and you feel that the creators gave very deep tough into what developers need from such a tool. You can along fairly well also with the free version.
2020年5月26日
I really did, but it does some odd things with auto formatting, indentation, etc. However the one 'must have' feature that's missing is revisions. Other plugins in this same category have it and do better with the auto format angle.
72件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

3.34.1

  • 11/24/2020
  • Fix: PHP error when filtering the custom codes

3.34

  • 11/01/2020
  • Feature: enqueue the jQuery library if one of the JS custom codes requires it
  • Fix: set cookie SameSite attribute to lax

3.33

  • 08/20/2020
  • Fix: the user language preferrence was ignored in favor of the site defined language
  • Fix: allow the jQuery library added by plugins like Enable jQuery Migrate Helper or Test jQuery Updates
  • Fix: permalink was not editable with WordPress 5.5
  • Feature: fullscreen editor
  • Feature: button for beautifying the code

3.32.3

  • 08/02/2020
  • Fix: add “Cmd + ” editor shortcuts for MacOS computers

3.32.2

  • 07/14/2020
  • Fix: use file_get_contents instead of include_once to load the custom codes

3.32

  • 07/08/2020
  • Fix: compatibility issue with the Product Slider for WooCommerce by ShapedPlugin
  • Feature: “Ctrl + /” in the editor will comment out the code
  • Feature: order custom codes table by “type” and “active” state
  • Feature: autocomplete in the editor

3.31.1

  • 05/05/2020
  • Declare compatibility WooCommerce 4.1

3.31

  • 03/21/2020
  • Feature: add “After tag” option for HTML codes, if the theme allows it
  • Feature: don’t show type attribute for script and style tags if the theme adds html5 support for it
  • Code refactory
  • Fix: the permalink was mistakingly showing a “.css” file extension when being edited

3.30

  • 03/12/2020
  • Feature: color the matching brackets in the editor
  • Declare compatibility WooCommerce 4.0
  • Declare compatibility WordPress 5.4

3.29

  • 01/31/2020
  • Fix: date Published and Modified date wasn’t shown in Japanese
  • Feature: indentation in the editor
  • Feature: close brackets in the editor

3.28

  • 11/05/2019
  • Tweak: update the Bootstrap and jQuery library links
  • Declare compatibility with WordPress 5.3

3.27

  • 08/08/2019
  • Compatibility with the “CMSMasters Content Composer” plugin
  • Feature: keep the cursor position after saving
  • Option: remove the comments from the HTML

3.26

  • 05/08/2019
  • Fix: remove the Codemirror library added from WP Core
  • Tweak: use protocol relative urls for custom code linked file
  • Declare compatibility with WordPress 5.2

3.25

  • 04/21/2019
  • Tweak: update the Bootstrap and jQuery library links
  • Declare compatibility with WooCommerce 3.6

3.24

  • 04/05/2019
  • Fix: remove the editor scrollbar
  • Tweak: rename “First Page” to “Homepage” to avoid misunderstandings

3.23

  • 03/15/2019
  • Fix: avoid conflicts with other plugins that use CodeMirror as their editor

3.22

  • 12/06/2018
  • Fix: another solution for the bug related to the Edit Custom Code page was blank for WordPress 5.0 and the Classic Editor enabled

3.21

  • 12/06/2018
  • Fix: the Edit Custom Code page was blank for WordPress 5.0 and the Classic Editor enabled

3.20

  • 11/15/2018
  • Fix: remove compatibility with the Shortcoder plugin. Bug https://wordpress.org/support/topic/edit-page-blank-8/
  • Declare compatibility WooCommerce 3.5

3.19

  • 10/16/2018
  • Fix: keep the editor LTR even on RTL websites
  • Fix: flush rewrite rules after modifying the “Add Web Designer role” option

3.18

  • 07/13/2018
  • Fix: the default comment for JS for other locales than “en_” was removing the tags
  • Tweak: make the search dialog persistent
  • Tweak: correct the tooltip info for the ‘ccs_js_designer’ option

3.17

  • 04/25/2018
  • Fix: add the add/edit/delete custom post capabilities to the admin and ‘css_js_designer’ roles on plugin activation

3.16

  • 04/22/2018
  • Fix: “The link you followed has expired” on custom code save if the WP Quads Pro plugin is active
  • Fix: PHP warning for PHP 7.2
  • Change: add/remove the “Web Designer” role only on activating/deactivating the option in the Settings page

3.15

  • 03/27/2018
  • Change: check the option name against an array of allowed values

3.14

  • 02/04/2018
  • Feature: permalink slug for custom codes
  • Fix: set the footer scripts to a higher priority
  • Update the french translation
  • Fix: allow admin stylesheets from ACF plugin, otherwise it breaks the post.php page
  • Tweak: for post.php and post-new.php page show code’s title in the page title

3.13

  • 01/12/2018
  • Feature: add the “Keep the HTML entities, don’t convert to its character” option

3.12

  • 01/03/2018
  • Reverse to the wp_footer function for the footer scripts, as the print_footer_scripts function is used also in the admin, which lead to many broken back-ends

3.11

  • 01/03/2018
  • Use the print_footer_scripts function for the footer scripts (https://wordpress.org/support/topic/footer-code-position-before-external-scripts-is-overridden/)
  • Escape selectively the HTML characters in the editor (https://wordpress.org/support/topic/annoying-bug-in-text-editor/)

3.10

  • 12/15/2017
  • Fix: https://wordpress.org/support/topic/broken-layout-of-code-snippet-type-color-tag-css-html-js-on-main-list-table/
  • Feature: add filter by code type
  • Feature: make the ‘Modified’ column sortable
  • Fix: if the default comment remains in the “Add Custom JS”, then there was no tags added to the code, as the comment contained a tag

3.9

  • 12/01/2017
  • Feature: add “Last edited …” information under the editor
  • Fix: jump to line when searching
  • Tweak: add message that the Code Revision data is dummy

3.8

  • 10/19/2017
  • Declare compatibility with WooCommerce 3.2 (https://woocommerce.wordpress.com/2017/08/28/new-version-check-in-woocommerce-3-2/)
  • Fix: avoid conflicts with other plugins that implement the CodeMirror editor
  • Update the CodeMirror library to 5.28 version

3.7

  • 10/06/2017
  • Add French and Polish translation

3.6

  • 09/07/2017
  • Fix: compatibility with the CSS Plus plugin

3.5

  • 08/25/2017
  • Code refactoring
  • Add activate/deactivate link to row actions and in Publish box
  • Make the activate/deactivate links work with AJAX
  • Add Turkish translation

3.4

  • 07/11/2017
  • Security fix according to VN: JVN#31459091 / TN: JPCERT#91837758

3.3

  • 06/23/2017
  • Feature: option for adding Codes to the Login Page

3.2

  • 06/13/2017
  • Fix: compatibility issue with the HTML Editor Syntax Highlighter plugin

3.1

  • 05/14/2017
  • Feature: prepare the plugin for translation

3.0

  • 04/12/2017
  • Feature: create the Web Designer role
  • Feature: allow Custom Codes to be managed only by users with the right capabilities

2.10

  • 02/05/2017
  • Feature: circumvent external file caching by adding a GET parameter
  • Add special offer for Simple Custom CSS and JS pro

2.9

  • 12/05/2016
  • Compatibility with WP4.7. The “custom HTML code” was not showing up anymore

2.8

  • 10/09/2016
  • Feature: add search within the editor accessible with Ctrl+F
  • Feature: make the inactive rows opaque

2.7

  • 09/04/2016
  • Fix: there was a space in the htmlmixed.%20js url
  • Feature: make the editor resizable

2.6

  • 08/31/2016
  • Feature: add HTML code
  • Fix: add htmlentities when showing them in the editor
  • Feature: when adding a code, show more explanations as comments

2.5

  • 08/25/2016
  • Fix: compatibility with other plugins that interfere with the CodeMirror editor

2.4

  • 08/01/2016
  • Add the “Add CSS Code” and “Add JS Code” buttons next to the page title
  • Compatibility with WP 4.6: the “Modified” column in the Codes listing was empty

2.3

  • 06/22/2016
  • Add the includes/admin-notices.php and includes/admin-addons.php
  • Feature: change the editor’s scrollbar so it can be caught with the mouse

2.2

  • 06/22/2016
  • Check compatibility WordPress 4.5.3
  • Add special offer for Simple Custom CSS and JS pro

2.1

  • 04/24/2016
  • Fix: on multisite installs have to create the custom-css-js folder in the upload dir for each site
  • Fix: the deactivate code star wasn’t working when first time clicked
  • Fix: In the add/edit Code page filter which meta boxes are allowed
  • Fix: If the custom-css-js folder is not created of is not writable, issue an admin notice.

2.0

  • 04/11/2016
  • Feature: enable/disable codes
  • Feature: add a GET parameter at the end of external files in order to over circumvent caching
  • Fix: don’t add the “” tag from the code if already present.

1.6

  • 03/26/2016
  • Fix: the number of codes were limited because query_posts is automatically inserting a limit

1.5

  • 03/10/2016
  • Fix: solved a conflict with the shortcoder plugin.

1.4

  • 01/04/2016
  • Tweak: Do not enqueue scripts unless we are editing the a custom-css-js type post.
  • Fix: The register_activation_hook was throwing a notice
  • Fix: add window.onload when initializing the CodeMirror editor
  • Tweak: Differentiated the option names for “Where on page” and “Where in site”
  • Fix: set the correct language modes to CodeMirror object
  • Tweak: remove the slug metabox
  • Tweak: use the compressed version of CodeMirror

1.3

  • 12/27/2015
  • Tweak: changed the submenus to “Add Custom CSS” and “Add Custom JS” instead of “New Custom Code”
  • Tweak: Use admin_head instead of admin_enqueue_scripts for external files in order to add priority to the code
  • 修正: javascript のコードが表示されていなかった
  • Fix: For longer code the last line in the editor was hidding because of the CodeMirrorBefore div.

1.2

  • 12/14/2015
  • Fix: when a code was sent into Trash it still wasn’t shown on the website

1.1

  • 10/12/2015
  • Tweak: for external files use wp_head and wp_footer instead of wp_enqueue_style. Otherwise the CSS and JS is inserted before all the other scripts and are overwritten.
  • Tweak: Save all the codes in files in order to save on database queries
  • Tweak: Rewrite the readme.txt in the form of FAQ for better explanations

1.0

  • 06/12/2015
  • 最初のコミット