Problema nel posizionare correttamente la sidebar [Wordpress]

[KillerWorm]

No problem, ho visto e passato la pagina al validatore:
https://validator.w3.org/nu/?doc=htt...nomiche.com%2F

Direi che ci sono una 40ina di errori gravi (in particolare tag chiusi o aperti male) che compromettono la struttura del layout.

Considera che in questo caso, dove ci sono errori del genere, ogni browser tenta di risolverli a suo modo, per cui il risultato visivo potrà essere più o meno inconsistente e presentare differenze a seconda del browser utilizzato.

Il problema della sidebar potrebbe anche dipendere da questi errori, ma sarebbe comunque meglio sistemarli a prescindere.

È possibile anche che con qualche regola css si riesca a risolvere il problema in oggetto ma il mio consiglio resta comunque quello di sistemare prima di tutto gli errori di validazione.

Attraverso il validatore puoi scorrere i vari errori segnalati e cercare di sistemarli uno per uno finché il codice non risulti completamente valido o comunque senza errori strutturali.

[danielepalmas19]

Perfetto, grazie per l'input. Mi è costato parecchie ore, ma c'era davvero tantissimo da ripulire. Tanti di quegli errori che neppure immaginavo, e che mi avrebbero penalizzato non poco nelle SERP.


Ora ha finalmente zero errori, quindi possiamo provare a capire il problema sul perché la sidebar non si affianchi
L'attuale risultato lo sto ottenendo con il codice:
</article>
<?php get_sidebar(); ?>
</div>
</div>
<?php endwhile; ?>


Nella parte iniziale del codice (che non ho incollato) c'è il corpo del post da mostrare per ogni 'single post'.
Dopodiché, <?php endwhile; ?> stabilisce la fine del loop dei singoli post sulla pagina (ho impostato che mostri gli ultimi 10)


Ecco, fatta questa premessa, il problema che continua a persistere è che, nell'ordine di codice attuale (prima get sidebar, e dopo endwhile) la sidebar si posiziona alla stessa altezza del primo post mostrato, ma fa slittare i post dal secondo in poi, un po più giù, tanto quanto lo spazio occupato dalla sidebar stessa.


Viceversa, se invertissi il codice utilizzando endwhile prima, e get sidebar poi, la sidebar comparirebbe direttamente giù a fondo pagina, affiancata ad altezza di dove inizia l'ultimo post listato dell'elenco.


Non riesco davvero a capire quale escamotage intraprendere per risolvere :"D

[KillerWorm]

Bene, "No errors or warnings to show" complimenti!

Ora do uno sguardo per capire il problema. Ti aggiorno più tardi.

[KillerWorm]

Allora... il problema sta principalmente nella struttura HTML. Per ottenere l'effetto desiderato generalmente si devono disporre i due contenitori, quello dei contenuti e quello della sidebar, dentro un unico contenitore principale, quindi affiancare questi due, uno a sinistra e uno a destra.

Schematizzando dovresti avere una cosa del genere:

 __________________________________
|           CONTENITORE            |
| _____________________  _________ |
||      CONTENUTI      ||         ||
|| ___________________ ||         ||
|||    CONTENUTO 1    ||| SIDEBAR ||
|||___________________|||         ||
|| ___________________ ||         ||
|||    CONTENUTO 2    |||         ||
|||___________________|||         ||
|| ___________________ ||         ||
|||    CONTENUTO 3    |||         ||
|||___________________|||         ||
||_____________________||_________||
|__________________________________|

La tua attuale situazione invece vede i diversi contenuti (articoli) tutti separati, e solo il primo risiede dentro un contenitore assieme alla sidebar; una cosa del genere:

 __________________________________
|           CONTENITORE            |
| _____________________  _________ |
||      ARTICOLO 1     ||         ||
||                     || SIDEBAR ||
||                     ||         ||
||_____________________||_________||
|__________________________________|
 _____________________
|      ARTICOLO 2     |
|_____________________|
 _____________________
|      ARTICOLO 3     |
|_____________________|

.
Secondo me non puoi risolvere solo attraverso il CSS ma dovresti rivedere la struttura a livello di PHP.
Non ho analizzato il tuo PHP per cui non so consigliarti di preciso dove mettere le mani, ma fai magari qualche prova seguendo questa strada.

Fai sapere.

[danielepalmas88]

Ti ringrazio per gli input, sto imparando tante cose a furia di smanettare.
Alla fine ho deciso di rinunciare alla sidebar sulla homepage perché sarebbe una ripetizione inutile di altri titoli di post, mentre invece vedo più funzionale utilizzare quello spazio per dividerla in due colonne e proiettarvi più post.

Per fare ciò sto usando bootstrap grids, che a quanto pare era già implementato nel template, sebbene ne fossi ignaro e non avessi idea di cosa fosse

Fatto sta che dopo un iniziale problema di grafica (i post con altezza maggiore della media, causavano lo slittamento di quelli successivi, con conseguenti mega spazi vuoti, orribili esteticamente) che ho risolto assegnando un'altezza specifica al Div dei post, mi ritrovo con un nuovo problema:

