Vai al contenuto principale

Come condividere frammenti di codice su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Se offri software o suggerimenti per la programmazione, ti consigliamo di condividere snippet di codice. Questo modo di condividere frammenti di codice può aiutarli a impostare rapidamente una pratica. Tuttavia, la condivisione del codice con tutta la formattazione necessaria non è possibile per impostazione predefinita. Quello che intendo per formattazione è l'evidenziazione della sintassi. Tuttavia, è qualcosa di abbastanza facile da fare.

Fortunatamente, se stai usando divi, dovresti sapere che esiste un metodo integrato per farlo manualmente, al fine di aggiungere stili personalizzati a questi snippet. Inoltre, ci sono plugin e risorse di terze parti che possono davvero semplificare il processo di creazione di snippet belli e funzionali in Divi.

In questo tutorial, ti mostrerò come condividere frammenti di codice in Divi (manualmente). E ti mostrerò anche come progettare blocchi di snippet con Divi Builder, che ti porterà al livello successivo.

Panoramica

Ecco una panoramica dei progetti di snippet possibili in questo tutorial.

Le caselle di frammenti di codice con frammenti di codice hanno aggiunto la modalità manuale.

Anteprima del codice possibile con diviPrerequisiti per il tutorial

Per questo tutorial, tutto ciò di cui hai bisogno è il tema Divi, installato e attivo. Costruiremo gli esempi di frammenti di codice da zero utilizzando Divi Builder in una nuova pagina.

Per iniziare, crea una nuova pagina e distribuisci Divi Builder sull'interfaccia pubblica. Quindi scegli l'opzione "Crea da zero".

Ora sei pronto per partire!

Progettazione di una scatola personalizzata per frammenti di codice su Divi

Poiché il nostro frammento di codice risiede in un modulo di testo, possiamo utilizzare il generatore di divi per aggiungere elementi di design nel modulo di testo (e attorno ad esso). Per questo progetto, utilizzeremo un modulo di riepilogo per fungere da etichetta per lo snippet. Successivamente, modificheremo e posizioneremo il cursore a sinistra del modulo di testo. Successivamente, modificheremo il modulo di testo del nostro snippet.

Creazione della sezione, riga e colonna

Dobbiamo prima creare una nuova sezione con una riga di una colonna.

La colonna ha un divi di riga

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Quindi aggiornare i parametri di linea come segue:

Larghezza della grondaia: 1
Padding personalizzato: 0px nella parte superiore, 0px nella parte inferiore

Modifica parametro linea diviAggiungi il modulo di testo

Quindi aggiungere un modulo di testo alla riga.

Modulo di testo Divi 1Puoi lasciare il contenuto predefinito. Aggiungeremo i nostri frammenti di WordPress in un secondo momento. Per ora, modelliamo il modulo di testo aggiornando i seguenti parametri di testo:

Colore di sfondo: # eff0f1 Colore del testo: # 000000 Margine personalizzato: 60px a sinistra Padding personalizzato: 3% in alto, 3% in basso, 3% a sinistra, 3% a destra

Impostazioni dei parametri del modulo di testo Divi

Larghezza bordo superiore: 10px Colore bordo superiore: # 7cda24

Impostazioni del testo del bordoCreazione dell'etichetta dello snippet

Per creare l'etichetta dello snippet, utilizzeremo un modulo blurb. Ciò ti consentirà di aggiungere un'icona di testo blurb (o un'icona di immagine personalizzata) accanto alla lingua del codice visualizzata.

Crea un modulo di presentazione e trascinalo sopra il modulo di testo. Quindi aggiorna le seguenti impostazioni di presentazione:

Titolo: css Contenuto: [rimuovi contenuto fittizio] Usa icona: SI Icona: vedi screenshot

Modulo di testo divi modificatoQuindi aggiornare i parametri di progettazione come segue:

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Colore sfondo: # 1b2426 Colore icona: # 7cda24 Posizione immagine / icona: sinistra Dimensione carattere: 20px Colore titolo testo: #ffffff Dimensione testo Titolo: 16px

Impostazioni del modulo Div Blurb

Altezza riga del titolo: 1.3em Larghezza: 100 px Margine personalizzato: -44 px in basso, -50 px Imbottitura personalizzata a sinistra: 10 px in alto, 2 px in basso, 15 px a sinistra, 15 a destra

Impostazione del modulo blurb CSS

Duplica la sezione per creare più progetti di riquadri di snippet

Questo supporta il nostro primo design della scatola del codice. Ora non ci resta che duplicare la sezione contenente il design del blocco di codice e aggiornare l'etichetta ei colori per creare un nuovo blocco di codice per un diverso linguaggio di codifica. Questo è ovviamente facoltativo, ma se prevedi di aggiungere frammenti diversi a una pagina, è utile avere uno schema di colori diverso per ciascuno.

Ad esempio, duplica la sezione e apri le impostazioni del modulo Blurb.

Aggiorna il titolo in "js" per Javascript.

Quindi fare clic con il pulsante destro del mouse su Colore immagine / icona e selezionare Trova e sostituisci.

Duplica una sezione diviOpzioni di ricerca e sostituzione aggiornate:

In: questa sezione Sostituisci con: [nuovo colore] Sostituisci tutto: seleziona Sostituisci tutti i valori trovati

Ora hai un nuovo blocco di snippet per i frammenti JS.

Ecco un esempio di caselle di snippet per tipi di codice popolari per WordPress.

Aggiungi snippet di codice diviUtilizzo del plug-in Prettify Code per aggiungere l'evidenziazione della sintassi agli snippet di codice manuale

Bene, è vero che con il metodo manuale, puoi immediatamente incollare il testo e passare. il Prettifica il plug-in di codice aggiungerà immediatamente il codice evidenziato a tutti i tag "pre". La bellezza di questo plugin è che non è richiesta alcuna personalizzazione. Tutto quello che devi fare è scaricare e attivare il plugin.

Ecco un esempio di come apparirà il codice con Active Prettify Code.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Abbellisci il codice in azioneCodice Prettifica arriva de Google ed è anche usato per stilizzare tutti quei meravigliosi frammenti stackoverflow.com.

Per finire

La visualizzazione degli snippet di codice su Divi non deve essere difficile. L'aggiunta manuale degli snippet utilizzando i tag pre e Word forniti da WordPress farà il lavoro per la maggior parte degli snippet non html, ma è necessario prima eseguire lo snippet tramite un codificatore. html per essere sicuri. Inoltre, puoi personalizzare ulteriormente lo stile del testo del frammento utilizzando le impostazioni del modulo di testo. E non dimenticare Code Prettify per aggiungere l'evidenziazione ai tuoi frammenti manuali.

Per quelli di voi che condividono regolarmente frammenti, l'uso del plug-in SyntaxHighlighter è probabilmente la soluzione migliore. In ogni caso, avrai sempre la possibilità di aggiungere progetti più creativi ai tuoi snippet utilizzando Divi Builder.

Bonne chance.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer