(↑Pinterestでシェアお願いします!)

世界一使われているWordPressテーマ・Diviの使い方

執筆者 | 更新日 2020年03月07日 | Diviの使い方 | コメント0件

この記事で学べる内容

WordPressテーマ・Diviとは?

Diviは、Elegant Themesという海外のサイトで販売されているWordPressテーマです。

Diviのインストール数

世界で最も利用されているWordPressテーマで、こちらのサイトによると、2020年2月現在で、約250万サイトにインストールされています。僕は、DIviを2018年の終わりくらいからずっと使用しているのですが、今回はそんなDiviの使い方をまとめていきますので、ぜひ参考になさって下さい。

Diviのメリット

具体的な使い方に入る前に、Diviのメリットとデメリットをちょっとご紹介させていただきたいと思います。

メリット#01. ドラッグ&ドロップでページが作成できる

僕がなぜDiviと出会ったのかというと、ドラッグ&ドロップでページが作成できるテーマがないか探していたのがきっかけです。日本でも、綺麗なテーマはたくさんあって、実際にいくつかのテーマは所有していて、今でも実際にいくつかのサイトで使用しているのですが、一番不満なのが、自由にカスタマイズできないという点でした。CSSやHTMLのコードを使えば、カスタマイズが自由にできるとは思いますが、僕はプログラマーでもないし、コードもコピペして使うくらいしかできません。そんな悩みがあって、検索していて出会いました。まさに、僕の理想とするテーマでした。

メリット#02. 進化がすごい

2つ目のメリットは進化がすごいということです。Diviは頻繁にアップデートが行われるため、使いにくかった機能が改善されたり、便利な機能が追加されたりしています。

メリット#03. サポートが充実している

あとは、当たり前なことなのかもしれませんが、サポートも充実しています。サイトにチャットボットが実装されていて、この前、質問をしたら、10分もかからないくらいで返信してくれました。

Diviのデメリット

上記では、メリットをお伝えしましたが、デメリットもあります。次は、僕がこれまで使ってきて感じているデメリットをいくつかご紹介していきます。

デメリット#01. ページの表示スピードが遅い

これは、結構言われることなんですけど、Diviはページの表示スピードが遅いです。その一番大きな原因となっているのが、フォントです。英語で使用するにはあまり関係ないのですが、日本語で使用するとなると、とても遅くなってしまいます。でも、実はそのフォントの解決方法があるので、それは後ほどご紹介していきます。

あと、原因になっているのが、ページを構成するショートコードです。Diviのページビルダーを使って記事を作成すると、たくさんのショートコードが生成されるので、それが原因で表示スピードが遅くなると言われています。

デメリット#02. 他のページビルダーではできることができないことも

2つ目は、他のページビルダーではできることができないことがあるということです。僕は他にもElementorというプラグインタイプのページビルダーも使用しているのですが、そこで備わっている便利な機能がDiviでは実装されていなかったりすることがあります。コードを使えば対応はできますが、ちょっと手間がかかるので、その点もデメリットと感じています。

ただ、先ほどもお伝えしたように、Diviは頻繁にアップデートが行われています。他のライバルもチェックしているはずなので、ライバルが実装していて便利な機能はDiviにも実装されるんじゃないかなと思います。

Diviを契約する方法

Diviは、ElegantThemsで契約をすると使えるWordPressのテンプレートです。Diviというテンプレートが使えるようになるだけでなく、そのほかにもExtraというWordPressテーマやDiviビルダーというページビルダーのプラグイン、ポップアップフォームプラグインのBloom、SNSシェアプラグインのMonarchも使えるようになります。

ElegantThemesのホームページ

Diviのテーマを会員サイトからダウンロードする方法

Elegant Themeのメンバーエリアにログインする

契約が終わったら、会員サイトにログインしてDiviのテーマをダウンロードしてきましょう。契約をすると、ページにリダイレクト、もしくはメールでログインページのURLが送られてくるので、そちらからページに飛びましょう。ちなみに、こちらからでもログインできます。

Diviのテーマをダウンロードする

ログインできたら、「Members Area」に移動するので、こちらで紫の「Divi Theme」にある「DOWNLOAD THE DIVI THEME」ボタンをクリックしましょう。Diviテーマのファイルがダウンロードされます。

DiviのテーマをWordPressにインストールする方法

「外観」の「新規追加」ボタンをクリック

次に、Diviのテーマをインストールする方法をご紹介していきます。WordPressにログインして、「外観」の「テーマ」に移動します。そして、上の方に「新規追加」ボタンがあるので、クリック。

Diviテーマのアップロード

次に、「テーマのアップロード」ボタンをクリックして、「ファイルを選択」からZipファイルのDiviテーマをアップロードします。ファイルは、Zipファイルのまま、解凍せずにアップロードしましょう。それで、ちゃんとアップできたら、「今すぐインストール」して、有効化すれば、Divimが使えるようになります。

Diviのテーマをアクティベートする方法

Diviは、インストールしたら、それでも使えるようになりますが、アクティベートというものをしないと、アップデートできなくなります。なので、そのアクティベート方法をご紹介していきます。

Diviテーマをアクティベートする方法

まずは、「Divi」の「テーマオプション」にある「更新情報」に移動します。ここで「ユーザー名」と「APIキー」を入力しないといけません。「ユーザー名」は、ログインする際の名前を入力すればOKです。

Divi APIキー

「APIキー」はログインして確認する必要があります。ログインした後、タブを「MY ACCOUNT」に切り替え、「API KEYS」を選びます。そして、「Your API Keys」の項目の下にあるピンクの「GENERATE NEW API KEY」ボタンをクリックします。

DiviのAPIキー

すると、APIキーが生成されるので、クリックして、コピーしWordPressの方にペーストすれば完了です。

Diviのテーマオプションの使い方

全般の設定

Divi テーマオプション 全般

  • ロゴ:ロゴ画像を設定する場合は、こちらにWordPressにアップした画像のURLを入力します。
  • 固定ナビゲーションバー:サイトのヘッダーナビゲーションを固定化したい場合は、有効にします。
  • Divi ギャラリーを有効にする:WordPressのデフォルトギャラリーをDiviスタイルギャラリーに変更する場合はこれを有効にします。ギャラリーを追加した際に、ちょっとワイドになり、エフェクトも追加されます。
  • カラーピッカーの規定のパレット:デフォルトのカラーを設定することができます。16進数のブランドカラーがある場合は、こちらで設定しておくと、簡単に色をピックアップすることができるようになります。
  • 最初の記事画像を使う:通常、サムネイルは投稿の「アイキャッチ画像」で行いますが、ここを有効にすると、記事の最初に追加されている画像がサムネイルとして設定されます。
  • ブログ・スタイル・モード:
  • サイドバーのレイアウト
  • WooCommerceのショップページとカテゴリーページ・レイアウト
  • Google APIキー:今は有料になっていますが、Googleマップモジュールを使用する場合に、GoogleのAPIキーを入力する
  • Googleマップ スクリプトをエンキューする:
  • Googleフォントを使用する:DiviビルダーでGoogleフォントを使う場合は、有効化します。
  • Facebook アイコンを表示させる:有効にするとFacebookのアイコンがホームページに表示されるようになります。
  • Twitter アイコンを表示させる:有効にするとTwitterのアイコンがホームページに表示されるようになります。
  • Google+ アイコンを表示させる:有効にするとGoogle+のアイコンがホームページに表示されるようになります。
  • Instagramのアイコンを表示させる:有効にするとInstagramのアイコンがホームページに表示されるようになります。
  • RSS アイコンを表示させる:有効にするとRSSのアイコンがホームページに表示されるようになります。
  • Facebook のプロフィール URL:Facebookのアイコンに埋め込むURLを設定します。
  • Twitter のプロフィール:Twitterのアイコンに埋め込むURLを設定します。
  • Google+ のプロフィール:Google+のアイコンに埋め込むURLを設定します。
  • Instagramのプロフィール:Instagramのアイコンに埋め込むURLを設定します。
  • RSS フィードの URL:RSSノのアイコンに埋め込むURLを設定します。
  • WooCommerceアーカイブ・ページに表示される商品数:WooCommerceのアーカイブページに表示される商品数を設定します。
  • カテゴリーページに表示される記事の件数:カテゴリーページに表示される記事数を設定します。
  • アーカイブページに表示される記事の件数:アーカイブページに表示される記事数を設定します。
  • 検索ページに表示される記事の件数:ユーザーがサイト内で検索をした際に表示される記事数を設定します。
  • タグページに表示される記事の件数:タグページに表示される記事数を設定します。
  • 日付の表示法:記事などに表示される日付の表示方法を設定します。(「Y年Mj日」と設定しておくのがおすすめです。)
  • 引用が定義されている場合はそれを使う:
  • shortcodes の反応
  • Google Fonts のサブセット
  • 「トップへ戻る」ボタン:有効にすると、画面上にトップへ戻るボタンが表示されます。
  • スムーズスクロール:マウスホイールでスクロールする場合、あるいはアンカーリンクでスクロールする場合、ジャンルするように特定のセクションに移動するのではなく、スムーズに移動してくれるようになります。
  • 翻訳を無効にする
  • レスポンシブ画像を有効にする:有効にすると、記事に追加した画像をレスポンシブ対応にしてくれます。
  • JavaScriptファイルを縮小して結合する:JavaScriptファイルを縮小して結合することができます。表示スピードのアップに効果があります。
  • CSSファイルの縮小と結合:CSSファイルを縮小して結合することができます。これも表示スピードのアップに効果があります。
  • カスタム CSS:CSSコードを使用してテーマの外観を変更したい場合は、こちらで設定できます。

