CustomifyをテーマカスタマイザーとCSSでカスタマイズ

Customifyの概要

Customifyをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。

Customify は、SEO、速度、および使いやすさを念頭に置いて構築され、高速、軽量、応答性、および非常に柔軟なテーマです。 WYSIWYGヘッダー＆フッタービルダーで想像力を解き放ちます。Elementor、Beaver Builder、SiteOrigin、Thrive Architect、Divi、Visual Composerなどのお気に入りのページビルダーのいずれかで機能します。ショップ、ビジネスエージェンシーなどのあらゆるタイプのWebサイトが構築可能です。

Customifyをインストールするにはダッシュボードから外観　→　テーマ　→　新規追加　→　Customifyで検索しインストールを開始します。

プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート（PHP）ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

※最新の情報を公式ページで確認ください

WordPressテーマのカスタマイズ

WordPressテーマのカスタマイズ方法はいくつかあり、目的や技術レベルによって最適な方法が異なります。

一般的なカスタマイズ方法:

• WordPress管理画面のカスタマイザー:
  • 「外観」>「カスタマイズ」からアクセスできます。
  • サイトのタイトル、ロゴ、色、フォント、背景画像、メニュー、ウィジェットなど、テーマが対応している範囲で視覚的にカスタマイズできます。
  • メリット: コーディングの知識がなくても比較的簡単に操作できます。
  • デメリット: カスタマイズできる範囲はテーマによって異なります。
• テーマのオプション設定:
  • 多くのテーマには、独自のオプション設定画面が用意されています。
  • 「外観」メニューの下や、個別のメニュー項目として表示されることが多いです。
  • レイアウト、投稿・固定ページの表示設定、広告設定など、テーマ固有の詳細な設定が可能です。
  • メリット: コーディングなしで高度なカスタマイズができる場合があります。
  • デメリット: オプションの項目や内容はテーマによって大きく異なります。
• CSSの編集:
  • 「外観」>「カスタマイズ」>「追加CSS」からCSS（カスケーディングスタイルシート）を記述することで、デザインを細かく調整できます。
  • メリット: デザインに関する幅広いカスタマイズが可能です。
  • デメリット: CSSの知識が必要です。
• テーマファイルの編集:
  • FTPソフトなどを利用して、テーマのPHPファイルやCSSファイルを直接編集する方法です。
  • メリット: サイトの構造や機能を根本的に変更できます。
  • デメリット: PHP、HTML、CSSなどの専門知識が必要です。誤った編集はサイトの表示を壊す可能性があります。初心者には推奨されません。
• 子テーマの利用:
  • 親テーマを直接編集するのではなく、子テーマを作成してカスタマイズする方法です。
  • 親テーマがアップデートされても、子テーマで行ったカスタマイズは上書きされずに残ります。
  • メリット: 親テーマのアップデートに影響を受けずにカスタマイズできます。
  • デメリット: ある程度の知識が必要です。

テーマカスタマイザー

Customifyのテーマカスタマイザーは多岐にわたってカスタマイズすることができるようになっているので、ショップ、ビジネスエージェンシーなどのあらゆるタイプのWebサイトを構築できます。企業、ポートフォリオ、教育、大学ポータル、コンサルティング、教会、レストラン、医療などにも向いています。また、Customifyは、WooCommerce、OrbitFox、Yoast、BuddyPress、bbPressなどの主要なプラグインと互換性があります。

テーマカスタマイザーは、テーマによって内容は異なっていますが、基本的な項目、メニューや、ウィジェット、フォントや色、レイアウトなどを変更することができます。テーマによってはスライダーや動画に関する設定ができるものもあります。スタイルシートは追加CSSに必要なものだけ追加することができます。（全てのページに出力されるのであまり使わないCSSは追加しない方がページを軽くすることができる）

• ヘッダー
  ロゴとサイトアイデンティティ
  ヘッダー上
  ヘッダーメイン
  ヘッダー下
  メニューサイドバー
  メニューアイコン
  検索アイコン
  検索ボックス
  メインメニュー
  ボタン
  ソーシャルアイコン
  HTML1
  テンプレート
• 配置
  全般
  サイドバー
  ページヘッダー
• ブログ
  ブログ投稿
  １つのブログ投稿
  検索結果
• 設定
  Global Colors
  背景
• タイポグラフィ
  基本設定
  サイトタイトルとキャッチフレーズ
  コンテンツ
• フッター
  テンプレート
  フッターサイドバー1
  フッターサイドバー2
  フッターサイドバー3
  フッターサイドバー4
  フッターサイドバー5
  フッターサイドバー6
  フッターメイン
  フッター下
  著作権表示
  ソーシャルアイコン

テーマカスタマイザーは、テーマによって内容は異なっていますが、基本的な項目、メニューや、ウィジェット、フォントや色、レイアウトなどを変更することができます。テーマによってはスライダーや動画に関する設定ができるものもあります。スタイルシートは追加CSSに必要なものだけ追加することができます。（全てのページに出力されるのであまり使わないCSSは追加しない方がページを軽くすることができる）

css（スタイルシート）でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss（スタイルシート）を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css（スタイルシート）を追加するには、ダッシュボードの　外観　→　カスタマイズ　→　追加css　と進みコードを追加します。スタイルシートを適用させるには編集ブロックに　高度な設定で　「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル（PHP）でカスタマイズ

テンプレートファイル（テーマファイル）のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

• スタイル（style.css）
• テーマの関数
• 404テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

子テーマを作成する

テンプレートファイルを直接編集してサイトを運用するなら子テーマを作成しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

「子テーマ」は、WordPressでウェブサイトやブログのデザイン・レイアウトを構築する際に、「親テーマ」と連動して機能するもうひとつのテーマです。 WordPressのデザインテンプレートは、「テーマ」を有効化させることで構築されます。

WordPressのカスタマイズ手順

WordPressをカスタマイズするには下記の手順で行うとよいでしょう。

1. WEBサイトの構成を考える　（※注１）
2. 不要な機能を削除する
3. 必要な拡張機能（プラグイン）を追加する
4. グローバルナビゲーションやサイドメニューを作る
5. TOPページを作る
6. 企業サイトなどは、会社案内や事業内容などを作る
7. お知らせや、ブログ（製品やサービスをカテゴリーに構成する）を設置する

※　注１）固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。