テーマのインストール手順とカスタマイズ方法

WordPressで全体のレイアウトやデザインを変えるためには「テーマ」からテンプレートを選びます。

初期状態でもデフォルトテーマが設定されていますが、他にも数多くあるため好きなテーマを見つけてきましょう。

本ページでは無料かつ初心者向けの「Lightning」というテーマを用いてインストール手順とカスタマイズ方法を解説します。

テーマ本体のインストール

WordPressではテーマのインストールや切替を簡単に行えます。

①管理画面で「外観」>「テーマ」をクリックします。
②テーマ画面で「新規追加」をクリックします。

③検索ボックスに「Lightning」を入力します。
④Lightningテーマが表示されたら「インストール」をクリックします。

⑤インストールが完了したら「有効化」をクリックして切り替えます。

専用プラグインのインストール

Lightningには便利な拡張プラグイン(ExUnit)があります。

SNSとの連携やGoogle自動広告の挿入などが簡単に行えるためインストールしておきます。

①Lightningを有効化すると「VK All in One Expansion Unit」と「VK Blocks」の通知がされるため「プラグインのインストールを開始」をクリックします。

②対象プラグインをチェックし、インストールを選択して適用をクリックします。

③インストールが完了したら「必須プラグインのインストール画面に戻る」をクリックします。

④対象プラグインをチェックし、有効化を選択して適用をクリックします。

⑤ダッシュボードに戻って追加要素があれば対応します。

⑥日本語表示にするために「更新」をクリックします。
⑦WordPressの更新画面で「翻訳を更新」をクリックします。

⑧ExUnit画面にて、SNSとの連携、Analyticsの設定、Google自動広告の挿入などが簡単に行えます。

子テーマの作成

インストールしたテーマを直接カスタマイズすると、アップデートの時に上書きされ設定が戻ってしまう場合があります。

設定が戻ってしまわないよう子テーマを作成してからカスタマイズを行っていきましょう。

フォルダーの作成

子テーマを作るためには親テーマと同じ階層にフォルダーを作成する必要があります。

フォルダーの作成はFFFTP等のファイル転送ソフトを使って行います。

エックスサーバーでのFFFTP設定手順
https://www.xserver.ne.jp/manual/man_ftp_ffftp_setting.php

WordPressのテーマは、エックスサーバーのWordPress簡単インストールを使った場合は「/ドメイン名/public_html/wp-content/themes」に格納されています。

①テーマが格納されているフォルダーの何もない箇所で右クリックをして子テーマのフォルダーを作成します。

②ここではLightningの子テーマを作成するため「lightning-child」という名前のフォルダーにします。

style.cssの作成

子テーマには2種類のファイルが必要になります。

そのうちの1つが「style.css」です。

作成したファイルに以下の内容を記述してください。

  • Theme Name : 子テーマの名前
  • Template : 親テーマのフォルダー名

Lightningの場合は以下の記述になります。

functions.phpの作成

2つ目のファイル「functions.php」を作成します。

以下を記述します。

ファイルのアップロード

作成した2つのファイルをFFFTPを使って「/wp-content/themes/lightning-child」にアップロードします。

③対象ファイルを選択して「アップロード」をクリックします。

子テーマの有効化

WordPress管理画面に戻ると「Lightning Child」という子テーマが出来上がっているので有効化して設定完了です。

④管理画面で「外観」>「テーマ」をクリックします。
⑤テーマ画面で「Lightning Child」を有効化します。

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

設定したテーマはカスタマイズすることができます。

カスタマイズできることはテーマによって違ってきますが、ここでは「Lightning」を使って解説していきます。

色合い、レイアウト、トップページの画像などは、カスタマイズ画面を使って変更するのが、イメージが分かるのでおすすめになります。

①管理画面で「外観」>「カスタマイズ」をクリックします。

色合いの変更

色が与える印象は非常に大きいです。
サイトのイメージカラーを決めて、統一感のある色合いにしていきましょう。

Lightningでは、背景色、キーカラーを変更することができます。

①カスタマイズ画面で「色」をクリックします。

②背景色の色を選択します。

③カスタマイズ画面で「Lightning デザイン設定」をクリックします。

④キーカラーの色を選択します。

トップページ画像の変更

トップページの画像は最も目立つ位置にあり、サイトの顔と言ってもいいでしょう。

Lightningでは、最大5枚の画像をスライドショーにできたり、テキストやリンクボタンを貼り付けることができたりなど、他のテーマよりも機能が充実しています。

①カスタマイズ画面で「Lightning トップページスライドショー」をクリックし、スライドの設定および画像の変更を行います。

ロゴと背景画像の設定

ロゴを設定したり、背景画像を設定したり、更にサイトの見栄えを良くするために余力があれば追加していきましょう。

①カスタマイズ画面で「Lightning デザイン設定」をクリックします。

②ヘッダーロゴ画像の画像を選択します。

③カスタマイズ画面で「背景画像」をクリックします。

④背景画像の画像を選択します。

設定の反映

設定が終わったら最後に反映を忘れずに行いましょう。

①カスタマイズ画面で「公開」をクリックします。

Pocket

コメントを残す

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

CAPTCHA