ナビゲーションの設定

ページ

まず「ページ」のタブについてですが、ナビゲーションに表示するページの設定を行います。

Divi テーマオプション ナビゲーション ページ

  • ナビゲーションバーからページを削除する:ナビゲーションバーに表示したいページにはチェック、表示したくないものにはバツをつけます。
  • ドロップダウン・メニューを表示:有効にするとメニューを階層で表示させることができます。
  • ホームリンクを表示:有効にすると、ナビゲーションにトップページのリンクを追加できます。
  • ページリンクの表示順:何を基準にナビゲーションを並び替えるのかを設定します。
  • ページリンクの表示順を上下で並べ替える:「ページリンクの表示順」で設定した順番を昇順にするか、降順にするか設定します。
  • 表示されるドロップダウン階層の数:ドロップダウンメニューの階層の数を設定します。

カテゴリー

「カテゴリー」では、設定したカテゴリーをナビゲーションに設定するのかどうか、表示する場合はどのような形式にするのかなどを設定していきます。

Divi テーマオプション ナビゲーション カテゴリー

  • ナビゲーションバーからカテゴリーを削除:作成したカテゴリーが表示されているので、ナビゲーションに表示したいものはチェックに、非表示にしたい場合はバツにしておきます。
  • ドロップダウン・メニューを表示:有効にすると、カテゴリーを階層で表示できます。
  • 空のカテゴリーを隠す:有効にしておくことで、作成したカテゴリーに記事がない場合は、非表示になります。
  • 表示されるドロップダウン階層の数:階層の上限を設定します。
  • カテゴリーリンクを Name/ID/Slug/Count/Term のグループで並べる:カテゴリーの表示順をドロップダウンから選択します。
  • カテゴリーリンクを下から上へ、あるいは上から下の順に並べる:カテゴリーの並び順を「asc-昇順」、「dsc-降順」から選択します。

一般設定

Divi テーマオプション ナビゲーション 一般設定

  • ドロップダウンメニューのトップ階層のリンクを外す:親カテゴリーを表示したいけど、リンクは追加したくない場合は、ここを有効にしておきます。
  • スクロールしてアンカーに移動する代替方法:ジャンプリンクがうまく機能しない場合に、Diviで用意されている代替方法を使用するかどうかを設定します。

ビルダーの設定

ポストタイプの投稿

