Modifică CSS-ul când utilizatorul este autentificat

Question

Modifică CSS-ul când utilizatorul este autentificat

19 mar. 2015, 07:51:58

Vizualizări: 36.3K

Voturi: 4

Deci am următorul cod:

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

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

Apoi, pentru "sellertitle", am următorul CSS:

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

După cum puteți vedea, "Ceva" este întotdeauna vizibil și "Altceva" este vizibil doar când utilizatorul este autentificat.

Totuși, când utilizatorul nu este autentificat, vreau ca CSS-ul pentru "sellertitle" să fie "float:none"

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

Care ar fi cea mai bună modalitate de a realiza acest lucru?

Steve Kim

375

css

Toate răspunsurile la întrebare

Comentarii

Abordare inteligentă. Folosește ceea ce este deja disponibil implicit :-). +1

Pieter Goosen

19 mar. 2015 14:05:24

Aș adăuga că acest răspuns necesită ca tema să folosească corect funcția body_class(), doar pentru utilizatorii care nu știu despre ea. +1.

cybmeta

19 mar. 2015 14:25:42

@cybmeta într-adevăr, ai dreptate... în majoritatea cazurilor folosesc _s ca bază pentru temele mele, care setează body_class() implicit :)

Rafael

19 mar. 2015 14:32:39

ha! încă unul adăugat la colecția mea de momente "aha!".. asta ar trebui marcat ca răspuns. :)

Reigel Gallarde

19 mar. 2015 18:37:25

Abordare genială. O să încerc asta :-) Mulțumesc băieți

Steve Kim

19 mar. 2015 19:01:46

poți încerca ceva de genul acesta... acest cod va adăuga CSS în 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
   }
}

o altă variantă este să schimbi clasa dacă utilizatorul este autentificat...

deci vei avea două seturi de CSS

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

apoi pe div-ul tău ceva de genul acesta...

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

Reigel Gallarde

889

19 mar. 2015 08:00:04

Comentarii

am adăugat încă o opțiune... și cred că este cea mai bună abordare.. ;)

Reigel Gallarde

19 mar. 2015 08:04:13

Înțeleg. Este ceva ce nu am încercat niciodată. Mulțumesc pentru informații! =)

Steve Kim

19 mar. 2015 08:07:45

Nu este chiar inteligent să adaugi stiluri direct în wp_head. Creează o foaie de stil personalizată și folosește wp_enqueue_scripts pentru a încărca fișierul tău de stil personalizat. În acest fel, plugin-urile și temele copil pot suprascrie aceste stiluri dacă este necesar, cu ușurință. De asemenea, verifică celălalt răspuns care folosește ceea ce este oferit în mod implicit :-)

Pieter Goosen

19 mar. 2015 14:08:57

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

Iată o altă abordare bazată doar pe CSS, fără PHP inline și fără spam de CSS inutil în head. Dacă tema ta folosește corect body_class() și un utilizator este autentificat, WordPress adaugă o clasă "logged-in" la elementul body, astfel încât putem folosi acest lucru în fișierul nostru de stiluri:

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

.otherseller {
  display: none;
}

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

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

Rafael

236

19 mar. 2015 13:58:46