おすすめ方法.com

【おすすめ】をリサーチ・比較、【方法】を分析・紹介するサイト

「WinSCP」親テーマの任意のファイルを子テーマで編集する方法【STINGER PLUS+】

time 2016/06/19

テーマの編集をするには、子テーマをインストールし、子テーマのファイルを編集すれば効率が良くなります。
それには、親テーマと子テーマを同期させておくことが必要です。

今回は、親テーマの特定のファイルを子テーマにアップロードして編集するための手順を紹介します。
STINGER PLUS+以外でも基本は同じですので、参考にしてくださいね。

sponsored link

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

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

子テーマに親テーマのファイルをコピーするにはどうすればいいの?って時に使うのが「FTPクライアントソフト」です!

FTPとは?

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

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

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

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

FTPソフト、「WinSCP」のインストール

FTPソフトは無料で使えるものが沢山あります。
「WinSCP」「FFFTP」「FileZilla」「FTP Rush」「FTP Rush」「Cyberduck」「CrossFTP」などです。

有名どころなのは「WinSCP」「FFFTP」「FileZilla」ですが、セキュリティ機能は「WinSCP」がトップです。

「WinSCP」は

  • 普通のレンタルサーバー利用からroot権限でのサーバー管理時まで対応可能
  • 「FTP接続」だけでなく、より安全な「FTPS接続」「SFTP接続」「SCP接続(SSH鍵認証)」にも対応
  • プログラムファイルのパーミッション設定が自動で出来る
  • ソフト起動時にマスターパスワードを入力することで、設定した情報やサーバー内の情報を守る
  • UIはコマンダータイプ(パネル2枚でローカルとリモート両方のディレクトリの中身を表示)とエクスプローラータイプ(リモートのディレクトリの中身を表示)を選択可能

と、機能は多く、セキュリティ面も高いです。
デメリットとしては、使い方が難しい、転送速度が遅い、などがあります。
でも初心者であれば、最初は使い方がどれも同じくわかりませんし、長く使うならセキュリティ面が安心できる方が良いでしょう。
転送速度はセキュリティを低くすることで上げることができますが、言うほど遅いわけでもありません。

ただ1つ難点として、Macユーザーは使えません。。Windowsの方のみです。
Macの方は「FileZilla」がおすすめです。

では、早速WinSCPの公式サイトからダウンロードします。「Installation package」をクリック。任意の場所にファイルを保存します↓

1.WinSCPをインストール

保存したファイルをダブルクリックしてインストール、実行すると言語を聞かれるので、言語を日本語にして「OK」をクリック↓

2.日本語に変更して「OK」をクリック

WinSCPセットアップウィザードの開始が始まるので、「次へ」をクリック↓

3.WinSCPセットアップウィザードの開始が始まるので、「次へ」をクリック

使用許諾書の同意。「許諾」をクリック↓

4.使用許諾書の同意。「許諾」をクリック

設定等は後で変更できるので、「標準的なインストール(推奨)」を選択して「次へ」をクリック↓

5.「標準的なインストール(推奨)」を選択して「次へ」をクリック

インストール最終確認。「インストール」をクリック↓

6.インストール最終確認。「インストール」をクリック

インストールが完了します。「WinSCPを起動」にチェックを付けたまま「完了」をクリック↓

7.「WinSCPを起動」にチェックを付けたまま「完了」をクリック

アプリが立ち上がります、ログイン画面が表示されます。
最初は下記のように、サーバーの接続情報は何も入っていません。

8.サーバーの接続情報は何も入っていません

サーバーに接続するための情報を入力し、転送プロトコルで「SFTP」を選択し、安全にファイルを転送できるようにします。

「SFTP(SSH File Transfer Protocol)」とは、SSHで暗号化された通信路を使って安全にファイルを送受信するプロトコルのことです。

「SSH(Secure SHell )」とは、はネットワークを通じて他のコンピュータに接続し、文字列による対話的な操作を行うことができるソフトウェアおよび通信プロトコルの一つです。

さて、このSFTPを使うにはキーペア(公開鍵と秘密鍵)が必要なので、WinSCPで鍵を作ります。

WinSCPで、キーペア(公開鍵と秘密鍵)を作成する

SFTPはSSHでサーバーに接続し、ファイルを転送します。
SSHで接続するには公開鍵認証用のキーペア(公開鍵と秘密鍵)が必要です。
エックスサーバーでもキーペアが作れますが、キーペアはWinSCPの方がより複雑で解読されにくく作れるため、WinSCP側でキーペアを作ります。

WinSCPを起動し、
「ツール」をクリック
「PuTTygenを実行(G)」をクリック↓

9.①「ツール」をクリック ②「PuTTygenを実行(G)」をクリック

PuTTY Key Generator画面で、「Generate」をクリック↓

10.PuTTY Key Generator画面で、「Generate」をクリック