Divi テーマオプション ビルダー ポストタイプの統合

  • 投稿タイプでDivi Builderを有効にする:Diviビルダーを使用する投稿のタイプを設定します。基本的には、全部有効にしておきます。

詳細設定

Divi テーマオプション ビルダー 詳細設定

  • 静的CSSファイルの生成:有効化すると、インラインCSSは生成されず、代わりに静的ファイルが適用されます。パフォーマンスの向上が期待できます。
  • インラインの出力スタイル:ビルダーの以前のバージョンでは、モジュールのデザイン設定用cssスタイルは、フッターの出力インラインでした。このオプションを有効化してその動作を復元します。
  • 製品ツアー:初めてDiviビルダーを使用する際に、使い方に関するアドバイスが画面上に表示されます。
  • 最新のDivi Builderエクスペリエンスを有効にする:アップデートされたDiviを無効にすることができます。最新のDiviビルダーが何らかの理由で機能しない場合は、無効にすることで、旧式のビルダーの機能が使用できるようになります。
  • クラシックエディターを有効にする:グーテンベルグではなく、旧式のエディタ(クラシックエディタ)を使いたい場合は有効にする

レイアウトの設定

シングル記事レイアウト

Divi テーマオプション レイアウト シングル記事レイアウト

  • Choose which items to display in the post info section:投稿記事に表示するメタ情報を選択します。
  • 記事へのコメントを表示させる:記事に対してコメントを表示させるかどうかの設定です。
  • 記事にサムネイル画像を表示:記事のトップにサムネイルを表示するかどうかの設定です。

テーマビルダーが有効になっていたり、Diviビルダーを使っていたりすると、コメントやサムネイルが表示されませんので、ご注意ください。ただし、テーマビルダーでサムネイルを表示する設定をしていたり、コメントモジュールを追加すれば、コメントを表示することは可能です。

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

Divi テーマオプション レイアウト シングルレイアウト

  • ページにサムネイル画像を表示:固定ページのトップにサムネイル画像を表示させるかどうかの設定です。
  • ページにコメントを表示させる:固定ページに対してコメントを表示させるかどうかの設定です。

「シングル記事レイアウト」と同じく、テーマビルダーが有効になっていたり、Diviビルダーを使っていたりすると、サムネイルが表示されませんので、ご注意ください。

一般設定

このセクションは、一般投稿や固定ページなど全体のページに当てはまる設定になります。

Divi テーマオプション レイアウト 一般設定

  • 記事情報セクション:記事に表示するメタ情報を選択します。
  • インデックスページにサムネイル画像を表示:Google等で記事がインデックスされた際にサムネイル画像を表示するかどうかの設定になります。

広告の設定

Divi テーマオプション 広告 1

  • シングル記事で 468×60 のバナーを有効にする:記事の直下に広告バナーを表示するかどうかの設定です。
  • 468×60 の広告バナー画像を追加:広告を追加する場合、ここに画像のURLを入力します。
  • 468×60 広告リンク先のURLを入力:広告バナーに埋め込むURLを入力します。
  • 468×60 Google Adsense コードを入力:広告としてGoogleアドセンスを表示したい場合は、こちらにアドセンスコードを入力します。

自作のバナー広告を表示する場合は、「468×60 の広告バナー画像を追加」と「468×60 広告リンク先のURLを入力」を設定し、Googleアドセンスを使用するのであれば、「468×60 Google Adsense コードを入力」の項目だけ設定すればOKです。

SEOの設定

ホームページSEO

