ワードプレスの子テーマを作る!index.phpテンプレートファイルが必要というエラーについて

スポンサードリンク

どうも、TuUUです。

今回は、ワードプレスの子テーマに手をつけてみました!

ワードプレスでブログをしてて、エラーとか出ると「嫌ぁーーーー!」って叫びたくなることない?w

ワードプレスの子テーマを作る

ワードプレスは、色々なカスタマイズができる!

これが、ワードプレスの強みなのに、怖くて全然カスタマイズに手を出せてない。

このままなら、はてなブログとか無料ブログの方がプラグインの更新だったり、余計なこと考えなくていいよね。

ただ、目指すところは自分の思いどおりのサイトを作ること!

子テーマを作れば、テーマ自体がアップデートされたとしても、カスタマイズが崩れないというメリットがあるので、早速作ってみます。

子テーマのフォルダ作成

自分が使ってるテーマは「twenty seventeen」

ワードプレスを始めたら、最初から設定されてるテーマです。

自分は、“エックスサーバー”を使ってるので、

ファイルマネージャにログイン。

対象のサイト名を入るとこんな画面。

次のように進んでいく。

public_html

wp-content

themes

デフォルトで入ってるテーマが並ぶ。

「フォルダ作成」「親テーマ名-child」を入力。

『twenty seventeen-child』のフォルダ完成!

style.css

twentyseventeen-childのフォルダを開く。

ファイル作成(下の部分)に「style.css」「functions.php」を入力。

style.cssを押すとダウンロードされる。

開くと、エディタ画面に(エディタのソフトは、Atomを使ってます)

ここにこちらを入力。

/*
Theme Name: Twenty Sevenfteen Child
Theme URI: http://自分のサイトのURL/twenty-Seventeen-child/
Description: Twenty Seventeen Child Theme
Author: 自分の名前
Author URI: http://自分のサイトのURL
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child
*/

大文字、小文字は気をつけて記入。

functions.php

style.cssと同じようにエディタにこちらを入力。

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);
}

入力し終わったら、別名でデスクトップに保存。

index.phpテンプレートファイルが必要というエラー

ワードプレスの管理画面を開き、外観→テーマと進んでいくと上手くいってるはずだったのに、トラブル発生。

※ここは真似しないでね。

index.phpテンプレートファイルが必要とか、style.ceeのスタイルシートにテンプレートヘッダーが必要だとか意味不明な言葉が並んでる。

index.phpが必要だっていうから追加したら、

twentyseventeenの子テーマができたけど、有効化しても画面が真っ白。

うまくいかない原因は、ファイルをアップロードできてなかったから!

※ここから真似してOK!

エックスサーバーの画面に戻り、ファイルのアップロードというところにダウンロードし、先ほど入力したファイルを「アップロード」する。

今のブログと全く同じ画面が、現れるようになったら、子テーマを有効化して完了!

アップロードしないと何も機能しないよね。

いやー、お恥ずかしいw

子テーマのテスト

子テーマが、ちゃんと機能するのかテストしてみます。

外観→テーマ編集→style.cssを開く。

赤いところに

header {
text-align: center;

を入力してみる。

おー、タイトルがセンターに移動した!

こうやって色々いじりながら、カスタマイズしていって、最悪の場合でも親テーマに戻れるってことなのかな。

ちょっと勉強中なので、間違ってたら、また書き直します。

スポンサードリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする