<?php $__env->startSection('content'); ?>

<div class="breadcrumbs en" typeof="BreadcrumbList" vocab="https://schema.org/">
  <span property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" title="Go to BitStar Studio." href="<?php echo e(home_url('/')); ?>" class="home">
      <span property="name">HOME</span>
    </a>
    <meta property="position" content="1">
  </span>・
  <span property="itemListElement" typeof="ListItem">
    <a property="item" typeof="WebPage" title="Go to Column." href="<?php echo e(home_url('/column')); ?>">
      <span property="item" typeof="WebPage">
        <span property="name">Column</span>
      </span>
    </a>
    <meta property="position" content="2">
  </span>・<br>
  <span property="itemListElement" typeof="ListItem">
    <span property="item" typeof="WebPage">
      <span property="name">
        <?php
        if (mb_strlen($post->post_title, 'UTF-8') > 16) {
          $title = mb_substr($post->post_title, 0, 16, 'UTF-8');
          echo $title . '…';
        } else {
          echo $post->post_title;
        }
        ?>
      </span>
    </span>
    <meta property="position" content="3">
  </span>
</div>

<div class="page-header">
  <h1 class="page-header__title en">Column</h1>
  <h2 class="page-header__sub-title">コラム</h2>
</div>

<?php if (has_post_thumbnail()) { ?>
  <div class="custom-post__thumbnail d-md-none">
    <?php the_post_thumbnail(); ?>
  </div>
<?php } ?>