Divi テーマオプション SEO ホームページSEO

  • カスタムタイトルを有効にする:ホームページのタイトルを固定したい場合(トップページが変わったとしても同じタイトルにしたい場合)は有効にして、「ホームページのカスタムタイトル(有効化されている場合)」にタイトルを記入します。
  • メタタグ記述を有効にする:ホームページのメタディスクリプションを固定したい場合(トップページが変わったとしても同じメタディスクリプションにしたい場合)は有効にして、「ホームページのメタ記述(有効化されている場合)」にタイトルを記入します。
  • メタキーワードを有効にする:ホームページのメタキーワードを固定したい場合(トップページが変わったとしても同じメタキーワードにしたい場合)は有効にして、「ホームページのメタ記述(有効化されている場合)」にタイトルを記入します。
  • 正規化 URL’s を有効にする:これは、カノニカルURLのことで、重複コンテンツを防ぐための項目です。example.com、 example.com/index.html、www.example.comといったドメインは、すべてサイトのトップページのURLになりますが、これらは重複ページと捉えられる場合があります。ここを有効化しておくと、正式に使用するURLを検索エンジンに指示することができます。
  • ホームページのカスタムタイトル(有効化されている場合):固定のホームページタイトルを入力します。
  • ホームページのメタ記述(有効化されている場合):固定のメタディスクリプションを入力します。
  • ホームページのメタキーワード(有効化されている場合):固定のメタキーワードを入力します。
  • カスタムタイトルが無効化されている場合、自動生成メソッドを選択してください:「カスタムタイトルを有効にする」という項目が「無効にする」になっている場合、タイトルをどのように表示するかを選択します。
  • ウェブサイトの名前と記事のタイトルを分ける記号を決める:サイト名と記事タイトルを分ける記号を設定します。

シングル記事ページレイアウトSEO

Divi テーマオプション SEO シングル記事ページSEO

  • カスタムタイトルを有効にする:記事で設定したタイトルではなく、カスタムフィールドを使って別のタイトルを表示したい場合は、有効にして、「タイトルに使用されるカスタム領域名」でカスタムフィールドを設定します。
  • カスタム記述を有効にする:記事で設定したメタディスクリプションではなく、カスタムフィールドを使って別のものを表示したい場合は、有効にして、「記述に使用されるカスタム領域名」でカスタムフィールドを設定します。
  • カスタムキーワードを有効にする:記事で設定したキーワードではなく、カスタムフィールドを使って別のものを表示したい場合は、有効にして、「キーワードに使用されるカスタム領域名」でカスタムフィールドを設定します。
  • 正規化 URL’s を有効にする:カノニカルURLの設定で、URLの設定によって、重複コンテンツと見なされる場合に、ここを有効化しておくことで重複コンテンツ扱いを防ぐことができます。
  • タイトルに使用されるカスタム領域名:これら以下は、基本的にデフォルトでOKです。それぞれの要素でどんなカスタムフィールドを使用するかの設定になります。
  • 記述に使用されるカスタム領域名:デフォルトでOKです。
  • キーワードに使用されるカスタム領域名:デフォルトでOKです。
  • カスタムタイトルが無効化されている場合、自動生成メソッドを選択してください:デフォルトでOKです。
  • ウェブサイトの名前と記事のタイトルを分ける記号を決める:サイト名と記事タイトルを分ける記号を設定します。

*「カスタム領域」というのは、変な訳になってしまっていますが、カスタムフィールドのことです。

インデックスページSEO

このタブは、カテゴリーページに関係してくるSEOの設定をしていきます。

Divi テーマオプション SEO インデックスページSEO

  • 正規化 URL’s を有効にする:カノニカルURLの設定で、URLの設定によって、重複コンテンツと見なされる場合に、ここを有効化しておくことで重複コンテンツ扱いを防ぐことができます。
  • メタ記述を有効にする:メタディスクリプションを有効にするかどうかの設定です。
  • タイトル生成法を選択する:タイトルの設定方法を選択します。
  • ウェブサイトの名前と記事のタイトルを分ける記号を決める:タイトルに複数の情報が記載される場合、それらを区切る記号を設定します。

統合の設定

Divi テーマオプション 統合

  • ヘッダーコードを有効にする:有効化すると、サイトのヘッダー部分にコードを反映させられるようになります。
  • < body >コードを有効にする:有効化すると、サイトのボディー部分にコードを反映させられるようになります。
  • シングルトップコードを有効にする:有効化すると、記事のトップにコードを反映させられるようになります。
  • シングルボトムコードを有効にする:有効化すると、記事の下部にコードを反映させられるようになります。
  • コードをブログの< head >に追加する:テーマの< head >部分にここに入力したコードを追加できます。
  • < body >にコードを追加する(Google Analytics などのトラッキングコードに便利):テーマの< body >部分にここに入力したコードを追加できます。GoogleアナリティクスやGoogleサーチコンソールなどのコードが入力可能です。
  • 記事のトップにコードを追加する:記事のトップ部分にここに入力したコードを追加できます。
  • 記事の末尾、コメントのすぐ前にコードを追加する:記事の下部(コメントの前)にここに入力したコードを追加できます。

