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

WordPress講座の概要

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

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

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

記事の目次

Cyberduckの使い方①【ダウンロード方法】
Cyberduckの使い方②【子テーマを自分で新規作成する方法】
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')
);}