Javascript in WordPress

[R.Francesco]

Ho voluto provare a fare una cosa molto banale, ovvero in una pagina di wordpress fare in modo che un scritta cambi colore ogni tot...

Per farlo ho scritto questo codice nell'editor (di testo, non visuale) della pagina di wp che volevo modificare

 

<p style="text-align: justify;"><strong><span id="enjoycolor" style="color: red;">Enjoy!</span></strong></p>

<script type="text/javascript">

  

  var col=1;

  var enjoycol=document.getElementById("enjoycolor");

  function colora(){

    

    if (col==1){

      enjoycol.color="orange";

      col=2;

    } else {

      enjoycol.color="red";

      col=1;

    }

 

  }

  var timer=setInterval("colora()",500);

</script>

 

Il codice dovrebbe essere giusto (su un file html in locale funziona), però WP non ne vuole sapere di eseguirlo...

Ho cercato un po' in rete e da quello che ho capito è difficile/non si può usare js in wp, è vero?

Soluzioni?

 

Grazie

 

 

PS: ho notato che uscendo e rientrando wp mi ha modificato automaticamente il codice sopra riportato in:

 

<p style="text-align: justify;"><strong><span id="enjoycolor" style="color:red;">Enjoy!</span></strong></p>

 

(ovvero span al posto di font)

 

Nonostante ciò neanche facendo così funziona...

 

      enjoycol.style="color:orange;";

[pix]

enjoycol.style.color = "orange";

[R.Francesco]

Non funziona neanche così...

Cioè su html in locale va, ma sullla pagina di wordpress no 

[pix]

la variabile andrebbe messa all'interno della funzione.

e già che ci siamo:

<script type="text/javascript">

  var timer = setInterval(function(){colora()},500);

  function colora() { 
    var obj = document.getElementById("enjoycolor");
    var colore = document.getElementById("enjoycolor").style.color;
    
    if(colore == "red")
    {
      obj.style.color = "orange";
    }
    elseif(colore == "orange") 
    {
      obj.style.color = "red";
    }
  }

</script>

ad ogni modo a quanto pare

http://codex.wordpress.org/Using_Javascript

 

cito:

"JavaScript cannot be added to post content without a special WordPress Plugin that removes the filters that prevent unwanted code within the post content area, for the protection of the user."

 

quindi devi mettere il codice javascript in un file (es. "cambiacolore.js") e includere poi il file nel post, con il corretto percorso ovviamente:

<script type="text/javascript" src="cambiacolore.js"></script>

[R.Francesco]

To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of yourheader.php template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page. To "load" the JavaScript file into your site, in the head, add something like this:

 

 

Ti ringrazio, devo provare, però dice anche di aggiungere il codice in testa e nell' header.php, per header.php intende la pagina di wordpress che sto creando od un altra? Perchè mi sembra strano che tutte le pagine si chiamino header.php, ma anche che devo aggiungere la stringa per attivare il file js in un altro file... come farebbe a capire poi a che pagine mi riferisco?

[pix]

l'header è normalmente incluso in tutte le pagine del sito.

se è questo il risultato che vuoi ottenere allora sì, metti mano al codice del template e inserisci il javascript nell'header.

 

se invece vuoi richiamare la funzione in una pagina particolare e basta, fai come ho scritto e richiama il file esterno (non serve modificare il template in questo caso)

[R.Francesco]

No mi serve il codice solo per una pagina (per ora)

Allora, ho cambiato una cosa, invece che enjoy è un riferimento a instagram, ma vabè...

Ho fatto così:

 

Pagina X

.

.

.

.

.

 

<p style="text-align: justify;"><strong><a id="instagram" style="color: #dd3333;" href="http://instagram.com/utente"target="_blank">Seguimi anche su Instragram!</a></strong></p>

 

 

Funzione nel percorso:

public_html/WordPressMain/scripts_js/instagram_colore.js

 

Funzione:

<script type="text/javascript">

 

  var timer = setInterval(function(){colora()},500);

 

  function colora() { 

    var obj = document.getElementById("instagram");

    var colore = document.getElementById("instagram").style.color;

    

    if(colore == "#dd3333")

    {

      obj.style.color = "orange";

    }

    elseif(colore == "orange") 

    {

      obj.style.color = "#dd3333";

    }

  }

 

</script>

 

Tag all'inizio della pagina X

<script type="text/javascript" src="scripts_js/instagram_colore.js"></script>

 

Però non funziona comunque...

[pix]

verifica che il percorso al file .js sia corretto.

sostituiscine il contenuto con:

<script type="text/javascript">   alert('test');  alert(document.getElementById("instagram").style.color);  </script>

dovresti vedere due pop-up, la prima con scritto "test" e la seconda con "#dd3333".

se non lo fa, correggi il percorso al file:

<script type="text/javascript" src="/WordPressMain/scripts_js/instagram_colore.js"></script>

usa anche la Console del browser per rilevare eventuali errori segnalati.

[R.Francesco]

Se provo ad inserirlo tramite file esterno come hai detto te dalla console risulta errore 404 file non trovato, mentre provando ad aggiungere lo script nella pagina sembra che venga si interpretato, ma come testo, nonostante l'abbia inserito tramite l'editor html, ecco cosa si vede dalla console:

 

<p><script type="text/javascript"></p>

<p>  alert('test');

  alert(document.getElementById("instagram").style.color);</p>

<p></script></p>

 

 Uncaught SyntaxError: Unexpected token <

 

Infatti provando a scriverlo tutto sulla stella linea

 

<script type="text/javascript">alert('test');alert(document.getElementById("instagram").style.color);</script>

 

viene eseguito...

 

Ciò può andare per cose "brevi", ma per codici più lunghi non credo...

 

Provando a mettere il codice del "cambio colore" sulla stessa riga esce un errore di 

Uncaught SyntaxError: Unexpected token {

[pix]

il not found è perché il percorso al file (attributo src) non è quello giusto.

sistema quello che poi funziona.

(il trucchetto degli alert serve proprio a verificare di aver individuato il percorso corretto)

[R.Francesco]

Ho provato così

<script type="text/javascript" src="/WordPressMain/scripts_js/instagram_colore.js"></script>

Adesso sembra trovarlo, però mi da sempre errore...

alla riga 1 del codice:

Uncaught SyntaxError: Unexpected token <

[pix]

per caso hai lasciato nel file .js i tag <script> di apertura e chiusura?

non sono necessari perché li dichiari già quando richiami il file.

[R.Francesco]

Allora, così funziona, grazie! 

 

Però ci sono dei problemini nel colore, ovvero, facendo così funziona:

 

  var timer = setInterval(function(){colora()},1500);

 

  function colora() { 

    var obj = document.getElementById("instagram");

    var colore = document.getElementById("instagram").style.color;

    

    if(obj.innerHTML=="Seguimi anche su Instragram!")

    {

      obj.style.color= "orange";

      obj.innerHTML="@utente";

    }

    else{

      obj.style.color = "#dd3333";

      obj.innerHTML="Seguimi anche su Instragram!";

    }

  }

 

Però non riesco a fargli fare l'if sul colore ne a cambiare il colore tramite la variabile colore,

se faccio colore=.... non va, mentre con obj.style.color=.... funziona...

[pix]

var colore è un valore (stringa), mentre var obj (come si intuisce dal nome scelto) è un riferimento ad un oggetto che permette di accedere alle relative proprietà e attributi.

 

procedere per tentativi va bene, ma ad un certo punto devi metterti a studiare almeno le basi, altrimenti la vedo grigia....

[R.Francesco]

In realtà le basi le dovrei già sapere, solo che è da un bel po' che non prendo in mano js e devo riguardarlo un po', e poi adattarlo anche a wp

 

Per quanto riguarda colore pensavo fosse un puntatore alla proprietà .style.color dell'oggetto

Mi rimane comunque il dubbio, perchè se faccio colore=="#dd3333" o anche obj.style.color == "#dd3333" non funziona?

Se provo a fare l'alert della variabile "esce" rgb(x,y,z), però penso dovrebbe essere equivalente, dato che inserendo il colore in questo modo:

obj.style.color = "#dd3333"

lo cambia...

[pix]

dipende dal browser.

al primo "giro" il tuo browser assegna il colore come rgb.

dovresti forzare l'utilizzo dell'esadecimale prima della chiamata alla funzione ovvero prima del setInterval.

devi quindi definire il colore iniziale:

 

document.getElementById("instagram").style.color = "#dd3333";

 

in questo modo restituirà #dd3333 e non più rgb.

sconsiglio per ovvi motivi l'utilizzo dell'equivalente in lettere che va quindi convertito anch'esso in esadecimale (orange = #ffa500)

 

tutti questi inconvenienti sarebbero evitati se tu lavorassi, come è consuetudine, con le classi CSS.

 

Crei due classi: instagram1 e instagram2, con i rispettivi colori.

Poi con javascript alterni semplicemente la classe dell'elemento, e non ha quindi più importanza come vengono gestiti i colori.

Inoltre in futuro per modificare il colore (ad esempio se cambi tema) ti basta cambiare lo stile css e puoi lasciare inalterato il file javascript.

[R.Francesco]

Guarda, io di css non avevo mai praticamente visto niente, e in questi due/tre giorni sto facendo un full immersion da paura...

Giusto oggi ho letto delle classi child ed ho "replicato" le mie modifiche del tema nel "nuovo" tema child

Ho già fatto varie modifiche allo stile del sito (il css), e approfitto dell'occasione per chiederti un'altra cosa...

Il mio sito è sul grigio/rosso come colori, e li ho già cambiati praticamente tutti, solo che mi rimangono alcune cose che non riesco a trovare

ad esempio, hai presente le textbox?

quando le clicchi il bordo si "illumina" di un azzurro sfumato (evento/classe focus se non erro), però non riesco a trovare il "pezzo" da modificare nello style.css...

Si vede solo quando si clicca una textbox o si clicca su un bottone di tipo sumbit...

Ho provato anche a cercare direttamente il colore (prelevandolo da uno screen), ma pare non esserci...

 

[

PS:

 

ho provato anche come dici te, chiamando

document.getElementById("instagram").style.color = "#dd3333";

all'inizio, ma non cambia niente (cioè così non va), e se faccio l'alert mi dice sempre "rgb..."

]

[pix]

se non sono magari in un altro file css, potrebbero essere i colori predefiniti del browser.

definiscine di nuovi per sovrascrivere il default del browser.

 

PS: usa le classi css

[R.Francesco]

Ecco infatti, pensavo anch'io fossero di default

 

Ora ci sono riuscito, però ho qualche problemino con le classi, ovvero facendo così funziona

 

/* colore di focus su input e textarea */

textarea:focus,

input:focus{

-webkit-box-shadow: 0 0 4px 2px #dd3333;

   -moz-box-shadow: 0 0 4px 2px #dd3333;

        box-shadow: 0 0 4px 2px #dd3333;

border-color: #dd3333;

outline: none;

}

 

ma facendo così:

 

.clstextarea:focus,

.clsinput:focus{

-webkit-box-shadow: 0 0 4px 2px #dd3333;

   -moz-box-shadow: 0 0 4px 2px #dd3333;

        box-shadow: 0 0 4px 2px #dd3333;

border-color: #dd3333;

outline: none;

}

 

e poi così:

<div class="clstextarea">[contact-form-7 id=26" title="Contatti]</div>

 

oppure così:

<p style="text-align: center;" class="clstextarea" >Nome:<br />

    [text* your-name] </p>

 

<p style="text-align: center;" class="clstextarea" >eMail:<br />

    [email* your-email] </p>

 

<p style="text-align: center;" class="clstextarea" >Oggetto:<br />

    [text* your-subject] </p>

 

<p style="text-align: center;" class="clstextarea" >Messaggio:<br />

    [textarea* your-message] </p>

 

<p style="text-align: center;" class="clstextarea" >[submit "Invia"]</p>

 

Non funziona..

(Per le form uso il plug-in contact form 7)

[pix]

non puoi applicare uno stile al focus di un div o di un paragrafo....

 

<textarea class="clstextarea"></textarea>

 

<input class="clstextarea"></input>

 

non uso mai worpress e i suoi plugin, ma oltre a title etc.. dovresti poter assegnare anche una classe ai vari elementi del form generati automaticamente.

 

sono tutte cose che certamente puoi trovare nella documentazione del plugin......

[R.Francesco]

Si probabilmente si potrà, ma per ora non mi serve, anche perchè mi "fa piacere" che attribuisca quello stile a tutte le textarea e gli input del sito, così rimane più "uniforme", grazie per il tuo aiuto

 

PS. se hai qualche tip per il problema della galleria sei il ben venuto