左坊のメモ帳

WordPress など

*

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

      2017/10/31

xmlインポートで簡単導入

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

スポンサーリンク

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のインポート

  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/

  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 セクション名
services Our Services
call-to-action Download it for free!
clients Our Clients
testimonials What our clients say
employees Our Employees
latest-news Latest news
projects Our projects
facts Some facts about us
skills Our skills
blockquote A message from our manager

Moesia公式サイト

Moesiaドキュメント

MoesiaExtension

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

 - WordPress, Wordpressテーマ