Dove inserire questo codice in WordPress? Struttura generale dei file del tema. Come inserire il codice HTML nella pagina Html

06.12.2021 Windows Phone

Inoltre, ci tengo subito a precisare che inseriremo il codice all'interno dell'articolo stesso, in modo che i nostri lettori possano copiarlo senza perdere tempo a digitare il testo stesso. Pertanto, aumenteremo la convenienza () della nostra risorsa, questa volta. E gli articoli sembreranno più professionali e rifiniti: sono due.

Vorrei anche notare che le informazioni in questo articolo saranno utili per le persone che, come ti diciamo, come fare vari tipi di aggiunte sul sito, o per gli utenti a cui piace semplicemente condividere informazioni utili. E non importa che questa informazione sia un codice 🙂 A proposito, ti svelerò un piccolo segreto, su questo progetto lo mostriamo usando il plugin Wp-Syntex.

Tu chiedi: "Perché usiamo questo particolare?" La risposta è semplice: non ci sono compagni per gusto e colore. Scherzo. Infatti, abbiamo scelto questo plugin perché è facile da usare, aggiunge perfettamente lo stile visivo a vari tipi di linguaggi di programmazione (css, html, java, javascript, perl, sql, ecc.), e non sovraccarica il nostro server.

Bene, dal momento che mi sono lasciato sfuggire Wp-Syntex, usiamo il suo esempio e mostriamo come inserire codice negli articoli su WordPress.

Per prima cosa devi installare questo plugin. Abbiamo parlato di come farlo nell'articolo su . Pertanto, non descriverò questa azione qui.

Di conseguenza, avrai il seguente output:

Il codice che vuoi venga visualizzato

Inoltre, invece di php in questo codice, puoi inserire un altro linguaggio di programmazione, come css o java. Allo stesso tempo, lo stile dell'aspetto cambierà.

Funzioni aggiuntive di Wp-Syntex

Se aggiungi l'attributo linea, ovvero il codice che dovrai inserire inizierà così:

Il codice che vuoi venga visualizzato

Spero che tu abbia notato la differenza?

C'è un altro piccolo attributo di cui potresti aver bisogno: questo è sfuggito... Ti consente di convertire i codici dei caratteri html direttamente nei caratteri stessi. Ad esempio, "& gt" viene convertito in ">". Affinché questa funzione funzioni, inserisci il seguente attributo nel tag "pre" di apertura:

sfuggito = "vero"

Di conseguenza, il tag inizierà in questo modo:

< pre lang= "php" line= "1" escaped= "true" >

Anche su Internet, ho trovato informazioni che è possibile installare un altro plug-in (WP-Syntax Button), che funziona insieme al nostro plug-in e aggiunge un pulsante di inserimento del codice all'editor WP. Non ero pigro e ho deciso di protestare.

Subito dopo averlo installato, mi sono allarmato per il fatto che non fosse stato aggiornato per molto tempo e non fosse stato testato con la nostra versione di Wordpress. Beh, cosa posso dire, le mie paure erano giustificate.

Dopo aver attivato il pulsante WP-Syntax, ho deciso di inserire uno script java in uno dei nostri articoli. Ho fatto tutto come indicato nelle istruzioni e nei consigli di montagna. Ho inserito lo script nell'articolo, l'ho selezionato e ho fatto clic sul pulsante "codice".

Quindi ha indicato il linguaggio di programmazione e il numero di riga da cui dovrebbe iniziare l'output dello script.

Potresti chiedere, perché ho scritto di questo esperimento in questo articolo? Con questo volevo dire che quando cerchi qualche informazione su Internet, fai attenzione alla data di pubblicazione. Dopotutto, c'è un'alta probabilità che le informazioni nel vecchio articolo fossero rilevanti diversi anni fa, ma al momento semplicemente non funzionano e la sua applicazione o implementazione può portare alla vulnerabilità del tuo progetto.

Sul nostro blog, cerco di mantenere aggiornato tutto il materiale, di seguire costantemente gli aggiornamenti e, se necessario, di apportare modifiche agli articoli già scritti.

Se vuoi ricevere informazioni aggiornate per te stesso via e-mail, allora te lo consiglio.

Video "Come inserire codice HTML in un articolo"

