補足:条件分岐とテーマイメージ画像 | SkillhubAI(スキルハブエーアイ)

補足:条件分岐とテーマイメージ画像

条件分岐を加えてレベルアップ

if文の基本

条件分岐とは、「この条件に当てはまったら、この処理をしてください」と条件に応じて処理を行うように指示する書き方です。

今回は、if文という「もし~なら...」という分岐を使っていきます。
file
ifの後のカッコに書かれているのが条件です。
この条件に一致する状況なら、その下に書かれている三角部分の処理が行われます。
条件に一致しない場合は、処理をスキップします。今回のコードだと、何も起こりません。

ifと組み合わせて、elseという記述を加えると、条件に当てはまらないときの処理も指定できます。
file
最初に書かれている条件に当てはまれば三角の処理、当てはまらないときは四角の処理を行います。

この書き方は、実はWordpressテーマでも良く使用されています。

ブログ一覧の「アイキャッチなし」を設定

例えば、Wordpressの投稿ではアイキャッチを設定しなくても公開ができますよ。
基本の書き方だけだと、アイキャッチを登録されていない投稿は<?php the_post_thumbnail( ); ?>で呼び出しても空のまま。

ここに、アイキャッチ画像が無いとき用の画像を表示させることもできます。
file

この場合、条件部分にはWordPressが用意している「現在の投稿記事にアイキャッチ画像が指定されているか」を判定するための関数(テンプレートタグ)has_post_thumbnail()を使います。
file

当てはまる場合は、現在のまま<?php the_post_thumbnail( ); ?>
当てはまらない場合は、テーマディレクトリ内にある画像を指定します。

index.php

<?php get_header(); ?>

<main>
  <section>
    <h2>エドベースブログ</h2>
      <?php while (have_posts()) : the_post(); ?>
        <article class="postcard">
          <div class="img">
            <?php if(has_post_thumbnail()): ?>
              <?php the_post_thumbnail( ); ?>
            <?php else: ?>
              <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.jpg" alt="">
            <?php endif; ?>
          </div>
          <div class="desc">
            <a href="<?php the_permalink(); ?>">
              <h3><?php the_title(); ?></h3>
              <?php the_excerpt(); ?>
            </a>
          </div>
        </article>
      <?php endwhile; ?>
  </section>
</main>

<?php get_footer(); ?>

そうすると、アイキャッチ画像が無い投稿には、指定したNO IMAGEの画像が表示されます。
file

画像サイズ(幅など)はCSSで調整しましょう。

テーマ画像の設定方法について

※この設定はしても、しなくても構いません。

WordPressのテーマの設定画面。
元々入っていたテーマには、適用した場合の見本画像が表示されています。
ですが、新しく作ったテーマには何も表示されていませんよね。
file

テーマ選択画面にサムネイルを表示するためには、screenshot.pngというpngファイルが必要です。
テンプレートと同じく、ここもファイル名で判定されるんですね。

screenshot.pngのサイズは1200×900pxあたりで作ることが多いです。 下記の方法で作成してみましょう。

  1. PhotoshopかIllustratorでサイズを決めて新規作成
  2. スクリーンショットを張り付ける
  3. screenshot.pngと名前をつけて保存する
  4. 作成中のテーマフォルダ直下に画像を入れる

テーマ選択画面に、作ったscreenshot.pngが反映されます。

file