マウスカーソルをウィンドウの中でぐるぐる動かすと、緑色のバーが増えていきます。
これはより安全な鍵を作るため、マウスの位置を利用して乱数を発生させています。
緑色のバーが右に到達するまで動かします↓

11.マウスの位置を利用して乱数を発生

キーペアが生成されました。
①「Public key for pasting into Open SSH authorized_kyes file:」が公開鍵。スクロール部分にもあるので注意します。文字列はすべてコピーし、後でエックスサーバーに登録します。登録前にウィンドウ枠を閉じないように注意。
※「key comment」は、鍵に自分で付けることのできるコメント。そのままで良い。好きなコメントを入れてもOK。
②「Key passphrase」はパスフレーズを入力する部分。セキュリティ度をアップさせるならパスフレーズを入力しますが、毎回接続するときにパスフレーズを入力しなくてはならないため、今回はパスフレーズは設定しません。
入力するなら、「Confirm passprase」に②「Key passphrase」を再入力します。
「Save private key」をクリック、秘密鍵を保存します↓

12.「Save private key」をクリック、秘密鍵を保存します

秘密鍵を保存するか聞かれますので、「はい(Y)」をクリック↓

13.秘密鍵を保存するか聞かれますので、「はい(Y)」をクリック

任意の場所に、
①秘密鍵のファイル名を付けます。
「保存(S)」をクリック↓

14.①秘密鍵のファイル名を付けます。 ②「保存(S)」をクリック

先ほどの「PuTTYgen Key Generator」の「Public key for pasting into Open SSH authorized_kyes file:」を上から下までスクロールさせ、全ての文字を選択してからコピーします↓

15.「Public key for pasting into Open SSH authorized_kyes file:」を上から下までスクロール

コピーした公開鍵の部分をエックスサーバーに登録します。

エックスサーバーで、SSHの利用を有効にする

まずは、エックスサーバー側でSFTPを利用するために、SSHの設定を有効にします。
エックスサーバーのサーバーパネルに移動してログインし、「SSHの設定」をクリック↓

16.エックスサーバーのサーバーパネルに移動してログインし、「SSHの設定」をクリック

「SSH設定」画面が表示されるので、「ONにする」をクリック↓

17.「SSH設定」画面が表示されるので、「ONにする」をクリック

設定されているか確認するため、「SSH設定」をクリック↓

18.再度設定されているか確認するため、「SSH設定」をクリック

状態が「ON」になっていれば設定は完了です↓

19.通常接続ポートは22を使うのが一般的ですが、エックスサーバーでは10022を利用しているので注意

通常接続ポートは22を使うのが一般的ですが、エックスサーバーでは10022を利用しているので注意です。

エックスサーバーで、公開鍵を登録する

続いて、「SSH設定」画面の「公開鍵登録・設定」をクリック↓

20.「SSH設定」画面の「公開鍵登録・設定」をクリック

①先ほどWinSCP側で作成した「Public key for pasting into Open SSH authorized_kyes file:」の公開鍵を上から下までスクロールさせ、全ての文字を選択してからコピーし、公開鍵欄に張り付けます。
②貼り付けたら「公開鍵を登録する(確認)」をクリック↓

21.貼り付けたら「公開鍵を登録する(確認)」をクリック

確認でもう一度同じ画面が表示されるので、「公開鍵を登録する(確認)」をクリック↓

22.確認でもう一度同じ画面が表示されるので、「公開鍵を登録する(確認)」をクリック

下記画面「公開鍵の登録を完了しました。」と表示され、エックスサーバーに公開鍵が登録できました。

23.「公開鍵の登録を完了しました。」と表示され、エックスサーバーに公開鍵が登録できました

WinSCPで、SFTP接続の設定をする

WinSCPを起動し、ログイン画面を表示させ、順に入力していきます。
エックスサーバーを契約した時に届いたメール「【Xserver】■重要■サーバーアカウント設定完了のお知らせ」を用意します。

①「転送プロトコル(F)」は「SFTP」を選択します。FTPを選ぶと今までの苦労が無に帰しますw
②「ホスト名(H)」はメールの「FTPホスト」を入力します。「サーバID.xsrv.jp」になります。
③「ポート番号(R)」は「10022」を入力します。
④「ユーザ名(U)」はメールの「サーバーID」を入力します。
⑤「パスワード(P)」はメールの「FTPパスワード」を入力します。
「設定(D)」をクリック↓

24.「転送プロトコル(F)」は「SFTP」を選択します

「高度なサイトの設定」画面で、
「認証」をクリック
②「認証条件」欄の「秘密鍵」の右の「…」をクリックし、前にWinSCPで保存した秘密鍵ファイルを選択
「OK」をクリック↓

25.2.「認証条件」欄の「秘密鍵」の右の「…」をクリックし、前にWinSCPで保存した秘密鍵ファイルを選択

秘密鍵ファイルの選択を保存します。「保存(S)」をクリック↓

26.秘密鍵ファイルの選択を保存します。「保存(S)」をクリック