Amici, se qualcuno preferisce vedere come si fa, ho registrato un video per voi. E lascia che ti ricordi che abbiamo anche un canale youtube a cui puoi anche iscriverti.

Articoli Correlati:

Bene, spero che l'articolo si sia rivelato non complicato e sono riuscito a dirti in dettaglio come puoi inserire codice html in un sito Web senza problemi inutili.

Non trascurare l'aspetto estetico del tuo blog. Dopotutto, il nostro lettore, come nella vita, si incontra sui vestiti e si vede secondo la mente.

Questo è tutto per me!

Ciao ciao!

Cordiali saluti, Anton Kalmykov

Parliamo di come inserire il codice nel sito, come inserire il codice html, il codice contatore, il codice script di terze parti in Artisteer. Nel programma stesso, il codice può essere inserito in due posti, il primo è quando si crea il piè di pagina facendo clic sul pulsante "testo", e il secondo è nella parte inferiore della pagina, quando si impostano le impostazioni di esportazione, il " scheda "Descrizione". In quest'ultimo è ancora più comodo inserirlo dopo che il template è stato creato.

Come inserire il codice contatore

Codice contatore può essere inserito in fondo alla pagina nel luogo indicato nell'immagine, questo è il luogo più logico.
Nei modelli Codice contatore Joomla può essere inserito aprendo la pagina index.php della cartella template con il blocco note. Troviamo in fondo alla riga:

e al posto della riga "Designed by C'è un'altra possibilità inserire il modulo con il codice in posizione di debug per fare ciò, creare un modulo libero (come descritto di seguito) e inserire il codice al suo interno.

Nei modelli Codice contatore WordPress in questo posto (in fondo alla pagina) puoi inserire aprendo il file footer.php del template realizzato e trovando le righe:

Sostituendo la linea,

Codice PHP:

Offerto da< a href= "http://wordpress.org/" target= "_blank" >WordPresse< a href= "http://www.artisteer.com/?p=wordpress_themes" target = "_blank"> Tema WordPresscreato con Artisteer

Al codice del tuo contatore.

Nei modelli Codice contatore Drupal potere inserire aprendo la pagina page.tpl.php del template realizzato sostituendo il codice in fondo:

Codice PHP:

" " ... t ("Drupal"). "". t ("e"). "Tema Drupal"... t ("creato con"). "Artista"; ?>.

Sul codice del contatore o del pulsante.

Inserisci il codice dello script, codice html puoi anche inserire nel modulo, e sebbene queste siano domande sull'utilizzo di un CMS specifico, ci soffermeremo su alcune di esse.

Inserisci il codice HTML nel modulo Joomla

Per inserire il codice in Joomla 1.5 (in joomla 1.7 è inserito in modo simile), devi creare un nuovo modulo HTML, nel pannello di amministrazione apri Estensioni -> Gestione moduli -> pulsante crea un modulo -> seleziona Codice HTML personalizzato -> pulsante successivo. Successivamente, arriviamo al creato da noi modulo mod_custom Fissiamo la posizione, compiliamo i dati. Di seguito vediamo l'editore. Nell'editor, fai clic sul pulsante HTML:

E inserisci lo script o il codice del banner di cui abbiamo bisogno. Nota: si noti che viene utilizzato l'editor TinyMSE, se è stato installato un altro editor è necessario passare a TinyMSE se non è presente alcun pulsante HTML nel pulsante HTML installato.

Ciao ragazzi!

Oggi ho deciso di toccare un argomento che non smetterà mai di essere rilevante tra i giovani creatori di siti web.

È sempre necessario personalizzare i siti dopo che sono stati creati. Alcune delle impostazioni vengono eseguite modificando i file del modello di skin installato. Ad esempio, è necessario inserire un codice che visualizzi record simili. Ma dove inserirlo?

Molto spesso i neofiti fanno queste domande. Sono anche preoccupati per altri problemi simili, la cui soluzione, in sostanza, è esattamente la stessa. Inoltre, nei miei futuri articoli, ricorrerò spesso all'inserimento di codici in vari punti del template. Pertanto, questo materiale è più utile che mai.

In questo articolo, ti mostrerò come è molto facile per te definire il punto nel tuo modello WordPress in cui devi inserire qualsiasi codice. Prenderò in considerazione anche altri punti importanti che potrebbero interessarti nella fase iniziale.

