ロリポップでTwenty Seventeenの子テーマを作る

備忘録として、ロリポップサーバーでのTwenty Seventeenの子テーマ作成方法をまとめます。

ロリポップ!で子テーマフォルダ作成

左側の項目一覧からサーバーの管理・設定ロリポップ!FTP

ワードプレスのフォルダを見つける。

このサイトのフォルダ

それを開くとフォルダやらファイルがずらずら出てくる。
更にwp-contentフォルダを開く。

フォルダとファイルって名前ややこしい。

更にthemesのフォルダを開くと、現在インストールしているテーマのフォルダが出てくる。

今テーマで使ってるフォルダを確認したら、その下に子テーマのフォルダを作成。

画面上の方にある、フォルダアイコンをクリック

そうすると子テーマのフォルダ名が入力できる。

このサイトのテーマはtwentyseventeenだから、twentyseventeen-childとした。そして保存。

子テーマのファイルができている

では子テーマのフォルダをクリック。

子テーマフォルダにまだ中身が無いので、functions.phpとstyle.cssファイルを作る。フォルダを作ったときと同じように、画面上の新規ファイル作成をクリックする。

まずfunctions.php

ファイル名をfunctions.phpと入力し、下記をコピペし保存。

<?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')
);
}
?>

次はstyle.css

同じ要領でstyle.cssファイルを作っていく。新規ファイル作成→ファイル名をstyle.css→下記をコピペ

注意:下記はtwenty seventeen用になっています。他のテーマを使っている場合、各項目を変更してください。

/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
*/

以上、子テーマ内が下記のようになる。

wordpressのダッシュボードから→外観→テーマと進むと、子テーマが反映されている。

それを有効化して、完成。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA