Cambiare il CSS quando l'utente ha effettuato l'accesso

Question

Cambiare il CSS quando l'utente ha effettuato l'accesso

19 mar 2015, 07:51:58

Visualizzazioni: 36.3K

Voti: 4

Quindi ho il seguente codice:

        <h3>
             <div class="sellertitle"><a class="allseller" href="#">Qualcosa</a> </div>

             <?php if ( is_user_logged_in() ) { ?>          
                     <div class="otherseller">  <a class="allotherseller" href="#">Altro</a> </div>
             <?php } ?>
        </h3>

Poi, per il "sellertitle", ho il seguente CSS:

<--utente connesso-->
.sellertitle {
  float: left;
  width: 49%;      
}

Come puoi vedere, "Qualcosa" è sempre visibile e "Altro" è visibile solo quando l'utente ha effettuato l'accesso.

Tuttavia quando l'utente non ha effettuato l'accesso, voglio che il CSS di "sellertitle" sia "float:none"

<--utente disconnesso-->
  .sellertitle {
   float: none;
   width: 49%;      
 }

Qual è il modo migliore per ottenere questo risultato?

Steve Kim

375

css

Tutte le risposte alla domanda

Commenti

Approccio intelligente. Usa ciò che è già disponibile di default :-). +1

Pieter Goosen

19 mar 2015 14:05:24

Aggiungerei che questa risposta richiede che il tema utilizzi correttamente la funzione body_class(), giusto per gli utenti che non la conoscono. +1.

cybmeta

19 mar 2015 14:25:42

@cybmeta infatti, hai ragione... nella maggior parte dei casi utilizzo _s come base per i miei temi, che imposta body_class() di default :)

Rafael

19 mar 2015 14:32:39

ah! un altro aggiunto al mio momento "aha!".. questa dovrebbe essere segnata come risposta. :)

Reigel Gallarde

19 mar 2015 18:37:25

Approccio fantastico. Proverò questo.:-) Grazie ragazzi

Steve Kim

19 mar 2015 19:01:46

potresti provare qualcosa del genere... questo aggiungerà il CSS nell'head

add_action('wp_head', 'add_css_head');
function add_css_head() {
   if ( is_user_logged_in() ) {
   ?>
      <style>
          .sellertitle {
             float: left;
             width: 49%;      
           }
      </style>
   <?php
   } else {
   ?>
      <style>
          .sellertitle {
             float: none;
             width: 49%;      
           }
      </style>
   <?php
   }
}

un'altra opzione è cambiare la classe se l'utente è loggato...

in questo modo avrai due CSS

.sellertitle {
  float: none;
  width: 49%;      
}
.sellertitle.logged {
  float: left;      
}

poi nel tuo div qualcosa del genere...

<div class="sellertitle <?php if ( is_user_logged_in() ) {echo 'logged';}">

Reigel Gallarde

889

19 mar 2015 08:00:04

Commenti

ho aggiunto un'altra opzione... e penso sia l'approccio migliore.. ;)

Reigel Gallarde

19 mar 2015 08:04:13

Capisco. È qualcosa che non ho mai provato. Grazie per l'informazione! =)

Steve Kim

19 mar 2015 08:07:45

Non è molto intelligente aggiungere stili direttamente a wp_head. Crea un foglio di stile personalizzato e usa wp_enqueue_scripts per caricare il tuo foglio di stile personalizzato. In questo modo, plugin e temi figli possono sovrascrivere facilmente questi stili se necessario. Inoltre, dai un'occhiata all'altra risposta che utilizza ciò che viene fornito di default :-)

Pieter Goosen

19 mar 2015 14:08:57

Rafael 236 · Accepted Answer · 2015-03-19T13:58:46Z

Ecco un altro approccio basato solo su CSS, senza PHP inline e senza spammare CSS nell'head. Se il tuo tema utilizza correttamente body_class() e un utente è loggato, WordPress aggiunge una classe "logged-in" all'elemento body, quindi possiamo usarla nel nostro foglio di stile:

<--utente non loggato-->
.sellertitle {
  float: none;
  width: 49%;      
}

.otherseller {
  display: none;
}

<--utente loggato-->
.logged-in .sellertitle {
  float: left;     
}

.logged-in .otherseller {
  display: inline;
}

Rafael

236

19 mar 2015 13:58:46