este puțin dificil să determinați cum să adăugați CSS extern sau Javascript la WordPress dacă sunteți doar un utilizator WP începător. Așadar, înainte de a începe să oferim câteva instrucțiuni despre adăugarea CSS / Javascript extern pe site-ul dvs. web, aș dori să explic cele două domenii principale în care ar putea fi necesar să utilizați CSS extern:
1) personalizările site-ului
utilizarea CSS și Javascript externe este o alegere excelentă în personalizarea site-ului dvs. web, deoarece puteți menține cu ușurință codul, edita și păstra fișierele și/sau codurile. Cu toate acestea, trebuie să împărțim aceste personalizări la două tipuri principale – mini personalizări și personalizări mai mari. Voi reveni la aceste tipuri mai târziu și voi explica ce modalități de adăugare a codurilor CSS / JS vor fi mai bune pentru diferite situații.
2) integrări de servicii terță parte
după cum știm cu toții, unele dintre servicii oferă fișiere CSS și JS care trebuie adăugate pe site-ul dvs. web, cum ar fi servicii de formular, casete de Chat, Adăugarea de cod pixel Facebook și chiar Google Analytics. De exemplu, susținem Google Analytics și, de fapt, procesul de integrare în opțiunile noastre tematice este foarte ușor și simplu, dar dacă doriți să urmăriți câteva analize diferite și într-un mod diferit, trebuie să utilizați codurile externe generate de Google.
3 moduri de a adăuga CSS / JavaScript extern
folosind opțiunile tematice
dacă trebuie să adăugați alte coduri sau să adăugați un CSS rapid și mic și Javascript pentru a personaliza site-ul dvs. web, opțiunile tematice sunt soluția mai potrivită. Este o caracteristică încorporată și este ușor accesibilă din tabloul de bord WordPress.
du-te la Jupiter > Opțiuni temă > avansat > CSS personalizat sau personalizat JS secțiune.
rețineți că în adăugarea CSS extern sau JavaScript în opțiunile tematice, nu puteți adăuga un cod care începe cu <script></script> în secțiunea JS personalizată. Trebuie să eliminați < script ></script>în codul dvs., deoarece codul pe care îl scrieți în secțiunea JS personalizată publică deja cu o etichetă <script></script>.
Pro:
- cel mai bun mod de a personaliza lucruri mici, cu CSS și Javascript în Jupiter
- cel mai bun mod de a adăuga mici la mid-range CSS și coduri Javacscript în Jupiter
- nici o configurare / instalare necesară – este deja built-in!
contra:
- mai greu de întreținut și actualizat
- nu puteți adăuga fișiere direct (.css sau .fișiere JS extern) dacă nu știți AJAX codificare.
- nu puteți selecta dacă codul va fi împins în wp_header sau wp_footer.
utilizarea unui Plugin
pluginurile sunt ajutoarele noastre loiale în timp ce folosim WordPress. De asemenea, puteți adăuga codurile dvs. cu un plugin, cum ar fi inserarea anteturilor și subsolurilor. Este o modalitate excelentă de a adăuga codurile pe site-ul dvs. web și funcționează la fel ca funcția noastră încorporată. Lucrul bun cu acest plugin este că puteți selecta dacă doriți să adăugați codul în subsol sau în zona antetului, ceea ce este uneori crucial pentru unele integrări.
spre deosebire de soluția noastră încorporată, puteți adăuga <script></script> etichete în Inserare anteturi și subsoluri plugin.
Pro:
- puteți selecta locația codului
- alternativă excelentă la soluția noastră încorporată
- modalitate rapidă și ușoară de a adăuga coduri Facebook Pixel sau Google Analytics personalizate.
- modalitate foarte bună pentru integrări terțe părți
contra:
- are nevoie de plugin instalare / configurare
- greu de întreținut și actualizat
- nu puteți adăuga fișiere direct ca soluția noastră încorporată.
utilizarea temei copil și a stilului Enqueqe
utilizarea temei copil este ceea ce vă recomandăm dacă doriți să faceți unele personalizări de dimensiuni medii până la mari, deoarece este cel mai sigur mod de a vă personaliza site-ul web. Cu tema copil, veți putea să vă mențineți codurile și să vă actualizați cu ușurință fișierele tematice de bază.
puteți instala tema noastră oficială pentru copii sau vă puteți crea propria dvs. Puteți începe apoi să adăugați codurile CSS și personaliza site-ul dvs. imediat în aparență > Editor. Cu toate acestea, dacă doriți să adăugați fișiere CSS externe și fișiere Javascripts, trebuie să o apelați și să scrieți câteva coduri în funcții.php.
Iată cum merge:
- ia CSS sau Javascript fișier gata sau dacă este o sursă de la distanță, pentru a primi link-ul gata.
- creați un fișier numit funcții.php
- adăugați următorul cod în funcții.php
<?php
funcția add_theme_codes () {
wp_enqueue_style (‘stil’, get_stylesheet_directory_uri ().’/codul meu extern.css’, ‘toate’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
cu acest cod, creați o nouă acțiune pentru foaia dvs. de stil și o apelați din Directorul temă copil. Să presupunem că aveți un ” obicei.css ” fișier care trebuie adăugat pe site-ul dvs. web.
adăugați acel fișier în wp-content/themes / jupiter-child prin FTP, apoi creați o funcție.fișier php. Apoi, adăugați codul de mai sus și schimbați ‘/myexternalcode.css ‘ la ‘ personalizat.css ‘ sau orice nume de fișier este. În cele din urmă, trebuie să adăugați funcțiile.php la tema copilului prea.
Iată un alt exemplu, dacă nu aveți un fișier, dar trebuie adăugată o sursă la distanță:
<?php
funcția add_theme_codes () {
wp_enqueue_style (‘stil’, ‘ https://code.jquery.com/jquery-3.2.1.js’, ‘toate’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
în exemplul de mai sus, nu am folosit get_stylesheet_directory_uri() deoarece fișierul sursă este la distanță. De asemenea, puteți apela diferite fișiere de pe serverul dvs. utilizând linkuri precum cele de mai sus.
Pro:
- cel mai bun pentru toate tipurile de personalizări
- cel mai bun pentru integrări terțe și complexe
- ușor de întreținut și editat
- puteți adăuga fișiere locale sau la distanță direct
- una dintre cele mai sigure metode pentru actualizări
contra:
- are nevoie de un pic de configurare
- necesită un pic de cunoștințe de codificare (sau cel puțin ar trebui să fie dispus să învețe)
- nu cel mai rapid mod de personalizări mici
care este cea mai bună opțiune pentru situații diferite?
dacă doriți să faceți modificări sau personalizări rapide, opțiunile tematice vor fi cea mai bună opțiune pentru dvs. Cu toate acestea, dacă doriți mai multă flexibilitate și control asupra codului și locației codului dvs. și aveți în continuare personalizări mici până la medii, introduceți anteturile și subsolurile vor funcționa bine pentru dvs.
dar, dacă doriți să faceți personalizări mari, integrări terțe sau dacă doriți să aveți un mediu de dezvoltare care poate fi întreținut, tema copil este cel mai bun pariu. Dacă aveți nevoie de ajutor suplimentar pentru a adăuga CSS sau Javascript extern pe site-ul dvs. web, puteți oricând să solicitați ajutorul Artbees Care.
