to trochę trudne, aby określić, jak dodać zewnętrzny CSS lub Javascript do WordPress, jeśli jesteś tylko początkującym użytkownikiem WP. Zanim więc zaczniemy podawać instrukcje dotyczące dodawania zewnętrznego CSS / Javascript do twojej witryny, chciałbym wyjaśnić dwa główne obszary, w których może być konieczne użycie zewnętrznego CSS:
1) dostosowania witryny
Korzystanie z zewnętrznych CSS i Javascript jest doskonałym wyborem w dostosowywaniu witryny, ponieważ można łatwo utrzymać kod, edytować i przechowywać pliki i/lub kody. Musimy jednak podzielić te dostosowania na dwa główne typy – mini dostosowania i większe dostosowania. Wrócę do tych typów później i wyjaśnię, które sposoby dodawania kodów CSS / JS będą lepsze dla różnych sytuacji.
2) integracje usług innych firm
jak wszyscy wiemy, niektóre usługi zapewniają pliki CSS i JS, które należy dodać do witryny, takie jak usługi formularzy, pola czatu, Dodawanie kodu pikseli Facebooka, a nawet Google Analytics. Na przykład obsługujemy Google Analytics i faktycznie proces integracji w naszych opcjach tematycznych jest bardzo łatwy i prosty, ale jeśli chcesz śledzić różne analizy i w inny sposób, musisz użyć zewnętrznych kodów wygenerowanych przez Google.
3 sposoby dodawania zewnętrznych CSS / JavaScript
Korzystanie z opcji motywu
jeśli chcesz dodać inne kody lub dodać szybki i mały CSS i Javascript, aby dostosować swoją stronę, opcje motywu są bardziej odpowiednim rozwiązaniem. Jest to wbudowana funkcja i jest łatwo dostępna z pulpitu WordPress.
przejdź do Jupiter > opcje motywów > zaawansowane > Niestandardowy CSS lub niestandardowa sekcja js.
zauważ, że dodając zewnętrzny CSS lub JavaScript w opcjach motywu, nie możesz dodać kodu zaczynającego się od <skrypt></skrypt> w sekcji niestandardowe JS. Musisz usunąć skrypt<></script >w kodzie, ponieważ kod, który piszesz w sekcji Custom JS, jest już publikowany z tagiem<script></script >.
:
- najlepszy sposób na dostosowanie małych rzeczy za pomocą CSS i Javascript w Jupiter
- najlepszy sposób na dodanie małych i średnich kodów CSS i Javacscript w Jupiter
- nie wymaga konfiguracji / instalacji-jest już wbudowany!
:
- trudniej utrzymać i zaktualizować
- nie można dodawać plików bezpośrednio (.css lub .Pliki JS zewnętrznie), chyba że znasz kodowanie AJAX.
- nie możesz wybrać, czy kod zostanie wypchnięty w wp_header lub wp_footer.
Korzystanie z wtyczki
wtyczki są naszymi lojalnymi pomocnikami podczas korzystania z WordPressa. Możesz również dodać swoje kody za pomocą wtyczki, takiej jak Wstaw nagłówki i stopki. To świetny sposób na dodanie kodów do witryny i działa tak samo, jak nasza wbudowana funkcja. Dobrą rzeczą w tej wtyczce jest to, że możesz wybrać, czy chcesz dodać swój kod do stopki, czy do obszaru nagłówka, co czasami ma kluczowe znaczenie dla niektórych integracji.
w przeciwieństwie do naszego wbudowanego rozwiązania, możesz dodać tagi <script></script> we wtyczce Wstaw nagłówki i stopki.
plusy:
- możesz wybrać lokalizację kodu
- świetna alternatywa dla naszego wbudowanego rozwiązania
- szybki i łatwy sposób dodawania pikseli Facebooka lub niestandardowych kodów Google Analytics.
- świetny sposób na integrację z innymi firmami
wady:
- wymaga instalacji / konfiguracji wtyczki
- trudne do utrzymania i aktualizacji
- nie możesz dodawać plików bezpośrednio, jak nasze wbudowane rozwiązanie.
używanie motywu podrzędnego i stylu Enqueqe
używanie motywu podrzędnego jest tym, co zalecamy, jeśli chcesz dokonać dostosowań w średnim i dużym zakresie, ponieważ jest to najbezpieczniejszy sposób dostosowania witryny. Dzięki motywowi Podrzędnemu będziesz mógł łatwo utrzymywać kody i aktualizować Podstawowe pliki motywu.
możesz zainstalować nasz oficjalny motyw potomny lub stworzyć własny. Następnie możesz zacząć dodawać kody CSS i od razu dostosować swoją stronę w edytorze wygląd >. Jeśli jednak chcesz dodać zewnętrzne pliki CSS i pliki Javascripts, musisz je wywołać i napisać kilka kodów w funkcjach.php.
Oto Jak to jest:
- przygotuj plik CSS lub Javascript lub jeśli jest to zdalne źródło, przygotuj link.
- Utwórz plik o nazwie funkcje.php
- Dodaj następujący kod w funkcjach.php
<?php
function add_theme_codes () {
wp_enqueue_style (’style’, get_stylesheet_directory_uri ().’/myexternalcode.css’, 'all’);
}
add_action (’wp_enqueue_scripts’, 'add_theme_codes’ );
?>
za pomocą tego kodu tworzysz nową akcję dla swojego arkusza stylów i wywołasz ją z katalogu motywów podrzędnych. Powiedzmy, że masz ” zwyczaj.plik css”, który należy dodać do witryny.
Dodaj ten plik w wp-content/themes/jupiter-child przez FTP, a następnie utwórz funkcje.plik php. Następnie dodaj powyższy kod i zmień ’ / myexternalcode.css 'to’ custom.css ’ lub jakakolwiek jest Twoja nazwa pliku. Na koniec musisz dodać swoje funkcje.php do Twojego motywu podrzędnego.
oto kolejny przykład, jeśli nie masz pliku, ale trzeba dodać zdalne źródło:
<?php
function add_theme_codes () {
wp_enqueue_style (’style’, ’ https://code.jquery.com/jquery-3.2.1.js’, 'all’);
}
add_action (’wp_enqueue_scripts’, 'add_theme_codes’ );
?>
w powyższym przykładzie nie użyliśmy metody get_stylesheet_directory_uri (), ponieważ plik źródłowy jest zdalny. Możesz również wywoływać różne pliki z serwera, korzystając z linków takich jak te powyżej.
:
- najlepsze dla wszystkich rodzajów dostosowań
- najlepsze dla zewnętrznych i złożonych integracji
- łatwe w utrzymaniu i edycji
- możesz bezpośrednio dodawać pliki lokalne lub zdalne
- jedna z najbezpieczniejszych metod aktualizacji
wady:
- wymaga trochę konfiguracji
- wymaga trochę wiedzy o kodowaniu (lub przynajmniej powinieneś być chętny do nauki)
- nie jest to najszybszy sposób na małe dostosowania
która z nich jest najlepszą opcją w różnych sytuacjach?
jeśli chcesz dokonać szybkich zmian lub dostosowań, opcje motywu będą najlepszą opcją dla ciebie. Jeśli jednak chcesz uzyskać większą elastyczność i kontrolę nad kodem i lokalizacją kodu, a nadal masz małe i średnie dostosowania, Wstaw nagłówki i stopki będą działać dobrze dla ciebie.
ale jeśli chcesz dokonać dużych dostosowań, integracji innych firm lub jeśli chcesz mieć łatwe do utrzymania środowisko programistyczne, motyw potomny jest najlepszym wyborem. Jeśli potrzebujesz dalszej pomocy w dodaniu zewnętrznego CSS lub Javascript do swojej witryny, zawsze możesz skorzystać z pomocy Artbees Care.
