Come scrivere codice personalizzato nei post di WordPress

Ci sono molti motivi per cui vorresti scrivere o includere codice aggiuntivo nei tuoi post di WordPress. Potrebbe essere necessario mostrare pubblicità, applicare uno stile unico a determinate sezioni del tuo sito Web o semplicemente segnare del testo o del contenuto per attirare l’attenzione. Tuttavia, è possibile aggiungere codice per ottenere vari effetti visivi per offrire un’esperienza utente migliore.


Tutti questi e altri sono validi motivi, ma non importa cosa stai cercando di ottenere con il codice personalizzato, il processo di scrittura del codice può essere snervante o del tutto impegnativo! In questo tutorial, tratteremo le seguenti aree:

  • Aggiunta di codice che assomiglia a codice ma non si comporta come codice (nel caso in cui tu stia cercando di mostrare righe di codice o migliorare l’aspetto del tuo sito Web)
  • Aggiunta di codice destinato a comportarsi come un codice, ad es. Annunci con script come Google Adsense Ads

In queste due categorie, approfondiremo un po ‘il codice di programmazione come HTML, CSS, Javascript e toccheremo le pubblicità e la bellezza del

contenitore. Ora, senza ulteriore fanfara, mettiamoci al lavoro e scriviamo un po ‘di codice.

Aggiunta di codice che assomiglia a codice ma non si comporta come codice

Se desideri mostrare il codice (forse sei un web designer o uno sviluppatore) che i tuoi utenti possono copiare e incollare, è importante farlo bene perché anche una singola interruzione di riga può rovinare il codice, quindi tutto il tuo lavoro. Il modo in cui il tuo codice verrà interpretato da WordPress dipende dal fatto che tu usi l’editor HTML o Visual Post. L’immissione del codice direttamente nell’editor visivo non avrà l’effetto che si desidera creare, poiché l’editor visivo considera il codice come testo normale, il che significa che i browser Web non interpretano il codice come “codice”, ma come testo normale.

D’altra parte, l’Editor Post HTML riconoscerà qualsiasi markup HTML o CSS che usi, il che significa che saranno interpretati dal browser Web, cosa che potrebbe tradursi in layout incasinati e contenuti dall’aspetto funky. Per esempio, 

nell’editor visivo verrà interpretato come testo normale e il risultato sarà giusto
. però,
 nell’editor HTML verrà interpretato come markup HTML e il risultato sarà la creazione di un contenitore.

Un esercizio HTML

È davvero un esercizio di futilità, ma puoi provarlo per avere un quadro più chiaro di ciò che intendo. Apri il tuo Editor HTML, genere

e salvarlo come bozza. Una volta salvata la bozza, fai clic su “Anteprima post” per vedere la tua sito Web alterato. Non preoccuparti, non è permanente e puoi semplicemente eliminare la bozza. Ora torniamo al lavoro.

In generale, è possibile utilizzare il codice in due modi. In primo luogo, è possibile utilizzare il codice all’interno di una riga (o paragrafo) per chiarire un punto sul codice. In secondo luogo, puoi scrivere, evidenziare e inserire il tuo codice in un blocco come questo:



Scrivere codice nel tutorial sui post di WordPress


...

Per ottenere l’effetto sopra, usiamo il tag di codice scritto come ... il nostro codice entra qui . Frecce sostitutive (<  >) Con parentesi quadre ([]) a seconda del tuo sito WordPress e dell’editor di post che stai utilizzando (visual o HTML). Il codice che si desidera visualizzare deve passare tra il tag di apertura,   e il tag di chiusura, . Ad esempio, per utilizzare il codice all’interno di un paragrafo:

Codice in un paragrafo

Il tag di codice fa apparire il testo non HTML come codice, ma non dice al browser Web di interpretare il markup HTML o di toglierlo dal post. Ciò significa che un browser può ancora codificare il markup HTML rendendolo difficile da mostrare Tag HTML nel tuo codice. Tuttavia, è possibile superare questo problema utilizzando caratteri estesi o entità carattere per rappresentare il < > personaggi, che inganneranno ogni browser. Per esempio…

I tag HTML possono essere interpretati come markup HTML

… creerà un nuovo contenitore (grazie a

) e un’intestazione (

), che rovinerà la tua pagina web. Ma se usi le entità personaggio per sostituire il < > frecce, eviterete questo comportamento e produrrete il codice come desiderato. Il codice sopra sarà quindi simile a questo:

