【初心者向け】WordPressのテーマのカスタマイズの方法まとめ

こんにちは、Syouheiです。

先日、自分のサイトのデザインを変更しました。

ブログのテーマ調整終わりました☺️明日、調整後のテーマを公開しようと思います。

今週中に終わらせられてよかったです。テーマのカスタムは初めてでしたが、wordpressの構造が少し分かって楽しかったです。

明日、変更をブログに適用したら記事作成に取りかかります。これからさらに集中ですね。

— Syouhei (@LookTheWorldSom) February 9, 2020

メモもかねてWordPressのテーマをカスタマイズする方法について説明したいと思います。

それではさっそく行きますね。

WordPressのテーマのカスタマイズ方法

テーマのカスタマイズの手順は以下になります。

ひとつずつ説明していきます。

ローカル環境を構築

つまり、WordPressを自分のPCにインストールします。
PCの中に自分のサイトを作ってカスタマイズしていきます。

ネットで見れるほうのサイトをそのままカスタマイズすると変更の途中でも見られてしまいます。
下手をするとサイトが壊れてしまうかもしれません。

なので、PCにもう一つ予備のサイトを作ってカスタマイズします。
PCのなかで失敗しても見られることはないので安心して作業できます。

ローカル環境で完成したテーマのファイルをサーバーにアップするので、本物のサイトのデザインも安全に変更できます。

ローカル環境の作り方

ローカル環境は「Local by Flywheel」というソフトを使います。
こちらからダウンロードできます。

Lacal by Flywheelの参考記事
>>初心者でも簡単にWordPressのローカル環境を構築する方法

子テーマを作る

子テーマを作成するには、プログラミング言語のcssやphpの知識がある程度必要です。

「子テーマの作り方」の参考記事
>>子テーマを作ってWordPressの既存テーマをカスタマイズする方法 | Webクリエイターボックス

テキストファイルを編集するソフトはVSCodeがおすすめです。
メモ帳などでも問題ないですが、作業効率が全然違います。

VSCodeの便利な点が以下。

無料なのに高機能、すぐに使えるのでかなりおすすめです。
VSCodeのダウンロードページへ行く

ブラウザの「開発ツール」

参考サイトのソースを見ると効率よく作業できます。
ソースを見るにはブラウザを使います。

以下の場所からソースを表示できます。

ブラウザではHTMLとCSSのコードが表示されます。
サイトの場所とHTMLのコードを照合できます。

CSSの検索機能を駆使すると自分のカスタマイズしたいコードが早く見つけやすくなります。

スマホ用の表示もテストできます。

テーマのカスタマイズはブラウザの開発ツールを使いこなすことがコツです。
特に検索機能を有効活用できると早く作業できますよ

サーバーに子テーマをアップロードする

ローカル環境でカスタマイズが完了したら、サーバーに子テーマをアップロードしましょう。

サーバー上にあるWordPressの「theme」フォルダに子テーマフォルダをコピーするだけです。

最後にネット上でサイトがカスタマイズ通りに表示されたら成功です。

まとめ

以上です。
ありがとうございました。