Ciao @albertok,
la procedura che hai descritto (quella di creare un file HTML per creare una pagina specifica) è sbagliata di concetto.
In WordPress quando si vuol creare una pagina del genere tendenzialmente si fa uso delle Page Template che permettono all’occorrenza di inserire tutto il codice HTML necessario alla visualizzazione della pagina rispettando sempre la logica di costruzione delle pagine all’interno di questa piattaforma.
Quello che hai fatto tu è molto “borderline” e probabilmente il problema che incontri è proprio quello di non rispettare la costruzione delle pagine WordPress che non permette il corretto caricamento del file CSS che hai realizzato.
Al tuo posto creerei, come già suggerito, una Page Template e all’interno del CSS principale indicherei una delle classi che vengono aggiunte automaticamente all’interno dell’elemento <body>, almeno nei temi che usano il filtro body_class.
Spero di averti fornito informazioni sufficienti per procedere con il tuo progetto, se così non fosse non esitare a rispondere a questa discussione.
Andrea
Chi ha creato la discussione
albertok
(@albertok)
Gen.le @pr0v4 grazie della risposta,
Purtroppo essendo una pagina complessa non potevo farlo perchè è qualcosa che ho realizzato all’università e che vorrei implementare sul sito che è già online.
In pratica da quanto ho capito non è che ho fatto un sacco di lavoro per niente per fortuna.
Ho seguito le istruzioni per creare una pagina template nuova:
ho copiato il mio page.php e gli ho assegnato l’ID della pagina.
Come da istruzioni quindi ho un file che si chiama:
page-2628.php
che è al momento uguale a page.php.
In pratica da quanto ho capito nel file page-2628.php devo inserire il mio codice HTML personalizzato giusto?
Se questo è il codice del mio file page-2628.php (uguale a page.php)
<?php
/**
* Theme Page Section for our theme.
*
* Pagina template per il Palinsesto
* creata il 04.04.2017
*
* @package ThemeGrill
* @subpackage ColorMag
* @since ColorMag 1.0
*/
get_header(); ?>
<?php do_action( 'colormag_before_body_content' ); ?>
<div id="primary">
<div id="content" class="clearfix">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
do_action( 'colormag_before_comments_template' );
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template();
do_action ( 'colormag_after_comments_template' );
?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php colormag_sidebar_select(); ?>
<?php do_action( 'colormag_after_body_content' ); ?>
<?php get_footer(); ?>
Dove devo inserire il mio codice HTML e cosa devo cancellare?
Il mio file HTML comincia con:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Palinsesto</title>
<link rel="stylesheet" href="stilePalinsestoSchermo.css" type="text/css" media="screen">
<script>
function cambiaSfondo(el)
ALTRO CODICE DELLA PAGINA
</div>
</div>
<script>
function CambiaTuttiSfondi()
{
var elements = document.getElementsByClassName('cambiaColore');
for (i = 0; i < elements.length; i++)
{
cambiaSfondo(elements[i]);
elements[i].addEventListener("mouseover", function ()
{
this.style.backgroundColor = "#f2490f"
});
elements[i].addEventListener("mouseout", function ()
{
this.style.backgroundColor = cambiaSfondo(this);
});
}
}
</script>
</body>
</html>
A naso dovrei inserire tutto quello che ho all’interno del mio codice HTML partendo da <head> fino a </body>
al posto del pezzo che va da:
<div id="primary">
fino a
</div><!-- #primary -->
ma vado a naso perchè il php non lo conosco proprio.
Mi potresti dare quaclhe dritta gentilmente?
-
Questa risposta è stata modificata 7 anni fa da
albertok.
-
Questa risposta è stata modificata 7 anni fa da albertok.
-
Questa risposta è stata modificata 7 anni fa da albertok.
-
Questa risposta è stata modificata 7 anni fa da
Guido Scialfa.
Chi ha creato la discussione
albertok
(@albertok)
Gen.le @pr0v4
Ho inviato una risposta con indicazioni e codice ma non la visualizzo nemmeno facendo F5…
il messaggio deve forse essere approvato?
-
Questa risposta è stata modificata 7 anni fa da albertok.
Chi ha creato la discussione
albertok
(@albertok)
Gen.le @pr0v4 grazie della risposta,
Purtroppo essendo una pagina complessa non potevo farlo perchè è qualcosa che ho realizzato all’università e che vorrei implementare sul sito che è già online.
In pratica da quanto ho capito non è che ho fatto un sacco di lavoro per niente per fortuna.
Ho seguito le istruzioni per creare una pagina template nuova:
ho copiato il mio page.php e gli ho assegnato l’ID della pagina.
Come da istruzioni quindi ho un file che si chiama:
page-2628.php
che è al momento uguale a page.php.
In pratica da quanto ho capito nel file page-2628.php devo inserire il mio codice HTML personalizzato giusto?
Se questo è il codice del mio file page-2628.php (uguale a page.php)
<?php
/**
* Theme Page Section for our theme.
*
* Pagina template per il Palinsesto
* creata il 04.04.2017
*
* @package ThemeGrill
* @subpackage ColorMag
* @since ColorMag 1.0
*/
get_header(); ?>
<?php do_action( 'colormag_before_body_content' ); ?>
<div id="primary">
<div id="content" class="clearfix">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php
do_action( 'colormag_before_comments_template' );
// If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template();
do_action ( 'colormag_after_comments_template' );
?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php colormag_sidebar_select(); ?>
<?php do_action( 'colormag_after_body_content' ); ?>
<?php get_footer(); ?>
Dove devo inserire il mio codice HTML e cosa devo cancellare?
Il mio file HTML comincia con:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Palinsesto</title>
<link rel="stylesheet" href="stilePalinsestoSchermo.css" type="text/css" media="screen">
<script>
function cambiaSfondo(el)
ALTRO CODICE DELLA PAGINA
</div>
</div>
<script>
function CambiaTuttiSfondi()
{
var elements = document.getElementsByClassName('cambiaColore');
for (i = 0; i < elements.length; i++)
{
cambiaSfondo(elements[i]);
elements[i].addEventListener("mouseover", function ()
{
this.style.backgroundColor = "#f2490f"
});
elements[i].addEventListener("mouseout", function ()
{
this.style.backgroundColor = cambiaSfondo(this);
});
}
}
</script>
</body>
</html>
A naso dovrei inserire tutto quello che ho all’interno del mio codice HTML partendo da <head> fino a </body>
al posto del pezzo che va da:
<div id="primary">
fino a
</div><!-- #primary -->
ma vado a naso perchè il php non lo conosco proprio.
Mi potresti dare quaclhe dritta gentilmente?
Non riesco a visualizzare qeusta rispsota che avevo già inviato…
Ciao @albertok,
quello che ti sto per consigliare non segue molto le linee guida di sviluppo con WordPress però dovrebbe essere in grado di risolvere il tuo problema.
Per prima cosa dovresti rimuovere tutto il codice presente tra la funzione get_header e la funzione get_footer ritrovandoti con una pagina simile a questa:
<?php
/**
* Theme Page Section for our theme.
*
* Pagina template per il Palinsesto
* creata il 04.04.2017
*/
get_header(); ?>
//Inserisci il codice interno al <body> della tua pagina
<?php get_footer(); ?>
(Mi sono permesso di rimuovere l’intestazione originale nei commenti che per i nostri scopi sono irrilevanti.)
Per quanto riguarda lo script con la funziona CambiaSfondo onestamente credo che potresti spostare anche quella dall’<head> per inserirla prima della chiusura del body, </body>. Però questo dipende dal codice che hai inserito al suo interno.
Fatte queste operazioni quello che resta è collegare il foglio di stile della tua pagina HTML attraverso gli strumenti di WordPress. Per fare questo non devi far altro che aprire il file functions.php e scrivere qualcosa come questo:
add_action( 'wp_enqueue_scripts', 'miotema_carico_script_styles' );
function miotema_carico_script_styles(){
if( is_page( 2628 ) ){
wp_enqueue_script( 'css_pagina_uni', get_theme_file_uri( 'percorso/foglio.css') );
}
}
Modifica il percorso/foglio.css e dovrebbe andare tutto bene.
Ti lascio però con un consiglio. Se ti trovi a voler caricare spesso gli esempi di codice FrontEnd che per studio, lavoro o passione ti trovi a realizzare forse sarà più semplice per te iniziare a utilizzare uno strumento come CodePen e integrare i vari esempi che puoi creare all’interno di una pagina o un articolo presente nel tuo blog 😉
Spero di averti aiutato e non esitare a continuare questa interessante discussione.
A presto,
Andrea
Ciao @albertok,
mi spiace ma non puoi semplicemente sovrascrivere il codice di una pagina duplicata con quello che hai scritto tu.
I template di WordPress seguono regole ben precise.
Ti consiglio di cercare una guida base ai temi di WordPress, così avrai una idea di come vengano costruiti e saprai integrare il tuo codice più facilmente.
Prova a inserire nel motore di ricerca “creare un tema wordpress da zero”, le guide non mancheranno 🙂
Facci sapere
Chi ha creato la discussione
albertok
(@albertok)
Grazie a tutti per le risposte;
non vedo pì quella di @pr0v4 precedente a qeulla di @glorialchemica
Ho scritto al team di supporto del tema premium che uso e qeqsuta è stata la loro risposta:
You can add the HTML as you like via the WP admin panel or creating a template. And while adding the CSS if you want to target the selected page only then you can add the page ID in front of every CSS code.
Sample:
.page-id-223 .your_css_class {
/*Your code goes here*/
}
In the above code, you need to replace the page id (223) with the page ID of your page.
Please visit this link to detect the page ID.
Regards,
ThemeGrill Support Team.
Unica cosa non so cosa sia .your_css_class
è probabilmente un qualcosa che raggruppa tutte le regole CSS per qeulla spescifica pagina forse?
Ciao @albertok,
hai fatto bene a chiedere informazioni allo sviluppatore del tema. E’ sempre la referenza migliore per ottenere risposte, a maggior ragione se paghi un supporto.
Non so quanto tu conosca i CSS, nel caso tu sia acerbo ti consiglio di cercare una guida per conoscere i concetti base e comprendere meglio le indicazioni che ti ha dato lo sviluppatore. Prova a fare una ricerca con le parole chiave “guida css wordpress”
Intanto ti spiego che il termine .your_css_class non è qualcosa che raggruppa tutte le regole CSS. Tradotto letteralmente è “la tua classe CSS”; è solo di esempio, un po’ quando si indica “miosito” in un url (spero di essere stata chiara)
Quello che lo sviluppatore ti sta indicando è che devi anteporre l’ID univoco della tua pagina a TUTTE le regole CSS che intendi modificare per quella pagina.
Esempio
a {color:black}
Tutti i link del tuo sito saranno di colore nero
.page-id-223 a {color:red}
Solo per la pagina con ID 223 i link saranno di colore rosso
Ti invito ad approfondire le basi di CSS e Template di WordPress. Sarà l’inizio di uno splendido viaggio 🙂
Chi ha creato la discussione
albertok
(@albertok)
@glorialchemica
Grazie della gentilissima risposta. Diciamo che non sono a digiuno di CSS e di HTML; ho iniziato grazie a degli esami fatti all’università e mi sto piano piano specializzando. Ho compreso infatti per deduzione quello che mi hai gentilmente spiegato.
Purtroppo quanto spiegatomi dal produttore del tema non funziona; non vengono infatti eseeguite le veria parti in javascript.
Ho ri-scritto al produttore ma credo che la soluzione risieda nel creare un page template.
Come avevo chiesto anche sopra non so bene dove inserire il codice HTML; ho provato andando a naso e lasciando tutto il codice HTML di default della pagina page.php e inserendo il codice HTML. Il CSS l’ho inserito in fondo a style.css e ho ottenuto dei risultati ma vediamo che mi dice il produttore del tema … o qualcuno qui sul forum
un cordiiale saluto e
auguri di Santa Pasqua
Per cusiosità @albertok,
quali sono le modifiche che vuoi fare alla tua pagina?
Solo sono di grafica?
Che risultato vuoi ottenere?
Ciao @albertok,
onestamente avevo scritto una risposta ben dettagliata che non trovo più e la cosa mi dispiace un po’, comunque sia cerchiamo di risolvere il tuo problema.
Come ti ha detto anche @glorialchemica i template di WordPress seguono regole ben precise e bisogna stare molto attenti a quello che facciamo. Il mio consiglio è quello di rimuovere tutto il codice compreso tra get_header() e get_footer() in questo modo:
<?php
/**
* Theme Page Section for our theme.
*
* Pagina template per il Palinsesto
* creata il 04.04.2017
*
*/
get_header(); ?>
//INSERIRE CODICE QUA
<?php get_footer(); ?>
Questo ti permetterà di ottenere sempre la testata e il pié di pagina del tuo tema e di caricare tutti gli altri file “nascosti” ma essenziali al funzionamento del tema.
A questo punto puoi inserire il tuo codice dove ti ho segnalato ma attento rispettare apertura e chiusura degli elementi. Il codice che ci hai condiviso è stato ridotto volutamente ma noto che hai 2 tag script con codice inline e un foglio di stile.
Il mio primo consiglio è portare il codice inline in degli script JavaScript separati e di utilizzare la funzione wp_enqueue_script per caricare i tuoi file nel migliore dei modi. Aprendo il tuo functions.php dovresti inserire qualcosa di simile a questo:
function sam_carica_script(){
wp_enqueue_script( 'handle-style', get_theme_file_uri('percorso/style.css') );
wp_enqueue_script( 'handle-script', get_theme_file_uri('percorso/js/script.js'), array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'sam_carica_script' );
Ti consiglio di leggerti la documentazione della funzione perché troverai molte informazioni a riguardo.
Per il resto fai qualche esperimento perché senza vedere il codice completo e poter fare qualche esperimento non so in che altro modo indicarti la strada.
Non esitare a rispondere per portare avanti questa conversazione una volta che avrai sperimentato un po’ con questo codice 😉
A presto,
Andrea
Chi ha creato la discussione
albertok
(@albertok)
Gen.li @pr0v4 e @glorialchemica
il risultato lo poteve vedere qui:
http://www.radiotusciaevents.com/palinsesto/
in pratica molto brevemente:
Ogni riquadro è un div contentente una UnorderedList;
Ogni colonna giorno è composta da una colonna orario e una colonna programmi (le colonne orario dei giorni mart, merc, giov, ven, sab, dom non sono visibili nella versione desktop ma solo in quella mobile ottenuto con la media query @media only screen and (max-width:800px))
Ovviamente essendo il palinsesto di una radio è soggetto a cambiamenti;
a ogni programam corrisponde un titolo e un colore di background. Quando cambia il testo contenuto neglle ul all’interno dei div, una funzione javascript automaticamente inserisce il colore di backgorund corretto e il link che porta alla pagina del programma tutto in maniera automatica.
Ecco il perchè delle funzioni javascript che @pr0v4 aveva giustamente notato.
Al momento la pagina funziona avendo modificato a naso il codice HTML all’interno del page-IDpage.php.
A naso perchè ho seguito le regole di HTML e lasciato intatto il contenuto originale di page.php
Ho poi inserito tutte le regole CSS in fondo al file style.css
e al momento PARE che la cosa funzioni… pare!
-
Questa risposta è stata modificata 7 anni fa da albertok.
Siamo felicissimi dei tuoi risultati @albertok!!!
Comunque sia se posso permettermi dato che anche io per lavoro (e passione) sviluppo siti web, la situazione che hai descritto mi sembra più idonea ai classici CSS che all’utilizzo di JavaScript.
Sicuramente avrai le tue buone motivazioni ma, come spesso accade in informatica, esistono molti altri modi per poter raggiungere questo effetto 😉
Se la discussione ti ha aiutato a portare a risolvere il tuo problema faccelo sapere che la marcheremo come risolta (puoi farlo anche tu se non ricordo male).
A presto,
Andrea
Chi ha creato la discussione
albertok
(@albertok)
@pr0v4
grazie! tra l’altro ho sentito un mio amico sviluppatore e mi ha dato una soluzione ancora migliore:
in cima allo style.css inserire la dicitura:
@import url(“stilePalinsestoSchermo.css”);
forse non molto ortodosso perchè rallenta leggermente il caricamento… ma funzionale!
P.S. sarei molto molto interessato a quanto hai detto:
come avresti risolto senza l’aiuto di javascript?
Ciao @albertok,
la soluzione che ti hanno suggerito segue le regole del CSS ma non quelle di WordPress, ovvero andrà a caricare questo file in tutte le pagine del sito invece che soltanto in quella da te indicata (che però non ti ho indicato nell’esempio precedente, chiedo scusa :D).
Ecco come limitare, via functions.php, il caricamento del tuo CSS a una sola pagina:
function sam_carica_script(){
if( is_page( 2628 ) ){
wp_enqueue_script( 'handle-style', get_theme_file_uri('percorso/style.css') );
}
}
add_action( 'wp_enqueue_scripts', 'sam_carica_script' );
Per quanto riguarda la soluzione CSS al posto di JS, anche se adesso andiamo un po’ OffTopic, io avrei sfruttato le classi CSS in modo tale da comprendere quale sia l’area interessata e applicare il colore di sfondo in base alla classe e alle necessità di quel singolo box.
Ovviamente non so come viene creata questa tabella ma nel 99% dei casi dovresti essere in grado di risolvere in questo modo 😉
A presto,
Andrea