Iniziamo dall'alto e guardiamo i file che potresti dover modificare se desideri inserire codici con le penne anziché utilizzare i plug-in, perché esiste una tale opzione. Non lo accolgo, ma per i più pigri descriverò tali plugin nei seguenti articoli.

All'inizio, do una lezione video, poiché senza di essa sarà difficile capire il materiale presentato in formato testo di seguito.

Ora spiegherò tutto in dettaglio in formato testo.

File responsabili dell'output di ogni tipo di pagina

Se hai letto molti articoli su altri blog sull'implementazione di alcune funzioni utilizzando codici (script), allora sei sicuro al 100% di aver visto frasi come:

Incolla questo codice nel file responsabile della visualizzazione della pagina principale;
Incolla questo codice nel file responsabile della visualizzazione di record e altri.

Ci sono molti file in cui potrebbe essere necessario inserire dei codici. Ma cosa sono questi file? Tutto è molto semplice.

Output della pagina principale - index.php;
Output dei record - file single.php;
Visualizzazione delle pagine - file page.php;
Visualizzazione di archivi e categorie - archive.php;
Output piè di pagina - footer.php;
Risultato della pagina di ricerca - search.php;
Output della barra laterale - sidebar.php;
File di stili - style.css;
Il file di output della pagina 404 è 404.php.

Ora, quando ti dicono che devi inserire il codice in questo o quell'altro file, saprai dove cercare.

Resta solo da rispondere alla domanda, come determinare il posto giusto in ciascuno dei file?

Determina il luogo in cui inserire il codice

Per prima cosa, esaminiamo i luoghi che non hanno bisogno di essere identificati. Saranno tutti uguali indipendentemente dal modello.

Il primo posto, identico per tutti i modelli, è l'area nel file Header.php. Questi sono i tag di apertura e chiusura. .

Alcuni script sono sempre inseriti tra questi tag, che dovrebbero funzionare per tutte le pagine del sito. Cioè, abbiamo inserito uno script tra questi tag, ad esempio i pulsanti social e funzionano su tutte le pagine del sito, dove li mostreremo.

Questi tag si trovano nella parte superiore del file Header.php.

Il contenuto tra di loro sarà diverso per tutti, poiché tutto dipende dal modello.

Se ti viene detto di incollare questo codice tra i tag head di apertura e chiusura, copia il codice, cerca un'area simile nel file modello e incollalo tra quei tag.

Il secondo posto, anch'esso identico per tutti i modelli, è nel file footer.php responsabile della visualizzazione del piè di pagina.

Gli script possono essere collegati non solo inserendoli tra i tag nel file Header.php. Puoi anche caricarli tramite il file footer.php, velocizzando così il caricamento della pagina del sito.

Il fatto è che quando una pagina inizia a caricarsi, si carica dall'alto verso il basso. Se tutti gli script si trovano nella parte superiore della pagina, la visualizzazione del contenuto rallenterà, poiché il caricamento degli script richiede tempo.

Il nostro compito è mostrare il contenuto della pagina, il più rapidamente possibile, sia ai visitatori che ai motori di ricerca. In questo caso, è consigliabile caricare gli script alla fine della pagina per mostrare prima il contenuto e poi caricare tutto il resto.

Per fare ciò, è necessario aprire il file footer.php e inserire lo script prima del tag body di chiusura. Si trova alla fine del contenuto del file, poiché è responsabile della fine dell'area della pagina.

Come puoi vedere, ho portato tutti gli script in quest'area, prima del tag di chiusura(evidenziato con una cornice blu). A proposito, li ho tirati fuori caricandoli da file e non inserendo gli script stessi in quest'area. Dopodiché, ho velocizzato molto il mio blog. Ci sarà un articolo separato su come farlo. Attesa!

Si spera che quando ti verrà detto di inserire il codice in queste aree, lo farai senza problemi.

Passiamo a una domanda più complessa e proviamo a imparare come determinare i posti in altri file modello in cui sono inseriti vari altri codici. In genere, questi codici includono:

Visualizzazione di post simili;
Visualizzazione del modulo di iscrizione;
Visualizzazione dei pulsanti social e così via.

