WordPressカスタマイズの準備－親テーマ・子テーマの追加
前回でWordpressの管理画面が開けるようになりました。
次に、管理しやすい環境を整えて、サイトの基本となるテーマをインストールします。
GoogleChromeで作業する－デベロッパーツール
この一番の近道でカスタマイズするためには、GoogleChromeを作業に使ってください。
デベロッパーツールが使いやすいからです。
Windowsだとブラウザ上で右クリックして[site-menu]検証[/site-menu]するか、F17キーを押すと表示されます。
ブラウザで表示しているサイトのHTML(Elements)とCSS(Styles)をサイトと照らし合わせて見ることができます。
- 試しに書き換えてその場で変化を見る
- 自分のコードのエラーの場所がわかる
- 他のサイトがどのようにできているのか参考にするために見る
- 様々な画面サイズで表示を確認できる
今そんなことを言われてもまったくピンとこない！という方もいるかもしれませんが、
一番の近道では、テンプレートサイトを元に所々書き換えたり、書き加えて作りたいサイトを作ります。
見本がどうなっているのかを確認して、変えたいところを変えるという作業が多くなるため必須なツールです。
使いやすいChromeのブラウザで作業をしましょう。
Microsoft Storeで検索してインストールもできます。
[balloon-simple]今はまだ必要ありませんが、
試しにいじってみて操作が不安になった方は、使い方を調べてみましょう。[/balloon-simple]
[search-word]デベロッパーツール[/search-word]
作業しやすい環境を整える
サイトの管理を始める前に、頻繁に使うサイトはパッと開けるようにブックマークバーにブックマークしておきましょう。
- Xサーバーのサーバーパネル
- WordPressの管理画面
- 自分のサイトのトップページのURL
ブックマークの管理も自分が使いやすいように、整理しておくと作業がはかどりますね。
ここからの作業では、素材を探せるサイトなども頻繁に使うので、サイト制作用のフォルダを作っておくと良いです。
WordPressのテーマをインストール
いよいよ、サイトの外観を作っていきます。
一般的なブログでテンプレートと呼ばれるような、外観を着せ替えるためのものです。
サイトのデータを表示する際に、どの情報をどのように表示するかを設定しているテンプレートファイルや、外観のデザインを適用するためのCSSのスタイルシートなどで構成されています。
個別投稿、固定ページ、トップページ、アーカイブページ、検索結果ページなどそれぞれにテンプレートファイルがあり、違う構成やデザインのページが表示されます。
[search-word]WordPress テーマとは[/search-word]
テーマを選ぶときは、デザインの違いだけでなく、管理のしやすさやカスタマイズのしやすさ、SEO的な観点やページ速度、向いているサイトのタイプ、機能の違いなど……
様々な要素があるので、詳しくない人間が選ぶには詳しい人のブログなどを読み漁る必要があり、大変です。
無料テーマだけでなく有料テーマもあり、目的に合う有料テーマを買ってもっと簡単にサイトを完成させることもできます。要検討ですね。
ここでは、さやなりに調べて決定したシンプルでカスタマイズしやすい有名テーマLightningを使っています。
WordPressの管理画面にログインし、[site-menu]外観[/site-menu]から[site-menu]テーマ[/site-menu]のページへ。
ページ上部の[site-menu]新規追加[/site-menu]から[search-word]Lightning[/search-word]
検索結果からLightningを選択し、[site-menu]インストール[/site-menu]＆[site-menu]有効化[/site-menu]します。
]以上の詳しい手順はLightning公式サイトに動画も載っています。
WordPressのカスタマイズの際は子テーマを使う
WordPressでテーマを自分の好きなようにカスタマイズする場合は、直接編集してはいけません。
WordPressのテーマには、スマホアプリなどと同じでアップデートがあります。
親テーマは、基本的には編集されるように出来ていないので、アップデートの際にユーザーがカスタマイズで変更した部分がすべて消えてしまうことがあります。
子テーマを使うと、親テーマのデザインや機能をそのまま引き継いだうえで、変更したい部分のみをサイトに反映させることができます。
カスタマイズした子テーマは、アップデートの影響を受けません。
[balloon-simple]細かい仕組みやWordPressの構造については、カスタマイズしていく中で必要な知識だけその都度解説していきます。
知りたい方はググってみましょう。[/balloon-simple]
[search-word]WordPress 子テーマ[/search-word]
カスタマイズのために子テーマをインストールします。
公式サイトでは、FTPなどで―――ディレクトリにアップ…などと難しいことが書いてありますが、一旦自分のPCにインストールしたら解凍せずにそのまま、WordPress管理画面からアップロードできます。
[site-menu]外観[/site-menu]から[site-menu]テーマ[/site-menu]のページ、[site-menu]新規追加[/site-menu]の上部にある[site-menu]テーマのアップロード[/site-menu]で自分のPCに保存したZipファイルを選択すれば完了です。
子テーマを[site-menu]有効化[/site-menu]してください。
これで今度こそ準備は完了？
いよいよ、次からはサイトの外観を実際に変えるなどの細かい作業に移っていきます。
まだまだ使うツールや、ちょっとした知識も増えていきますが、手順通りにしていれば必ず完成しますので、ご安心くださいね。