Movaone

動作環境

インストール方法

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

   

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

   

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

   

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

   

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

   

6. 6. 新しいテーマを有効化しましたと表示されます。「サイトを表示」をクリックしてWEBサイトの表示を確認してください

   

カスタマイザーの使い方

テーマをカスタマイズするには、以下の手順に従ってください(色変更・ロゴ設定・背景画像・メニュー設定)。

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

   

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

   ヘッダーロゴ・サイトタイトル・サイトアイコンが設定できます。設定したものが表示されるので、空欄(削除)にすると非表示になります。どちらかを空欄にすることでロゴだけ、タイトルだけの表示が可能です。

   

3. 3. 「Movaone Features」をクリックします

   ヘッダーの背景色・リンク色と、CTAボタンのテキスト・リンク先が設定できます。ヘッダー背景色は2色のグラデーションにもできます。CTAボタンは表示したいワードとリンク先を入力してください。内部リンクならidでセクションに設定した名称を、外部リンクならhttps://を含むURLを入力してください。

   

4. 4. 「ヘッダー画像」をクリックします

   ヘッダーに画像が設定できます。1500×75pxサイズの画像が適しています。背景色が設定されているときに背景画像を設定すると画像が優先されます。

   

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

   bodyに背景画像が設定できます。リピート有り無し、位置の調整ができます。

   

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

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

   

7. 7. 「ウィジェット」をクリックします

   サイドバーを使用する場合、これを設定します。サイドバーに表示したいブロックを選択してドラッグして作成します。「外観」→「ウィジェット」からも操作できます。

   

PC画面で左に表示されるエリアのカスタマイズ

左エリアは固定ページで作成されています。

1. 1. ダッシュボードのメニュー「固定ページ」をクリックします

   このテーマをインストールした時に固定ページも自動で作成されています。「Top Page left content」を編集すると左エリアの内容が変更されます。

   

2. 2. 「Top Page left content」をクリックして編集します

   編集画面がブロックエディターで開きます。一番上の「Top Page left content(please do not delete)」の部分は変更しないでください。編集可能なのはその下からです。左上の青い「+」ボタンを押すと色んなブロックが表示されますので、好きなコンテンツで仕上げてください。右上のアイコンを押すと編集中のページが確認できます。保存は右上端の青い「保存」ボタンを押してください。

   

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

1. 1. ディレクトリを作成

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

2. 2. ファイルを作成

   index.php、style.css、functions.php を作成します。空のファイルで構いません。

3. 3. style.cssに記載

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

   /**
    * Theme Name: Movaone Child
    * Template: movaone
    * Text Domain: movaone-child
    */

4. 4. functions.phpに記載

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

   <?php
   function movaone_child_enqueue_scripts() {
       $theme_parent_version = wp_get_theme()->parent()->get('Version');
       $theme_version = wp_get_theme()->get('Version');
   
       wp_enqueue_style('movaone-style',
           get_template_directory_uri() . '/style.css',
           array(), $theme_parent_version);
       wp_enqueue_style('movaone-child-style',
           get_stylesheet_uri(),
           array('movaone-original-style'), $theme_version);
   }
   add_action('wp_enqueue_scripts', 'movaone_child_enqueue_scripts');
   ?>

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

   変更を入れたいPHPテンプレートファイルを親の「movaone」ファイルからコピーして、「movaone-child」の中に貼り付けます。この子テーマの中で書き換えを行います。style.cssやfunctions.phpの内容の変更もこの子テーマのファイルに書いていきます。

FAQ