Tutte queste cose vengono inserite dopo la parte principale del contenuto, cioè dopo la fine dell'articolo. Ognuno ha un codice modello diverso e, quindi, una risposta universale alla domanda "Dove va a finire il codice di output del mio articolo?" semplicemente no.

Ma puoi facilmente definire la fine del codice, dopo di che devi implementare la funzione che ti serve. Ho già mostrato parzialmente questo metodo nell'articolo sulla scelta di un template WordPress (). Ho quindi utilizzato la funzionalità standard del browser Internet.

Per comprendere meglio l'intera essenza di questo metodo, consiglio vivamente di guardare il video all'inizio di questo post. In esso, ho mostrato come tutto accade in tempo reale. Bene, ora cercherò di descriverlo nel modo più chiaro possibile.

Lo mostrerò utilizzando il browser Google Chrome come esempio. In altri browser è disponibile anche questa funzione, potrebbe essere chiamata in modo leggermente diverso.

Google Chrome: visualizza il codice dell'elemento;
Firefox: esplora un elemento;
Opera - ispeziona un elemento.

Il principio in 3 browser è simile. Ora ti mostrerò come determinare dove visualizzare qualsiasi area in qualsiasi modello.

Vai alla visualizzazione del codice dell'elemento (Google Chrome). Fare clic con il tasto destro su un'area vuota della pagina.

Successivamente, viene visualizzato un pannello nella parte inferiore della pagina, che mostra l'intero codice sorgente della pagina, che possiamo modificare e osservare come cambierà la struttura e l'aspetto del modello in tempo reale. Ma le modifiche ai dati non vengono salvate. Per fare ciò, è necessario modificare i file del modello stessi.

Ecco come appare questo pannello.

Con la freccia, ho indicato una lente d'ingrandimento (lente d'ingrandimento), facendo clic sulla quale possiamo ispezionare la struttura del modello e determinare di quali blocchi è composto il nostro modello. Chiamo questa funzione un ispettore.

Dopo aver cliccato sull'ispettore, possiamo spostare il mouse sulla nostra pagina e vedremo che tutti gli elementi su cui passiamo il mouse iniziano ad essere evidenziati con uno sfondo colorato. Ad esempio, mostrerò uno screenshot dell'articolo sulla scelta di un modello. Lì ho passato il mouse sopra il titolo del post.

Se dobbiamo inserire il codice dopo l'output del nostro articolo, non sarà difficile intuire che dobbiamo ispezionare l'area del nostro modello e trovare un blocco che contenga tutto il contenuto dell'articolo. Puoi cercare sia la fine del blocco che l'inizio. Cioè, puoi ispezionare il modello dal basso e dall'alto.

Ma ecco un'osservazione ... Dobbiamo trovare non solo le righe dell'articolo, ma i blocchi in cui si trova il contenuto stesso, poiché non ci sono articoli nei file modello. C'è solo il codice che visualizza il contenuto ed è racchiuso in blocchi. È dopo il tag di blocco di chiusura

e dovrai incollare il codice.

Quindi, cosa stiamo facendo? Fai clic sull'icona della lente di ingrandimento e inizia a ispezionare l'area in cui si trova il nostro articolo. Devi trovare una tale parte della pagina quando viene evidenziata l'area dell'intero articolo. Questo sarà il blocco che visualizza il contenuto.

Ad esempio, ho creato un nuovo articolo con un contenuto ridotto per mostrare come verrà evidenziato questo blocco.

Dovresti anche curiosare per trovare il blocco che contiene i tuoi contenuti. Al passaggio del mouse, vedrai un piccolo suggerimento che mostra il nome di questo blocco.

Quando trovi una tale parte del modello, premi il pulsante del mouse e questa parte diventa attiva. Una riga di codice con questo blocco verrà automaticamente evidenziata nel pannello di visualizzazione del codice dell'elemento.

Come puoi vedere, questo blocco ha esattamente lo stesso nome del suggerimento al passaggio del mouse.

Quando conosciamo il nome del blocco in cui viene visualizzata la parte principale dell'articolo, possiamo andare al file richiesto e inserire il codice di cui abbiamo bisogno dopo questo blocco. Prendiamo come esempio un file di output post (single.php).

Lo apro in Blocco note e cerco una riga nel codice che inizia esattamente come nel pannello di visualizzazione del codice dell'elemento.

È molto comodo lavorare nell'editor del Blocco note, poiché quando si fa clic sul tag di apertura del blocco, viene evidenziato anche il tag di chiusura (mostrato nell'immagine sopra). Il tag di fine indica che questa è la fine dell'output del contenuto. È dopo di lui che possiamo inserire i nostri pulsanti social, i post correlati e altre funzioni.

Ho appena inserito i pulsanti social lì insieme al modulo per iscriverti agli aggiornamenti.

Ecco come vengono visualizzati nelle pagine.

Allo stesso modo, viene inserito in altri file modello (pagine, categorie, archivi ...).

Senza pratica, è improbabile che questo metodo di inserimento possa essere padroneggiato da testo e immagini. Pertanto, prendilo e provalo. Sono sicuro che tutto funzionerà. Anche per aiutare il video all'inizio dell'articolo.

Sulla determinazione del posto nel file modello per il successivo inserimento di quello desiderato in esso, quando l'abbiamo capito.

C'è un ultimo momento, che a questo punto vale la pena santificare.

Ci sono molte impostazioni che richiedono un intervento nel file functions.php del template. Ma, come inserire i codici in esso, devi anche capire.

Di norma su tutti i blog scrivono che l'inserimento va fatto proprio alla fine del file prima del tag di chiusura?>.

Ma cosa succede se questo tag non è nel file? Ad esempio, semplicemente non ce l'ho. Come essere in una situazione del genere? L'assenza di un tag di fine non significa che il file non sia valido. Il blog funziona. Quindi è tutto a posto.

In questo caso, propongo di fare il contrario: inserirlo nel codice all'inizio del file, prima del tag di apertura. Dai un'occhiata all'immagine qui sotto.

Il tag di apertura è evidenziato in rosso e il codice che è stato inserito è evidenziato in blu.

Questa è un'opzione. Puoi anche incollare il codice alla fine del file, ma prima dell'ultimo codice. In questo caso, devi capire almeno un po' dove inizia l'ultimo codice, per non tagliarlo.

È tutto. Se all'improvviso ti trovi nella stessa situazione con l'assenza di un tag di chiusura nel file funsctions.php, saprai come procedere.

Definizione degli stili visivi in un modello

Inoltre, noi stessi possiamo visualizzare gli stili di design per gli elementi della pagina e modificarli, oltre ad aggiungere i nostri. Lo stesso ispettore degli elementi aiuta in questo.

Quando troviamo l'elemento richiesto e facciamo clic su di esso, gli stili per il blocco (elemento) selezionato vengono visualizzati nell'area destra del pannello di visualizzazione del codice. Ti mostrerò gli stili per lo stesso blocco di articoli discusso sopra.

Se vogliamo modificare questi stili in tempo reale e vedere come apparirà questo o quell'elemento, possiamo cambiarli direttamente in questo pannello. Basta fare clic sui valori degli stili desiderati e modificarli.

Ma le modifiche saranno valide solo fino al primo aggiornamento della pagina. Per applicare questi stili, devi aggiungerli al foglio di stile del modello. In una delle immagini sopra, ho mostrato con una cornice blu un'area che mostra il nome del file in cui sono scritti questi stili, nonché la riga esatta da cui iniziano.

Pertanto, apri il foglio di stile style.css e cerca la riga 890 nel mio caso.

Qui puoi modificarli. Salva il file e caricalo sull'hosting.

Nota che modifico tutti i file sul mio computer. In questo caso, utilizzo programmi esterni, che consentono di annullare eventuali modifiche in caso di problemi. Lo stesso vale per vari esperimenti con codici e script: tutto è attivo.

Ti consiglio vivamente di eseguire anche modifiche simili di qualsiasi file sul tuo computer. Per fare ciò, devi prima scaricare i file sul tuo computer dal tuo hosting utilizzando un client ftp. Ho scritto di questo in. E poi apri i file con qualsiasi editor conveniente per te che possa aprirli. Uso Blocco note per questo scopo.

Questo conclude l'articolo. Ecco un processo così complicato per determinare dove inserire del codice o uno script. A prima vista, questa procedura può sembrare complicata. Ma tutto è molto semplice. Ci proverai un paio di volte e non farai queste domande.

