WordPress

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

更新日:

こんにちは、Syouheiです。

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

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

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

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

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

  1. ローカル環境を構築
  2. 子テーマを作成
  3. 子テーマをサーバーにアップ

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

ローカル環境を構築

ローカル環境:インターネットに繋がなくても作業できる環境

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

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

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

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

ローカル環境の作り方

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

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

子テーマを作る

子テーマ:もとのテーマから変更する部分を記述したファイル

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

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

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

VSCodeの便利な点が以下。

  • コードが色分けされて見やすい
  • 「Ctrl + H」で検索機能が使える
  • 動作が軽く低スペックPCでもサクサク

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

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

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

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

chrome:右上の3点マーク>その他のツール>デベロッパーツール
firefox:右上の3本線マーク>ウェブ開発>開発ツールを表示

chromeの開発ツールを使用する方法

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

サイトとhtmlの照合。参考にしたいデザインのコードを探すのに便利です。

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

cssの検索。選択したhtmlコードのcssを見ることができます。画像では「font-size」と検索しており、フォントサイズが25pxに指定されていることが分かります。

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

スマートフォンの表示モード。最近はスマホでサイトを見ることがほとんどなので、スマホのディスプレイ幅での表示チェックが重要です。

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

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

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

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

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

まとめ

WordPressテーマのカスタマイズの手順

  1. ローカル環境構築
  2. 子テーマの作成
  3. サーバーに子テーマをアップ

WordPressテーマのカスタマイズに必要なツール

  • ローカル環境を作るソフト(Local by Flywheel)
  • コードエディタ(VSCodeなど)
  • ブラウザ(chrome、firefoxなど)

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

-WordPress
-, ,

Copyright© Syouhei Blog , 2020 All Rights Reserved Powered by STINGER.