I post proiettati su 2 colonne, sono inguardabili per i visitatori da mobile.
Per questo stavo pensando ad utilizzare un javascript, qualcosa del tipo:

<script>
if ((!pc && !osx))
{ echo('<div class="half">';
}
else {echo('<div class="container">');
}
</script> 

Pensi ci siano soluzioni migliori?
Smanettando su stackoverflow mi sono imbattuto in una domanda con il mio stesso problema, e la seconda risposta parla proprio di come fare in caso di bootstrap, ma davvero non trovo un senso a ciò che scrive ( https://stackoverflow.com/questions/...cked-on-mobile )

[KillerWorm]

Ti ringrazio per gli input, sto imparando tante cose a furia di smanettare.

Sei benvenuto

Alla fine ho deciso di rinunciare alla sidebar...

Bene

I post proiettati su 2 colonne, sono inguardabili per i visitatori da mobile.
Per questo stavo pensando ad utilizzare un javascript, qualcosa del tipo:

Non hai bisogno di alcuno script, bootstrap è studiato appositamente per offrire delle opportune classi che fanno ciò che stai chiedendo; si tratta solo di capire come impostarle. Va da sé che per avere maggiore padronanza nell'uso di tale framework è necessario approfondirne le conoscenze con un adeguato studio Consiglio magari di visionare la documentazione.

Per rispondere alla tua richiesta: non esiste nessuna classe "half". Bootstrap si basa su un sistema a 12 colonne; per ottenere una larghezza che sia metà dell'intera riga, devi applicare una classe col-6. Eventualmente devi specificare il prefisso opportuno per identificare la larghezza della viewport rispetto la quale va considerato quel numero di colonne (vedi documentazione: Grid options).

Nel tuo caso puoi applicare col-md-6 sugli elementi container relativi agli articoli.
Avrai quindi una cosa di questo tipo:

<div class="container col-md-6">

In questo modo ciascuno di questi elementi sarà largo 12 colonne (larghezza totale di default, per il cosiddetto approccio "Mobile First") quando lo si guarda su dispositivi piccoli (smartphone e tablet dove la larghezza è minore di 992px), mentre si porterà a 6 colonne (metà larghezza) su desktop o dispositivi maggiori. La sigla "md" identifica infatti i dispositivi maggiori o uguali a 992px (cioè da desktop in su).

Con poche classi puoi quindi dare una opportuna impostazione per ottenere un layout responsive secondo le tue esigenze, senza bisogno di aggiungere altro; questo è uno dei punti di forza di un framework come questo.

[danielepalmas88]

Ti ringrazio per la spiegazione. Avevo intuito la questione delle colonne osservando il template che utilizzo, dove infatti notavo che ad ogni tabella col-md-12, seguivano altre sub tabelle minori la cui somma era 12

In ogni caso non credo si possa dividere la homepage di wordpress in due colonne utilizzando questo metodo, semplicemente perché si tratta di dare l'input di un solo "scheletro" di post, che poi va in loop per tutti gli altri (stesso problema che dava sulla sidebar).

Per questo ho trovato un altro escamotage per fare ciò che mi occorre: ho aggiunto nel file CSS

.half{width:50%;float:left;} 

Dunque ora la struttura del mio blog è la seguente (con l'obbligo di inserire il div "half" subito dopo php the post, e la sua chiusura prima del php endwhile in modo tale che rappresenti l'inizio e la fine del loop, con schermo smezzato)

<?php get_header(); ?>
<div class="container">
<div class="row">
<div id="main">
<div class="row">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">
<article class="post col-md-12 text-center" id="indexpostheight">
[scheletro del post]
</article>    
</div>
<?php endwhile; ?>
</div>            
</div>        
</div>
</div>
<?php get_footer(); ?>

Essendo già smezzato dal div "half" ho dovuto impostare l'articolo su col-md-12, perché in caso contrario mi avrebbe splittato i post in due colonne, ma con un quarto di spazio l'uno.

Credo proprio l'anomalia sia questa, nella visualizzazione da mobile. Il div "half" obbliga lo split, vanificando bootstrap, ma allo stesso tempo temo di essere obbligato ad usare "half" perché il loop dei post di wordpress non sono riuscito a smezzarli su due colonne con il solo bootstrap. Per questa ragione ho pensato allo script di cui sopra, che trasformi il div class half in un div class container nel caso di visitatori mobile

[KillerWorm]

ok, ora mi è più chiaro il punto del problema. Se devi ottenere un diverso layout, a seconda della pagina in cui si trovano quegli elementi, dovrai impostare le classi bootstrap a monte nel php, magari con qualche condizione.
Sicuramente ci sono altri tipi di soluzione, ad esempio ho visto che con bootstrap 4 puoi creare delle estensioni al css di base per impostare delle classi personalizzate, ma la cosa è già più complessa.

Non ho capito comunque se hai risolto col tuo sistema. Ad ogni modo non mi sembra buono rimuovere la classe 'container', dato che si tratta di un elemento della struttura di wordpress, poco ne sai se questa viene usata per altri scopi. Tuttalpiù puoi aggiungere la tua classe oltre quella.

Per questa ragione ho pensato allo script di cui sopra, che trasformi il div class half in un div class container nel caso di visitatori mobile

Ma questo è esattamente ciò che ottieni con le classi bootstrap.

Mi pare di capire che il problema sta piuttosto nell'assegnare tali classi a seconda che tu sia sulla home, dove vuoi dimezzare per il desktop, oppure sulle altre pagine, dove vuoi mantenere sempre la larghezza totale.

Ho capito bene?

[danielepalmas88]

Non ho capito comunque se hai risolto col tuo sistema. Ad ogni modo non mi sembra buono rimuovere la classe 'container', dato che si tratta di un elemento della struttura di wordpress, poco ne sai se questa viene usata per altri scopi. Tuttalpiù puoi aggiungere la tua classe oltre quella.


Ma questo è esattamente ciò che ottieni con le classi bootstrap.

Mi pare di capire che il problema sta piuttosto nell'assegnare tali classi a seconda che tu sia sulla home, dove vuoi dimezzare per il desktop, oppure sulle altre pagine, dove vuoi mantenere sempre la larghezza totale.

Ho capito bene?

Esatto, hai capito benissimo. Scusami se non mi sono spiegato sufficientemente bene :-)

Il fatto che boostrap offra la possibilità di impostare delle variabili credo sia ininfluente in questo caso specifico. Nel senso che, dove utile, sta già facendo il suo lavoro di ridimensionamento ed adattamento nei casi di visite da schermo mobile o tablet piccolino.

A me servirebbe solo far sì che

<div class"half">

e la sua chiusura spariscano in caso di visitatori da mobile, oppure più semplicemente si trasformi in un altro

<div class="container">

che comunque danni non farebbe.
E poiché il div half non ha nulla a che vedere con bootstrap, immagino sia impossibile che le variabili di boostrap possano coinvolgerlo in qualche modo.

Quindi non so, forse il JS rimane l'unica soluzione percorribile :"D

<div id="SceltaSchermoDevice">

[SCHELETRO POST]

</div>

<script>
var el = document.getElementById('SceltaSchermoDevice');
{ if ((!pc && !osx))
{ el.innerHTML = (
('half')
); }
else { el.innerHTML = 'container';}
}
</script> 

[KillerWorm]

hummm no, penso ancora di non seguirti.

Come è chiaro anche a te, le classi di bootstrap (parliamo di classi più che di variabili) servono proprio a stabilire la larghezza da attribuire agli elementi in base alla larghezza della viewport, cioè in base ai diversi dispositivi su cui è possibile visionare la pagina. E su questo non ci piove.

Non capisco quindi cosa dovrebbe fare "half" più di quanto puoi ottenere impostando opportunamente tali classi.

"col-6" indica di dare metà larghezza rispetto all'elemento genitore "row".
"col-md-6" indica di dare metà larghezza di "row" solo quando si visiona la pagina su un dispositivo desktop o più grande, altrimenti per default resta una larghezza intera, come fosse "col-12".

Mi chiedo, è ti chiedo, non ti è sufficiente questo?

E poiché il div half non ha nulla a che vedere con bootstrap

Chiaro, il mio precedente discorso però era riferito al fatto che tu andassi a rimuovere la classe "container" per applicare "half", ma forse ho capito male.
Inoltre, in questo caso, non ho parlato di bootstrap, bensì di wordpress, nel senso che rimuovendo la classe container, o sostituendola con un'altra, potrebbe influire sul funzionamento della piattaforma (wordpress, non bootstrap) perché magari il sistema si basa anche sulla presenza di quei determinati "container" per gestire l'impostazione dei contenuti. Ma questa è solo un'ipotesi.

Ad ogni modo, forse continuo a fraintendere il tuo intento.

Se vuoi differenziare il layout (cioè la struttura HTML) in base al tipo di pagina (home o dettaglio articolo o cos'altro) allora non capisco perché continui a incentrare il discorso sul voler differenziare a seconda del dispositivo.

A me servirebbe solo far sì che
<div class"half">
e la sua chiusura spariscano in caso di visitatori da mobile

Ripeto, gestire la larghezza degli elementi a seconda del dispositivo già lo si ottiene usando opportunamente le classi bootstrap.

Se il discorso è applicare o no la classe a seconda della pagina corrente, allora presumo si possa risolvere con qualche condizione in PHP, Ma a questo punto andrei sempre ad applicare classi di bootstrap che già risolvono il fattore responsive.

Se sto prendendo un abbaglio cerca magari di farmi capire con qualche disegnino altrimenti continuiamo ad andare avanti all'infinito ribattendo sempre sullo stesso discorso senza uscirne.