トップページをおしゃれに自作カスタマイズしたいなら、このプラグイン

どうも、スマコマのコマ太郎です。

今日はトップページをもっとおしゃれにカスタマイズしたい、そんなあなたにピッタリのプラグインをご紹介しようと思います。

ページをカスタマイズするプラグインで有名なものがいくつかあります。

特に日本では次のプラグインが良く使われている印象です。

3番目は、日本語に対応しているので、英語が苦手という人はいいかもしれません。でも、個人的におすすめなのが 1番目の Page Builder by SiteOrigin です。

理由は、無料版でも十分使えるからです。他の２つは無料版だと結構、面倒で静的な設定に限定されている感じでした。（HTMLタグや文字を手打ちする）

Page Builder by SiteOrigin で出来ること

プラグイン「Page Builder by SiteOrigin」を使うことで、ページを視覚的に作成できるようになります。

ドラッグ＆ドロップで配置できる

必要なパーツをドラッグ＆ドロップして、配置できて、とっても便利。しかもカテゴリーを指定して記事の一覧を表示する機能が無料版で使える！

トップページの作成例

これが欲しかったんです(笑)

ちなみに、これは、「SiteOrigin Post Carousel」というウィジェットで実現しています。使い方は別の記事で説明しますね。

Page Builder by SiteOrigin をインストールしてみよう

[プラグイン]-[新規追加] をクリックし、検索窓に「Page Builder by SiteOrigin」と入力してください。（コピー＆ペーストしてください）

プラグインを追加する

[今すぐインストール] をクリックし、[有効化] をクリックします。

さらに、もう１つセットでインストールするプラグインがあります。

[プラグイン]-[新規追加] をクリックし、検索窓に「SiteOrigin Widgets Bundle」と入力してください。（コピー＆ペーストしてください）

[今すぐインストール] をクリックし、[有効化] をクリックします。

Page Builder by SiteOrigin の初期設定

次に初期設定を行います。デフォルトのままでもOKですが、ぼくが変更した部分を説明しておきます。

まず、[設定]-[ページビルダー] をクリックします。

ページビルダーの設定画面(一般)

[一般]タブにある [投稿タイプ] を [固定ページ] のみにしました。ぼくはトップページ（固定ページ）のみに使用するので、[投稿] を外しました。[投稿] にチェックを入れておけば、[投稿]でも利用できますが使わないなら外しておきましょう。

※画面に [CTA] という項目がありますが、これはこのサイトのテンプレートの独自機能です。通常は表示されません。

設定を変更したら、[設定を保持] をクリックします。

ページビルダーの設定画面(ウィジェット)

次に、[ウィジェット]タブに移動します。[ウィジェットタイトルの HTML] でウィジェットのタイトルタグを変更できます。

テンプレートによって、<h2> または <h3> と使われているタグが違うので、このように変更できるのは有り難いです。ちなみにデフォルトは、<h3> です。

設定を変更したら、[設定を保持] をクリックします。

ページビルダーの設定画面(レイアウト)

次は、[レイアウト]タブです。ここでタブレットとモバイルの幅を変更できます。これは使っているテンプレートに合わせるといいです。このサイトのテンプレートは、モバイル幅が 640px だったので、モバイル幅を 640px に変更しました。

設定を変更したら、[設定を保持] をクリックします。

[コンテンツ]タブは、そのままでOKです。

以上です。

何か分かりにくい点があれば、コメント欄からご質問ください。

続きは、こちら↓↓