@importはページロードが遅くなる。子テーマの作り方をきちんと勉強してみた。その1

ここを含めて今4つサイトを作っているんですが、ワードプレスを使い始めた直後はとにかく始める事が先決で、ノウハウ系ページを読んで適当に見様見真似で進んでいました。

_(┐「ε:)_ {動きゃいいんだよ動きゃ

子テーマもその一つで、

「テーマが更新された時にせっかくの編集が無にならないように」

という部分は理解しているのですが、
書かれたコードの意味などはきちんと理解しておらず、
上手くCSSが反映されなかったりデザインが変になったり…

「あれ?(・・?」って思う事がちょいちょいありました。

実はこのブログは子テーマが上手く反映されず、
原因を探るのがめんどくさかったのでそんなにカスタマイズしていないのをいい事にまだ子テーマを使っていません…汗

基本が出来てもっと細かいカスタマイズをしたくなって来たので、
子テーマについて勉強してしっかり作ってみたいと思います!

子テーマって何?

さすがにこのページを見に来て子テーマ自体知らないって事はないと思うんですが、利点などについて復習してみます。

ワードプレスのCordexサイトによると、子テーマを使う利点は以下の3つ。

・テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
・子テーマを使用することで開発時間を短縮できます。
・子テーマの使用することでWordPressのテーマの開発を良い形で学べます。

正直下の2つはこれだけじゃ根拠が良く分からないんですが、今の所は無視しておきます。←

「子テーマ使え!絶対に使え!!!」

とみなさんが口を酸っぱくして仰っているのは、1つ目の理由ですよね。

テーマのアップデートをすると、編集したCSSファイルなどが上書きされてしまい、
今までの苦労が水の泡…

となった人たちが大量にいて、その方々の涙の結晶が昨今の手厚い子テーマ推奨ムードに繋がっているんですね。ほろり。

子テーマを作る手順

(上にも貼った子テーマについてのページを参考にしています。)

まず子テーマのファイルを作成

まず基本は、サーバーのファイルマネージャにてフォルダとファイルの作成をする所から始まります。

他のサーバーの場合は分かりませんが、エックスサーバーの場合はファイルマネージャにログイン後、以下の手順です。

ドメイン名のフォルダをクリック

public_html

wp-content

themes

まで移動したら、
ここに子テーマのフォルダを作成します。

①にフォルダ名を記入してフォルダ作成をクリック。
この時のフォルダ名は、ハウツーサイトでは単に「child」としている人も多いんですが、のちのちの分かりやすさの為にも、「親テーマ名-child」としておきましょう。私の場合は「first-child」ですね。

フォルダが作成出来たら、②のように表示されるのでそれをクリックして移動。

次は作ったフォルダ内にファイルを作成します。

先ほどの手順と同じですが、フォルダではなくファイルの作成です。
1つは「style.css」、もう一つは「functions.php」と名前を付けて下さい。

するとまた左側に表示されました。
この時点ではこの2つのファイルはまだ真っ白なので、必要な情報を片方ずつ記入していきます。

エックスサーバーユーザーはここで注意ですが、フォルダと違ってファイルはクリックしても開きません…
パソコンにダウンロードされてしまいます。

分かってても何度もやってしまう私みたいなのもいますが、
良い子の皆さんは編集したいファイルの横のチェックボックスをクリックして、
③の編集ボタンを押してくださいね。

さてこうすると目の前に真っ白な画面が広がり、いよいよ記述です。

(※functions.phpを作らずに、style.cssに@importの記述をするスタイルもあるのですが、今は推奨されていません。詳しくは次の記事にて。)

既にちょっと長いので記事を分けました、続きはこちら↓

@importはページロードが遅く。子テーマの作り方をきちんと勉強してみた。その2

コメントを残す

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