具体的に解説!カスタマイズするファイルを子テーマにインストールする方法

おかぴー

こんにちは、WEBデザイナーのおかぴーです。

 

今回は、「ストーク」の子テーマをインストールする方法と、親テーマから子テーマにファイルをダウンロード・アップロードする方法を、具体的にわかりやすく解説していこうと思います!

当ブログで行っているカスタマイズも、基本的に親テーマのファイルを子テーマへダウンロードしてから、それを編集していくようにしてほしいので、

親テーマを直接編集せずに、必ず子テーマで編集をしてください。

 

ねこのすけ

そもそも、親テーマと子テーマって何!?

なんか大変そうだし、元のデータをそのままいじれば簡単なんじゃない?

おかぴー

確かに、言いたいことはわかります!
僕も最初は同じように思ってたし、実際に親テーマ(元のデータ)を編集してカスタマイズしていたこともあったしね。

でも、一度子テーマの便利さ・作成の簡単さ・安全性を知ったら、子テーマを使わないの方が今後もっと大変な労力が必要になると実感したから、なぜ子テーマを利用するのかという理由も含め、この記事でわかりやすく解説していきます!

それでは、さっそくご覧ください!

 

 



親テーマ、子テーマとは?

まず、親テーマと子テーマの違いを解説します。

・親テーマ
→ブログを形づくる土台となるもの。
(もちろん親テーマだけでもブログのページは表示されます。)

・子テーマ
→親テーマの次に読み込まれるデータ。
(今後カスタマイズしていくのは、このデータです。)

図で解説すると、僕たちがブログを見るときは、以下の順番でデータがパソコンやスマホの画面に表示されます。

 

①親テーマだけを使っているとこんなイメージ↓

②一方、子テーマを使うとこんなイメージ↓

おかぴー

そして、ここで一つ覚えていてほしいことがあります。
それは、テーマのアップデートについて。

 

テーマをアップデートすると、変更した内容がリセットされます。

 

ねこのすけ

リ、リセット!!?

そうなんです。
つまり、親テーマを使ってカスタマイズをしていると、親テーマをアップデートしたらもう一度カスタマイズしないといけなくなるんです。

その労力をなくすためにも子テーマを利用するのが推奨されています!

子テーマを使うメリットとは、親テーマがアップデートされても子テーマでカスタマイズした内容はずっと残るという点です!

先ほどの②の図でいうと、親テーマがいくら最新になったとしても(子テーマがリセットされるわけではない)、必ず子テーマを通してデータは表示されるためカスタマイズした内容がちゃんと残り、画面に表示されるというわけです。

 

ねこのすけ

でも、なぜワードプレスのテーマはアップデートされるのー?

おかぴー

いい質問です!

それは、読者の方が読みやすいように、そしてブログを作る僕たちが作りやすいようにワードプレスのテーマはアップデートされていくからです。

身近なものだと、スマホなんかいい例ですね。
スマホ内のアプリとかが更新してくださいと出てきたことはありませんか?それもセキュリティの改善やユーザビリティの向上を目的としてアップデートされます。

それと同じです。

 

ちなみに、2018年9月14日に行われたストークの最新アップデートでは、パンくずナビをサイト下部に表示できるようになったようですね^^

引用:ストーク公式サイトより

 

パンくずナビとは、ページがどの階層にあるかをわかりやすく伝えるための地図のようなものです。

このように、ユーザーの意見を取り入れたり、改善していくためにいいものになっていくんですね。

公式サイトでも子テーマの利用を推奨しているので、一度導入すればもう大丈夫!そこから安心して自分だけのブログを作っていきましょう!

 

 

子テーマのインストール方法(ストークの場合)

では、インストール方法を解説します。

①まずストークの公式サイトから子テーマをダウンロードします(赤枠内のストーク用をクリック)。

「jstork_custom.zip」という名前のファイルがダウンロードされます。

引用:ストーク公式サイトより

 