Ovviamente puoi inserire codici e script nel tuo blog utilizzando appositi plugin, che prenderò sicuramente in considerazione nei prossimi articoli. Ma, per evitare di usarli, puoi fare tali azioni senza di loro, cosa che consiglio. In questo modo, eliminerai il carico non necessario sul sito, velocizzandolo e rendendolo più comodo da usare per i tuoi visitatori.

Tutti gli amici. Questo conclude. Aspetto le vostre domande nei commenti. Scopriamolo. Ci vediamo in nuovi materiali.

Cordiali saluti, Konstantin Khmelev.

Abbiamo pubblicato un nuovo libro, "Content Marketing sui social media: come entrare nella testa degli abbonati e innamorarsi del tuo marchio".

Ci sono molti strumenti là fuori per aiutarti a migliorare il tuo sito web, migliorare il tuo business online e migliorare il coinvolgimento dei clienti. Molti di questi strumenti sono gratuiti. Ma cosa succede se non sei uno sviluppatore web e non sai come installarli sul tuo sito? Questo è un grande ostacolo.

Per quanto ironico possa sembrare, un'azienda che sviluppa strumenti utili per il tuo sito ha anche un ostacolo alla propria prosperità: la necessità di imporre l'installazione del proprio codice agli utenti.

Proviamo a risolvere due problemi contemporaneamente parlando dei modi più comuni per inserire codice/snippet JavaScript (frammenti) per i siti web:

Su WordPress.
Pannelli di amministrazione auto-scritti (usando FTP di vecchia scuola).
In Squarespace.
Su Shopify.

Toccheremo Wix alla fine dell'articolo. Nella maggior parte dei casi, questa piattaforma non consente l'installazione di codici JavaScript o snippet, ma offre un'alternativa sotto forma di integrazioni per vari servizi.

Dove ottenere il codice di installazione

Vediamo dove trovare il codice di installazione utilizzando come esempio il servizio Crazy Egg.

Il processo è standard: inseriamo i dati di registrazione, dopo il caricamento entriamo nella dashboard. Lì stiamo cercando una sezione con un codice.

Come incorporare il codice in un sito WordPress

Puoi utilizzare un plug-in speciale: Tracking Code Manager.

Per inserire il Tracking Code Manager, vai al pannello di amministrazione del sito e cerca la sezione plugin nel pannello di controllo.

Seleziona la funzione "Aggiungi nuovo".

Apparirà una barra di ricerca sulla destra. Immettere "Tracking Code Manager", quindi fare clic su "Installa ora".

Dopo aver terminato l'installazione, è necessario assicurarsi che il plugin sia attivato. Andiamo alle impostazioni.

Fai clic su "Aggiungi nuovo codice di monitoraggio".

Puoi fare a meno del plugin Tracking Code Manager. In questo caso, la nostra opzione è incollare il codice nel file header.php del tema WordPress (ne parleremo più avanti).

Come installare il codice su WordPress.com

Un sito WordPress e un sito WordPress.com sono due cose diverse.

Un sito WordPress è un sito gestito da un CMS installato sul proprio server. Ciò significa che hai pagato per il nome di dominio (mionome.com) e per l'hosting.

Il sito WordPress.com è gratuito. Puoi registrare un sito Web su di esso senza pagare per l'hosting. In questo caso, l'URL del sito sarà: mionome.wordpress.com. Ci sono alcuni passaggi aggiuntivi che devi compiere per cambiare il tuo nome di dominio.

Quando esegui il tuo sito su WordPress.com, sei limitato nella scelta dei codici JavaScript e degli snippet che puoi installare. Il motivo è nel protocollo di sicurezza: gli sviluppatori non consentono agli utenti di inserire codici nella piattaforma. Ad esempio, gli sviluppatori di MySpace hanno permesso. Ovviamente è per questo che il sito è sceso dal 5° posto nel mondo al 1967 in sei anni.

Allo stesso tempo, WordPress.com offre agli utenti vari bonus per la gestione di un'impresa. Ad esempio, l'integrazione con Google Analytics o la possibilità di aggiungere pulsanti di social media. Ma in alcuni casi, questo potrebbe non essere sufficiente.

Come installare codici JavaScript e snippet su un pannello di amministrazione personalizzato

Utilizzo dell'FTP. Dovremo tornare alle origini.

