Cyberduckの使い方WordPressの子テーマを分かりやすく解説

WordPress講座の概要

第６回目となるWordPress講座は「子テーマ」についてです。

この記事では【Cyberduck】を使って以下の３点を解説します。

「操作方法」
「自作子テーマの作成方法」
「トラブル対処法」

目次-お好きなとこからどうぞ-

Cyberduckの使い方①【ダウンロード方法】

まずは「Cyberduckをダウンロード」

ダウンロードは必ず公式サイトから

上記は公式サイトのURLなので「無料」でダウンロードできますが、「Apple Store」や「Microsoft Store」で探すと2800〜2900円するので注意です!!

「MAC」か「Windows」を選ぶ項目があるのでお使いの方を選択。

ダウンロードしたら、インストールして起動してください。

Cyberduck新規接続

「新規接続」をクリック→「FTP-SSL」を選択→「サーバ」→「ユーザー名」→「パスワード」を入力→「接続」をクリック

「サーバ」〜「パスワード」情報は、当サイトで使用しているレンタルサーバー「MixHost
」であれば、以下のように登録した際のメールに記載されています。

MixHost-FTP接続情報

「エックスサーバー」の方はこちらから確認「XサーバーFTPソフトの設定」

「ConoHa WING」の方はこちらから確認「ご利用ガイドFTPソフトを設定する」

メールを削除してしまった場合(MixHost
)は以下の手順で確認できます。

こちらの「cPanelのログイン方法」からコントロールパネルまで行き以下の「メール履歴」に記載されています。

MixHostメール履歴

「メール履歴」をクリック

↓

MixHostサーバーアカウントメッセージ

「一番最初のページまでいく」→「サーバーアカウント設定完了のお知らせ」のメッセージを表示をクリック

そこにFTP接続情報が記載されています。

FTPフォルダ階層

そうすると、こんな画面になるので画像の順番通りにクリックしていくと、親テーマや子テーマが見つかります。

ここから「親テーマ」のファイルを「子テーマ」にコピーします。

補足

青いのが「フォルダ」白いのが「ファイル」です。

FTPファイルアップダウンロード

ここでは最低限あると便利な「header.php」「footer.php」をコピーします。

「親テーマ」にある2つのファイルを1つずつデスクトップにドラッグ&ドロップします。これでダウンロード完了です。

今度はダウンロードしたファイルを「子テーマフォルダ」にドラッグ&ドロップでアップロードします。

この時、ちょうど子テーマフォルダの真上でドロップしてください。

たったこれだけ覚えておけば必要に応じて親テーマにある「フォルダ」や「ファイル」を自由にコピーできます。

Cyberduckの使い方②【子テーマを自分で新規作成する方法】

最近のテーマであれば、ほとんどの場合テーマ製作者側で子テーマを用意してくれていますが、お使いのテーマに子テーマがなければ自作する必要があります。

この例では、WordPressインストール直後に設定されているテーマ「Twenty Seventeen」で作成していきます。

「先ほどと同様の手順でFTPソフトを起動します」

↓

「サーバーに接続」

↓

「wp」をクリック

↓

「wp-content」をクリック

↓

「themes」をクリック

↓

「子テーマを作成したい親テーマを選択」

「親テーマフォルダの上で右クリック」→「名前の変更」をクリック→「親テーマのフォルダ名をコピー」

「もう一度親テーマのフォルダの上で右クリック」→「新規フォルダの作成」

「先ほどコピーした親テーマのフォルダ名を貼り付ける」

↓

「ハイフンなどで区切り子テーマとわかるように好きな名前をつける」

補足

この時、英語または数字で表記してください。

「新規の子テーマファイルの上で右クリック」→「新規ファイル」の作成

「ファイル名をstyle.cssにして作成をクリック」

↓

「同じ要領で、functions.phpというファイルも作成する」

↓

