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

Movaone ドキュメント ✦

Movaoneについて

Movaoneは、スマートフォンなどのモバイル端末での表示を優先するように最適化されたWordPressテーマです。どの画面サイズでも最適な表示を実現するレスポンシブファーストなデザインが特徴です。

主な特徴

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

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

  • メガメニュー対応

  • 商用利用可能（GPL v3）

動作環境

  • WordPress 6.6+

  • PHP 7.4+

  • モダンブラウザ対応

インストール方法

  1. 1

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

    WordPressダッシュボード

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

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

カスタマイザーの使い方

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


色変更可能

ロゴ設定

背景画像

メニュー設定

1

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

2

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

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

3

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

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

4

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

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

5

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

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

6

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

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

7

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

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

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

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

1

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

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

2

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

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

うまくいかないときは

固定ページ一覧から一旦、「Top Page left content」をごみ箱に入れます。

ページを再読み込みすると、新規で「Top Page left content」が固定ページ一覧に再生成されます。

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

重要な注意事項

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

1

ディレクトリを作成

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

2

ファイルを作成

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

3

style.cssに記載

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

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

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

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

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

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

サポート・リソース