【第5回】（記事表示①）テンプレートタグを入れる：WordPressオリジナルテーマを作ろう【ゼロから始めるWPtheme】

<main id="main" role="main">
  <div class="jumbotron">
    <div class="container-xl">
      <div class="d-flex flex-column flex-lg-row justify-content-lg-between">
        <div class="text-box">
          <h1>ここにはキャッチを入れたい</h1>
          <span>WEB &amp; ILLUSTRATION</span>
        </div>
        <div class="d-flex align-items-end ml-auto">
          <div class="card card-body shadow">
            <time class="text-secondary h6" datetime="2021-01-28">2021-01-28</time>
            <h2 class="card-title h5">お知らせのタイトルを表示</h2>
            <p>最新のお知らせを1件表示する最新のお知らせを1件表示する最新のお知らせを1件表示する</p>
          </div>
        </div>
        <div class="btn-box">
          <a class="btn btn-white shadow rounded-pill btn-xl ic ic-arrow-right-short" href="contact/" role="button">お問い合わせはこちらから</a>
        </div>
      </div>
    </div>
  </div>
  <!--// jumbotron-->

・
・
・	
</main>

<div class="card card-body shadow card-notice">
  <?php
    $myposts = get_posts('numberposts=1');
    foreach($myposts as $post) : setup_postdata($post);
  ?>
  <time class="text-secondary h6" datetime="<?php the_time('Y-m-d'); ?>"><?php echo date("Y-m-d", strtotime($post->post_date)); ?></time>
  <h2 class="card-title h5"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php
    add_filter( 'excerpt_length', function ( $length ) {
      return 58;
    }, 999 );
    the_excerpt();
  ?>
  <?php endforeach; wp_reset_postdata(); ?>
</div>

固定ページへのリンク
※IDのところは固定ページのIDを入れます。

<?php echo get_page_link( ID ); ?>

【使い方】
<a href="<?php echo get_page_link( ID ); ?>">お問い合わせ</a>

<i class=""></i>

【使い方】
<i class="ic ic-arrow-right-short"></i>

// アイコン用scss
.ic {
  position: relative;
}

.ic-arrow-right-short {
  &::after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    content: "";
    margin-top: -8px;
    position: absolute;
    top: 50%;
    right: 7px;
    height: 16px;
    width: 16px;
  }
  &.btn-xl {
    padding-right: 3.8rem;
    &::after {
      right: 15px;
    }
  }
  &.btn-white::after,
  &.btn-outline-primary::after {
    background-image: bg-svg('<svg class="bi bi-arrow-right-short" width="1em" height="1em" viewBox="0 0 16 16" fill="' + $primary + '" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.793 8 8.146 5.354a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5H11a.5.5 0 0 1 0 1H4.5A.5.5 0 0 1 4 8z"/></svg>');
  }
  &.btn-primary::after,
  &.btn-secondary::after,
  &.btn-outline-primary:hover::after {
    background-image: bg-svg('<svg class="bi bi-arrow-right-short" width="1em" height="1em" viewBox="0 0 16 16" fill="' + $white + '" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.146 4.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.793 8 8.146 5.354a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5H11a.5.5 0 0 1 0 1H4.5A.5.5 0 0 1 4 8z"/></svg>');
  }
}

// functions
@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}
@function bg-svg($string) {
  @return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}