漫画・小説・ビジネス書なんでも最大100冊分が半額

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

WordPress子テーマ

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

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

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

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

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

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

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

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

cyberduck2ダウンロード画面

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

Cyberduck新規接続

Cyberduck新規接続

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

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

MixHost-FTP接続情報

MixHost-FTP接続情報

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

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

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

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

MixHostメール履歴

MixHostメール履歴

メール履歴」をクリック

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

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

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

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

FTPフォルダ階層

FTPフォルダ階層

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

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

補足

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

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

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

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

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

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

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

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

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

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

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

子テーマを作成する手順1

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

サーバーに接続

wp」をクリック

wp-content」をクリック

themes」をクリック

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

子テーマを作成する手順2

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

子テーマを作成する手順3

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

子テーマを作成する手順4

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

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

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

子テーマを作成する手順5

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

子テーマを作成する手順6

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

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

子テーマを作成する手順7

子テーマを作成する手順8

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

子テーマを作成する手順9

FTPコピー後のファイル

子テーマを作成する手順10

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

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

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

子テーマを作成する手順11

注意

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

子テーマを作成する手順12

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

「先ほどの手順で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')
);}

子テーマを作成する手順13

補足

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

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

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

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

子テーマを確認

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

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

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

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

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

cyberduck2ログインエラー

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

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

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

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

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

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

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

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

グローバルIPアドレス

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

FTPアクセス制限設定

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

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

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

FTPアクセス許可IP追加

IPアドレス」を入力

完全一致」を選択

確認画面」をクリック

FTPアクセス許可IP追加2

確定する」をクリック

FTPアクセス許可IP追加3

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

3-1.IPアドレスを固定したい

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

システム環境設定

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

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

ネットワーク設定

ネットワーク名」を確認

詳細」をクリック

ネットワーク設定2

IPv4アドレス」をコピー

IPv4の設定」をクリック

ネットワーク設定3

手入力」をクリック

ネットワーク設定4

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

OK」をクリック

適用」をクリック

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

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

次回予告

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

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

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

カゲサイーカゲオカゲオ

第6回目のWordPress講座はいかがでしたか?

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です