Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。

Diviの使い方9 テーマのオプションの設定方法

1.Divi のテーマのオプションの場所

テーマのオプションを設定するには、ワードプレスダッシュボードの、

「Divi」>「テーマのオプション」をクリックします。

下記のパネルが表示されるので、それぞれGeneral、Navigation、ビルダー、Layout、Ads、SEO、Integration、Updatesをタブで切り替えて選択し表示させることができます。

行った変更は「変更を保存」をクリックして確定しましす。

2.General (一般)の設定

一般タブでは下記の様々なオプションを設定できます。

  • ロゴ(サイトのロゴ画像)
  • 固定ナビゲーションバーの有無
  • Divi ギャラリーに変更する
  • Divi Builder のカラーパレットの変更
  • 注目画像を最初の記事画像に設定
  • ブログスタイルモードを有効にすると基本のTopページに記事の全文を表示するようになる
  • Sidebar Layout:サイドバーの左右選択
  • WooCommerce のショップページとカテゴリーページ・レイアウトを選択
  • Google APIキーの入力窓
  • Googleマップスクリプトを利用する
  • Use Google Fonts:グーグルフォントの利用
  • Facebook アイコンを表示
  • Twitter アイコンを表示
  • Google+ アイコンを表示
  • Instagram アイコンを表示
  • RSS アイコンを表示
  • Facebook プロフィールの入力窓
  • Twitter プロフィールの入力窓
  • Google+ プロフィールの入力窓
  • Instagram プロフィールの入力窓
  • RSS フィードの入力窓
  • WooCommerceアーカイブ・ページに表示される商品数
  • カテゴリーページに表示される記事の件数
  • アーカイブページに表示される記事の件数
  • 検索ページに表示される記事の件数
  • タグページに表示される記事の件数
  • 日付の表示法
  • 引用が定義されている場合にはそれを使う
  • shortcodes の反応
  • Google Fonts のサブセット
  • 「トップへ戻る」ボタン
  • スムーズスクロール
  • 翻訳を無効にする
  • Minify And Combine Javascript Files
  • Minify And Combine CSS Files
  • カスタム CSS

3.Navigation の設定

Navigation のタブではメニューの表示を設定できます。

1)ページ

ページのナビゲーションを設定します。

  • ナビゲーションバーからページを削除する
  • ドロップダウン・メニューを表示
  • ホームリンクを表示
  • ページリンクの表示順
  • ページリンクの表示順を上下で並べ替える
  • 表示されるドロップダウン階層の数

2)カテゴリー

カテゴリーのナビゲーションを設定します。

  • ナビゲーションバーからカテゴリーを削除
  • ドロップダウン・メニューを表示
  • 空のカテゴリーを隠す
  • 表示されるドロップダウン階層の数
  • カテゴリーリンクを Name/ID/Slug/Count/Term のグループで並べる
  • カテゴリーリンクを下から上へ、あるいは上から下の順に並べる

3)一般設定

ナビゲーションの一般設定を行います。

  • ドロップダウンメニューのトップ階層のリンクを外す
  • スクロールしてアンカーに移動する代替方法

4.ビルダーの設定

Divi Builder の利用条件を設定できます。

1)Post Type Integration

Post Type Integration では、Divi Builder を利用する投稿のタイプを設定できます。

  • 投稿
  • 固定ページ
  • 案件

2)詳細設定

  • 静的CSSファイルの生成:静的CSSを作成する
  • インラインの出力スタイル:CSSの出力場所の変更
  • 製品ツアー:チュートリアルの利用
  • Enable The Latest Divi Builder Experience:旧 Divi ビルダーの利用
  • Enable Classic Editor:ブロックエディタのかわりに古いエディターを使う

5.Layout

投稿や個別ページ、インデックスページのサムネイル表示の有無やコメント表示の有無メタ情報の有無などを設定できます。

1)シングル記事レイアウト

投稿ページのシングル表示の際の設定になります。

  • 記事情報セクションでどのアイテムを表示させるか選択
  • 記事へのコメントを表示
  • 記事にサムネイル画像を表示

2)シングルページレイアウト

固定ページのシングル表示の際の設定になります。

  • ページにサムネイル画像を表示
  • ページにコメントを表示させる

3)一般設定

インデックスページでの表示を設定できます。

  • 記事情報セクション
  • インデックスページにサムネイル画像を表示

6.Ads

広告の配信を行うのに、記事の 468×60 のバナーを有効化できます。また、コードもここに登録しておけます。

  • シングル記事で 468×60 のバナーを有効にする
  • 468×60 の広告バナー画像のURLを入力
  • 468×60 広告のリンク先のURLを入力
  • 468×60 Google Adsense コードを入力

7.SEO

カスタムのタイトルやメタタグキーワードなどを設定できます。また、canonical 属性で URL を正規化するのもここで設定できます。

1)ホームページ SEO

  • カスタムタイトルを有効にする
  • メタタグ記述を有効にする
  • メタキーワードを有効にする
  • 正規化 URL’s を有効にする
  • ホームページのカスタムタイトル (有効化されている場合)
  • ホームページのメタ記述 (有効化されている場合)
  • ホームページのメタキーワード (有効化されている場合)
  • カスタムタイトルが無効化されている場合、自動生成メソッドを選択してください
  • ウェブサイトの名前と記事のタイトルを分ける記号を決める

2)シングル記事ページ SEO

  • カスタムタイトルを有効にする
  • カスタム記述を有効にする
  • カスタムキーワードを有効にする
  • 正規化 URL’s を有効にする
  • タイトルに使用されるカスタム領域名
  • 記述に使用されるカスタム領域名
  • キーワードに使用されるカスタム領域名
  • カスタムタイトルが無効化されている場合、自動生成メソッドを選択してください
  • ウェブサイトの名前と記事のタイトルを分ける記号を決める

3)インデックスページ SEO

  • 正規化 URL’s を有効にする
  • メタ記述を有効にする
  • タイトル生成法を選択する
  • ウェブサイトの名前と記事のタイトルを分ける記号を決める

8.Integration

Google Analytics のコード等、各種コードはここを利用して登録することができます。

  • ヘッダーコードを有効にする
  • < body > コードを有効にする
  • シングルトップコードを有効にする
  • シングルボトムコードを有効にする
  • コードをブログの < head > に追加する
  • < body > にコードを追加する (Google Analytics などのトラッキングコードに便利)
  • 記事のトップにコードを追加する
  • 記事の末尾、コメントのすぐ前にコードを追加する

9.Updates

Divi のユーザー名と API キーを登録しておくことで、レイアウトのダウンロードやアップデートできるようになります。また、バージョンアップした際に不具合があった場合に、アップ前のバージョンにロールバックする機能があります。

  • ユーザー名

  • APIキー

  • Version Rollback:バージョンロールバック

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

divi-lesson5-2-movie

ワードプレス Diviの動画利用方法 Diviレッスン5-2

今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi...
divi-tips-asy-table-of-contents-logo

Divi サイトに目次機能を追加 Easy Table of Contents の設定

Divi で作成している Web サイトに目次機能を追加するのに、便利なプラグインとして「 Easy Table of Contents...

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi Builder...

Diviの使い方10 モジュールの利用1 画像 と 広告

今回は Divi の各種モジュールのうちから、画像モジュールと広告モジュールについて図解したいと思います。画像モジュールと広告モジュール Diviの使い方10-1...

Diviの使い方10-5 お問い合わせフォームモジュールの利用方法

今回は Divi の各種モジュールのうちから、お問い合わせフォームモジュール(Contact Form)について図解したいと思います。 Diviの使い方10-5...
divi-lesson8-1-logo

Divi レッスン8 テーマのカスタマイズ1 子テーマを作成する方法

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi Childe...

Pin It on Pinterest