STINGER7/Plus:親テーマの任意のファイルを子テーマで編集する方法

      2016/11/23

eye_stinger7

前回はSTINGER7(Plus)で子テーマを使用するための、導入部分をご紹介しました↓

STINGER7/Plus:テーマのインストールと子テーマの使用方法
STINGERやWordPressの初心者さん向けに子テーマを使用した方が良いかな?と今さらながら思ったので、改めてテーマのインストールと子テーマの使用方法をご紹介します!

今回は親テーマの特定のファイルを子テーマにアップロードして編集するための手順をご紹介します。カスタマイズの幅を広げるためには、必須とも言える作業です。

STINGER7 や Plus 以外の方でも基本は同じですので、参考にしていただければと思います。

それじゃあいってみよ!

【追記:2016.9.17】
※一部内容を修正しました。
この記事の内容はSTINGER Plusでもそのまま使えます。

スポンサーリンク

FTPクライアントソフトの設定

STINGER7の子テーマは初期状態だと「functions.php」と「style.css」の2つのファイルしか入っていません。
親テーマの特定のファイル、例えばヘッダーをカスタマイズしたい場合は「header.php」を子テーマで編集するために、子テーマのフォルダへ「header.php」をコピーしてくる必要があります。

それってどうやるの?って時に使うのが「FTPクライアントソフト」です!

FTPとは?

FTPとは「File Transfer Protocol(ファイル・トランスファ・プロトコル)」の略で、簡単に言うとサーバと自分のマシンとの間でファイルを転送するための仕組みです。

ホームページを立ち上げた時にレンタルサーバなどを借りて、そこにWordPress本体やサイトのデータを置いていると思います。

サーバ内にある親テーマのファイルをコピーして、それを同じサーバ内の子テーマのフォルダにアップすれば、子テーマにファイルを追加することができるわけです。

その作業をするためのソフトが「FTPクライアントソフト」なんですね。

FTPソフトの使用方法

FTPソフトは無料で使えるものがたくさんありますが、初心者さんにオススメなのは機能がシンプルで使いやすい「Cyberduck」というソフトです。
では早速Cyberduckの公式サイトでダウンロードしましょう!

20160311a

Windows版とMac版があるのでどちらかを選んでダウンロードしたら、インストールしてください。
インストール後に起動すると下のような画面が出るので「新規接続」をクリックします↓

20160311b

ウィンドウが開いたら必要な項目を入力します↓

20160311c

入力が必要な項目は3ヶ所です。

・サーバ:FTPサーバ名(FTPホスト名)

・ユーザ名:FTPユーザ名(FTPアカウント名)

・パスワード:FTPパスワード

FTPサーバ名(FTPホスト名)FTPユーザ名(FTPアカウント名)FTPパスワードは、サーバを契約した時に送られてくるメールに記載されています。
もしメールを削除してしまった場合は、サーバの管理画面でも確認できると思います。
どこのレンタルサーバを使っても基本は同じ方法です。

入力したら「接続」をクリックします。
その際に下のようなウィンドウが表示されたら「次回から表示しない」にチェックを入れて「続ける」を選択してください。

20160311d

親テーマのファイルを子テーマへアップする

無事に接続できたらこのような画面になると思います↓

20160311e

サーバに置いてあるファイルが表示されていますね。
契約しているサーバによって中身のファイルは変わってきますが、WordPress本体のフォルダを探しましょう。
「wp-◯◯◯」というフォルダがたくさんあると思います。

見つけたら「wp-content → themes → stinger7」とクリックして開いてみてください。

試しに「header.php」を子テーマへ移動してみましょう。
「header.php」を右クリックして「指定場所にダウンロード」を選択します。
デスクトップなど分かりやすい場所、またはお好きな場所にダウンロードしてください。

ダウンロードできたら上の三角ボタンで前の階層(themesのフォルダ)に戻ります↓

20160311f

戻ったら次は子テーマ「stinger7child」のフォルダを開き、先ほど保存した「header.php」をドラッグ&ドロップでアップロードします。

20160311g

ファイルが追加されたらアップロード完了です!
アップロード後はデスクトップなどにダウンロードしたファイルは削除しても大丈夫ですが、間違ってもサーバ上にある親テーマのファイルは消さないように注意しましょう!

管理画面で確認

実際にWordPressの管理画面で子テーマの編集画面を確認してみましょう。

20160311h

「header.php」が追加されていますね!
これで子テーマでも「header.php」を編集できるようになりました♪

と思ったら!

STINGER7 で header.php の編集は要注意!

「header.php」をコピーした後にサイトを見てみると何やらエラーが・・・

20160311i

簡単に言うと「読み込むファイルが見つからないよー」っていうエラーです。
「header.php」では他のファイルも読み込んでいるんですが、子テーマのフォルダに移動したので同じ階層にあるべきファイルがないからエラーが出ちゃうんですね!

ということで先ほど「header.php」をコピーしたのと同じ要領で「st-font.php」「analyticstracking.php」を親テーマから子テーマへコピーしましょう。
これでエラーが解消されます。

「header.php」を子テーマで編集する時は上記エラーが出るので要注意ですね!

まとめ

このように親テーマのどのファイルでも子テーマで編集できるようになります。
テーマのアップデートでせっかくカスタマイズした内容が消えないように、カスタマイズをする時は子テーマを活用してみてください♪

僕はめんどくさくて親テーマを直接いじってましたが、これからこのブログは子テーマを使ってカスタマイズしていきます。

【追記:2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7:カスタマイズまとめ
このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

スポンサーリンク

この記事をシェアする!

 - WordPress ,