Al giorno d'oggi, molti siti sono auto-scritti. Il sito auto-scritto è stato creato da zero, non utilizza CMS per la gestione dei contenuti.

Immaginiamo di avere proprio un sito del genere. Sarà un po' più difficile inserire il codice su di esso rispetto a WordPress, perché dovrai ricordarti dell'FTP.

I gestori FTP come FileZilla ti consentono di trascinare e rilasciare file e immagini da un sito Web a un server. Utilizzando il programma, è possibile aggiungere file al server o scaricarli, sostituire i vecchi file con quelli nuovi, eliminare i dati non necessari, modificare i nomi dei dock.

Non c'è niente di complicato nel protocollo di trasferimento dati: dopo 20 minuti puoi sentirti un professionista. Per la maggior parte delle persone, la parte più difficile è semplicemente contattare il server.

In caso di problemi con il server, contattare la società di hosting. Potrebbe volerci un'ora, ma dopo 60 minuti saprai tutto ciò che devi sapere. Di solito consiglio di registrare tali conversazioni tramite ScreenRecorder. O almeno prendi appunti manualmente.

Una volta effettuato l'accesso al server FTP, assicurati di farlo. Se commetti un errore, i file importanti non andranno da nessuna parte. Puoi fare un backup semplicemente trascinando e rilasciando tutti i file dal server al tuo computer.

In genere, l'API del gestore FTP ha due colonne. Ad esempio, nell'immagine qui sotto, nella colonna di sinistra, vedi i file che sono memorizzati sul tuo computer. A destra - file dal server.

Per modificare o aggiungere file, trascinali semplicemente da una colonna all'altra.

Avvertimento

La sostituzione dei file è pericolosa. Puoi facilmente sostituire una nuova versione di un file con una vecchia e perdere più dati attuali, eliminare accidentalmente qualcosa di importante o commettere un altro errore. La copia di backup consente di proteggersi da tali errori e proteggersi da problemi inutili. Ricorda di salvare tutti i file in una cartella separata sul tuo computer prima di apportare modifiche.

Come inserire il codice utilizzando header.php

Diciamo che abbiamo un sito Web che utilizziamo WordPress per gestire. Per inserire il codice, dobbiamo trovare il file header.php o un altro file chiamato intestazione o testa.
Intestazione necessario per attivare un codice o uno snippet JavaScript su tutte le pagine del sito. Puoi usare un programma gratuito come Sublime Text per aprire il file. Con il suo aiuto, devi aprire un file memorizzato sul tuo computer e non un file simile sul server.

Quando apriamo il file in Sublime Text, possiamo vedere l'arcobaleno dal codice colore. Non aver paura, lì è tutto semplice.

Tutte le pagine sono divise in due sezioni: la testa e il corpo. I titoli sono indicati dal codice HTML e... Corpo - e.

La maggior parte delle cose che fanno funzionare il sito e visualizzano il testo si trovano tra queste due sezioni. Puoi utilizzare la ricerca per pagina per trovare questi tag.
Nella maggior parte dei casi, puoi inserire il tuo codice subito prima del tag di chiusura.

Dopo aver inserito il codice o lo snippet, salva il file e caricalo sul server. Pronto.

Ora sui pannelli di amministrazione auto-scritti. Se il tuo sito è stato creato manualmente e non riesci a trovare il file head o header, molto probabilmente dovrai inserire il codice manualmente in ogni pagina. Molto spesso, questo non causa molte difficoltà.

L'immagine sopra è un ipotetico sito HTML composto da quattro file HTML. Se volessimo inserire del codice su di esso, dovremmo aprire tutti questi file uno per uno e inserire il codice o lo snippet nei tag di ciascuno di essi. Dopodiché, il processo è standard: salviamo i file e li carichiamo sul server invece di quelli vecchi.

Come incorporare il codice in un sito web Squarespace

Squarespace lo ha reso facile per i suoi utenti. Puoi usare "code injection" per inserire codice JavaScript o snippet. Nel menu, vai alle schede Impostazioni> Avanzate> Iniezione codice. Puoi aggiungere il codice a o piè di pagina del sito.

Troviamo le impostazioni.

Scorri verso il basso e fai clic su "Avanzate".

Selezioniamo "Iniezione codice".

Incolla il codice e salva le modifiche.