更新情報の設定

Divi テーマオプション 更新情報

  • ユーザー名:Elegant Themeに登録しているユーザー名を入力します。
  • APIキー:Elegant ThemeのAPIキーを入力します。
  • Version Rollback:Diviのバージョンを以前のものに戻したい場合は、「ROLLBACK TO THE PREVIOUS VERSION」ボタンをクリックします。

これは、先ほどもご紹介したアクティベートの設定項目になります。

Diviのテーマビルダーの使い方

Diviのテーマビルダーは、Divi4.0から導入された機能で、デフォルトのヘッダーやフッターではなく、Diviのページビルダーを使用して、ドラッグ&ドロップでオリジナルのものを作成することができるようになりました。また、全てのページで同じヘッダーやフッターを表示するのではなく、カテゴリー毎に別のテンプレートを表示したりということもできます。

グローバルヘッダーの使い方

Divi グローバルヘッダー

グローバルヘッダーでは、オリジナルのヘッダーを作成することができます。上の画像が、自作したものになります。デフォルトのヘッダーとあまり変わらないかもしれませんが、3カラム、4カラムなどに変更したり、ロゴやメニュー以外の要素を追加することも可能です。

チェック!詳しいグローバルヘッダーの作り方は、『Diviでグローバルヘッダーを作成する方法』をご覧ください。

グローバルボディの使い方

グローバルボディは、記事コンテンツのテンプレートを作成することができます。一般的な投稿記事でもDiviのページビルダーを使ってページをデザインしたいことってあると思います。しかし、毎回ページビルダーを使って、記事を書くとなると、結構大変だと思います。そんな時におすすめなのが、このグローバルボディです。ここでテンプレートを作っておけば、WordPressの投稿で記事を作成すれば、そのテンプレートのデザインが反映されます。

グローバルフッターの使い方

Diviで作成したグローバルフッター 1

グローバルフッターは、オリジナルのフッターが作成できます。例えば、上の画像のようなものです。一般的には、WordPressのダッシュボードにある「外観」から「ウィジェット」に移動して、そこでテキストを追加したり、人気記事一覧を追加したりしますが、ドラッグ&ドロップで自由に設定可能になっています。

チェック!詳しいグローバルフッターの作り方は、『Diviでグローバルフッターを作成する方法』をご覧ください。

Diviのテーマカスタマイザーの使い方

一般設定

サイトアイデンティティ

Divi テーマカスタマイザー 一般設定 サイトアイデンティティ

  • サイトのタイトル:サイトのタイトルを設定します。
  • キャッチフレーズ:サイトのサブタイトルを設定します。
  • サイトアイコン:サイトのロゴ(ファビコン)を設定します。

WordPress 設定 一般設定

「サイトアイデンティティ」の設定は、WordPressダッシュボードの「設定」にある「一般」で、「サイトタイトル」と「キャッチフレーズ」が設定できます。ロゴ(ファビコン)の設定はできませんので、ご注意ください。

レイアウト設定

Divi テーマカスタマイザー 一般設定 レイアウト設定

  • 箱入りレイアウトを有効にする:記事全体にボックスシャドウをつけることができます。
  • ウェブサイトコンテンツ幅:
  • ウェブサイトコンテンツ間隔:各ウィジェットの間隔を調整します。
  • カスタムサイドバーの幅を使用します:チェックを入れると「サイドバー幅」が調節できるようになります。
  • サイドバー幅:サイドバーをつける場合、その幅を調整できます。
  • セクション高さ:各セクションの高さを調節します。
  • 行の高さ:各モジュールの縦の隙間を調節します。
  • テーマカラー:サイト全体でしようされる基本的なカラーの設定をします。

書式