Simple Custom CSS and JS

Opis

Spersonalizuj wygląd swojej strony na WordPressie dodając w prosty sposób własny kod CSS oraz JS. Nie musisz modyfikować plików motywu lub wtyczek. To idealny sposób na dodanie kodu CSS, który podrasuje Twoją stronę.

Funkcje

  • Edytor tekstowy z podświetlaniem składni
  • Dodawaj wstawki wewnątrz kodu strony lub jako plik zewnętrzny
  • Dodawaj wstawki do nagłówka lub stopki kodu strony
  • Dodawaj wstawki CSS oraz JS do warstwy wizualnej strony (frontend) lub do panelu admina
  • Dodawaj dowolną liczbę wstawek
  • Zachowasz zmiany stylistyczne nawet gdy zmieni się Twój motyw

Zrzuty ekranu

  • Manage Custom Codes

  • Add/Edit Javascript

  • Add/Edit CSS

Instalacja

  • Z panelu admina wybierz w menu bocznym Wtyczki -> Dodaj nową
  • W polu wyszukiwarki wpisz „Simple Custom CSS and JS”.
  • Kliknij „Zainstaluj teraz” przy wtyczce „Simple CSS and JS” .
  • Aktywuj wtyczkę.

LUB…

  • Pobierz wtyczkę z tej strony.
  • Zapisz plik .zip na swoim komputerze.
  • Otwórz panel admina, wybierz Plugins -> Dodaj nową.
  • Kliknij na przycisk „Wyślij wtyczkę na serwer”, a następnie wskaż na swoim komputerze pobrany wcześniej plik .zip.
  • Zainstaluj, a następnie aktywuj wtyczkę.

LUB…

  • Pobierz wtyczkę z tej strony.
  • Wypakuj plik .zip na swoim komputerze.
  • Uzyskaj dostęp do plików swojej strony z użyciem serwera FTP lub interfejsu cPanel lub Direct Admin.
  • Przejdź do folderu wp-content/plugins na serwerze.
  • Wgraj na serwer rozpakowany wcześniej na Twoim komputerze folder custom-css-js.
  • Otwórz panel admina, wybierz z menu bocznego Wtyczki, a następnie kliknij na Aktywuj pod nowo dodaną wtyczką Simple Custom CSS and JS.

Najczęściej zadawane pytania

What if I want to add multiple external CSS codes?

Jeśli dodasz kilka wstawek zewnętrznych tego samego typu (np. dwie wstawki zewnętrzne z kodem CSS), wtedy wszystkie one będą wylistowane jedna za drugą.

Will this plugin affect the loading time?

Gdy klikasz przycisk Zapisz, kod zostaje zapisany w plikach cache. Nie ma zatem mowy o nagminnym odpytywaniu bazy danych, co mogłoby przyczynić się do zwolnienia prędkości działania strony.

Does the plugin modify the code I write in the editor?

Nie. Kod, który wprowadzasz jest wstawiany do strony w taki sposób, w jaki go wprowadziłeś. Nie jest on modyfikowany, sprawdzany, weryfikowany w żaden sposób. Bierzesz pełną odpowiedzialność za to, jaki kod wprowadzasz i ewentualne błędy.

Mój kod nie pojawia się na stronie

Spróbuj jednego z poniższych:
1. Jeśli używasz wtyczki typu cache plugin (np. „W3 Total Cache lub „WP Fastest Cache”), to nie zapomnij wyczyścić pamięci podręcznej po dodaniu nowej wstawki lub edycji aktualnej.
2. Upewnij się, że wstawka znajduje się w Opublikowanych, a nie w Szkicach lub Koszu
3. Sprawdź czy folder wp-content/uploads/custom-css-js znajduje się na serwerze i ma prawa do zapisu.

Czy ta wtyczka działa z multisite?

Tak.

Co jeśli zmienię motyw?

Wtyczka Simple Custom CSS and JS jest niezależna od używanego motywu. Wstawki dodane do tej wtyczki będą funkcjonować na każdym aktualnie używanym motywie.

Can I use a CSS preprocesor like LESS or Sass?

Na ten moment darmowa wersja obsługuje jedynie czysty CSS. Sprawdź wersję PRO, która obsługuje preprocesory CSS.

