WordPress 設定

初心者でもできる「子テーマ」(stingerplus2-child)を使ったWordPressの本格的カスタマイズ方法 

更新日:

この記事は、初心者でもできる「子テーマ」(stingerplus2-child)を使ったWordPressの本格的カスタマイズ方法について書いています。

子テーマとは、例えばこのサイトのテーマ「STINGER」(親テーマ)の機能を継承した自分で作るテーマのことです。

先生

これまで、WordPressのホームページのカスタマイズは追加CSSで簡易的に行ってきました。

もう少し本格的にカスタマイズする場合、これから説明する「子テーマ」を使うのが、ベストだと思います。

Sponcerd Link



1.テーマのカスタマイズで「子テーマ」使う理由は?

①テーマのアップデートの影響を受けない「子テーマ」

例えばheader.phpにGoogleアドセンスの自動広告のコードを貼り付けたりなど、テンプレートそのものを操作すると、テーマをバージョンアップした場合、ファイルが上書きされるので、これまでカスタマイズしたものが、カスタマイズする前の状態に戻ってしまいます。

そこで親テーマの機能を引き継いだ「子テーマ」を作成すると、「親テーマ」をバージョンアップしても、「子テーマ」は影響を受けないので、「子テーマ」を使ったカスタマイズが推奨されています。

②「子テーマ」で効率的にカスタマイズ

子テーマの必要なファイルのみ変更するので、テーマを効率的にカスタマイズできます。

komiya
小規模なカスタマイズの場合は、追加CSSで、本格的にカスタマイズする場合は、子テーマですね。

 

2.STINGER PLUS2の「子テーマ」のダウンロードとインストール、有効化

「子テーマ」は1から作ることもできますが、有名なテーマ(このサイトが使っているSTINGERなど)は、「子テーマ」が容易されています。

1.まず「STINGER PLUS2用の子テーマ」をダウンロードしましょう。

STINGERの公式サイトのダウンロードページへ移動します。
以下の場所をクリックすると「stingerplus2-child.zip」というファイルがダウンロードされます。

2.ダウンロードした「STINGER PLUS2用 子テーマ」をアップロードします。

【ファイルを選択】を選択し、先ほどダウンロードした「stingerplus2-child.zip」を選択します。(ドラック&ドロップでも可)

【今すぐインストール】をクリックします。

先生

有効化する前に、これまでに追加CSSでカスタマイズしたコードをワードパッドなどにコピーしておいてください。

またヘッダー画像も「子テーマ」を有効化すると消えてしますのでメディアライブラリに入れていない場合は、コピーするなど再設定の準備をしておいてください。

 

追加CSSのバックアップが終わりましたら、【有効化】をクリックします。

追加CSSでカスタマイズした部分は、カスタマイズ前の状態に戻ります。

3.子テーマの編集前にすべきこと

「stingerplus2-child.zip」を解凍します。以下のファイルが出てきます。

「子テーマ」を変更する前に、その変更を日付管理できるようにしておきます。

例えば「firsthp用」フォルダを作成し、その中に「20180317」というフォルダを作り、「stingerplus2-child」フォルダを移動します。

「stingerplus2-child」フォルダの中の「style.css」やそのほかのファイルを変更した場合は、その都度、日付のフォルダを作成しそこに変更したファイルを追加して行きます。

次にFileZillaを使って、stingerplus2フォルダをダウンロードしておきましょう。

(変更するファイルをダウンロードしたファイルからコピーし、変更後子テーマへ移動するためです。)

1.「FileZilla」の設定 (ロリポップのレンタルサーバーを使用している場合)

(1)ロリポップのユーザー専用ページにログインします。

 

(2)【ユーザー設定】-【アカウント情報】をクリックします。

 

(3)ロリポップの「FTPサーバー」「FTP・WebDAVアカウント」「FTP・WebDAVパスワード」→FileZillaの「ホスト」「ユーザ名」「パスワード」へコピーし【クイック接続】をクリックします。

 

(4)「サーバの証明書は不明です。信用できるサーバか確認するために注意深く証明書を調べてください。」と表示されますが、【OK】をクリックします。

 

2.サーバーから「stingerplus2」をダウンロード

パソコン側はダウンロードファイルを保存するフォルダを選択します。

サーバー側のfirsthp (ドメイン)→  wp-content → themes→「stingerplus2」を選択します。

右クリックし、【ダウンロード】をクリックします。

 

これで以下のようにバックアップができました。

 

4.子テーマをATOMで編集

コードを記述するテキストエディタとしてフリーソフト「ATOM」を使います。

「ATOM」のインストールについては、以下の記事をお読みください。

ロリポップサーバーでSSL化(無料)の設定方法(WordPress)②「.htaccess」ファイルの設定

ATOMを使う理由は、メモ帳やワードパッドで記述すると余計な情報が付加され、CSSなどが機能しない可能性があるからです。

ATOMで先ほどデスクトップに作った「firsthp用」フォルダの「20180317」の「stingerplus2-child」の「style.css」ファイルを開きます。

親テーマの名前を書き、親エーマの差分をここに書いていきます。

今回は追加CSSのコードを「style.css」にコピーして行きます。

「@media only screen and (max-width: 960px)」など、あらかじめコードが準備されていますので、同じコードではじまる追加CSSは、その後ろにコードを貼り付けます。

すべての追加CSSをコピーしましたら、保存します。

その「style.css」をサーバーの「stingerplus2-child」フォルダにアップロードします。

先生
独立性、メンテナンス性を考えると、「子テーマを使ったカスタマイズがおすすめです。」

 

まとめ

今回は、初心者でもできる「子テーマ」(stingerplus2-child)を使ったWordPressの本格的カスタマイズ方法について書きました。

正直なところ、初心者には「子テーマ」は、若干難易度が高いように感じるれるかもしれません。

ですが、1つ1つ、ゆっくり確認しながら、「子テーマ」を作成、カスタマイズすれば、ベストな方法と理解していただけると思います。

komiya
最後までお読みいただきありがとうございました。下記に関連記事があります。

初心者でもできるWordPressで作成したホームページのメニューバーの追加CSSを使用した簡単なカスタマイズ

The following two tabs change content below.
komiya

komiya

中小企業で事務の仕事をしています。ホームページ、アフィリエイトの初心者です。コミュニケーションが不得手です。これまで、コーチングやアドラー心理学の講座などコミュニケーションを改善しようと色々受講しましたが、職場ではうまく行かず、むしろ悪化させてしまいました。目標を切り替えて自分1人で、できることをしようと考え、Webスクールに通いこのホームページを作りました。社会人として働いていますが、精神的にはひきこもりです。こんな私ですが、どうかよろしくお願いします。

スポンサーリンク



スポンサーリンク



-WordPress, 設定

Copyright© 初心者がWebスクールに通って作るホームページ , 2018 All Rights Reserved Powered by STINGER.