パーマリンクと画像やCSSのリンク

パーマリンクと画像やCSSのリンク

次に記事の詳細ページに飛ぶためのリンクをphpコードで書いてみます。現段階でトップページに投稿記事のタイトルと本文が表示されています。ですがリンクは仮のリンクのままです。この仮のリンクのところにテンプレートタグを記述します。
aタグの属性のhrefの値にを書きます。そうするとトップページで表示されている記事に合わせてリンクのURLが自動的に記述されます。具体的に書くと

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>

となります。ループも含めて書くと

<?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>

        <div class="box1">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <p><a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></a></p>
        </div>

      <?php endwhile; ?>
      <?php else : ?>

        <div>
          <h6>記事が投稿されていません</h6>
        </div>

      <?php endif; ?>

となります。
記事詳細ページであるsigle.phpをまだ作っていませんのでリンク先に飛ぶことはないですがsigle.phpを作ると詳細ページに飛ぶようになります。

WordPressでの画像やCSSのリンク

次にトップページだけのアイキャッチを作ってみます。
その前にWordPressでは画像やCSSが通常のHTMLの書き方ではリンクしません。リンクにテンプレートタグを挟まないとリンクしてくれません。逆に言えばそのテンプレートタグを使いこなせば独自のデザインがWordPressの中で表示させることができます。
まずテーマフォルダの中に画像を用意します。分かり易いようにimageフォルダの中に格納します。
imgタグを使ってリンクしてみます。まずimgタグで用意したimageフォルダの中にあるeye-catch.jpgにリンクすると

<img src="images/eye-catch.jpg" alt="">

となります。見てみましょう。

プレビュー するとこうなり、画像を表示しません。
それでは途中テンプレートタグを挟んでみましょう。
images/eye-catch.jpgの直前に<?php bloginfo(‘template_url’); ?>/を追加してみます。

<img src="<?php bloginfo('template_url'); ?>/images/eye-catch.jpg" alt="">

すると

画像が表示するようになりました。
CSSを微調整していきます。
高さを固定していましたのでheightをautoにします。そして画像を中央に揃えます。

さらにimgと親要素の背景色との間に行間の設定で発生する余白を行間ゼロにして無くします。

.eye-catch{
  height: auto;
  text-align: center;
  line-height: 0;
  background-color:lightgray;
}