Czy mogę wgrać własne obrazki do użycia z moimi wstawkami CSS?

Tak. Możesz wgrać własne obrazki do Biblioteki Mediów by później odnieść się do nich wewnątrz arkusza CSS za pomocą ich bezpośredniego URL. Przykład:
div#content {
background-image: url(’http://przyklad.pl/wp-content/uploads/2015/12/twoje-zdjecie.jpg’);
}

Can I use CSS rules like @import and @font-face?

Tak.

Who can publish/edit/delete Custom Codes?

Domyślnie tylko admin będzie mógł publikować, edytować i usuwać wstawki. Po aktywacji tej wtyczki pojawi się taka rola jak Web Designer. Możesz przypisać dowolnego użytkownika do tej roli, aby umożliwić mu tworzenie, edycję i usuwanie wstawek. W ustawieniach tej wtyczki znajduje się opcja usunięcia tej roli.

My website has HTTPS urls, but the codes are linked as HTTP

The URL for the linked Codes is built just like the URL for other media (from Media Library) by using the WordPress Address option found on the WP Admin -> Settings -> General page, as shown in this screenshot. If the WordPress Address has HTTPS in the url, then the Custom Codes and all the other media will have HTTPS in the url.

Recenzje

2024-02-21 1 odpowiedź
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.
2023-07-26 1 odpowiedź
This is a nice handy plugin, but it seems to not load CSS on Elementor pages for some reason. Otherwise nice plugin.
2023-02-11
When saving CSS as external file, I'm disappointed that you can't name the css file, you can change the permalink and then a duplicate CSS file is created with the name but it is still not used by this plugin.It is much better than Jetpack's version which is horrible. I have now stopped using it as it also forces you to load the CSS where I needed to conditionally include it, I am now using a text editor, FTP, and wp_enqueue_style() in a child functions.php. Much easier (at least after working it out), the below code added before the html header started (not sure if that matters): //=========================================================================== function CompanyHeaderAssets() //=========================================================================== { //--- Main Company CSS ------------------------------------------------ $CssDir = '/wp-content/themes/oceanwp-child-theme-master/'; $CssName = 'Company CSS for Dynamic Pages.css'; wp_enqueue_style("CompanyCss4All", "{$CssDir}{$CssName}", '', time()); //--- Main Company CSS 4 ADMINS --------------------------------------- if (IsCompanyVolunteer()) { //--- Not displaying to visitors ------------------------------------ $CssName = 'Company CSS for Image Gallery Metadata Tooltips (Volunteers Only).css'; wp_enqueue_style("CompanyCss4StaffOnly4ImageMetadata", "{$CssDir}{$CssName}", '', time()); } } add_action( 'wp_enqueue_scripts', 'CompanyHeaderAssets' );
2023-01-27 4 odpowiedzi
Отличный плагин. Действительно ускоряет сайт, но перед установкой делайте резервную копию, может конфликтовать с другими плагинами, но в целом достоит внимания. БД хорошо чистит от мусора.
Przeczytaj 88 recenzji

Kontrybutorzy i deweloperzy

„Simple Custom CSS and JS” jest oprogramowaniem open source. Poniższe osoby miały wkład w rozwój wtyczki.

Zaangażowani

Wtyczka „Simple Custom CSS and JS” została przetłumaczona na 16 języków. Podziękuj tłumaczom za ich wkład.

Przetłumacz wtyczkę “Simple Custom CSS and JS” na swój język.

Interesuje cię rozwój wtyczki?

Przeglądaj kod, sprawdź repozytorium SVN lub czytaj dziennik rozwoju przez RSS.

Rejestr zmian

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

3.41

  • 10/05/2022
  • Feature: code folding in the editor

3.40

  • 06/10/2022
  • Feature: keep the user-set editor’s height upon page loads and custom code saves
  • Feature: save the custom code upon „Ctrl-S” in the editor
  • Tweak: admin side adjustments for RTL languages

3.39

  • 03/16/2022
  • Fix: load the CodeMirror options from a localized variable
  • Tweak: add the „ccj_code_editor_settings” filter for modifying the editor’s options

3.38.1

  • 12/02/2021
  • Fix: revert the code related to the compatibility with the HTML Editor Syntax Highlighter plugin

