【WordPressテーマ】自作テーマ作成の記録　その５【2つ目】

こんにちは朱夏です。

WordPressテーマ作成の続きをやっていきます。
今回は、作成したHTMLファイルをWordPress化していきたいと思います。

勉強させていただく動画はこちら。

今回は、style.cssの作成、index.phpの変換、functions.phpの作成までをやっていきたいと思います。

スタイルはBootstrap4とタグに直接スタイルを指定して書いて来たので、今のところ空のファイルになっていましたが、WordPressのテーマとして認識させるために必要な情報をここに書く必要があります。

というわけで、style.cssの中身はこんな感じです。

/*
Theme Name: MyTheme
Theme URI: 
Author: the WordPress team
Author URI: http://wordpress.org/
Description: 
Version: 1.0
License: 
License URI: 
Tags: 
Text Domain: 
*/

テーマの基本情報ですね。
基本的には「Theme Name:」が必須になっていて、あとは情報が無くても問題ないみたいです。

前回作ったHTMLファイルのPHP化と、function.phpの作成を行いました。
HTMLからのPHP化については、リネームで拡張子を変更すればOKです。

function.phpについては、中身は空でファイルだけ作成しておけば今のところはOKです。

WordPressでテーマを適用するには、インストールする必要があります。
その方法は以下です。

1. 1. 作成したファイルをまとめて圧縮
   2. WordPressからテーマを新規追加
   3. 圧縮したzipファイルを指定
   4. インストールして有効化

これでテーマが適用されます。

テーマが適用されたWordPressのトップページを見てみると、画像が表示されていないと思います。
WordPressは画像を管理するフォルダが別にあるため、リンクを変更する必要があります。
変更方法は動画の中で紹介されていましたが、今後もテーマ作成を行っていくのなら覚えて損はないポイントですね。

<img>タグのコードを以下の様に変更すると画僧が読み込まれるようになります。

<-- 例 -->

<-- 変更前 -->
<img src="img/testimg.jpg" alt="test">

<-- 変更後 -->
<img src="<?php echo get_template_directory_uri(); ?>/img/testimg.jpg"" alt="test">

このコードの書き方は、私が1つ目のテーマを作成した時に使ったものと別なのですが、それでも効果は同じの様です。

それぞれのコードにどんな意図があるのかは気になるところですが、今回は動画に倣って作っていこうと思います。

というわけで、今回はWordPres化の初期段階をやっていきました。
次の段階では、ヘッダー、フッター、サイドバーを別ファイルに分割していくことになると思います。

それでは、今回はここまでです。
次回もよろしくお願いします。