È un po ‘ complicato determinare come aggiungere CSS o Javascript esterni a WordPress se sei solo un utente WP principiante. Quindi, prima di iniziare a dare alcune istruzioni sull’aggiunta di CSS / Javascript esterni al tuo sito Web, vorrei spiegare le due aree principali in cui potrebbe essere necessario utilizzare CSS esterni:
1) Personalizzazioni del sito Web
L’utilizzo di CSS e Javascript esterni è un’ottima scelta per personalizzare il tuo sito Web perché puoi facilmente mantenere il codice, modificare e mantenere i file e/o i codici. Tuttavia, dobbiamo dividere queste personalizzazioni in due tipi principali: mini personalizzazioni e personalizzazioni più grandi. Tornerò a questi tipi più tardi e spiegherò quali modi di aggiungere codici CSS / JS saranno migliori per situazioni diverse.
2) Integrazioni di servizi di terze parti
Come tutti sappiamo, alcuni dei servizi forniscono file CSS e JS che devono essere aggiunti al tuo sito Web come servizi di moduli, caselle di chat, aggiunta di codice pixel di Facebook e persino Google Analytics. Ad esempio, supportiamo Google Analytics e in realtà il processo di integrazione nelle nostre opzioni a tema è molto semplice e semplice, ma se vuoi tenere traccia di alcune analisi diverse e in un modo diverso, devi utilizzare i codici esterni generati da Google.
3 Modi per aggiungere CSS / JavaScript esterno
Utilizzando le opzioni del tema
Se hai bisogno di aggiungere altri codici o aggiungere un CSS e Javascript rapido e piccolo per personalizzare il tuo sito web, Theme Options è la soluzione più appropriata. È una funzionalità integrata ed è facilmente accessibile dalla tua dashboard di WordPress.
Vai a Jupiter > Opzioni del tema > Avanzate > CSS personalizzato o sezione JS personalizzata.
Si noti che aggiungendo CSS esterno o JavaScript nelle opzioni del tema, non è possibile aggiungere un codice che inizia con <script></script> nella sezione JS personalizzata. Devi rimuovere lo script < ></script>nel tuo codice perché il codice che scrivi nella sezione JS personalizzata sta già pubblicando con un tag <script></script>.
PRO:
- Il modo migliore per personalizzare le piccole cose con CSS e Javascript in Jupiter
- Il modo migliore per aggiungere codici CSS e Javacscript di piccole e medie dimensioni in Jupiter
- Nessuna installazione / installazione richiesta-è già integrata!
CONTRO:
- Più difficile da mantenere e aggiornare
- Non è possibile aggiungere file direttamente (.css o .file js esternamente) a meno che tu non conosca la codifica AJAX.
- Non è possibile selezionare se il codice verrà inserito in wp_header o wp_footer.
Utilizzo di un plugin
I plugin sono i nostri fedeli aiutanti durante l’utilizzo di WordPress. Puoi anche aggiungere i tuoi codici con un plugin come Inserisci intestazioni e piè di pagina. È un ottimo modo per aggiungere i tuoi codici al tuo sito web e funziona allo stesso modo della nostra funzionalità integrata. La cosa buona con questo plugin è che puoi selezionare se vuoi aggiungere il tuo codice al piè di pagina o all’area dell’intestazione, che a volte è cruciale per alcune integrazioni.
A differenza della nostra soluzione integrata, puoi aggiungere tag <script></script> nel plugin Inserisci intestazioni e piè di pagina.
PRO:
- È possibile selezionare la posizione del codice
- Ottima alternativa alla nostra soluzione integrata
- Modo semplice e veloce per aggiungere Pixel di Facebook o codici personalizzati di Google Analytics.
- Ottimo modo per integrazioni di terze parti
CONTRO:
- Ha bisogno di installazione / installazione del plugin
- Difficile da mantenere e aggiornare
- Non è possibile aggiungere file direttamente come la nostra soluzione integrata.
Utilizzo del tema Child e dello stile Enqueqe
L’utilizzo del Tema Child è ciò che consigliamo se si desidera effettuare personalizzazioni di medie e grandi dimensioni perché è il modo più sicuro per personalizzare il proprio sito web. Con il tema bambino, sarete in grado di mantenere i codici e aggiornare i file del tema di base facilmente.
È possibile installare il nostro tema figlio ufficiale o è possibile creare il proprio. È quindi possibile iniziare ad aggiungere i codici CSS e personalizzare il tuo sito web subito in Apparenza > Editor. Tuttavia, se si desidera aggiungere file CSS esterni e file Javascripts, è necessario chiamarlo e scrivere alcuni codici nelle funzioni.PHP.
Ecco come va:
- Prepara il tuo file CSS o Javascript o se si tratta di una fonte remota, prepara il link.
- Crea un file denominato functions.php
- Aggiungi il seguente codice nelle funzioni.php
<?la funzione add_theme_codes () {
wp_enqueue_style( ‘style’, get_stylesheet_directory_uri().’/myexternalcode.css’, ‘tutti’);
}
add_action (‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
Con questo codice, stai creando una nuova azione per il tuo foglio di stile e chiamandola dalla directory del tema figlio. Diciamo che hai una ” usanza.css” file che deve essere aggiunto al tuo sito web.
Aggiungi quel file in wp-content / themes / jupiter-child tramite FTP, quindi crea una funzione.file php. Quindi, aggiungi il codice sopra e cambia il ‘ / myexternalcode.css ‘ a ‘ personalizzato.css ‘ o qualunque sia il tuo nome di file. Infine, devi aggiungere le tue funzioni.php anche al tema del tuo bambino.
Ecco un altro esempio, se non si dispone di un file ma è necessario aggiungere un’origine remota:
<?php
funzione add_theme_codes() {
wp_enqueue_style( ‘style’, ‘https://code.jquery.com/jquery-3.2.1.js’, ‘tutti’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
Nell’esempio sopra, non abbiamo usato get_stylesheet_directory_uri() perché il file sorgente è remoto. Inoltre, puoi chiamare diversi file dal tuo server utilizzando collegamenti come quelli sopra.
PRO:
- Migliore per tutti i tipi di personalizzazioni
- Migliore per terze parti e Complesse Integrazioni
- Facile da mantenere e modificare
- È possibile aggiungere file locali o remoti direttamente
- Uno dei metodi più sicuri per gli aggiornamenti
CONTRO:
- Ha bisogno di un po ‘di impostazione
- Richiede un po’ di conoscenza di programmazione (o almeno si dovrebbe essere disposti a imparare)
- Non è il modo più veloce per piccole personalizzazioni
Quale è la migliore opzione per le diverse situazioni?
Se si desidera apportare modifiche rapide o personalizzazioni, Opzioni tema sarà l’opzione migliore per voi. Tuttavia, se si desidera maggiore flessibilità e controllo sul codice e sulla posizione del codice e si hanno ancora personalizzazioni di fascia medio-piccola, inserire intestazioni e piè di pagina funzionerà bene per voi.
Ma, se vuoi fare personalizzazioni di grandi dimensioni, integrazioni di terze parti o se vuoi avere un ambiente di sviluppo gestibile, il Tema Figlio è la soluzione migliore. Se hai bisogno di ulteriore aiuto nell’aggiunta di CSS o Javascript esterni al tuo sito web, puoi sempre richiedere l’aiuto di Artbees Care.
