【マナブログコピー】子テーマの作り方を公開

サイトデザイン ブログ運営 プログラミング 初期設定

悩む人

CSSを編集するとき子テーマがあった方がいいみたいだけど、マナブログコピーの子テーマないしなぁ
どうしようか

 

そんな悩みを解決していきます。

 

私が試行錯誤して子テーマを作ってみたのでやり方を公開します。

先に子テーマがあると便利な理由を言っておくと、

Manablog Copyがアップデートした場合、今まで直接書いていたコードが消えてしまうので、それを防ぐことができます。

子テーマの特徴は「後から読み込む」です。

なので子テーマを使ったほうがいい人は

  • エラーを起こしたくないので、直接テーマエディターにコードを書くのが怖い
  • 直接テーマエディターにCSSでデザインしている
  • 直接テーマエディターにGoogleアドセンスを貼っている

などが対象者だと思います。

逆に、直接テーマエディターに変更を加えていない人は、子テーマは必要ありません。

また、外観>カスタマイズ>追加CSSの追加CSSで編集している人も子テーマは必要ないです。

デメリットとして、ファイルが増えることで読み込む時間が少し増えると思います。

 

本記事を読むと、マナブログコピーの子テーマの作り方がわかるようになります。

記事の内容

  • FPTアプリを準備する
  • 親テーマのディレクトリに子テーマのファイルを作る
  • 子テーマを追加する
  • ファイルをアップロードする

 

FTPアプリを準備する

FTPアプリをダウンロードします。

私は、Cyberduckを使いました。

ダウンロードのやり方はこちらで書いています。

親テーマのディレクトリに子テーマのファイルを作る

Manablog Copyをダウンロードしたファイルに子テーマ用のファイルを作ります。

私は、ファイルの名前をわかりやすく「mblog-child」としてあります。
Manablog Copyの場所に子テーマのファイルを作る

「mblog-child」のファイルの中に、テキストエディタで
・functions.phpファイル
・style.cssファイル
を作って、保存します。
Manablog Copyの場所に子テーマのファイルを作った後のファイルの中身
テキストエディターについてはこちらで解説しています。
(作成中)

各ファイルの内容はこちらをコピーして貼り付けてください。

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

/*
Theme Name: mblog-child
Template: mblog_ver2
*/

/* や ?> もそのままコピーしてください。

子テーマを追加する

Cyberduck(FTP)を使ってファイルをアップロードしていきます。

まずは新規接続をします。
サーバーIDなどの情報

サーバーを契約したときに送られてくるメール
【Xserver】■重要■サーバーアカウント設定完了のお知らせ[試用期間]
を開きます。

そこに書いてある

  • FTPホスト名(FTPサーバー名)
  • FTPユーザー名(FTPアカウント名)
  • FTPパスワード

を新規接続の設定画面に入力します。
Cyberduckの新規接続

入力したら、接続を押します。

自分のブログのドメイン名のファイル>public_html>wp-content>themes

の順にファイルを開いていくと、「mblog_ver2」もしくは「mblogなんちゃら」があります。
(大型アップデート後に購入した人はver_2です。アップデート前のファイル名はわかりません。)

開いていく様子
sushiringblog.comファイル
public_htmlファイル
wp-contentファイル
themesファイル class=
mblog_ver2ファイル

「mblog_ver2」を見つけたら、「mblog-child」のファイルをCyberduckの方にドラッグ&ドロップでコピーします。
ドラッグ&ドロップでコピー

テーマ画面で確認する

ファイルをアップロードできたら、WordPressを開いて確認していきます。
WordPressテーマ画面

外観>テーマ を押すと上のような画面になりますので、ページを再読み込みしてください。

そうすると子テーマが出てきます。

子テーマ出てくる

出てきたら有効化しましょう。

子テーマ有効化させた後

これで完了です。

今は「function.php」と「style.css」しかファイルはありません。

ですが、変更したいManablog Copyのファイルを先ほどやった手順と同じように子テーマにコピーすると、子テーマで変更できるようになります。

子テーマでコード内容を変更するときは、テーマエディターで「mblog-child」を選んでください。

子テーマのテーマエディター

例えば、「header.php」を子テーマにコピーしてヘッダーを変更することや、他のファイルをコピーして各部分を変更することができます。

失敗しても子テーマのファイルを消してしまえば大丈夫ですので、チャレンジし放題です。

消すときはFTP上でファイルを選択して、deleteを押すと確認画面が出てくるので、削除を押します。

その後テーマエディター画面で、ページを再読み込みしてください。

まとめ

まとめ

最後に復習をしましょう。

  • FPTアプリを準備する
  • 親テーマのディレクトリに子テーマのファイルを作る
  • 子テーマを追加する
  • テーマ画面で確認する

子テーマで安全にファイルを編集して、オリジナルサイトを作ってみてはいかがでしょうか。

また、他のブログについての記事は下記にまとめていますので、ご覧ください。

>>> ブログの記事一覧へ

他のプログラミングについての記事は下記にまとめていますので、ご覧ください。

>>> プログラミングの記事一覧へ

少しでも参考になれば幸いです。

ぜひ拡散お願いします!
  • hatebu
  • Pocket
  • LINE
  • コピー