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 ekranów

  • 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.

FAQ

Instrukcja instalacji
  • 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.
Wymagania

PHP >= 5.3

Obsługiwane przeglądarki
* Firefox – w wersji 4 lub wyższej
* Chrome – dowolna wersja
* Safari – wersja 5.2 lub wyższa
* Internet Explorer – wersja 8 lub wyższa
* Opera – wersja 9 lub wyższa

Co jeśli chcę dodać wiele wstawek zewnętrznych z kodem CSS?

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ą.

Czy ta wtyczka wpływa na czas ładowania strony?

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.

Czy ta wtyczka weryfikuje kod, który wprowadzam za pomocą edytora?

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.

Czy mogę używać preprocesora CSS takiego jak LESS lub 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’);
}

Czy mogę używać reguł CSS takich jak @import oraz @font-face?

Tak.

Kto może zarządzać wstawkami z kodem we wtyczce?

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.

Kompatybilność z wtyczką qTranslateX
  • W momencie gdy wtyczka qTranslate X dodaje do Twoich wstawek kod pokroju [:] czy też [:en], to musisz usunąć typ posta custom-css-js z ustawień qTranslate. Ten zrzut ekranu ilustruje, jak to zrobić.
Moja strona działa na HTTPS, ale wstawki są podlinkowane do strony za pomocą HTTP

Adresy URL do podlinkowania wstawek są tworzone tak jak adresy URL dla plików multimedialnych (z Biblioteki Mediów), czyli z użyciem opcji Adres WordPressa. Możesz ją znaleźć w panelu admina -> Ustawienia -> Ogólne, jak na tym zrzucie ekranu. Jeśli Adres WordPressa nie jest podany z HTTPS, wtedy wstawki i inne media nie będą zawierały https w swoich URL-ach.

Recenzje

Przeczytaj 51 recenzji

Kontrybutorzy i deweloperzy

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

Kontrybutorzy

Wtyczka “Simple Custom CSS and JS” została przetłumaczona na 1 język. Thank you to the translators for their contributions.

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

Interesuje cię rozwój wtyczki?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Log zmian

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

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

1.4

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

  • 27 grudnia 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

  • 14 grudnia 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