3.38

  • 11/09/2021
  • Fix: escape labels on the „Add new custom code” page
  • Feature: keep the last cursor position in the editor and let the editor get focus when the page loads

3.37

  • 07/12/2021
  • Fix: allow the TablePress plugin to load its JS files on the „Add custom code” page in admin
  • Feature: highlight active line in the editor
  • Feature: add „Ctrl + J” shortcut to the editor for jumping to the matching tag

3.36

  • 02/23/2021
  • Fix: fatal error with PHP8.0

3.35

  • 01/19/2021
  • Tweak: change dummy revision dates to fictional dates before 2000
  • Fix: replace the deprecated postL10n JS object with wp.i18n
  • Fix: add „tipsy-no-html” to the tooltips on the settings page

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

  • 07/08/2020
  • Fix: add „Cmd + ” editor shortcuts for MacOS computers
  • Fix: use file_get_contents instead of include_once to load the custom codes
  • 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

  • 03/21/2020
  • Declare compatibility WooCommerce 4.1
  • 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

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

3.16

  • 22 kwietnia 2018
  • Fix: „The link you followed has expired” on custom code save if the WP Quads Pro plugin is active
  • Poprawka: Ostrzeżenie dla PHP 7.2
  • Change: add/remove the „Web Designer” role only on activating/deactivating the option in the Settings page

3.15

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

3.14

  • 2 kwietnia 2018
  • Nowa funkcja: permalink dla wstawek
  • Poprawka: Ustawienie skryptów ze stopki na wyższy priorytet
  • Aktualizacja tłumaczenia na język francuski
  • 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

  • 12 stycznia 2018
  • Nowa funkcja: dodanie opcji „Zachowaj tagi HTML, nie konwertuj ich na znaki”

3.12

  • 3 stycznia 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

  • 3 stycznia 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

  • 15 grudnia 2017
  • Poprawka: https://wordpress.org/support/topic/broken-layout-of-code-snippet-type-color-tag-css-html-js-on-main-list-table/
  • Nowa funkcja: filtrowanie po typie wstawki z kodem
  • Nowa funkcja: dodanie sortowania do kolumny „Modyfikowane”
  • 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

  • 1 grudnia 2017
  • Nowa funkcja: dodanie informacji o dacie ostatniej edycji pod edytorem
  • Fix: jump to line when searching
  • Tweak: add message that the Code Revision data is dummy

3.8

  • 19 października 2017
  • Declare compatibility with WooCommerce 3.2 (https://woocommerce.wordpress.com/2017/08/28/new-version-check-in-woocommerce-3-2/)
  • Poprawka: uniknięcie konfliktów z innymi wtyczkami, które implementują edytor CodeMirror
  • Aktualizacja biblioteki CodeMirror do wersji 5.28

3.7

  • 6 października 2017
  • Dodanie tłumaczenia francuskiego i polskiego

3.6

  • 7 września 2017
  • Poprawka: kompatybilność z wtyczką CSS Plus

3.5

  • 25 sierpnia 2017
  • Refaktoring kodu wtyczki
  • Add activate/deactivate link to row actions and in Publish box
  • Make the activate/deactivate links work with AJAX
  • Dodanie tłumaczenia na język turecki

3.4

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

3.3

  • 23 czerwca 2017
  • Nowa funkcja: opcja dodania wstawek z kodem do strony logowania

3.2

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

3.1

  • 14 maja 2017
  • Funkcja: przygotowanie wtyczki do tłumaczeń

3.0

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

2.10

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

2.9

  • 5 grudnia 2016
  • Compatibility with WP4.7. The „custom HTML code” was not showing up anymore

2.8

  • 9 października 2016
  • Feature: add search within the editor accessible with Ctrl+F
  • Feature: make the inactive rows opaque

2.7

  • 4 września 2016
  • Fix: there was a space in the htmlmixed.%20js url
  • Feature: make the editor resizable

2.6

  • 31 sierpnia 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

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

2.4

  • 1 sierpnia 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

  • 22 czerwca 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

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

2.1

  • 24 kwietnia 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

  • 11 kwietnia 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

  • 26 marca 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
  • Fix: The javascript code was not shown
  • 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 grudnia 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

  • 6 grudnia 2015
  • Initial commit