お名前ドットコムのレンタルサーバーにLightningの子テーマを設置する方法

wordpress lightning 子テーマ

山梨集客ドットコムは、お名前ドットコムのレンタルサーバー上にWordPressで作成したwebサイトを設置しています。

2018年10月までは「BizVektor」をテーマにしていたのですが、『事実上、今後のアップデートは終了』という事もあり、テーマを「Lightning」にしました。

「BizVektor」の時は、すでに開発終盤だったという事もあってテーマの更新もなかったため、cssの修正などは直接親テーマにしていたのですが、「lightning」は、WordPressのエディタがGutenbergになった影響もあってテーマの更新頻度が多くなると予想されます。

そうなると、親テーマでやってきたcssの修正は、テーマ更新の都度白紙に戻ってしまう=今までのcssの修正は一瞬で水の泡。

それを避けたいと思い『子テーマ』なるものを作って、そちらで修正をして行くことにしました。

子テーマ」についての詳しい説明などはこちらを参照ください。

子テーマを作ってWordPressの既存テーマをカスタマイズする方法

webクリエイターボックス

今回『子テーマ』を作るのは初めてでしたが、どうにか無事に実装できましたので、その流れをお伝えできればと思います。

Lightningの「子テーマ」作成の流れ

以下の流れで「子テーマ」の設置をしました。

  1. パソコンのデスクトップに子テーマのフォルダ「lightning-child」を作る。
  2. terapadを使って「style.css」を作成し、「lightning-child」のフォルダに入れる。
  3. terapadを使って「functions.php」を作成し、「lightning-child」 のフォルダに入れる。
  4. ftpソフトを使って「lightning-child」のフォルダーをサーバー上に保存する。
  5. WordPress にログインして、テーマ「lightning-child」を有効化する。

terapadやFTPソフトについての説明・ダウンロード方法は、とても分かりやすく説明されている方がいますので、そちらをご参照ください。

terapadの説明、使い方、ダウンロードなど

プログラミングにも使える!TeraPadの使い方【初心者向け】

TechAcademyマガジン

FTPの説明、使い方、ダウンロードなど

いまさら聞けない「FTP」とは?基礎知識を徹底解説!

プログラミング入門者向け学習情報サイト

フォルダー「lightning-child」を作る

現在使っているテーマが「lightning」なので、子テーマの名前を分かりやすいように「lightning-child」とします。

自分のパソコンのトップ画面で、適当に右クリックすれば作る事ができます。

あとは名前を lightning-child として、トップページにでも置いておけば終了です。

「style.css」の作り方

必要な記述をterapadにコピペする

いろいろ調べましたが、必要最低限なものが下記のものです。こちらをterapadにコピペします。
貼り付けた時に、余分なスペースなどがない事を確認します。

@charset “utf-8”;
/*
Theme Name: Lightning Child
Template: lightning
*/

※ ” は半角です。全角の”ではありませんので、ご注意ください。

ファイル⇒名前を付けて保存する

・保存する場所:lightning-child
・ファイル名:style
・ファイルの種類:cssファイル
として保存します。

以上でlightning-childのフォルダの中に「style.css」が作成されて入っています。

「functions.php」を作成する。

必要な記述をterapadにコピペする

こちらの必要最低限なものが下記のものです。こちらをterapadにコピペします。貼り付けた時に、余分なスペースなどがない事を確認します。

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

ファイル⇒名前を付けて保存する

・保存する場所:lightning-child
・ファイル名:functions
・ファイルの種類:phpファイル
として保存します。

以上でlightning-childのフォルダの中に「functions.php」が作成されて入っています。

FTPソフトを使って「lightning-child」のフォルダーをサーバー上に保存

FTPソフトを起動し、lightningのテーマが入っている所にデスクトップ上の「lightning-child」フォルダーをドラック&ドロップで移動します。

当社では、
yamanashisyuukyaku.com ➡ wp ➡ wp-content ➡ themes でした。

WordPressにログインして、子テーマ『lightning-child』を有効化する

WordPressにログインし、外観 ➡ テーマ に移動すると、そこに『Lightning child』というテーマが出来ていますので、有効化して完了です。

うまくいかない時の対応

  • style.css、functions.php に余分な空白がないか確かめます。
  • フォルダーの名前が大文字になっていないか確かめます。
  • キャッシュがいたずらしている可能性があります。「F5」または「ctrl+F5」で画面の再表示を試してみてください。

それでもうまく行かない場合は、以下の記事をご参照ください。

子テーマが反映されない時の対処法

WordPress子テーマ作り方と反映されない時のテンプレートcss対処法

日めくりオトナ稼業

子テーマを作る事ができれば、親テーマの更新を気にする事無く、どんどんカスタマイズする事もできて、楽しみも増えます。

ちょっと難しい部分もありますが、必ずできますのでやってみて欲しいと思います。

 

Follow Me!!

コメントを残す

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