ブログ運営

【初心者向きWordPress】子テーマの有効化とファイルの追加と「カスタマイズ」難しく考えてたけど実はすごく簡単だった!

当ページのリンクにはプロモーション広告が含まれています

本記事は、自作「子テーマフォルダ」の作り方ではございません。

既存の子テーマに、ファイルを追加していく方法の説明です。

 

「子テーマ」はとても大切です!

【必ずコードを編集したり、追加したりする作業には、子テーマで行うことが必須。】

ということは、webで検索し十分承知していました。

しかし、初心者で「理解力が乏しい私」には難しく、脳が拒否反応を起こしており、すでに用意されている子テーマファイル以外(*1)のコードは、しれっと親テーマのコードを編集していました。

*1 AFFINRER4の子テーマファイル

スタイルシート (style.css)、テーマのための関数  (functions.php)、テーマヘッダー 、(header.php)、js  (st-media-editor.js)

そんな危険なことを皆さんにして欲しくないので、ど素人の私でもできるようになった今、実体験としてご説明したいと思いますので、お付き合いください。

子テーマとは?

まず、伝えおきたいことがあります。

子テーマを自作するという方法もあるのですが、初心者にはオススメしません

理解するのに時間を要しますし、ちゃんと出来なくて、嫌になってブログ自体が続かなくなる可能性があります。

嬉しいことに、最初から[親テーマ][子テーマ]が用意されている「WordPressのテーマ」は沢山ありますので、その中から選びましょう。

(親テーマ)テーマ

ワードプレスブログのテンプレートのこと=親テーマ

※テーマとは、ブログのテンプレートのことです。

子テーマ

親テーマの機能とスタイルなどのデータを引き継いだファイルで、そこに個性を出すためのもの。

ブロガーとしては、個性を出すのは、憧れだし、そんな自分のサイトに愛着が湧いてきます♡

子テーマでは、文字を大きくしたり、サイト画面の幅や余白スペースを変えたりと、自分好みにブログをアレンジできます。

なので、子テーマを熟知し、習得して欲しいです。というか、私がそうしたいです(笑)。

実は、アウトプット作業って、かなり勉強になっています。

皆さんにきちんとお伝えしようと思うので、自分で深く調べたりするからです。そして、書くことにとより理解が深まっています。

なんだか一石二鳥な気分です。

子テーマをコーディネートして個性をだす

WordPressで作られたウェブサイト(ブログ)は、複数のPHPファイルにて構成されています。

その沢山のファイルが合わさって、Wordpressのウェブサイト(ブログ)を作り出します。

 

例えば

お店で売られている「Tシャツにジーンズ」のリカちゃん人形があるとします。

そこにピアスをつけたり、マフラーを巻いてみたり、自分だけのリカちゃん人形にコーディネートしていきます。

子テーマファイルカスタマイズ(コーディネート)で、公開されている「ブログ(自分だけのリカちゃん人形)」となっていきます。

親テーマをコーディネート(カスタマイズ)してはいけない理由

ここもいまいち理解できずにいたのですが↓

まず、テーマをダンロードするとき、[親テーマ]も[子テーマ]とダウンロードします。で、有効化するのは[子テーマ]。

「親テーマ必要?」って、そんなところで、ひかかっていました(笑)。

結果・・・必要です。

なぜなら、親テーマをアップロードしていないと、子テーマは、親テーマのデータを引き継ぐ仕組みになっているのに、引き継ぐものがないから、きちんと構成できません。

難しく考えなくて良いんですよ、親子セット♪

どうして親テーマをコーディネート(カスタマイズ)してはいけないのかです。

理由は・・・

WordPressの(親)テーマは、製作者さんによって、より快適に使えるように、機能などが追加され(自動・手動あり)アップデートが行われます。公式テーマは、自動でアップデートです。

親テーマは、アップデートが行われると、すべてのファイルが上書きされます。

そんな時、親テーマをコーディネート(カスタマイズ)していると、上書きされることにより、「Tシャツ+ジーンズ姿」に戻ってしまいます。

またあれこれ調べて、ピアスやマフラーを巻いてあげなければいけません。時間と労力を要します。

それならば、最初に子テーマをしっかり理解し、子テーマをコーディネート(カスタマイズ)するようにしましょう!

アップデートされたとき、子テーマはどうなるの?

親テーマに属している(継承)ので、ちゃんとアップデートされます。且つ、コーディネート(カスタマイズ)した部分はそのままなんです。

なんだか凄くないですか?書いていて今更ながら感動しています(笑)

コーディネート(カスタマイズ)した部分に非常に愛着が湧くではありませんか。

AFFIGER4の子テーマに最初から入っているファイル

「AFFINGER4」の子テーマには、以下のファイルが用意されていました。

・スタイルシート (style.css)

・テーマのための関数  (functions.php)

・テーマヘッダー  (header.php)

・js  (st-media-editor.js)

以上です。

初めてみた時、「うん?これだけ?」「これだけで成り立ってるの?」と意味不明でした。

