WordPressのシングルカラムテーマ『Moesia』の設定方法、使い方

本ページにはプロモーションが含まれています。
Wordpressテーマ

xmlインポートで簡単導入

5つのステップで、手軽にデモサイトのようなレイアウトにできます。
[adsense]

5つのステップ

  1. Moesiaインストール有効化
  2. 必須プラグインのインストール
  3. 設定用xmlインポート
  4. デモコンテンツxmlインポート
  5. フロントページ設定

Moesiaをインストール、有効化

公式テーマなので、Moesia検索してインストールできます。

必須プラグインのインストール

以下の2つは必須プラグインです。必ずインストールしてください。

  • Page Builder by SiteOrigin
  • Types – Custom Fields and Custom Post Types Management

推奨プラグイン

以下の2つは推奨プラグインです。

  • Regenerate Thumbnails
  • Post Type Order

「Masonry portfolio」

Moesiaのドキュメントには記載されていませんが、固定ページにあるショートコードを機能させるにはプラグインが必要です。

以下のサイトからダウンロードして、インストールします。

設定用xmlのインポート

※2019.9.22追記
Moesiaのドキュメントを見る限り、設定用xmlは記載がない(なくなっている)ようですので、「デモコンテンツxmlのインポート」のみでデモコンテンツインポートができるはずです。(すいません、実際の動作確認は行なっておりません。)
「Moesia」のQuick start guide

  1. 設定用xmlファイルをダウンロードします。
  2. https://athemes.com/download/settingsv10.xml
    ※2017.10.31追記
    上記xmlファイルのURLがpage not foundになっていました。以下のURLからダウンロードできそうです。
    https://athemes.com/download/moesia-settings/

  3. Toolset>エクスポート/インポートを開きます。
  4. Typesデータインポート欄で「ファイルを選択」してダウンロードしたxml(settingsv10.xml)を指定します。
  5. 「レビューとインポート」でインポート内容を確認したら、変更はせずにそのまま「インポート」します。

デモコンテンツxmlのインポート

  1. デモコンテンツxmlファイルをダウンロードします。
  2. https://athemes.com/download/moesia-demo.xml
    ※2017.10.31追記
    上記xmlファイルのURLがpage not foundになっていました。以下のURLからダウンロードできそうです。
    https://athemes.com/download/moesia-demo-content/
    ※2020.9.18追記
    以下のURLからダウンロードできそうです。
    https://athemes.com/download/moesia-demo-content/?wpdmdl=1080594

  3. ツール>インポートを開きます。
  4. WordPress欄の「インポーターの実行」をクリックします。
  5. ※「今すぐインストール」と表示されている場合はインストールします。「WordPress インポートツール」というプラグインがインストール、有効化されます。

  6. WordPressのインポート欄で「ファイルを選択」してダウンロードしたxml(moesia-demo.xml)を指定します。
  7. 「ファイルをアップロードしてインポート」します。
  8. 「1.インポートする投稿者:admin」欄で、既存ユーザーを指定します。
  9. 「2.インポートする投稿者:vlad」欄で、既存ユーザーを指定します。
  10. 「添付ファイルをダウンロードしてインポートする」にチェックを入れます。
  11. 「実行」します。

フロントページの設定

  1. 外観>カスタマイズで、フロントページの表示を「固定ページ」にし、フロントページを「Front Page」、投稿ページ「Blog」にします。
  2. 外観>メニューで、メニュー名「AllPages」のメニューの位置を「Primary Menu」にします。

これで、デモサイトのようなレイアウトになります。

その他の設定項目

固定ページ「Masonry portfolio」のショートコードがそのまま表示されてしまう

プラグイン「Masonry portfolio」が必要です。

以下のサイトからダウンロードして、インストールします。

ヘッダー画像を、トップページ以外では表示しない

外観>カスタマイズ>Welcome Area欄にある、

  • Check this box if you want to disable the header image and text on all pages except the front page.

にチェックを入れます。

メニューをサイト最上部に表示する

外観>カスタマイズ>Menu欄にある、

  • Check this box to show the nav bar at top (changes will be visible after you save and exit the Customizer).

にチェックを入れます。

画面スクロールした時に、メニューが付いてこないようにする

外観>カスタマイズ>Menu欄にある、

  • Stop the nav bar from being sticky?

にチェックを入れます。