②ワードプレスを開き、「外観>テーマ>新規追加」をクリック

※画像には「stork_custom」という子テーマがすでに有効になっていますが、僕のインストール済みの画面なので気にしないでください^^。

子テーマのインストールが完了するとこのようになりますので。

 

③テーマのアップロードをクリック

 

④ファイルを選択をクリックして、ダウンロードしたzipファイルを選ぶ

直接ダウンロードしたファイルを、ここにドラッグしてもアップロードできます。

 

⑤「有効化する」をクリック

※ただし、親テーマ自体が先にインストールされていないとエラーになります。

以上で子テーマのインストールが完了しました。

ここから先は、何をカスタマイズするかでインストールするファイルが変わってきますが、一つ具体例を出して解説しますね^^

 

 

編集したいファイルを親テーマから子テーマにインストールする流れ

親テーマから、子テーマにファイルをインストールするにはFTPソフトというのを利用します。

FTPソフトとは、簡単に言えばファイルを別の場所に転送するためのソフトです。

こんなイメージ↓

サーバー>ワードプレス>ストークテーマのフォルダ内にある各ファイル。

これらをダウンロードしたり、カスタマイズ後にアップロードしたりするソフトです

 

僕が利用したことがあるのは、FileZilla、Cyberduckの2つですが、どちらも無料でWindows・Mac両方で使えて機能もほとんど変わりません。

でも、まだ利用していないならFileZillaをオススメします。

理由は、転送に失敗したファイルがいくつあるかがわかるので、それだけを再度転送できるのが便利だからです。

FileZillaのダウンロードはこちらからどうぞ。
設定方法は別の記事で解説しますね。

 

今回は具体的な例として、トップに戻るボタンをカスタマイズするためのfooter.phpをインストールしていきます。

右下のボタンのことですね↓
当ブログでも、デフォルトから矢印のアイコンに変更しています。

 

①FileZillaを開き、ローカル環境(デスクトップ)とサーバー環境をつなぎます。

画面左がローカル環境のデータ(=あなたのパソコン本体のデータです)
画面右がサーバー環境のデータ

画像の赤枠内の説明

①:デスクトップを選択しておく(ローカル環境)
②:ストークのテーマを使ってるドメインを選択
③:ここでは、先ほど話した失敗した転送がいくつあるかがわかります。

 

②右画面のサーバー側で、あなたのドメインをダブルクリックし、「public_html>wp-content>themes」と進んでいく。

jstorkフォルダを開く

 

④その中から、footer.phpをダウンロードする

このとき、左画面のローカル側ではデスクトップを選択しておきましょう。
ダウンロードはドラッグでも、右クリックのダウンロードでも可能です。

ただし、黄色いファイルの上にドラッグしてしまうとその中にダウンロードされてしまうので、なるべく黄色いファイルのない場所にドラッグしましょう。

 

⑤サーバー側で、今度はjstork_customフォルダを開く

これがストークの子テーマです。
ここに④でダウンロードしたfooter.phpを転送します。

 

⑥ローカル側のfooter.phpをアップロードする

左上に「ファイル転送に成功しました」と出れば子テーマへのアップロードが完了したことになります。

ここでも黄色いファイルがある場合、その上にはドラッグしないように注意してくださいね。

 

ストーク以外にも子テーマを用意しているテンプレートがたくさんありますので、そちらをカスタマイズする際は使っていきましょう!

以上で、カスタマイズする準備ができました!

他にも、自分のカスタマイズしたいファイルがあれば、同じように子テーマへインストールしていただければと思います。


デザイン性の高いブログ ビジネスモデル作りの基礎知識

『ブログの収益化』についての記事リクエストに応えました!

内容の濃い記事になっていますが、

最後まで本気で読んでくれたら、ここまで読んでいるあなたの助けになれると思います^^

この悩みをWEB業界と関わりが深いおかぴーが1から解決します!!


コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください