ワードプレス Divi MONARCH インストールと設定

Divi を開発している Elegant Themes にはSNSとの連携をより容易にすることができるプラグイン MONARCH もあります。Divi を購入していると MONARCH も利用できます。今回はそのインストールと設定方法を図解します。

MONARCH をインストールするには、まず、Elegant Themes のサイトからインストールファイルをダウンロードします。

Elegant Themes の公式サイトを表示し、上部メニューの「 Account 」をクリックしてメンバーエリアにログインします。

公式サイト：https://www.elegantthemes.com/

ワードプレスダッシュボードの、

下記のように表示されるので、「ファイルを選択」をクリックします。

MONARCH の設定を行うには、

記事のシェアボタンの設置場所を設定できます。それぞれアイコンの位置に表示されます。クリックして設定すると緑色のチェックマークがつきます。再度クリックすると外れます。ちなみに POP UP  はページを表示しているとポップアップしてくるので正直うっとうしいです。

SIDEBAR状のアイコン表示だとパソコンだったら邪魔にもならないし追従するので良いと思います。

NETWORKS で実際に表示させるSNSを設定します。

表示させることができるSNSの一覧が表示されるので、表示させたいもののアイコンをクリックして選択し、最後に「Apply」をクリックします。

選択したSNSが下記のように表示されます。

• CHOSE ICON STYLE：アイコンのスタイルを選べます
• CHOSE ICON SHAPE：アイコンの形を選べます
• DISPLAY SETTINGS：
  Sidebar Orientation：サイドバーの配置を左右選べます
  Intro Animation：アニメーションを選べます
  Display Share Counts：シャア数を表示できます
  Display Total Shares：トータルシェア数を表示できます
  Display ‘All Networks’ Button：「すべて」のアイコンを表示させるかどうか選択できます
  Add Icon Spacing：アイコンとアイコンの間に隙間を入れます
  Hide On Mobile Devices：モバイルデバイスで消すかどうか選択できます
• COLOR SETTINGS：Use Custom Colors にチェックを入れることで色を選択できます
  Use Custom Colors
  Background Color
  Hover Background Color
  Icon Color
  Hover Icon Color
• POST TYPE SETTINGS：どこに表示させるかを選べます
  Home：ホームページ
  Post：投稿ページ
  Page：固定ページ
  Project：プロジェクトページ

ほとんどの設定項目が上述のSIDEBAR設定と同じなので、INLINE設定にだけ存在するものについて記述します。

• Choose Location：記事の上か下か両方か
• Icon Alignment：アイコンの水平配置位置
• Number of Columns：カラムの数
• Display Network Names：名称表示の有無
• Outer Text Color：外部の文字の色（トータル数等表示させた場合のみ）
• Remove Icon Spacing：アイコン間の隙間をなくせます

他の配置については今回は使わないので割愛します。設定は英語ですが簡単なのでわかると思います。

SNS フォローを表示させるための設定を行います。

SOCIAL FALLOW の NETWORK をクリックします。

フォローを表示できるSNSの一覧が表示されるので、表示させたいものにチェックを入れ「Apply」をクリックします。

それぞれのSNSアイコンの右側、下記の赤枠のところに、リンクさせたいアカウントのリンクアドレスを入力します。SNSの種類によっては、アカウント名の入力枠もあります。

画面の左あるいは右に配置できる、細長い棒状のアイコンによる表示です。

記事あるいは固定ページ内の上、下、あるいはその両方に配置できる、アイコンのリストです。

サイトの訪問者に、設定したタイミングで、SNS のパネルをポップアップ表示させます。

画面の隅に飛び込むようにSNSのパネルを表示します。

サイトのメディアをホバー（マウスオーバー）した際に、上に重なるようにアイコンを表示させます。