ブログ

【2020年】XeoryBase用 Xserverで子テーマ作成

WordPressを使いはじめて、いろいろ調べていると

「子テーマをつくった方がいい」というアドバイスをよく見かけた

2020年  Google Adsenseを始めるのをきっかけに、子テーマの作成を決心

使っているサーバー「Xserver」の子テーマ作成をご紹介

Xserverアカウント ログイン → ファイル管理

①ログイン→Xserverアカウント(旧インフォパンル)

②サーバーの操作メニューにある「ファイル管理」


Web FTP  自分のサイトURLフォルダ → themesまで

①自分のサイトURLのフォルダ

bokuiku.com → public_html をクリック

public_html → wp-content をクリック

wp-content→ themes をクリック


子テーマのフォルダを作成

作成の「フォルダ作成」左側に名前を入力して

フォルダ作成をクリック(今回は、xeory_base-child)

②作成したxeory_base-childをクリック


style.css ファイルを作成

①作成の「ファイル作成」左側に style.css を入力して

ファイル作成をクリック

②作成した style.css 左側のチェックを入れて

フィイルの操作の編集をクリック

③下記のコードを入力 ※赤字を修正(赤字は消す)→保存する

/*
Template:xeory_base
Theme Name: xeory_base-child ※作成した子テーマの名前
Theme URI: http://bokuiku.com/ ※自分のサイトのURL
Description: Child theme for the Xeory
Author: mic ※自分の名前
Author URI: http://bokuiku.com/ ※自分のサイトのURL
Template: xeory_base
Version: 0.2.0 ※xeory_baseのバージョン(調べる方法は下記にて)
*/

【XeoryBaseのバージョン確認方法】

WordPressの外観→テーマ

XeoryBaseにカーソルを合わせて「テーマの詳細」をクリック

XeoryBaseの右にあるバージョンを確認(今回は0.2.0)


functions.php ファイルを作成

①作成の「ファイル作成」左側に functions.css を入力して

ファイル作成をクリック ※sが抜けているとサイトが崩れるので忘れずに!

 

②作成した 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' );
}


WordPressに戻って確認

①WordPress 外観 → テーマ → xeory_base-childのライブプレビューで確認

問題なければ 有効化をクリック

 


最後に

この「子テーマ」作成、ぼくは中々うまくいかなくて

調べながらトライ&エラーを繰り返した

ただ、できた時の達成感はとても気持ちのいいものだったので

同じような気持ちになってもらえたらうれしいです

-ブログ

© 2021 ぼくいく Powered by AFFINGER5