Webデザイン

「One-Click Child Theme」のダウンロード、インストール、使い方、設定方法。[「子テーマ」をワンクリックで作成できるおすすめのプラグイン]

2019年9月28日

WordPressの運用で「CSS」を筆頭にカスタマイズしていく際、必ず必要になってくるのが「子テーマ」になります。

no image
ワードプレス「子テーマ」とは何か?入手方法とプラグインを使って作る方法も解説!

続きを見る

「子テーマ」の入手方法はテーマ購入時に配られていたり、専用サイトから配布されていたり、自作しないといけなかったりと様々です。

今回は「子テーマ」をプラグインを使って作成する方法をご紹介致します。

「子テーマ」作成でおすすめのプラグイン「One-Click Child Theme」

「子テーマ」作成でおすすめするプラグインは「One-Click Child Theme」というものです。海外の方の作成されたもののようですが、日本人でも問題なく使えるでしょう。

「One-Click Child Theme」導入・ダウンロード方法

まずは「One-Click Child Theme」をインストールしていきましょう。インストール方法は2種類です。

公式配布ページよりダウンロードしてきて、ZIPファイルのままアップロードするか、ダッシュボードの検索画面で「One-Click Child Theme」と入れるかになります。

私の場合、この「One-Click Child Theme」プラグインは非常によく使いますので、ファイルをダウンロードして、PCのローカルファイルにて管理し、必要な場合はそこからアップロードするようにしています。

注意ポイント

2019年9月現在、公式配布ページにて「One-Click Child Theme」に対して「ガイドライン違反」の警告がでて、削除されていますプラグイン検索をかけてもヒットしませんので、現在はGithub pageよりの配布のみになります。「Clone or download」ボタンよりダウンロードください。結構必要なプラグインですので、早めに自分のPCにダウンロードしてキープしておく方がいいでしょう

no image
ワードプレスにプラグインを導入する方法と注意点【ホームページ制作入門講座】

続きを見る

「One-Click Child Theme」の使い方

「One-Click Child Theme」プラグインのインストールが完了しましたら、「ダッシュボード」→「外観」→「Child Theme」と進んでいきましょう。次の「Create Child Theme」画面で以下の設定していきます。

「One-Click Child Theme」の設定画面

「One-Click Child Theme」の設定画面ですが、上から順番に入力していきましょう。

Theme Name

「Theme Name」のところは任意の文字列で結構ですので、英語で名前をつけてあげましょう。一般的には、その「(テーマ名)+(_child)」あたりかなと思います。例えば、アフィンガーのテーマを使っているのであれば、「affinger_child」みたいな感じになります。あくまで任意の文字列ですのでなんでもいいのですが、あとあと選択する事も多くなりますので、できるだけ記憶がなくてもわかる名前にしておいた方が良いでしょう

Description

「Description」のところも任意の文字列で構いません。私の場合ですと、考えるのが面倒くさいので、「Theme Name」のコピーでやりますね。上記の例の場合だと「affinger_child」のままになります。ちなみにここの文字はほとんど利用しないに等しいので、本当になんでも良いと思います

注意ポイント

サイト運営では何かと「日本語入力」して良い事はないと思っていただいて結構ですので、「Description」のところも「アフィンガーの子テーマ」とするのではなく、「affinger_child」とする方がベターな考えかと思います。

Author

「Author」のところですが、author=著者になりますので、ここも任意の名前で結構です。あとから問題になることもないでしょう。デフォルトでは、そのサイト運営者の名前が入っていると思いますので、そのまま触らずで良いと思います

入力が完了しましたら、「Create Child」を押して、「子テーマ」の作成完了です。あとは「外観」→「テーマ」にて、作成した「子テーマ」を有効化することを忘れないでおきましょう。

「One-Click Child Theme」のファイルについて

「One-Click Child Theme」で作成した「子テーマ」には以下のファイルが入ってきます。

style.css

「style.css」はカスタマイズのメインとなるファイルですので、カスタムコードをここに書き込んで行けばサイトデザインが変更されていくはずです。ファイル更新後、ブラウザで反映確認する際は「キャッシュのクリア」を忘れずに!

no image
キャッシュをクリアする方法[アドオンアプリ「Clean Guru」設定、「検証」ボタン、履歴の削除]

続きを見る

あと、レスポンシブにする必要が出てくると思いますので、メディアクエリの設定も初期の段階で行っておきましょう!

screenshot.png

「screenshot.png」は「外観→「テーマ」でテーマを選ぶ際のサムネイル画像になります。まあ、どうでもいいでしょう。

functions.php

「functions.php」はWordPress運用の核となるファイルですので、あまり理解されていない方は触らないに越したことはありません。慣れている方はどんどん追記していってください。くれぐれも作業前のバックップは忘れずに

rtl.css

「rtl.css」は「Right To Left」の略で、訳すと「右から左に」という意味で、文字を右から左に流す事をさします。

そんな事をして何が得かというと、私たちには何も得はありません。しかし、世界には右から左に文字を書くアラビア語などが存在していますので、その方達がサイトをみる際に活躍できるCSSになる訳です。まあ、私たちにとっては無用ですので、触らずそっとしといてあげましょう。さわったところで何もおきません。

まとめ

いかがでしたでしょうか?

WordPress運用で必須となる「子テーマ」をワンクリックで作成できるプラグイン「One-Click Child Theme」を紹介してきました。

こちらのプラグインはとても便利なのでガンガン活用していただきたいですが、公式サイトにて「One-Click Child Theme」に対するガイドライン違反の警告が出て配布が停止され、プラグイン検索でもヒットしませんので、Github pageよりの配布でのみダウンロード可能です。ですので、早いうちにダウンロードし自分のPCにファイル保存しておく事をおすすめ致します

プラグインのインストールが終わりましたら、「Theme Name」「Description」の設定をしていきましょう。

「One-Click Child Theme」の中身ですが、「style.css」「screenshot.png」「functions.php」「rtl.css」になりますが、メインで使うのは「style.css」のみで、「functions.php」が理解できている方はこちらもどんどん使っていきましょう。「screenshot.png」「rtl.css」に関しては、無用ですので放置で問題ありません。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.