Дополнение к предыдущему посту: тык
Оформлять как отдельный доп не стал, т.к. его не установить как дополнение, так что если кому понравилось - ставьте все ручками, это не трудно.
Решил поделиться списком юзеров который сверстал на скорую для своего сайта, имеется мобильная и десктопная версия
Цвета ссылок наследуются от основного цвета сайта, у вас точно не будет желтым как на скрине)
Потрогать можно тут: https://mmcs.pro/users/
При наведении на блок пользователя выскочит кнопка для получения подробной инфы о пользователе.
История обновлений:
14.06.18
- Релиз
Установка:
Во-первых создайте новый файл шаблона в папке /wp-content/wp-recall/templates и назовите его user-rows-ex-classic.php
Затем вставьте в него следующий код:
<?php global $rcl_user,$rcl_users_set,$rcl_users_set; ?> <div class="user-single" data-user-id="<?php echo $rcl_user->ID; ?>"> <div class="thumb-user"> <a title="Перейти в профиль пользователя" href="<?php rcl_user_url(); ?>"> <?php rcl_user_avatar(70); ?> </a> <?php rcl_user_rayting(); ?> </div> <div class="content-user"> <div class="user-content"> <a title="Перейти в профиль пользователя" class="user-content-name" href="<?php rcl_user_url(); ?>"><?php rcl_user_name(); ?></a> <div class="userlist_top"><?php rcl_user_action(2); ?></div> </div> <div class="count-user-info"> <?php if(false!==array_search('comments_count', $rcl_users_set->data)||isset($rcl_user->comments_count)){ if(!isset($rcl_user->comments_count)) $rcl_user->comments_count = 0; echo '<span class="filter-data"><span class="filter-up">'.$rcl_user->comments_count.' <i class="fa fa-comments-o"></i></span><p>'.__('Comments','wp-recall').'</p></span>'; } if(false!==array_search('posts_count', $rcl_users_set->data)||isset($rcl_user->posts_count)){ if(!isset($rcl_user->posts_count)) $rcl_user->posts_count = 0; echo '<span class="filter-data"><span class="filter-up">'.$rcl_user->posts_count.' <i class="fa fa-newspaper-o"></i></span><p>'.__('Publics','wp-recall').'</p></span>'; } if(false!==array_search('user_registered', $rcl_users_set->data)||isset($rcl_user->user_registered)){ if(!isset($rcl_user->user_registered)) return false; echo '<span class="filter-data"><span class="filter-up">'.mysql2date('d/m/Y', $rcl_user->user_registered).' <i class="fa fa-calendar-check-o"></i></span><p>'.__('Registration','wp-recall').'</p></span>'; } ?> </div> </div> <div title="Кликните для получения подробной информации о пользователе" class="user-single-select"><a><i class="fa fa-angle-down"></i></a></div> </div> <div class="user-single-info"> <?php if(rcl_show_custom_fields_profile($rcl_user->ID)): ?> <div class="user-block-ex"> <?php if(get_the_author_meta('description',$rcl_user->ID)): ?> <p class="user-single-description"><?php echo get_the_author_meta('description',$rcl_user->ID); ?></p> <?php endif; ?> <div class="user-block-cont-info"> <?php $cont = ''; echo $cont = apply_filters('rcl_description_user',$cont,$rcl_user->ID); ?> </div> <?php echo rcl_show_custom_fields_profile($rcl_user->ID); ?> <a class="user-single-button" title="Перейти в профиль пользователя" href="<?php rcl_user_url(); ?>">Профиль пользователя</a> </div> <?php else: ?> <div class="notice-null-info"> <div class="notice-null-info-txt"><i class="fa fa-info" aria-hidden="true"></i> <p class="notice-null-head-msg">Внимание</p></div> <p class="notice-null-msg">Пользовательские данные не заполнены.</p> <a class="user-single-button" title="Перейти в профиль пользователя" href="<?php rcl_user_url(); ?>">Профиль пользователя</a> </div> <?php endif; ?> </div>
Примечание: Убедитесь что файл сохранен в кодировке utf8 без BOM
Во-вторых добавьте эти стили, например в файл стилей вашей темы (style.css)
/* START Пользователи для ядра */ .rows-ex-classic-list .user-single { border: 1px solid #ddd; box-shadow: none; background: none; display: flex; overflow: hidden; position: relative; margin-bottom: 10px; } .rows-ex-classic-list .user-single .thumb-user { display: inline-table; padding: 5px; width: 97px; height: 97px; min-width: 97px; z-index: 99; } .rows-ex-classic-list .user-single .userlist_top{ position: relative; } .rows-ex-classic-list .status_author_mess { float: left; } .rows-ex-classic-list .user-single .content-user .user-content { width: 100%; } .rows-ex-classic-list .user-single .content-user .user-content .user-content-name{ font-size: 20px; font-weight: 400; } .rows-ex-classic-list .user-single-info{ display: none; font-size: 16px; width: 80%; margin: 0px auto; position: relative; bottom: 10px; border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; } .rows-ex-classic-list .user-single .user-single-select { background: #fff; color: #777; width: 26px; height: 30px; position: absolute; bottom: 0; right: 20px; border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center; font-size: 22px; cursor: pointer; transform: translateY(50px); transition: all 0.4s cubic-bezier(0.4, 0.01, 0, 1.34); } .rows-ex-classic-list .user-single:hover .user-single-select { transform: translateY(8px); } .rows-ex-classic-list .user-single .user-single-select:hover { } .rows-ex-classic-list .user-single .user-single-select i.fa{ position: relative; top: -4px; } .rows-ex-classic-list .content-user { display: contents; width: 100%; } .rows-ex-classic-list .content-user .count-user-info { display: flex; justify-content: flex-end; align-items: center; width: auto; padding: 0 20px; } .rows-ex-classic-list .content-user .count-user-info .filter-data { color: #444; display: inline-block; font-size: 14px; line-height: 1; margin: 4px; padding: 0 8px; border-right: 1px solid #ddd; } .rows-ex-classic-list .content-user .count-user-info .filter-data:last-child { border-right: 0; } .rows-ex-classic-list .content-user .count-user-info .filter-data p{ line-height: 24px; margin-bottom: 0; } .rows-ex-classic-list .content-user .count-user-info .filter-data .filter-up{ font-size: 22px; display: flex; } .rows-ex-classic-list .show-profile-fields{ padding: 10px 0; word-wrap: break-word; } .rows-ex-classic-list .show-profile-fields p{ margin-bottom: 0px; } .rows-ex-classic-list .show-profile-fields b{ font-weight: 500; } .rows-ex-classic-list .user-single-info .user-block-ex{ padding: 20px; } .rows-ex-classic-list .user-single-info .user-single-button { width: auto; line-height: 9px; background: #eaeaea; border: 1px solid #eaeaea; display: inline-block; padding: 10px; color: #404040; border-radius: 2px; transition: background .5s; } .rows-ex-classic-list .user-single-info .user-single-button:hover { background: #ffffff; cursor: pointer; } .rows-ex-classic-list .user-single-info .notice-null-info{ background: #d2391f; color: #efefef; padding: 0px 20px 20px 20px; } .rows-ex-classic-list .user-single-info .notice-null-info .fa { background: #ffffff; padding: 4px; width: 16px; height: 16px; line-height: 14px; border-radius: 50%; font-size: 16px; font-weight: 600; color: #d2391f; margin: 0; } .rows-ex-classic-list .user-single-info .notice-null-info .notice-null-msg { margin-bottom: 0px; font-size: 16px; } .rows-ex-classic-list .user-single-info .notice-null-info .notice-null-info-txt .notice-null-head-msg { margin-bottom: 0px; width: auto; display: inline; font-weight: 400; font-size: 20px; line-height: 24px; padding-left: 5px; } .rows-ex-classic-list .user-single-info .notice-null-info .notice-null-info-txt { display: inline-flex; background: #151515; width: auto; padding: 5px; border-radius: 0 0 3px 3px; } .rows-ex-classic-list .user-single-info .user-single-description { padding: 8px; display: flex; float: left; border: 1px solid #ddd; position: relative; background: #fbfbfb; } .rows-ex-classic-list .user-single-info .user-single-description:before { content: ''; position: absolute; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #ddd; top: -11px; left: 10px; } .rows-ex-classic-list .user-single-info .user-single-description:after { content: ''; position: absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #fbfbfb; top: -9px; left: 12px; } .rows-ex-classic-list .user-single a { margin: 0; } /* START rating для пользователей ядра */ .rows-ex-classic-list .rating-rcl { position: absolute; top: 0; left: 0; color: #fff; background-color: rgba(0,0,0,0.6); } .rows-ex-classic-list .rating-rcl .rating-plus { background: #60c317; } .rows-ex-classic-list .rating-rcl .rating-minus { background: #c33017; } .rows-ex-classic-list .rating-rcl span { color: #fff !important; font-size: 14px; opacity: 1; line-height: 13px; padding: 5px 7px; border-radius: 1px; font-weight: 600; } .rows-ex-classic-list .user-single-info .user-block-cont-info{ display: block; width: 100%; float: left; } /* END rating для пользователей ядра */ /* START Пользователи для ядра (mobile responsive) */ @media only screen and (max-width: 1200px){ .rows-ex-classic-list .content-user .count-user-info {width: auto;} .rows-ex-classic-list .user-single-info{font-size: 14px;} .rows-ex-classic-list .user-single-info .user-single-description {padding: 4px 8px;} } @media only screen and (max-width: 1100px){ .rows-ex-classic-list .content-user .count-user-info .filter-data .filter-up {font-size: 18px;} } @media only screen and (max-width: 1050px){ .rows-ex-classic-list .content-user .count-user-info .filter-data .filter-up {font-size: 14px;} .rows-ex-classic-list .content-user .count-user-info .filter-data p {font-size: 12px;} .rows-ex-classic-list .content-user .count-user-info .filter-data {margin: 2px;padding: 0 4px;} } @media only screen and (max-width: 650px) { .rows-ex-classic-list .content-user {display: grid;} .rows-ex-classic-list .content-user .count-user-info .filter-data .filter-up {font-size: 11px;} .rows-ex-classic-list .content-user .count-user-info .filter-data p {font-size: 9px;} .rows-ex-classic-list .content-user .count-user-info {padding: 4px;} .rows-ex-classic-list .user-single-info{font-size: 12px;} .rows-ex-classic-list .user-single-info .notice-null-info .fa { padding: 4px; width: 14px; height: 14px; line-height: 14px; border-radius: 50%; font-size: 14px; } .rows-ex-classic-list .user-single .user-single-select i.fa { top: -3px; } .rows-ex-classic-list .user-single-info .notice-null-info .notice-null-info-txt .notice-null-head-msg { font-size: 18px; line-height: 20px; padding-left: 5px; } .rows-ex-classic-list .user-single-info .notice-null-info .notice-null-msg { font-size: 14px; line-height: 16px; padding: 6px 0; } .rows-ex-classic-list .user-single .user-single-select { width: 20px; height: 18px; top: 10px; right: 0px; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 0; font-size: 18px; transform: unset; transition: unset; } .rows-ex-classic-list .user-single:hover .user-single-select { transform: unset; } } /* END Пользователи для ядра (mobile responsive) */ /* END Пользователи для ядра */
В-третьих добавьте код в functions.php вашей темы
add_action('wp_footer', 'rows_ex_classic_list_loader'); function rows_ex_classic_list_loader(){ ?> <?php global $post; ?> <?php if(has_shortcode($post->post_content, 'userlist')) : ?> <script type="text/javascript"> (function($) { $(document).on('click', '.userlist.rows-ex-classic-list .user-single-select', function(){ var $this = $(this); var icons = $this.find('i.fa'); $this.parent().next().slideToggle({ duration: 220, // скорость открытия слайда done: function(){ if (icons.hasClass('fa-angle-down')){ icons.removeClass('fa-angle-down').addClass('fa-angle-up'); } else { icons.removeClass('fa-angle-up').addClass('fa-angle-down'); } }, queue: true // Не ждать окончания функции при клике на див да = true нет = false }); }); })(jQuery); </script> <?php endif; ?> <?php }
В-четвертых укажите в шорткоде userlist параметр template="rows-ex-classic", например: [ userlist template="rows-ex-classic" ] (пробелы у скобок убрать)
Если есть какие предложения или недостатки, пишите рассмотрим!
Мотивацию и пример описания взял у Preci
Комментариев (0)