Wordpressの無料テーマ「Alternative」でデモサイトを作った

WordPressのおすすめ無料テーマ巡りその3「Alternative」。公式サイトで配布されているデモサイトをインポートするだけで、デザインを作り込む必要がなく簡単に綺麗なデザインが作れるのがこのテーマのいいところです。

WordPressの無料テーマを選ぶとき、一覧に表示されているのはデモサイトのイメージですが、実際にライブプレビューで見てみたら全然仕上がりイメージと違うなんてことがよくあると思います。テキストや写真を入れて空白部分を埋めてみても思ったようなデザインにならないことも多い。

その点、このAlternativeはデモをそのままインポートできるので、こちらでテキストや写真部分を変えるだけで表示が崩れることなくプレビュー通りのイメージに仕上がります。

私もデモサイトを作ってみましたが、細かい設定も特になく簡単にできました！

デモサイトを見る

デモサイトのトップページでは、グリッドレイアウトが実装できる無料のプラグイン「Robo Gallery」を使用して写真をギャラリー風に表示させています。

Alternative & デモサイトのインストール方法
WordPressの無料テーマ関連記事

Alternative & デモサイトのインストール方法

まず初めに、外観 > テーマ > 新規追加から「Alternative」を検索し、インストールします。完了すれば有効化しておきます。今回は公式で配布されているデモサイトを使ってデザインを簡単に差し替えしていく方法を使うので、インストールしたテーマは一旦このまま置いておきます。

Alternativeの公式サイトからデモサイトをインポートする

デモサイトのインストールは作成者である「Theme Freesia」（公式サイト）から行います。

公式サイトのトップページメニューから「THEMES」を選択すると、たくさんのテーマが表示されているので、この中から「Alternative」を探します。Alternativeの上にカーソルをに持っていくと「VIEW DETAILS」と「VIES DEMO」というボタンが出現しますので、「VIEW DETAILS」を選択します。

次に、右下に「Alternative Free Child Theme」という枠に囲まれた部分があるので、その中の「Download One Click Demo Import and install it as a plugin」というインポートリンクをクリックします。これでデモサイトのインポートが完了。

プラグイン設定で「デモサイト」をインポートする

インポートしたデモサイトをプラグインとしてアップロードします。

まず、Wordpressのダッシュボードに戻り、プラグインの新規追加で「プラグインのアップロード」を選択。ここで先ほどダウンロードしたデモサイトのデータをアップロードし、有効化します。

すると外観の中に「Import Demo Data」という項目が追加されていますので、そこの一番下にある「Import Demo Data」ボタンをクリックしてインポートを完了させます。

これでデモサイト通りのレイアウトになっているかと思います。あとは自分の持っている画像やテキストに置き換えていけば簡単にデモ通りのデザインが完成します。

グリッドレイアウトのプラグイン「Robo Gallery」でギャラリーを作る

Robo Galleryというグリッドプラグインを使えば、私の作ったデモサイトのトップページのような画像ギャラリーが作れます。

プラグインの追加画面で「Robo Gallery」というプラグインを検索し、インストールします。有効化にして設定画面に入ると、グリッドレイアウトのポートフォリオギャラリーが作れます。Robo Galleryの細かい設定の仕方はこちらのサイトで詳しく解説してくれていますので、これを見ながら作っていけば簡単です。

設定が終われば更新（保存）し、ショートコードをコピーします。そしてグリッドレイアウトを表示させたいページの一番上にショートコードを貼り付ければ完成です。これでテストサイトのようなグリッドレイアウトのポートフォリオが完成します。