メニュー部分の余白を減らす

外観>カスタマイズ>Menu欄にある、

  • Menu bar height
  • Menu bar height [sticky]

の数値を変更します。

Moesiaデモサイトのようにヘッダー画像上に、テキスト、リンクを付ける

外観>カスタマイズ>Welcome Area欄にある、

  • Welcome title(デモサイトの「MOESIA」部分)
  • Welcome message (not the site description)(「Welcome to our site…」部分)
  • The text for the call to action button(「DOWNLOAD THIS THEME」部分)
  • The link for the call to action button(ボタンのリンク先URL)
  • Welcome title color
  • Welcome message color
  • Button background
  • Button box shadow

をそれぞれ入力、指定します。 

フロントページの各セクションのカスタマイズ

固定ページ>Front Pageの編集画面で、ウィジェット形式で編集できます。

Services、Employees、Testimonials、Clients、Projectsに関しては、左カラムの各管理メニュから編集します。

フッター部分のcopyright(powered by)を消す

CSSで消します。無料版でもcopyrightを消して問題ないとのことです。

cssコード

.site-info.container{
display: none;
}

Pro版だと管理画面からカスタマイズ可能です。

メニューのアイコンを変更する

  1. 外観>メニューページで表示オプションを開き、CSSクラスにチェックを入れます。
  2. CSS class (オプション)にアイコンのコードを入れます。(空白にするとアイコンは表示されません)

アイコンコードは以下のサイトにあります。

投稿ページ本文の文字の色を変更する

外観>カスタマイズ>色欄にある、Textで指定できます。

メニューに、フロントページ内の移動リンク(セクションへのアンカーリンク)を付ける

外観>メニュー>カスタムリンクのURL欄に、各セクションに付与されているidの前に#を付けたものを入力します。

サンプル

idセクション名
servicesOur Services
call-to-actionDownload it for free!
clientsOur Clients
testimonialsWhat our clients say
employeesOur Employees
latest-newsLatest news
projectsOur projects
factsSome facts about us
skillsOur skills
blockquoteA message from our manager

Moesia公式サイト

Moesiaドキュメント

MoesiaExtension

無料のプラグインがいくつか提供されています。