Utilizzare invece le entità personaggio

Crea un blocco di codice evidenziato

Se vorrei evidenziare un blocco di codice (o anche del testo) per ottenere qualcosa di simile;

Code Block

Comincio inserendo il codice (o il testo) in un contenitore in questo modo:

Devi farlo nell'editor HTML

Quindi aggiungo stile usando i CSS direttamente (come nell’immagine sopra) o tramite style.css file trovato nella cartella principale del tema.

Dai uno stile ai tuoi tag codice

Il tag di codice utilizzerà la dimensione del carattere dal e metti il ​​testo in un carattere a spaziatura fissa per impostazione predefinita. Puoi cambiare tutto questo anche se il tuo codice sembra nel modo che preferisci. Tutto quello che devi fare è aggiungere …

 code {font-size: 1.2em; color: # 000; font-weight: normal;} 

… o qualcosa di simile al tuo style.css. Ci sono stili illimitati e tutto dipende dalle tue preferenze personali, quindi non trattenerti – stile.

Aggiunta di codice che si comporta come il codice

Questa sezione è particolarmente utile se desideri visualizzare annunci pubblicitari o altri script, ad es. Frammenti Javascript nei tuoi post. Mentre ci sono plugin, come Adsense veloce, che ti aiuterà a gestire gli annunci nei tuoi post, potresti essere interessato all’installazione di script autonomi su cui hai il controllo completo.

Se il tuo annuncio è un’immagine semplice e un link, puoi aggiungere l’annuncio al tuo post tramite l’utilità di caricamento. Basta caricare l’immagine e inserire il tuo link (e forse una didascalia) e il tuo lavoro è finito. Questo metodo è limitato, poiché puoi allineare il tuo annuncio solo a sinistra, a destra o al centro, proprio come un’immagine tipica. In alternativa, puoi creare un contenitore all’interno del tuo post utilizzando l’editor HTML.

Esempio:


Crea questo contenitore esattamente dove desideri il tuo annuncio, il che significa che devi avere il post pronto prima di aggiungere l’annuncio. Una volta che il contenitore è pronto, puoi modellarlo come preferisci. Puoi spostarlo usando style.css usando il posizione proprietà. Se si desidera eseguire a Annuncio di Google Adsense nei tuoi post, puoi ancora utilizzare Adsense veloce – il plug-in – oppure crea un container e posiziona il tuo codice dell’annuncio in questo modo:


Nota 1: Le pubblicità di Google sono basate su Javascript e possono essere interpretate da tutti i principali browser Web a condizione che l’utente abbia abilitato Javascript sui propri computer.

Nota 2: Devi scegliere le giuste dimensioni dell’annuncio per il tuo sito Web per evitare di incasinare i tuoi post e il tuo sito web.

Se desideri aggiungere un annuncio permanente che verrà visualizzato su tutti i tuoi post (post attuali e futuri) senza ulteriore lavoro, dovrai modificare il Modello a singolo post (Single.php). Ho inserito un annuncio 468 x 60 pixel nella parte superiore di tutti i miei post aggiungendo il seguente codice a single.php subito dopo < – – END post-entry-meta – ->.


Certo, devi usare i tuoi annunci Google �� Ecco come appare l’annuncio Google Adsense sul mio blog:

Scrivere codice in WordPress

Trovare single.php, vai al tuo Pannello di amministrazione – >> Aspetto – >> Editor – >> single.php. Una volta aperto single.php, usa la barra di ricerca (Ctrl + F) localizzare < – – END post-entry-meta – ->.

Puoi lasciare il contenitore così com’è o disegnarlo usando style.css come ritieni opportuno. E ricorda di salvare tutte le modifiche. Il

container è davvero utile e quando lo abbini a CSS e un’oncia di creatività, puoi ottenere così tanto con il tuo sito WordPress. Può aiutarti a posizionare qualsiasi codice (o qualsiasi cosa in realtà) ovunque sul tuo sito web.

La casella degli strumenti

Se vuoi saperne di più sulla scrittura di codice personalizzato nei tuoi post di WordPress, non esitare a consultare le seguenti risorse:

Bene, questo è tutto. Siamo riusciti a coprire le aree che abbiamo delineato all’inizio. Ma se non capisci nessun concetto in questo post o desideri aggiungere suggerimenti o opinioni, ti preghiamo di condividere i tuoi pensieri nella sezione commenti qui sotto!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map