2016-11-23 2 views
0

У нас есть сайт с одной страницей, и мы только что создали страницу «Наша команда» (https://www.webovo.nl и перейдите в «Ons Team»). Я добавил три кнопки социальных сетей в файл section-ourteam.php. Проблема в том, что я добавил 3 строки кодов в div, но таким образом я могу только добавить 3 ссылки. Поэтому, когда я добавляю свои страницы в социальных сетях, у всех кнопок ниже каждого значка для членов команды есть мои страницы в социальных сетях.Кнопки для социальных сетей в трех колонках

Я хочу добавить разные ссылки на разных членов команды. Я понимаю, что это называется member.thumb. Как разбить CSS, чтобы я мог добавлять отдельные ссылки?

Может кто-нибудь помочь? Rick

P.S: Ищите комментарии html, которые я сделал в коде. Это код, который я добавил. Ниже приведен код, который в настоящее время в нашем файле раздела-ourteam.php:

<?php 
$onepress_team_id  = get_theme_mod('onepress_team_id', esc_html__('team', 'onepress')); 
$onepress_team_disable = get_theme_mod('onepress_team_disable') == 1 ? true : false; 
$onepress_team_title = get_theme_mod('onepress_team_title', esc_html__('Our Team', 'onepress')); 
$onepress_team_subtitle = get_theme_mod('onepress_team_subtitle', esc_html__('Section subtitle', 'onepress')); 
$layout = intval(get_theme_mod('onepress_team_layout', 3)); 
if ($layout <= 0){ 
    $layout = 3; 
} 
$user_ids = onepress_get_section_team_data(); 
if (onepress_is_selective_refresh()) { 
    $onepress_team_disable = false; 
} 
if (! empty($user_ids)) { 
    $desc = get_theme_mod('onepress_team_desc'); 
    ?> 
    <?php if (! $onepress_team_disable) : ?> 
     <?php if (! onepress_is_selective_refresh()){ ?> 
     <section id="<?php if ($onepress_team_id != '') echo $onepress_team_id; ?>" <?php do_action('onepress_section_atts', 'team'); ?> 
       class="<?php echo esc_attr(apply_filters('onepress_section_class', 'section-team section-padding section-meta onepage-section', 'team')); ?>"> 
     <?php } ?> 
      <?php do_action('onepress_section_before_inner', 'team'); ?> 
      <div class="container"> 
       <?php if ($onepress_team_title || $onepress_team_subtitle || $desc){ ?> 
       <div class="section-title-area"> 
        <?php if ($onepress_team_subtitle != '') echo '<h5 class="section-subtitle">' . esc_html($onepress_team_subtitle) . '</h5>'; ?> 
        <?php if ($onepress_team_title != '') echo '<h2 class="section-title">' . esc_html($onepress_team_title) . '</h2>'; ?> 
        <?php if ($desc) { 
         echo '<div class="section-desc">' . apply_filters('the_content', wp_kses_post($desc)) . '</div>'; 
        } ?> 
       </div> 
       <?php } ?> 
       <div class="team-members row team-layout-<?php echo intval(12/$layout ); ?>"> 
        <?php 
        if (! empty($user_ids)) { 
         $n = 0; 

         foreach ($user_ids as $member) { 
          $member = wp_parse_args($member, array(
           'user_id' =>array(), 
          )); 

          $link = isset($member['link']) ? $member['link'] : ''; 
          $user_id = wp_parse_args($member['user_id'],array(
           'id' => '', 
          )); 

          $image_attributes = wp_get_attachment_image_src($user_id['id'], 'onepress-small'); 
          if ($image_attributes) { 
           $image = $image_attributes[0]; 
           $data = get_post($user_id['id']); 
           $n ++ ; 
           ?> 
           <div class="team-member wow slideInUp"> 
            <div class="member-thumb"> 
             <?php if ($link) { ?> 
              <a href="<?php echo esc_url($link); ?>"> 
             <?php } ?> 
             <img class="img-center" src="<?php echo esc_url($image); ?>" alt=""> 
             <?php if ($link) { ?> 
              </a> 
             <?php } ?> 
             <?php do_action('onepress_section_team_member_media', $member); ?> 
            </div> 
            <div class="member-info"> 
            <h5 class="member-name"><?php if ($link) { ?><a href="<?php echo esc_url($link); ?>"><?php } ?><?php echo esc_html($data->post_title); ?><?php if ($link) { ?></a><?php } ?></h5> 
            <span class="member-position"><?php echo esc_html($data->post_content); ?></span> 

       <!-- Code added by me --> 
            <div class="address-contact"> 
            <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span> 
            </div> 
            <div class="address-contact"> 
            <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span> 
            </div> 
            <div class="address-contact"> 
            <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x fa-inverse"></i></span> 
            </div> 
<!-- the code below is not added by me --> 
            </div> 
           </div> 
           <?php 
          } 

         } // end foreach 
        } 

        ?> 
       </div> 
      </div> 
      <?php do_action('onepress_section_after_inner', 'team'); ?> 
     <?php if (! onepress_is_selective_refresh()){ ?> 
     </section> 
     <?php } ?> 
    <?php endif; 
} 
+0

Как CSS относится к тому, что это ссылка индивидуальный? Я думаю, вам нужно эхо и проанализировать переменную '$ member' и ее атрибуты, а затем искать, если что-то вроде' [social-link] 'среди них. – Banzay

+0

@ Рик проверить мой ответ plz. –

ответ

1

На основании Вашего запроса здесь простое решение.

h5.member-name { 
 
    display: block; 
 
    margin: 0 0 5px; 
 
} 
 
.member-position { 
 
    margin: 0 0 15px; 
 
    display: block; 
 
} 
 

 
.fa-stack { 
 
    position: relative; 
 
    float: left; 
 
    margin: 0 10px 0 0; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="member-info"> 
 
    <h5 class="member-name">MEMBER NAME</h5> 
 
    <span class="member-position">position</span> 
 
    <div class="address-contact"> 
 
    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span> 
 
    </div> 
 
    <div class="address-contact"> 
 
    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span> 
 
    </div> 
 
    <div class="address-contact"> 
 
    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x fa-inverse"></i></span> 
 
    </div> 
 
</div>

+0

Хорошо, и где я могу разместить 9 различных социальных сетей? –

+0

Проблема заключается в следующем: когда я добавляю

+0

CSS не имеет ничего общего с отдельными ссылками. Вы должны написать там php-код, например, для имени участника. –

Смежные вопросы