こんにちは。サクラチカです。

少しずつWordPressでのサイト作りに慣れてきた頃ではないでしょうか。

そうすると、

居酒屋オーナーさん居酒屋オーナーさん

ここの線の色だけ変えたい」とか、
他にも色々と自分好みにサイトのデザインをカスタマイズしたくなりました。

このように、自分のサイトをより自分らしくしたいという欲求が出てきますよね。

 

例えば、

マウスと置くとリンクの文字や画像がペコっと凹むカスタマイズは子テーマのCSSを書き換えて行う

 

このサイトで採用しているカスタマイズのひとつですが、

マウス(スマホの場合は指)を置いたリンク画像や文字がペコっと凹む」とか。

動画です。(音は出ません)

↓ ↓ ↓ ↓

 

 

見本サイトの方に設定している、

通常はスライドショーの上にあるグローバルメニューを、下に配置する」とか。

↓ ↓ ↓ ↓

賢威8でスライドショーの下にグローバルメニューを置くやり方。子テーマで超カンタン。

 

見本サイトの方に設定している、

通常はスライドショーの上にあるグローバルメニューを、下に配置する」とか。

 

これらは、WordPressのCSS※を書き換えてカスタマイズするわけです。

(※Cascading Style Sheets、カスケーディング・スタイル・シート…サイトのデザインを決める部分

 

居酒屋オーナーさん居酒屋オーナーさん

…出ましたね!「CSS」をいじるってやつ!

サクラチカサクラチカ

いっきに上級者向けっぽくなりますよね。

子テーマって何?よくわからない。そんな超初心者に説明します。

 

サクラチカサクラチカ

こういうテーマがあったとして、色やレイアウトなんかを変える時にはWordPressの「CSS」という部分を上書きします。

 

ワードプレス の細かいカスタマイズはCSSの書き換えで行う

 

ですが、

もとのテーマそのもの(親テーマ)をカスタマイズするのは絶対にやめた方がいいんです。

 

なぜなら、

テーマが公式でバージョンアップされるたびに、
せっかく苦労して行ったカスタマイズがリセットされて水の泡になってしまうから。

 

サクラチカサクラチカ

そこで、これを解消する便利なアイテムが「子テーマ」なのです。

 

この記事では、ワードプレスの子テーマを利用することのメリットと、

賢威8の子テーマの使い方を紹介していきます。

 

※ワードプレスを触りはじめたばかりな人には、まだちょっと早いかも。

ある程度慣れてきたな、知識と経験が蓄積されてきたな、という人向けの内容です。

 

WordPressの子テーマってそもそも何?

そもそも子テーマって何?どうやって使うの?どこよりもわかりやすく説明します。

 

ワードプレスのテーマとは、ワードプレスの見た目を整える型(テンプレート)のことです。

親テーマ」とは、(購入→)ダウンロードしたテーマそのもののことです。

つまり「テーマ=親テーマ」ということです。

 

これに対して、

子テーマ」とは親テーマの見た目をそっくり引き継いでいる、

カスタマイズ専用のテーマのことです。

 

親テーマをカスタマイズしないほうが良い理由

大本のテーマそのもののCSSを弄ってカスタマイズすると、テーマがバージョンアップしたりアップデートした時に全部消えてしまう

 

最初の方にも書きましたが、

親テーマ=テーマそのもの自体のCSSをカスタマイズしていると、

そのテーマのアップデートが行われた際に、せっかく頑張ったカスタマイズがリセットされてしまうんですね。

 

子テーマを使えばアップデートしてもカスタマイズを維持できます

子テーマでカスタマイズしていると、大本のテーマ(親テーマ)がアップデートされてもカスタマイズは維持されます

 

子テーマで行ったCSSの上書きなどのカスタマイズは、

親テーマには影響を及ぼしません。

また、

親テーマが何度アップデートで更新されても子テーマには何の影響もありません。

サクラチカサクラチカ

なんとなくイメージが掴めてきましたでしょうか。

 

テーマがアップデートされた時は必ずインストールしなおしましょう

居酒屋オーナーさん居酒屋オーナーさん

アップデートを無視するというのはダメなんですか?

 

テーマのアップデートはテーマを使っているサイト運営者さんから公式に寄せられた不具合の解消や、テーマをより良くするために行うものなので、

アップデートが行われたら、その都度テーマをインストールし直した方が絶対良いです。

サクラチカサクラチカ

サイトは訪れて見てくれる人(将来の顧客)のためのものです。
作成する側の都合よりは、閲覧者ファーストであることが大事ですよ。

 

有料でテーマを買うことのメリットの一つとして、テーマを販売している会社のきめ細かいアフターケアの恩恵を受けられることがあります。

サクラチカサクラチカ

無料のテーマは有志の方(ボランティアみたいな感じ)がやってますからね。

自分が感じた不具合や、「もっとこういう事ができるようにしてほしい!」という要望をしっかり制作会社に伝えられることも嬉しいです。

サクラチカサクラチカ

わたしも、よく公式のフォーラム(掲示板)を利用して色々と疑問や要望を書き込んでいます。」

 

子テーマの導入にはFTPソフト(無料)が必要です

子テーマを使うにはFTPクライアントを使う必要があります。FFFTPはWindows専用で無料です。

 

WordPressの子テーマは「FTPクライアント」というツールが必要です。

既にFFFTPなどのFPTソフトがインストールしてあって、使い方も理解している人は

このまま進んでください。

 

FTPって何?よくわからない…」という人は、先にこちらの記事を読んでFTPソフト(無料)をダウンロードしてください。

↓    ↓    ↓    ↓

 

賢威8の子テーマをダウンロード&インストールする方法

 

賢威8には既に最初から子テーマが用意されています。

(※無料テーマだと自分で作らないといけないものもあります。面倒くさいです。)

 

サクラチカサクラチカ

ダウンロードして設定して、FTPソフトでアップロードすれば良いのです。

賢威を購入すると「賢威公式サポートサイト」にログインすることができて、そこで賢威(親テーマ)をダウンロードしますよね。

 

その時、「子テーマ」のダウンロードボタンも近くにあったんですね。

↓ ↓ ↓ ↓

賢威8の子テーマは本体のダウンロードボタンの横に子テーマのダウンロードボタンがあります。

 

ここから賢威8の子テーマをダウンロードします。

 

賢威8をライダーストアのサポートページからダウンロードする。

 

ブラウザがGoogleChromeの場合は左したにダウンロードしたファイルが現れます。

 

サクラチカサクラチカ

パソコン買ったばかりの時はデフォルトでMicrosoft Edgeというブラウザが入っていると思いますが、使いやすさと軽さからサクラチカ的にはWebサイトの閲覧にはGoogle Chromeを使うことをオススメします。そのうち中級者以上になった時に「拡張機能」という便利なツールも使えますし。

 

ダウンロードした子テーマのzipファイルを解凍して「style.css」を開く

子テーマをアップロードする時はわかりやすいのでデスクトップの上からやります

 

まず、ダウンロードした「賢威8子テーマ」を解凍してデスクトップ上に置きます。

上のようにGoogle Chromeを使ってダウンロードした場合は、

そのまま左下にあるファイルを右クリック→解凍→インストールできますが、

サクラチカサクラチカ

最近のPCは最初から自動的に解凍される設定になっているものもあるようです。

ダウンロードファイルを見失ってしまった人は、「エクスプローラー」から探しましょう。

↓    ↓    ↓    ↓

ダウンロードしたファイルはどこへ?エクスプローラーから探せば簡単に見つかります。

 

サクラチカサクラチカ

エクスプローラーを使うと見つけたいファイルやフォルダがすぐに見つかります。ぜひ使いこなせるようになりましょう。

 

keni8-child」というフォルダをクリックして

style.css」というファイルを Windows10の「メモ帳」アプリで開きましょう。

ワードプレス の子テーマのstyle.cssのtemplateの名前を親テーマと一緒にする

 

一番下にあるのが「style.css」です。

このファイルにマウスのポインタを当てて右クリックします。

子テーマのstyle.cssフィルをメモ帳やワードパット、テラパッドなどのテキスト作成ツールで開きます

 

メニューから「プログラムから開く」→「メモ帳」を選んでください。

賢威8の子テーマの使い方とアップロードのやり方

 

こういう表記が出てきます。

一番下にある、「Template:keni8」の部分を親テーマの名前と同じにしていきます。

 

FTPツールで親テーマの名前(長い数字になっている)を確認する方法

 

賢威子テーマアップロードにはFFFTPなどのFTPクライアント(ソフト)を使う

FFFTPを起動させます。

 

FTPソフトをインストールしていない人はコチラの記事を見ながら

FFFTP(無料、 Windows専用)をインストールしてください。

↓    ↓    ↓    ↓

 

ワードプレス の子テーマはFTPツールを使って使います。持っていない人は無料でダウンロードしましょう。

 

このサイトの解説を見ながらサーバーやドメインを契約した人は、

サーバーはmixhostを使っているかと思います。

(FTPソフトのホスト設定名はmixhostにしています。)

違うサーバーを使っていても、大きな違いはないと思います。

ホスト一覧からmixhostを選び「接続」をクリックします。

 

接続→public_thml→独自ドメイン→wp-content→themes→親テーマがある

 

色々と横文字で訳のわからないファイルやフォルダが沢山並んでいますが、

その中から「public_html」というフォルダを探してクリックしてください。

 

サーバーによって多少の違いはあるけれど、public_thml→wp-content→themesを探せば親テーマは見つかる

 

自分の独自ドメインのフォルダを見つけてクリックしてください。

サクラチカサクラチカ

画像ではこのサイトのドメイン「mirainet2020.com」になっていますが、皆さんそれぞれの独自ドメインのことですよ。

 

独自ドメイン→w-contentでThemaフォルダが出てくる

 

wp_content」を見つけてクリックします。

 

themesフォルダの中にインストールしたワードプレス のテーマが入っている。

 

themes」というフォルダをクリックしてください。

 

賢威8の親テーマの名前の数字の確認の仕方

 

keni80_wp_standard〜長い数字」というのがあります。

これが賢威8の親テーマです。

 

サーバーによって独自ドメインのある場所に多少の違いはあるけれど、

FTPでサーバーに接続→→(public_html)→→独自ドメイン→→public_thml→→wp-content→→themesを開いて探せば親テーマは見つかる、と理解しておけばOKです。

試しに開けてみるファイルの名前は「public_html」「wp-content」「themes」の3種類なので、難しくないです。

 

サクラチカサクラチカ

親テーマがやっと見つけられましたね。お疲れ様です。続いて、親テーマの名前の確認です。

 

親テーマの名前を確認してコピー&メモ帳に保存しましょう

FFFTPで親テーマを見つけたら、右クリックで名前変更→名前を変更せずにコピーする

 

「keni80_wp_standard〜」の文字の上で右クリックします。

メニューから「名前変更」を選んでください。

※名前は変えません。

 

親テーマの長い名前をコピーしてメモ帳に保存します。

 

ポップアップで「名前変更(ホスト)」という枠が出てきて、

賢威8の親テーマの名前の全貌が出てくるので、

Ctrlキー+A」で選択して、「Ctrlキー+C」でコピー。

子テーマの名前を親テーマと同じにする方法

Windowsのメモ帳などに「Ctrlキー+V」で貼り付けて保存しましょう。

サクラチカサクラチカ

これを子テーマの「style.css」の書き換えに使います。

 

子テーマの「style.css」の中にあるテーマの名前を親テーマのものに書き換えよう

子テーマのstyle.cssファイルの中にあるtemplateの記載を親テーマのものと同じにする

 

子テーマのフォルダを開き、

style.css」をメモ帳で開きます。

style.cssをメモ帳などのプログラムから開く

 

右クリック

プログラムから開く

メモ帳

 

子テーマのstyle.cssの中にあるtemplateの部分をさっき保存した親テーマの正式名称に変えます

 

Template:keni8」の部分を、先ほどメモ帳に保存した

賢威8の親テーマの長い数字の名前に書き換えましょう。

サクラチカサクラチカ

メモ帳からコピー&ペーストすればカンタンです。名前を間違えると子テーマが動かないので、注意してくださいね。

 

子テーマをFTPソフトを使ってアップロードしましょう

子テーマのアップロードのやり方を初心者でもわかるように簡単に図解します

 

FFFTPを起動→接続を行います。

サクラチカサクラチカ

もうカンタン楽々に接続できるようになったと思います。

 

 

public_html」をクリック。

 

 

自分の独自ドメインのフォルダをクリック。

 

 

public_html」をクリック。

 

 

wp_content」をクリック。

 

 

賢威8の親テーマが入っている「themes」フォルダに子テーマをアップロードします。

こういうイメージ。

↓    ↓    ↓    ↓

子テーマは親テーマが入っているthemesフォルダの中にアップロードします。

 

詳しいやり方を見ていきましょう。

左側=自分のPC側の左上にある「フォルダが空いている方」をクリックすると、

ドロップダウン式で自分のPCの中身が表示されます。

FFFTPで自分のパソコン側(左側)のフォルダが空いているアイコンをクリックすると自分のPCの全ファイルがドロップダウン式で表示されます

 

賢威8の子テーマはデスクトップの上にあるので、

(※デスクトップに置いていない人は移動させてください。探しやすいので

子テーマをアップロードする時はデスクトップに子テーマのフォルダを置いておきましょう

デスクトップ」をクリックします。

 

FFFTPでファイルをアップロードする時は右クリックでアップロードを選択するのが一番簡単です。

 

左側に、デスクトップの上にあるものが表示されています。

keni8-child」の上にマウスのポインタを当てて、右クリック。

アップロード」を選んでクリックします。

 

賢威8の子テーマをアップロードするのはとても簡単です。FFFTPの使い方をマスターしましょう。

 

サクラチカサクラチカ

これで無事に子テーマがサーバーにアップロードできました。
続いて、ワードプレスの管理画面での設定の作業を行いましょう。

 

WordPressの管理画面で子テーマを設定する

ワードプレス の外観→テーマエディターで子テーマを選択しましょう

 

ワードプレスの管理画面(ダッシュポート)のサイドバーから、

外観」→「テーマエディター」をクリックします。

 

賢威8.0(親テーマ)から賢威8.0(子テーマ)に選択し直します

 

出てきた画面の右上にある「編集するテーマを選択」という部分を、

テーマエディターで賢威8の子テーマを選択できたら完了です

 

「賢威8.0(親テーマ)」から「賢威8.0(子テーマ)」に変え、

選択」をクリックしましょう。

サクラチカサクラチカ

これでワードプレス側の設定が完了です。長い間の作業お疲れ様でした。

続いて、

子テーマの中に「phpファイル」を入れていく作業を次回の記事で説明しますね。

美病室オーナさん美病室オーナさん

php??また何か新しい難しそうな言葉が出てきて不安なんですが…。

サクラチカサクラチカ

大丈夫です。画像を見ながら真似ていけばできるようにします。

 

子テーマにphpファイルを入れる方法についてまとめました。(見たままやればできる!)

↓    ↓    ↓    ↓

 

この記事が役に立ったらソーシャルメディアで共有してくださいね