Come incorporare il codice su Shopify

Nel pannello di controllo, trova la sezione con Negozi online e seleziona Temi.

Per accedere alla scheda desiderata, cliccare su "Azioni" e selezionare "Modifica HTML/CSS".

Abbiamo bisogno di frammenti.

Facendo clic sull'opzione si aprirà una finestra di dialogo con la possibilità di aggiungere un nuovo frammento.

Assegna un nome allo snippet e fai clic sul pulsante Crea snippet.

Inserisci il codice dello snippet nell'area "tracking snippet.liquid". Fare clic su Salva.

Come incorporare il codice se il tuo sito è su Wix

Wix è diventato rapidamente un popolare costruttore di siti web. Come WordPress.com, impone restrizioni ai suoi utenti nella possibilità di inserire codici.

Ma Wix offre una soluzione sotto forma di Wix App Market. Lì puoi trovare una varietà di widget per marketing, social media e analisi. A proposito, lì puoi anche votare per il widget più necessario.

Ciao cari amici. Oggi, in continuazione dell'argomento, accelerando la velocità di caricamento del blog, parliamo della possibilità di sostituire i plugin con script "leggeri". Gli script, a differenza dei plugin, hanno un carico molto inferiore sul server, e quindi la velocità di caricamento del sito sarà maggiore. Oggi ci sono molti plugin e sono in grado di risolvere molti problemi dei blogger. Ma spesso, questi plugin possono essere sostituiti con script più veloci. E a volte disabilita anche del tutto i plugin non necessari. E meno plugin di terze parti, maggiore è la velocità di caricamento del sito o del blog.

Se analizzi la velocità di caricamento del sito, puoi vedere quali plugin rallentano la velocità di caricamento del tuo sito. Quali servizi utilizzare per la verifica ho scritto. Nel mio caso, il freno più grande è un plugin che ti consente di visualizzare esempi di codice sorgente negli articoli, con l'evidenziazione della sintassi per questo stesso codice. Questo plugin si chiama SyntaxHighlighter.

Il risultato del test non si adattava nemmeno alla pagina. Certo, l'evidenziazione del codice è molto bella, ma se lo capisci, non si tratta dell'evidenziazione. In generale, l'efficienza del codice è importante. E se il codice è appena stato inserito, c'è un'alta probabilità della sua inoperabilità.

E oggi ti dirò come sostituire il plugin SyntaxHighlighter con codice normale e persino inserire un pulsante nel pannello di modifica del tuo blog.

Come inserire un codice in un articolo senza plugin

È noto che in WordPress, per visualizzare un esempio del codice sorgente in un articolo, quando si digita un articolo dall'editor visuale, è sufficiente passare a quello di prova e racchiudere il codice richiesto nei tag

Il tuo codice

Ma tale codice difficilmente risalterà nella maggior parte del testo del tuo articolo. E così puoi aggiungere più stili, ad esempio colore di sfondo, colore del carattere, bordo e così via. In questo modo il tuo codice sarà presentato più chiaramente sotto forma di esempio.

Come modificare la visualizzazione del codice visualizzato

Questo è abbastanza semplice da fare.

opzione 1

Puoi assegnare al tag

Class, ad esempio, class = "cod" e imposta gli stili richiesti nel file style.css.

.cod (width: auto; background-color: whitesmoke; border: 1px solid # C7C3C3; border-radius: 5px; color: # 167dec;)

opzione 2

Puoi impostare gli stili direttamente quando inserisci il codice. Sarà simile a questo:

Il tuo codice

E nel primo e nel secondo esempio, se il codice inserito esce dall'articolo, dovresti aggiungere la proprietà overflow: auto; che ti permetterà di manipolare l'elemento del blocco.

Questi metodi vanno bene per tutti, ma vorrei qualcosa di più semplice. In generale, ancora una volta, la pigrizia: il motore del progresso ti fa trovare qualcosa che faciliterà questo processo.

Come aggiungere il pulsante "Inserisci codice" al pannello di modifica di WordPress

Un semplice pulsante nel pannello di modifica di WordPress semplificherà questo processo. E sembra così.

Se vuoi mettere un tale pulsante su te stesso, avrai bisogno di alcuni minuti di tempo e alcuni file da parte mia. Quindi iniziamo.