100日後にWebエンジニアスキルで収益を上げるおじさん～8日目～

2025年5月25日 20:28

学んだこと

投稿の詳細ページに情報を出力

<!DOCTYPE html>
<html lang="en">

<head>
  <?php get_header() ?>
</head>

<body>

  <?php get_template_part("includes/header"); ?>

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

  <!-- Page Header -->
  <header class="masthead" style="background-image: url('img/post-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="post-heading">
            <h1><?php the_title(); ?></h1>
            <span class="meta">Posted by
              <?php the_author(); ?>
              on <?php the_date(); ?></span>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Post Content -->
  <article>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <?php the_content(); ?>
        </div>
      </div>
    </div>
  </article>

  <hr>

  <?php endwhile; ?>
  <?php endif; ?>

  <?php get_template_part("includes/footer"); ?>

  <?php get_footer(); ?>
</body>

</html>

これで詳細ページへ情報が出力ができるようになった。
WordPressは、実際に投稿するコンテンツ（記事や画像など）を管理・編集できる一方で、その表示の「骨組み」や「レイアウト」はPHPを使って作られているのだと実感した。
つまり、見た目を決めるテンプレート部分はPHPで構築し、投稿内容は管理画面から入力・反映される、という役割分担になっている。

アイキャッチの設定

投稿にアイキャッチを設定するためにはfunctions.phpを作成して、次のように記述しなければならない。

<?php
add_action('init',function(){
    add_theme_support('post-thumbnails');
});

閉じタグがないのがきになるが、phpでは後ろにコードが書かれていなければ、閉じタグを省略できる。

これでアイキャッチを設定できるようになったので、管理画面に行き、アイキャッチを設定。次はアイキャッチを表示できるようにする。

Wordpressにアップロードされた画像はidで管理されている。なのでアイキャッチに指定している画像のidを取得して、そのidをアイキャッチとして表示するように設定する　　。

　<?php
   $id = get_post_thumbnail_id();
   $img = wp_get_attachment_image_src($id);
   ?>
  <header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">

なお、これだけでは、アイキャッチが指定していない場合にURLが空欄になってしまい好ましくない。そこで、アイキャッチが指定されていれば、指定されたアイキャッチを表示し、指定されていなければデフォルトの画像を表示するようにする。

 if (has_post_thumbnail()):
        $id = get_post_thumbnail_id();
        $img = wp_get_attachment_image_src($id, 'large');
      else:
        $img = array(get_template_directory_uri() . '/img/post-bg.jpg');
      endif;
      ?>

感想

私が最初に抱いていたWordPressのイメージと、実際に触ってみて感じた印象は、かなり違っていた。

当初は「HTMLの知識がなくても簡単にホームページを作れる便利なツール」といった程度に考えていた。確かに、それは間違いではない。あらかじめ用意されたテンプレートを使えば、最低限の操作でWebサイトを公開することは可能だ。

しかし、自分である程度デザインや構造をカスタマイズしようとすると、話はまったく変わってくる。WordPressのテーマファイル――たとえば header.php や single.php など――を直接編集する必要が出てくる。PHPやHTML、CSSの知識も不可欠だ。

当然、クラウドソーシングなどでWordPress関連の案件を発注する人は、「テンプレートのままで満足している」のではなく、「自分の思い通りにカスタマイズしたい」と考えている。
その要望に応えるためには、表面的な操作方法だけでなく、テーマ構造やテンプレートタグ、関数の役割を理解し、柔軟に対応できるスキルが求められる。

つまり、「WordPressを使える」というのは単に投稿ができるという意味ではなく、カスタマイズを前提とした技術的な理解を持って初めて通用するのだと、あらためて気づかされた。