Изменение CSS при авторизации пользователя

Question

Изменение CSS при авторизации пользователя

19 мар. 2015 г., 07:51:58

Просмотры: 36.3K

Голосов: 4

Итак, у меня есть следующий код:

        <h3>
             <div class="sellertitle"><a class="allseller" href="#">Что-то</a> </div>

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

Затем для "sellertitle" у меня есть следующий CSS:

<--авторизован-->
.sellertitle {
  float: left;
  width: 49%;      
}

Как видите, "Что-то" всегда видимо, а "Еще" видимо только когда пользователь авторизован.

Однако когда пользователь не авторизован, я хочу чтобы CSS для "sellertitle" был "float:none"

<--не авторизован-->
  .sellertitle {
   float: none;
   width: 49%;      
 }

Какой будет лучший способ достичь этого?

Steve Kim

375

css

Все ответы на вопрос

Комментарии

Умный подход. Используйте то, что уже есть по умолчанию :-). +1

Pieter Goosen

19 мар. 2015 г. 14:05:24

Я бы добавил, что этот ответ предполагает, что тема корректно использует функцию body_class(), просто для пользователей, которые не знают об этом. +1.

cybmeta

19 мар. 2015 г. 14:25:42

@cybmeta действительно, вы правы... в большинстве случаев я использую _s как основу для своих тем, где body_class() установлен по умолчанию :)

Rafael

19 мар. 2015 г. 14:32:39

Ха! Ещё один момент озарения добавился в мою коллекцию... Этот ответ должен быть помечен как правильный. :)

Reigel Gallarde

19 мар. 2015 г. 18:37:25

Потрясающий подход. Я обязательно попробую это. :-) Спасибо, ребята

Steve Kim

19 мар. 2015 г. 19:01:46

можно попробовать что-то вроде этого... это добавит CSS в 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
   }
}

другой вариант - изменять класс если пользователь авторизован...

у вас будет два CSS

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

затем в вашем div что-то вроде этого...

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

Reigel Gallarde

889

19 мар. 2015 г. 08:00:04

Комментарии

добавил еще один вариант... и думаю, это лучший подход.. ;)

Reigel Gallarde

19 мар. 2015 г. 08:04:13

Понял. Это то, что я никогда не пробовал. Спасибо за информацию! =)

Steve Kim

19 мар. 2015 г. 08:07:45

Не очень разумно добавлять стили напрямую в wp_head. Создайте пользовательскую таблицу стилей и используйте wp_enqueue_scripts для загрузки вашей кастомной таблицы стилей. Таким образом, плагины и дочерние темы смогут легко переопределять эти стили при необходимости. Также посмотрите другой ответ, где используется то, что предоставляется по умолчанию :-)

Pieter Goosen

19 мар. 2015 г. 14:08:57

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

Вот еще один подход с использованием только CSS, без встроенного PHP и ненужного CSS-спама в заголовке. Если ваша тема правильно использует body_class() и пользователь авторизован, WordPress добавляет класс "logged-in" к элементу body, который мы можем использовать в нашей таблице стилей:

<--не авторизован-->
.sellertitle {
  float: none;
  width: 49%;      
}

.otherseller {
  display: none;
}

<--авторизован-->
.logged-in .sellertitle {
  float: left;     
}

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

Rafael

236

19 мар. 2015 г. 13:58:46