369Theme
For WordPress Theme
テーマ プラグイン 導入ガイド ブログ お問い合わせ

Easychic ドキュメント ✦

Easychicについて

Easychicは、テーマカスタマイザーで詳細な設定が可能なWordPressテーマです。
レスポンシブデザインを採用し、モバイルファーストで設計されています。

主な特徴

  • レスポンシブファーストデザイン

  • 高度なカスタマイズ機能

  • 多機能メニュー

  • 商用利用可能（GPL v3）

動作環境

  • WordPress 6.6+

  • PHP 8.1+

  • モダンブラウザ対応

インストール方法

  1. 1

    WordPressダッシュボードにログインします

    WordPressダッシュボード

  2. 2

    左メニュー「外観」→「テーマ」を選択し、「新しいテーマを追加」ボタンをクリックします

  3. 3

    右上の「テーマを検索」フォームに、Easychicと入力してキーボードをEnterします

  4. 4

    表示された画像の「インストール」をクリックします。そのままお待ちください

  5. 5

    インストール済みと表示されるので「有効化」をクリックしてください

  6. 6

    新しいテーマを有効化しましたと表示されます

    「サイトを表示」をクリックしてWEBサイトの表示を確認してください。

  7. 7

    メニュー「外観」の上に「Easychic」ができます。

    「Easychic」をクリックして、テーマの設定を行ってください。

カスタマイザーの使い方

テーマをカスタマイズするには、以下の手順に従ってください。


フォントの選択

デザインスタイル

ロゴの設定

背景画像

メニュー設定

サイドバー設定

1

「外観」→「カスタマイズ」とクリックします

2

「Easychic設定」→「Easychicレイアウト設定」をクリックします。

ページのレイアウトを設定できます。
1カラムでサイドバーなし、1カラムでサイドバーがメインの下、2カラムでサイドバーが右の3種から選べます。

3

「Easychic設定」→「Easychicフォント設定」をクリックします。

Noto Sans JPとNoto Serif JPの2種から選択できます。

4

「Easychic設定」→「サイトスタイルの選択」をクリックします。

ヘッダー・サイドバー・フッターの配色パターンを4種から選択できます。
スタイル画像をクリックするとプレビューされます。

5

「サイト基本情報」をクリックします。

ヘッダーロゴ・サイトアイコン・ヘッダータイトルを設定できます。

6

「色」をクリックします。

メインコンテンツの背景色を設定できます。

7

「背景画像」をクリックします。

メインコンテンツの背景画像を設定できます。
リピート有り無しや位置の調整ができます。

8

「メニュー」をクリックします。

ヘッダーに1つ・フッターに3つ、メニューが使用できます。
「メニューを新規作成」をクリックして、ヘッダーかフッターの位置を選び、表示したい項目を作成してください。
「外観」→「メニュー」からも操作できます。

9

「外観」→「ウィジェット」をクリックします。

サイドバーを使用する場合、これを設定します。
サイドバーに表示したいブロックを左上の青い＋ボタンを選択して表示し、ドラッグして作成します。

各テンプレートのカスタマイズ

重要な注意事項

PHPとWordPressの知識が必要です。通常、テーマのアップデートがあると、テーマファイルの中身は上書きされます。ご自身で、テーマに直接変更を加えられていると、それがアップデートで消えてしまいます。テーマファイルをカスタマイズして維持する場合は子テーマで行うのが一般的です。

1

ディレクトリを作成

「Easychic」のあるテーマディレクトリに空のディレクトリを作成します。
作成場所は「wp-content」>>「themes」です。
作成したフォルダの名前は「easychic-child」とします。

2

ファイルを作成

index.phpとstyle.cssとfunctions.phpを作成します。
空のファイルで構わないので、新規作成でindex.php、style.css、functions.phpをそれぞれ作成します。

3

style.cssに記載

「easychic-child」のstyle.cssの先頭に下記のコードを記入します。
これでこのテーマが「Easychic」の子テーマだと認識されます。 

/**
                        * Theme Name: Easychic Child
                        * Template: easychic
                        * Text Domain: easychic-child
                        */

4

functions.phpに記載

「easychic-child」のfunctions.phpの先頭に下記のコードを記入します。 

<?php
                        function easychic_child_enqueue_scripts() {
                            $theme_parent_version = wp_get_theme()->parent()->get('Version');
                            $theme_version = wp_get_theme()->get('Version');

                            wp_enqueue_style('easychic-style',
                                get_template_directory_uri() . '/style.css',
                                array(), $theme_parent_version);
                            wp_enqueue_style('easychic-child-style',
                                get_stylesheet_uri(),
                                array('easychic-original-style'), $theme_version);
                        }
                        add_action('wp_enqueue_scripts', 'easychic_child_enqueue_scripts');
                        ?>

5

テンプレートファイルをコピー

変更したいテンプレートファイルを親からコピペする。
変更を入れたいPHPテンプレートファイルを親の「easychic」ファイルからコピーして、「easychic-child」の中に貼り付けます。
この子テーマの中で書き換えを行います。

style.cssやfunctions.phpの内容の変更もこの子テーマのファイルに書いていきます。

サポート・リソース