どうも、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と同じようにエディタにこちらを入力。
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を開く。
赤いところに
text-align: center;
を入力してみる。
おー、タイトルがセンターに移動した!
こうやって色々いじりながら、カスタマイズしていって、最悪の場合でも親テーマに戻れるってことなのかな。
ちょっと勉強中なので、間違ってたら、また書き直します。