Il problema: Inserire uno scroll box in un articolo di WordPress
Il problema è sorto dalla necessità di inserire lo script di un video sotto il video stesso, e di doverlo fare salvaguardando lo spazio all’interno del post. Ho visto su di un sito che veniva utilizzata uno scroll box (o casella di scorrimento) dove la lettura di un testo piuttosto lungo veniva agevolata dall’uso dello scrolling (scorrimento).
La soluzione
Dopo qualche ricerca sul web pensando di poter trovare un plugin, ho scoperto che non si deve utilizzare un plugin ma un codice html, da inserirsi direttamente nella sezione testuale dell’articolo. Si parte da un codice html e poi si possono aggiustarne gli attributi tipo altezza del box, colore, testo, bordo, ecc.
Ecco di seguito i vari passaggi:
Step 1
Aprite il vostro programma di testo (es. Notepad/Text Edit, o altro) e incollate il seguente codice HTML:
<div style=”border: 1px solid black; overflow: auto; height: 200px; width: 400px; color: black; background-color: white;”>INSERITE IL TESTO QUI</div>
Step 2
Entrate nel vostro WordPress, e cliccate su Nuovo Post, inserite il titolo dell’articolo ma non pubblicatelo per il momento.
Step 3
Nell’estremità destra del campo testo (dove andrete a scrivere l’articolo), cliccate sulla linguetta Testo.
Step 4
Copiate e incollate il codice HTML che avete precedentemente inserito nel programma di testo (Notepad/Text Edit o altro).
Step 5
Sistemate le impostazioni del box come desiderate.
Per un bordo più spesso, ad esempio, aumentate da “2px” a “3px,” “4px” o più alto.
Per allungare o accorciare il box, variate i valori in width.
Per variare l’altezza, cambiate il valore che compare dopo height.
Per cambiare colore del testo, dopo color mettete, invece di black, red (rosso), blue (blue), etc. Lo stesso per cambiare il colore dello sfondo.
Anche se non avete dimestichezza con il codice html (neppure io ne ho!), ma volete variare qualche altra impostazione, potete consultare questa GUIDA ONLINE, molto semplice ma ben fatta .
Step 6
Sostituite “INSERITE IL TESTO QUI” con il testo che volete inserire.
Step 7
Una volta soddisfatti del risultato che volete ottenere, cliccate su “Pubblica“.
N.B. se il testo fosse relativamente corto rispetto alle dimensioni del box, la barra di scorrimento non viene visualizzata!
Ecco come appare lo scroll box con una impostazione di base
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et vehicula ante. Pellentesque ultricies finibus mi, sed consequat odio faucibus sodales. Donec nibh sapien, blandit a massa ac, feugiat pulvinar eros. Curabitur rhoncus libero eget tempor tincidunt. Integer nunc felis, malesuada in ex sit amet, sollicitudin laoreet nunc. Suspendisse ligula nibh, consequat vel orci et, dapibus dignissim augue. Integer eget est quis neque feugiat aliquam quis quis neque. Nam consectetur mi et porttitor volutpat. Suspendisse ullamcorper nunc consequat, venenatis felis quis, porta nisi. Sed laoreet vel nisi vel pulvinar.
Con alcune semplici modifiche, ecco cosa si può ottenere
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et vehicula ante. Pellentesque ultricies finibus mi, sed consequat odio faucibus sodales. Donec nibh sapien, blandit a massa ac, feugiat pulvinar eros. Curabitur rhoncus libero eget tempor tincidunt. Integer nunc felis, malesuada in ex sit amet, sollicitudin laoreet nunc. Suspendisse ligula nibh, consequat vel orci et, dapibus dignissim augue. Integer eget est quis neque feugiat aliquam quis quis neque. Nam consectetur mi et porttitor volutpat. Suspendisse ullamcorper nunc consequat, venenatis felis quis, porta nisi. Sed laoreet vel nisi vel pulvinar.
Il codice variato appare così:
<div style=”border: 4px solid blue; width: 300px; height: 300px; line-height: 3em; overflow: auto; padding: 5px; text-align: left; background-color: lightblue;”>INSERITE IL TESTO QUI</div>
Per finire, uno scroll bar ulteriormente modificato
Scroll Box modificato
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et vehicula ante. Pellentesque ultricies finibus mi, sed consequat odio faucibus sodales. Donec nibh sapien, blandit a massa ac, feugiat pulvinar eros. Curabitur rhoncus libero eget tempor tincidunt. Integer nunc felis, malesuada in ex sit amet, sollicitudin laoreet nunc. Suspendisse ligula nibh, consequat vel orci et, dapibus dignissim augue. Integer eget est quis neque feugiat aliquam quis quis neque. Nam consectetur mi et porttitor volutpat. Suspendisse ullamcorper nunc consequat, venenatis felis quis, porta nisi. Sed laoreet vel nisi vel pulvinar.
Il codice per questo scroll box modificato è:
<div style=”border: 3px solid blue; width: 400px; height: 200px; line-height: 3em; overflow: auto; background-color: #ffffff; background-image: url(‘http://’); background-repeat: no-repeat; background-position: top left; background-attachment: fixed;”>
<h1 style=”text-align: center; font-family: Cursive; color: #0000cc; background-color: #ff99cc;”>Scroll box modificato</h1>
<p style=”text-align: left; font-family: Cursive; font-size: 14px; font-style: normal; font-weight: normal; text-indent: 5px; color: #000000; padding: 5px;”>TESTO DA INSERIRE<
</p></div>
Ti è stato utile l’articolo? Pensi che possa essere utile anche a qualche tuo amico? Allora non dimenticarti di condividerlo…