「先ほど作成した２つの新規ファイルを子テーマにドラッグ&ドロップする」

FTPコピー後のファイル

↓

「style.cssの上で右クリック」→「エディタで編集」→「TextEdit」をクリック

「以下のコードを貼り付ける」

/*
 Template:(親テーマのフォルダ名) 
Theme Name:(子テーマのフォルダ名)
 */

注意

ここでスペルミスがあると子テーマが正常に動作しないので、先ほど同様に各フォルダ名をコピーした方が無難です。

「ファイル」をクリック→「保存」をクリック

「先ほどの手順でfunctions.phpを開く」

↓

「以下のコードを貼り付ける」

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')
);}

補足

画像だとコードを閉じる「?>」を書いてしまったんですが、間違いなので気にしないでください。

「ファイル」をクリック→「保存」をクリック

ここまでの設定がうまくいってれば、子テーマが作成されています。

WordPressの管理画面に戻って、確認してください。

「管理画面」
↓
「外観」
↓
「テーマ」をクリック
↓
「有効化」をクリック

親テーマと同じ表示がされれば、子テーマ完成です。

Cyberduckの使い方③【ログイントラブルの解決方法】

【Cyberduck】を使っていて、１度だけこんなトラブルをやらかしたので、その場合の対処も載せておきます。

たまに、以下のようにログインできなくなる時があります。

この時、何度かログインを押していると接続できたり、またすぐ切れたりを繰り返すことがあります。

その時に、調子に乗ってなんどもログイン失敗を繰り返していると、ログイン画面にロックがかかり、接続できなくなります。

一度こうなると厄介で、２４時間は接続することができなくなります。

そして、この２４時間縛りは最後にログインを失敗した時からからなので、２４時間以内にログインの失敗を繰り返すと永遠にログインできません。

なので、急にログインできなくなった場合はまずPCを再起動してみてください。

それでダメな場合は、IPアドレスが変更されている可能性があります。(グローバルIPアドレスを使用してる場合)

「自分のグローバルIPアドレスを確認する」

上記のサイトにアクセスすると以下のように「グローバルIPアドレス」が確認できます

このアドレスは定期的に変わるので、ここで確認したらお使いのレンタルサーバーに飛んでください。

「FTPアクセス制限設定」をクリック(この画面はX2サーバーですが、他のサーバーでもほぼ同じはず)

↓

「FTPアクセス許可IP一覧」を確認し、先ほどのアドレスが表示されているか見ます。(あれば問題ありません)

↓

表示がない場合は、「FTPアクセス許可IP追加」をクリック

↓

「IPアドレス」を入力

「完全一致」を選択

「確認画面」をクリック

↓

「確定する」をクリック

これでFTPにアクセスできるようになってるはずです。

３-１.IPアドレスを固定したい

「固定IPアドレス」を使う手順です。

「システム環境設定」をクリック

↓

「ネットワーク」をクリック

「ネットワーク名」を確認

↓

「詳細」をクリック

「IPv4アドレス」をコピー

↓

「IPv4の設定」をクリック

「手入力」をクリック

「IPv4アドレス」に先ほどコピーしたIPアドレスを貼り付ける

↓

「OK」をクリック

「適用」をクリック

これでIPアドレスが固定されます。

私がWordPress初心者だった頃「Cyberduckでストークの子テーマにheader.phpを追加する方法」を見て「これは最強に初心者向けだ」と感動したのは今でも忘れていません。

次回予告

次回は「Googleアナリティクスの初期設定」について解説します。

Googleアナリティクスの初期設定8つを図解で解説

「GA」の設定を最初に間違うと、ずっと間違いに気づかないままサイト運営していくことになりかねないので、しっかり設定しましょう。

カゲオ

第６回目のWordPress講座はいかがでしたか？

FTPソフトが使えるだけで、カスタマイズの幅がグッと広がるので、WordPressで色々遊びたい人は早めに覚えておきたいですね。