WordPress（ワードプレス）の自作テーマを作成するために、まずはじめにやることをまとめる。
テーマフォルダの作成
今回作成する自作テーマを作って行きます。
/wp-content/themes の配下に、今回作成する自作テーマのフォルダを作成します。
「template」というフォルダを作成しました。
作成したファルだの配下に、「index.php」「style.css」「functions.php」の３つのファイルを作成します。
ベースとして、以前静的サイトとして作成しておいた「index.html」「style.css」をそのままコピーして、先ほど作成した「index.php」「style.css」にペーストします。
現在、ワードプレスの管理画面＞外観＞テーマを確認すると、「template」というテーマが新しく用意されています。
このままだとテーマの画像がなくて寂しいので、「template」フォルダの配下に「screenshot.png」形式で画像ファイルを配置します。この画像がテーマの画像として読み込まれます。
style.cssの編集
用意した「style.css」ファイルを編集し、自作するテーマの情報をコメントアウト形式で冒頭に書き込んでいきます。
/*
Theme Name: Template
Theme URI: テーマのURLを記入します
Author: テーマの作者（組織名）を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/以下の例が指定できます。
| Theme Name | テーマ名 |
| Theme URI | テーマのURL |
| Author | テーマの作者名 |
| Author URI | テーマ作者のURL |
| Description | テーマの紹介文 |
| Version | テーマのバージョン |
| License | 適用されるライセンス |
| License URI | ライセンスが記載されたページのURL |
| Tags | テーマの特徴を表すタグ |
| Text Domain | テーマを国際化する際に必要な識別用の文字列 |
index.phpの編集
用意した「index.php」ファイルを編集していきます。
wp_head()、wp_footer()の記述
WordPress（ワードプレス）が機能するために必要なHTML、CSS、JavaScript等のコードを出力してくれるために必要となるコードです。
wp_head()は</head>の直前に記述します。
<?php wp_head(); ?>
</head>wp_footer()は</body>の直前に記述します。
<?php wp_footer(); ?>
</body>言語属性の出力
WordPress（ワードプレス）は多くの言語での使用が前提とされています。
言語属性を適切に出力するために以下を編集します。
<html>タグ部分
<html <?php language_attributes(); ?>><head>内、<meta charset=~~>部分
<meta charset="<?php bloginfo( "charset"); ?>">body_class()の記述
表示されているページの条件などに合わせたclass名を出力することができるようにするため、<body>を編集します。
<body <?php body_class(); ?>>画像リンクの設定
画像参照するパスを、WordPress（ワードプレス）用に変更します。
get_theme_file_uri()を用いることで、テーマディレクトリへのパスを取得します。
<img src="<?php echo esc_url( get_theme_file_uri( "img/sample.png" ) ); ?>" alt="サンプル画像です。">リンクの設定
画面遷移に使用する際のリンクを指定方法を変更します。
<a href="<?php echo esc_url( home_url( "/" )); ?>"><a href="<?php echo esc_url( home_url( "/page1/" )); ?>">CSSの適用
style.cssを読み込むパスの記述を変更します。
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() );?>">CSSが適用できたので、用意しておいた静的ファイルと同様の見た目になったかと思います。
functions.phpの編集
functions.phpでは、WordPress（ワードプレス）テーマの拡張機能の有効化や独自機能の実装を行ったりします。
基本機能設定
<title>タグを自動で出力されるように設定します。
functions.php冒頭に記述します。
<?php //PHP開始タグ記述済み
function my_setup() {
add_theme_support( 'post-thumbnails' ); /* アイキャッチ */
add_theme_support( 'automatic-feed-links' ); /* RSSフィード */
add_theme_support( 'title-tag' ); /* タイトルタグ自動生成 */
add_theme_support( 'html5', array( /* HTML5のタグで出力 */
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
) );
}
add_action( 'after_setup_theme', 'my_setup' );CSSの読み込み
先ほど「index.php」でCSSファイルを読み込んでいましたが、WordPress（ワードプレス）では、functions.phpで読み込むことが推奨されています。
functions.phpで読み込むように、functions.phpに追記をします。
function css_scripts() {
wp_enqueue_style("base-style",
get_stylesheet_uri(),
array(),
"1.0",
"all"
);
}
add_action( "wp_enqueue_scripts" , "css_scripts" );JavaScriptの読み込み
CSSと同様、JavaScriptもfunctions.phpで読み込みます。
function my_js() {
wp_enqueue_script('script',
get_template_directory_uri() . '/js/script.js',
array(),
"1.0",
true //wp_footer()部分で読み込む
);
}
add_action( 'wp_enqueue_scripts', 'my_js' );終わりに
次回よりページをパーツに切り分けて行きます。
コメント