WordPressテーマ〜（１）テーマ作成の準備

ここではWordPressのオリジナルテーマを作成の方法を解説します。

必要なファイル

必要なファイル

index.php　
style.css （お決まりの呪文を入れる）
必須ではありませんが、ページのスクリーンショットを用意(screenshot.png)サイズ300×225ピクセル

以上のファイルをWordPressのあるフォルダ内のthemesフォルダにアップロードします。通常は以下の階層です。
wordpress/wp-content/themes/

スタイルシートのコメント

@charset “UTF-8”;の下に次に内容を記述します。

Theme Name:テーマの名前（必須）
Theme URI:テーマのURL
Description:テーマの説明
Author:テーマの作者
Author URI:作者のURL
Version:テーマのバーション
Tags:テーマにつけられたタグ

@charset "UTF-8";
/* Theme Name: なんちゃってクッキング
Theme URI: https://itstudio.co
Description: なんちゃってクッキングのテーマ
Author: Meiko NIshikado
Author URI: https://itstudio.co
Version: 1.0.0 */

テーマの設定

テーマの設定はダッシュボードの外観で行います。

テーマ有効後にはリンク切れの状態になります。

CSSと画像のリンクが切れた状態になります。これは相対パスがそのまま使用できないためです。
そのためパスを記述し直します。

CSSファイルのリンク方法

cssのリンクは次のように記述します。

<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css">

少し前まではbloginfoを使用していたのですが、非推奨となっています。
次の記述はしないようにしましょう。（ちょっと前の参考書はすべてこの書き方ですが・・）

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css">

画像のパスを修正

画像のパスも切れてしまいます。次のように記述します。

<img src="<?php echo get_template_directory_uri(); ?>/images/rect.jpg" alt="四角形の図">

こちらもbloginfoを使用しないようにします。次の記述はしません。

<img src="<?php bloginfo('template_url'); ?>/images/rect.jpg" alt="四角形の図">

＊後ほど説明に出てくる予定ですが、子テーマの場合、get_bloginfo(‘template_url’)は親テーマのディレクトリのURLを返しますので子テーマのディレクトリは echo get_stylesheet_directory_uri()を使用します。