Mobiki

動作環境

インストール方法

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

   

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

   

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

   

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

   

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

   

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

   

7. 7. メニュー「外観」→「エディター」をクリックします。メニューをクリックして、テーマのデザインを自由に行ってください

   

テーマエディターの使い方

テーマをカスタマイズするには、以下の手順に従ってください(フォントの選択・レイアウト設定・ロゴの設定・背景/色設定・メニュー設定)。

1. 1. 「外観」→「エディター」とクリックします

   

2. 2. 「デザイン」→「スタイル」をクリックします

   フォント・色・背景・ページのレイアウトが、スタイルタブで全て設定できます。ここで設定した内容は、テーマ全体に適用されます。

   

3. 3. 「デザイン」→「テンプレート」をクリックします

   ヘッダー・サイドバー・フッターのテンプレートを選択できます。インデックスページやシングルページのテンプレートも編集可能です。ここで選択したテンプレートは、サイト全体に適用されます。オリジナルのテンプレートを作成することも可能です。

   

4. 4. 「デザイン」→「パターン」をクリックします

   ヘッダー・フッター・サイドバーのパターンを選択できます。各パターンは、カスタマイズ可能なブロックとして提供され、必要に応じて編集できます。オリジナルのパターンを作成することも可能です。

   

ブロックテーマのエディター機能について

Mobikiはブロックテーマ(フルサイト編集テーマ)です。従来のテーマとは異なり、ヘッダーやフッターも含めてサイト全体をエディターで自由に編集できます。

カスタマイズ(子テーマ)

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

   「wp-content」>>「themes」の中に、Mobikiのあるテーマディレクトリと同じ階層で空のディレクトリを作成します。作成したフォルダの名前は「mobiki-child」とします。

2. 2. ファイルを作成

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

3. 3. style.cssに記載

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

   /**
    * Theme Name: Mobiki Child
    * Template: mobiki
    * Text Domain: mobiki-child
    */

4. 4. functions.phpに記載

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

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

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

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