コメント

  1. 迎淳志 より:

    はじめまして
    これからHPを制作したいと思い、どのように進めていこうかと考えておりましたところに、こちらのページにたどり着きました。
    とても親切な説明だと思い、チャレンジしてみることにしたのですが、

    設定用xmlのインポート
    https://athemes.com/download/settingsv10.xml

    現時点ではこのファイルがダウンロードできませんでした。
    どこかほかの場所から取得するか、代替えか、なにか良い方法はありませんでしょうか?

    突然の申し入れで恐縮ですが、ご指南いただけますと幸いです。

  2. Saboh より:

    迎淳志様

    コメントありがとうございます。
    確かに、ページがなくなっているようです。

    テーマファイルサイトで新しいダウンロードURL(らしきもの)を見つけましたので、「※追記」しておきましたので、そちらをご参考ください。

  3. GEORGE より:

    ここのぺーじのおかげで。MOESIAをデモデザインのまま設定することができました。ありがとうございます。実際に触ってみて変更できないことがあり質問します。

    →トップ画面の「MOESIA」表示位置を下げることは可能でしょうか?
     またエフェクトのスピードを変更することは可能でしょうか?

    →「OUR SERVICES」や「OUR CLIENTS」などのタイトルを
      変更することは可能でしょうか?

    以上、ご指南いただけますでしょうか?

  4. Saboh より:

    GEORGEさん

    コメントありがとうございます。

    ざっとしか調べてませんが、

    →トップ画面の「MOESIA」表示位置を下げることは可能でしょうか?
     またエフェクトのスピードを変更することは可能でしょうか?

    「MOESIA」表示位置はCSSで調整すれば変更できそうです。
    (デスクトップでの確認しかしていません。)

    div.welcome-title{
    margin:100px 0 0 0;
    }

    エフェクトの変更はできないようです。(もしかしたらProとかならできるかもしれませんが。)

    →「OUR SERVICES」や「OUR CLIENTS」などのタイトルを
      変更することは可能でしょうか?

    固定ページのフロントページ編集画面で、ウィジェット(例えばMoesia FP:Serves)の右端に表示される「編集」をクリックすると、Title欄があり、そこで編集できるようです。

  5. GEORGE より:

    無事解決しました。本当にありがとございました。

  6. marida より:

    はじめまして
    Wordpress初心者です。Moesiaのようなサイトを作りたいと思い、デモサイトを制作中です。
    必須プラグインの「Types – Custom Fields and Custom Post Types Management」を有効化するとサイトが真っ白になって、エラーになります。
    「Parse error: syntax error, unexpected T_FUNCTION in /home/サイト名/wp-content/plugins/types/vendor/toolset/types/embedded/admin.php on line 395」と表示されます。
    PHPのバージョンは、5.2.17、Wordpressのバージョンは4.9.6で4.9.5に戻しても同様です。
    FTPの方からフォルダ名を変更してサイトの表示を戻すことはできますが、必須プラグインが使えないと、Moesiaのようなイメージのサイトが作れないので困っています。解決策はありますでしょうか。よろしくお願いいたします。

    • Saboh より:

      maridaさん

      コメントありがとうございます。

      きちんと検証したわけではありませんが、phpのバージョンが原因だとすると、
      (1)php5.3以上にする
      (2)プラグインの古いバージョンをインストールしてみる
      で解消するかもしれません。

      (1)私の環境では、php5.2は使えないので、画面が真っ白になるという現象は確認できていませんが、php5.3.3以上であればサイトが表示されるのは確認できています。
      ただし、php自体のサポート切れの問題もあるので、php5系であれば、php5.6.xがおすすめです。できればphp7.0、php7.1をおススメします。

      (2)プラグインサイトに旧バージョンが公開されているので、不具合が起きないバージョンまでさかのぼってインストールしてみてはいかがでしょうか。
      以下のURLがダウンロードサイトです。
      https://ja.wordpress.org/plugins/types/advanced/

      • marida より:

        Sabohさま
        早速バージョン変更を試してみます。
        丁寧なご説明ありがとうございました。

  7. Dazz より:

    maridaさま

    初めまして。
    ワードプレス初心者です。
    このページ、ありがたく参考にさせていただいております。
    必須プラグインの「Types – Custom Fields and Custom Post Types Management」ですが、現在配布停止しており、代替えのプラグインを教えて頂きたく、書き込みさせて頂きました。
    お手数おかけしますが、よろしくお願い致します。

  8. Saboh より:

    Dazzさん

    コメントありがとうございます。

    Moesiaサイトを見てみたところ、「必須プラグイン」表記が変わっている(なくなっている)ようですので、プラグインなしでも利用できるのだと思います。

    もしTypesプラグインの機能が必要であれば、現在は有料になっているようです。

    https://toolset.com/

    ちなみ、動作確認等は全く行なっておりません。

  9. 肉好き より:

    コメント失礼します
    xmlのインポートを実行すると読み込み初め読み込みが終わっても画面が真っ白でリログすると
    「WordPress のインポート
    エラーが発生しました。
    ファイルが空のようです。中身のあるファイルをアップロードしてください。このエラーは php.ini ファイルでアップロードができない設定になっているか、php.ini 内で post_max_size が upload_max_filesize よりも小さく設定されているために発生している可能性もあります。」と出てきてしまいます…。
    どうすればよいでしょうか?
    ご協力をよろしくお願いいたします。

    • Saboh より:

      肉好きさん

      コメントありがとうございます。

      「php.ini 内で post_max_size が upload_max_filesize よりも小さく設定されているために発生している可能性もあります。」

      というエラーメッセージが出ているようですので、まずはこの値を変更してみてはいかがでしょか?

      レンタルサーバーをお使いでしたら、サーバーパネルのようなページで「php.iniの変更」のようなものがあるはずです。

  10. なかと より:

    初めまして。
    サイト作成にあたり、とても助かりました!

    相談なのですが、skillsの数値を小数点以下で表示したいと思っておりますが、どのPHPファイルを変更して良いのか分かりません。

    特定していただくことは可能でしょうか・・?
    よろしくお願いいたします。

    • Saboh より:

      なかとさん

      コメントありがとうございます。

      widgets/fp-skills.phpが該当ファイルのようです。

      この中にある

      ・intval
      ・absint

      の2つの処理を外せば小数点になります。

      ただ、色々と自己責任の上でお試しください|ω・`)チラッ

タイトルとURLをコピーしました