「セッションの保存名」画面が表示されます。
①「セッションの保存名(S)」にはWinSCPのログイン画面に表示されるセッション名を入力します。わかりやすい名前に変更すると良いです。
「OK」をクリック↓

27.「セッションの保存名(S)」にはWinSCPのログイン画面に表示されるセッション名を入力します

①今設定したセッションが左の枠に追加されています。
②サーバーに接続されることを確認するため、「ログイン」をクリック↓

28.サーバーに接続されることを確認するため、「ログイン」をクリック

下記画面になり、問題がなければログインします。警告が出た場合はやり直します。

29.問題がなければログインします。警告が出た場合はやり直します

ログインできると、下記のような画面になります。

30.WinSCPにログインできると、下記のような画面になります

WinSCPで、親テーマのファイルをコピー、子テーマへアップロードする

ここから、テーマのコピーをしていきます。
WinSCPで、子テーマで編集したいファイルを探します。

WinSCPの右側のボックス、任意のフォルダをダブルクリック↓

31.WinSCPの右側のボックス、任意のフォルダをダブルクリック

エックスサーバーでは、WordPressのファイルは全て「public_html」に入っています。
「public_html」をダブルクリック↓

32.エックスサーバーでは、WordPressのファイルは全て「public_html」に入っています。「public_html」をダブルクリック

「wp-content」をダブルクリック↓

33.「wp-content」をダブルクリック

「themes」には、各種テーマが入っています。STINGER PLUS+の親テーマ、子テーマもここに格納されます。
「themes」をダブルクリック↓

34.「themes」には、各種テーマが入っています。STINGER PLUS+の親テーマ、子テーマもここに格納されます。「themes」をダブルクリック

親テーマである「stingerplus」をダブルクリック↓

35親テーマである「stingerplus」をダブルクリック

ここでは例として、親テーマの「header.php」を子テーマへ移動します。
ファイルのコピーはドラッグ&ドロップでも可能ですが、ここではダウンロードをしてみます。
「header.php」を右クリック
「ダウンロード(L)」をクリック↓

36.①「header.php」を右クリック ②「ダウンロード(L)」をクリック

「参照(R)」をクリックし、任意のフォルダを選択します。
「OK」をクリック↓

37.①「参照(R)」をクリックし、任意のフォルダを選択します。 ②「OK」をクリック

ダウンロードしたら上にある「左矢印ボタン」をクリックし、前の階層(themesのフォルダ)に戻ります↓

38.ダウンロードしたら上にある「左矢印ボタン」をクリックし、前の階層(themesのフォルダ)に戻ります

戻ったら子テーマ「stingerplus-child」をダブルクリック↓

39.子テーマ「stingerplus-child」をダブルクリック

先程保存した「header.php」をドラッグ&ドロップでアップロードします↓

40.先程保存した「header.php」をドラッグ&ドロップでアップロードします

「OK」をクリック↓

41.ファイルが追加されたらアップロード完了です。ファイルのコピーはドラッグ&ドロップでもできます。

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

WordPressの管理画面で子テーマを確認

実際にWordPressの管理画面で子テーマに「header.php」が入っているか確認します。
WordPress管理画面メニューの「外観→テーマの編集」をクリック↓

42.実際にWordPressの管理画面で子テーマに「header.php」が入っているか確認します。WordPress管理画面メニューの「外観からテーマの編集」をクリック

テーマヘッダー「header.php」が追加されています。

「header.php」のエラーを消す

管理画面に続き、実際にサイトを確認します。
管理画面左上、「サイト名」をクリックします。
※確認する時は、右クリックで「新しいタブ」を開き、編集画面と確認画面を別々に表示した方が作業効率が良いです↓

43.管理画面に続き、実際にサイトを確認します。管理画面左上、「サイト名」をクリックします

サイトを確認すると、下記のような「Warning: include_once(st-font.php):~」と表示されています。

441.サイトを確認すると、下記のような「Warning: include_once(st-font.php):~」と表示されています

これは「読み込むファイルが見つからないよ!」っていうエラーです。
「header.php」では他のファイルも読み込んでいるので、子テーマにあるべきファイルが同じ階層にないことからエラー表示されています。

よって、「header.php」をコピーしたのと同じ方法で、「st-font.php」「analyticstracking.php」を親テーマから子テーマへコピーしましょう。
これでエラーが解消されます。

「header.php」を子テーマで編集する時は上記のWarning、エラーが出ますが、慌てずにコピーして対処すれば大丈夫です。

まとめ

このように親テーマからファイルを子テーマにコピーすることで、親テーマのどのファイルでも子テーマで編集できるようになります。
せっかくカスタマイズした内容が消えないように、子テーマを活用してみてくださいね。

以上、「STINGER PLUS+ 親テーマの任意のファイルを子テーマで編集する方法」になります。
お疲れ様でした。

sponsored link

down

コメントする






sponsored link

カテゴリー

読者が読んでる人気記事