<div class="page-content">
  <div class="page-content__nav-wrap">
    <div class="page-content__column-nav" id="fix-element">
      <h3 class="page-content__column-title">人気おすすめタグ</h3>
      <ul class="column-tag-list">
        <?php
        //並べ替えのプラグインと競合してorderby=>countが効かないので配列を作って対応
        $term_array = [];
        $args = array(
          'hide_empty' => 0,
        );
        $terms = get_terms('column_tag', $args);

        foreach ($terms as $term) {
          array_push($term_array, array(
            'name' => $term->name,
            'slug' => $term->slug,
            'count' => $term->count,
          ));
        }

        $sort_key = array_column($term_array, 'count');
        array_multisort($sort_key, SORT_DESC, $term_array);

        foreach ($term_array as $term) { ?>
          <li class="column-tag-list__item">
            <a class="column-tag" href="<?php echo (is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] . '/' . $term['slug'];?>">
              <?php echo $term['name']; ?>
            </a>
          </li>
        <?php  } ?>
      </ul>

      <h3 class="page-content__column-title">よく読まれている記事</h3>
      <div>
        <?php
        if (function_exists('wpp_get_mostpopular')) {
          wpp_get_mostpopular(array(
            'title_length' => 34,
            'limit' => 5,
            'post_type' => 'column',
            'range' => 'all_time',
            'order_by' => 'views',
            'thumbnail_width' => 160,
            'thumbnail_height' => 160,
            'stats_views' => true,
            'stats_comments' => false,
            'stats_author' => false,
            'stats_date' => true,
            'stats_date_format' => 'Y.m.d',
            'stats_category' => false,
            'wpp_start' => '<ul class="column-rank-list">',
            'wpp_end' => '</ul>',
            'post_html' => '<li class="column-rank-list__item"><a href="{url}"><div class="column-rank-list__img-wrapper">{thumb_img}</div><div class="column-rank-list__text-wrapper"><p class="column-rank-list__date en">{date}</p><h4 class="column-rank-list__title">{text_title}</h4></div></a></li>',
          ));
        }
        ?>
      </div>

    </div>
  </div>

  <div class="w-100">

    <div class="custom-post">
      <?php while(have_posts()): ?> <?php the_post() ?>
      <article <?php post_class('custom-post__inner') ?>>

        <?php if (has_post_thumbnail()) { ?>
          <div class="custom-post__thumbnail d-none d-md-block">
            <?php the_post_thumbnail(); ?>
          </div>
        <?php } ?>

        <header class="single-works__header">
          <p class="single-works__date"><?php echo get_the_date('Y.n.j'); ?></p>
          <h1 class="entry-title custom-post__title"><?php echo get_the_title(); ?></h1>

          <?php
          echo '<ul class="column-tag-list">';
          if ($terms = get_the_terms($post->ID, 'column_tag')) {
            foreach ($terms as $term) {
              echo '<li class="column-tag-list__item"><a class="column-tag" href="' . get_term_link($term->term_id) . '">' . $term->name . '</a></li>';
            }
          }
          echo '</ul>';
          ?>
        </header>
        <div class="entry-content custom-post__content">
          <?php the_content() ?>
        </div>
        <footer>
          <?php echo wp_link_pages(['echo' => 0, 'before' => '<nav class="page-nav">
            <p>' . __('Pages:', 'sage'), 'after' => '</p>
          </nav>']); ?>

        </footer>
      </article>

      <?php endwhile; ?>

      <div class="column-link">
        <h2 class="column-link__title">BitStar Studioまで<br class="d-md-none">お気軽にご連絡ください</h2>
        <div class="column-link__unit d-none d-md-flex">
          <a class="column-link__btn column-link__btn_fill" href="<?php echo e(home_url('/#contact')); ?>">お問い合わせ</a>
          <a class="column-link__btn" href="https://bitstar.tokyo/request/" target="_b
          ">資料ダウンロード</a>
        </div>

        <div class="sns-share sns-share_border-right d-md-none mb-5">
          <div class="sns-share__item">
            <a class="sns-share__link" href="<?php echo e(home_url('/#contact')); ?>">
              <svg width="27" height="21" viewBox="0 0 27 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M26.6667 20.75H0V0.75H26.6667V20.75ZM1.11111 2.44222V19.6389H25.5556V2.44222L13.3344 13.5533L1.11111 2.44222ZM24.5433 1.86111H2.12556L13.3344 12.0511L24.5433 1.86111Z" fill="#444444" />
              </svg>
              <br>
              <span>お問い合わせ</span>
            </a>
          </div>
          <div class="sns-share__item">
            <a class="sns-share__link" href="https://bitstar.tokyo/request/" target="_blank">
              <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 5V0H20V5H0ZM20 7V24H0V7H20ZM16 18H4V19H16V18ZM16 15H4V16H16V15ZM16 12H4V13H16V12Z" fill="#444444" />
              </svg>
              <br>
              <span>資料ダウンロード</span>
            </a>
          </div>
        </div>
      </div>

      <h3 class="sns-share-title en">SHARE</h3>
      <div class="sns-share sns-share_border-right">
        <div class="sns-share__item">
          <a class="sns-share__link" href="//www.facebook.com/share.php?u=<?php the_permalink(); ?>" target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" width="26.659" height="26.659" viewBox="0 0 26.659 26.659">
              <path id="iconmonstr-facebook-3" d="M21.105,0H5.554A5.555,5.555,0,0,0,0,5.554V21.105a5.555,5.555,0,0,0,5.554,5.554H21.105a5.554,5.554,0,0,0,5.554-5.554V5.554A5.554,5.554,0,0,0,21.105,0ZM17.773,7.776H15.636c-.683,0-1.2.28-1.2.987V10h3.332l-.264,3.332H14.44v8.886H11.108V13.33H8.886V10h2.222V7.861c0-2.246,1.182-3.418,3.844-3.418h2.82Z" fill="#4263b1" />
            </svg><br>
            <span class="d-none d-md-inline">Facebookで</span>シェアする
          </a>
        </div>
        <div class="sns-share__item">
          <a class="sns-share__link" href="//twitter.com/share?text=<?php echo urlencode(the_title_attribute('echo=0')); ?>&url=<?php the_permalink(); ?>" target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" width="26.659" height="26.659" viewBox="0 0 26.659 26.659">
              <path id="iconmonstr-twitter-3" d="M21.105,0H5.554A5.555,5.555,0,0,0,0,5.554V21.105a5.555,5.555,0,0,0,5.554,5.554H21.105a5.554,5.554,0,0,0,5.554-5.554V5.554A5.554,5.554,0,0,0,21.105,0Zm-.154,10.26A10.37,10.37,0,0,1,5,19.469a7.336,7.336,0,0,0,5.4-1.51A3.649,3.649,0,0,1,6.99,15.427a3.666,3.666,0,0,0,1.646-.062,3.65,3.65,0,0,1-2.925-3.621,3.628,3.628,0,0,0,1.651.457A3.653,3.653,0,0,1,6.234,7.331a10.353,10.353,0,0,0,7.516,3.81,3.648,3.648,0,0,1,6.214-3.325,7.313,7.313,0,0,0,2.317-.884,3.661,3.661,0,0,1-1.6,2.017,7.307,7.307,0,0,0,2.094-.574,7.4,7.4,0,0,1-1.821,1.885Z" fill="#279ff0" />
            </svg><br>
            <span class="d-none d-md-inline">Twitterで</span>つぶやく
          </a>
        </div>
      </div>

    </div><!-- /custom-post -->

  </div>
</div>

<div class="sp-column-tag">
  <h3 class="sp-column-tag__title">人気おすすめタグ</h3>
  <ul class="column-tag-list">
    <?php
    $terms = get_terms('column_tag');
    foreach ($terms as $term) { ?>
      <li class="column-tag-list__item">
        <a class="column-tag" href="<?php echo get_term_link($term->term_id) ?>">
          <?php echo $term->name ?>
        </a>
      </li>
    <?php  } ?>
  </ul>

  <h3 class="sp-column-tag__title">よく読まれている記事</h3>
  <div>
    <?php
    if (function_exists('wpp_get_mostpopular')) {
      wpp_get_mostpopular(array(
        'title_length' => 34,
        'limit' => 5,
        'post_type' => 'column',
        'range' => 'all_time',
        'order_by' => 'views',
        'thumbnail_width' => 160,
        'thumbnail_height' => 160,
        'stats_views' => true,
        'stats_comments' => false,
        'stats_author' => false,
        'stats_date' => true,
        'stats_date_format' => 'Y.m.d',
        'stats_category' => false,
        'wpp_start' => '<ul class="column-rank-list">',
        'wpp_end' => '</ul>',
        'post_html' => '<li class="column-rank-list__item"><a href="{url}"><div class="column-rank-list__img-wrapper">{thumb_img}</div><div class="column-rank-list__text-wrapper"><p class="column-rank-list__date en">{date}</p><h4 class="column-rank-list__title">{text_title}</h4></div></a></li>',
      ));
    }
    ?>
  </div>
</div>

<div class="other-posts">
  <div class="other-posts__inner">
    <h3 class="other-posts__title en">Other Column</h3>

    <div class="service-slider">
      <div class="service-slider__inner">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">

            <?php
            $wp_query = new WP_Query(array(
              'post_status' => 'publish',
              'post_type' => array('column'), //カスタム投稿タイプ名
              'posts_per_page' => 6,
              'post__not_in' => array($post->ID)
            ));

            if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
            ?>

                <div class="swiper-slide">
                  <a class="card card_link" href="<?php the_permalink(); ?>">
                    <p class="card__text mb-2"><?php echo get_field('voice_company'); ?></p>
                    <p class="card__text mb-4"><?php echo get_field('voice_name'); ?></p>
                    <figure class="card__img-wrap">
                      <?php if (has_post_thumbnail()) : ?>
                        <img class="card__img lazyload" src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'); ?>" data-src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>">
                      <?php else : ?>
                        <img class="card__img lazyload" data-src="<?= App\asset_path('images/no-image.jpg'); ?>">
                      <?php endif; ?>
                    </figure>
                    <div class="card__body">
                      <p class="card__time2 en mb-2"><?php echo get_the_date('Y/m/d'); ?></p>
                      <h4 class="card__text underline"><?php the_title(); ?></h4>
                    </div>
                  </a>

                </div>

            <?php endwhile;
            endif;
            wp_reset_postdata(); ?>

          </div>

        </div><!-- swiper -->

      </div>
    </div><!-- service-slider -->

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        breakpoints: {
          768: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // mousewheel: true,
      });
    </script>

  </div>
</div>

<div class="sp-cta">
  <p class="sp-cta__text">BitStar Studioまでお気軽に<br>ご連絡ください！</p>
  <div class="sp-cta__link-unit">
    <a class="sp-cta__btn sp-cta__btn_purple" href="<?php echo e(home_url('/#contact')); ?>">まずは無料相談</a>
    <a class="sp-cta__btn sp-cta__btn_lime" href="https://bitstar.tokyo/request/" target="_blank">資料請求</a>
  </div>
</div>

<script>
  jQuery(function() {
    jQuery(window).on('scroll resize', function() {
      let scroll = jQuery(document).scrollTop();
      let contenttop = jQuery(".page-content").offset().top;
      let sideheight = jQuery("#fix-element").outerHeight();
      let sidemargintop = 40;
      let sidemarginbottom = 0;
      let footertop = jQuery(".other-posts").offset().top;

      if (scroll > (footertop - sidemarginbottom - sidemargintop - sideheight)) {
        // フッターにあたった場合
        jQuery("#fix-element").css({
          'position': 'absolute',
          'top': 'auto',
          'bottom': sidemarginbottom + 'px',
        });
      } else if (scroll > (contenttop - sidemargintop)) {
        // 追従時
        jQuery("#fix-element").css({
          'position': 'fixed',
          'top': sidemargintop + 'px',
          'bottom': 'auto',
        });
      } else {
        // 追従するまでスクロールされてないとき
        jQuery("#fix-element").css({
          'position': 'static',
          'top': 'auto',
          'bottom': 'auto',
        });
      }
    });
  });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>