🧠 概要：
概要
この記事は、Junyaというおじさんが100日間でWebエンジニアとしてのスキルを磨き、収益を上げる過程を記録するシリーズの第8日目にあたる内容です。この回では、WordPressのテーマ作成に関する具体的なコードとその説明が含まれており、特にカスタムテンプレートやアイキャッチ画像の設定について述べています。最終的に、WordPressに対する理解が深まった感想も共有されています。
要約（箇条書き）
- HTML/PHPの利用: WordPressのテーマはPHPで構築され、投稿内容は管理画面から管理されることを実感。
- アイキャッチ設定: functions.phpにコードを追加して、アイキャッチを設定する方法を学ぶ。
- アイキャッチ表示の実装: アイキャッチのIDを取得し、設定された画像やデフォルト画像を表示するコードを記述。
- WordPressの印象の変化: 初めは「簡単なツール」と考えていたが、カスタマイズにはHTMLやPHPの知識が必要であることに気づく。
- クライアントのニーズ: クラウドソーシングでのWordPress案件では、テンプレートのカスタマイズが求められるため、技術的理解が重要。
- 技術的理解の重要性: 「WordPressを使える」とは投稿ができるだけでなく、カスタマイズへの理解が求められることを再認識。
<!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を作成して、次のように記述しなければならない。
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を使える」というのは単に投稿ができるという意味ではなく、カスタマイズを前提とした技術的な理解を持って初めて通用するのだと、あらためて気づかされた。
Views: 0