そして深く考えず、気にしないようにしていました。←苦手意識が強く、ストレスだったから。

子テーマにはコーディネート(カスタマイズ)するファイルのみ

子テーマは、ファイルが表示されていなくても、親テーマのファイルをそのまま持っていると考えてください。

子テーマには、コーディネート(カスタマイズ)したい箇所のファイルだけを入れておけばOKです♪

「最初からもっとファイル入れておいてよ。」と、思ったし思っている私です。

でも、入っていないので、自分で作りましょう。いきますよー!

子テーマファイルの作り方

ここです。私が『?』で停止していて、親テーマをコーディネート(カスタマイズ)していた理由は。

ですが、ブログ運営を継続し、やっと理解できてきました。

私は、ファイルを作成し実装するまで、大変時間がかかりましたが、同じ初心者で、同じくまだ知識が浅い方々には、苦手意識をもつことなく、最初から子テーマを使えってもらえるよう私なりに頑張ってご説明します☆

「FTPクライアントソフト」を用意

まず用意するのが、バックアップで必須アイテム「FTPソフト」(FTPソフトについては、また別の記事でご案内します。)

私はFileZillaを利用しています。※私でも使えているので、オススメです!

FileZillaダウンロードページ(日本語対応)

XSERVERでも正式に紹介されています。→https://www.xserver.ne.jp/manual/man_ftp_filezilla_setting.php

今は完璧に理解しなくて大丈夫です!ブログを継続していく上で、少しづつわかってきます。

むしろ、ブログを進めていったほうが、理解しやすいです。

とりあえず、最初は皆んなが「コレだけは絶対やっておけ」「設定しておけ」というポイントを、押さえておけば大丈夫です。

子テーマファイルを実際作ってみました!

私が、テーマ「AFFINGER4」を使用しているので、そちらがベースの説明になります。

では、子テーマフォルダにコーディネート(カスタマイズ)したい箇所のファイルを作りましょう。

今回は私がコーディネート(カスタマイズ)したい[head.php]ファイルを子テーマに作ります。

見にくくて申し訳ないです...

  1. FileZillaを起動し、接続後、左側(パソコン)の[public_html]→[wp-content]→[themes] →[テーマ名 AFFINGER4]のテーマファイルを選択※子テーマchildではありません→ファイル名をダブルクリック。
  2. 右側(サーバー側)は、[public_html]→[wp-content]→[themes]→[affinger4-child]をダブルクリック。
  3. 左側(パソコン)の[header.php]を選択後、左側から右側へドラッグでアップロードします。
  4. [header.php]ファイルが、サーバー側へ、正常にアップロードされていれば子テーマ作成は完了です。

WordPressダッシュボードの「テーマ編集」でも確認します。

きちんと追加されており、ブログも正常に動いておりました。

無事、cssコードを追加し、コーディネート(カスタマイズ)もできました。

追加した後は、ブログページざっとを確認してくださいね。

原因はその都度違いますが、過去に数回ですが、デザインが壊れていたことがあったので。

その時は、再度調べ直し、やり直してみてください。

お疲れさまでしたーーーーー!

本当最初は、用語自体が馴染みもないし、全てがちんぷんかんぷんで頭に入ってきませんでした。

が、慣れてくると本当に簡単なことは分かってきます。(難しいと思うものの方が、まだまだ多いですw)

そんな私でもこう思えているので、今読んでくださっている「WordPressでブログを始めたばかりの方々」は、もっと早く理解し、習得されて行くと思います(笑)。

お互い楽しく、勉強しながら「ブログ」を運営していきましょう。

「AFFINGER4」の優待購入

※AFFINGER4の販売は終了しました。

今はバージョンアップされて「AFFINGER5(WING)」が発売されております。

詳細はこちらの記事へ↓↓↓

ワードプレスのテーマに「WING(AFFINGER5)」を導入!初心者におすすめしたいテーマです!

AFFINGER5(WING)が初心者におすすめなわけとは?使っているのでご紹介します!

続きを見る

私は、2018年2月に有料テーマAFFINGER4を購入しました。

infotop経由をにて、9800円(税込)を500円引きの9000円(税込)で購入。

高いです・・・ので、800円引きでも助かります。

私もご協力したいと思い、購入後、アフィリエイトパートナー登録をし、紹介させていただいております。

☆優待ページ (infotop経由)を、利用していただくと(ライオンくんをクリック)

9800円(税込)が800円引きの9000円(税込)で購入することができます。

ダウンロード後、WordPressにアップロードしてもらえればすぐに使用できます。

追記

本記事を書いたのは2018年2月になります。

AFFINGER4を購入したのも2月です。

なのに、3月にAFFINGER4のバーションアップテーマとして「WING(AFFINGER5)」が発売されました。

ショックでした・・しかし、書いた通りAFFINGER4がとても良かったので、迷うことなく4月に「WING」も購入しました。

出費した分、頑張らばらないとな。と思うばかりです。

最後までありがとうごさいました。mimi(@mii_mii93205607)でした。

 

-ブログ運営
-