レスポンシブ対応！WordPressのテーマ無料プラグイン「PURE」Demoページのようにカスタマイズする方法

１．Wordpressのテーマ無料プラグイン「PURE」の特徴

Demo→http://gt3demo.com/wp/pure/

カテゴリーはポートフォリオとなっています。

• 洗練された豊富なデザイン
• 5種類のヘッダーデザイン
• 8種類のブログレイアウト
• 豊富なショートコード
• レスポンシブ対応

例えば写真のサイトを作る際に「一覧表示」から「空」「花」「建物」と分けて表示することが出来ます。

大きく縦に表示する事も出来ます。

詳しくはDemoで確認してみて下さい。

２．ダウンロードのやり方

調べたらダウンロードページが二つありました。

それぞれ「メールアドレスを入力してダウンロードする方法」と「TwitterやFacebookでつぶやいてダウンロードする方法」がありましたので好きな方でダウンロードしてみて下さい。

メールアドレスを入力してダウンロード

Pure Free Portfolio WordPress Theme

Very concisely and appropriately named, Pure WordPress Theme effectively underlines our main idea to help you display the elegant web presentation on the cl...

gt3themes.com

TwitterやFacebookでつぶやいてダウンロード

Web Design Blog

Web Design Resources for designers. We include tutorials, plugins, and web development tools. Download free icons, and fonts for web and graphic designers.

www.webdesignerdepot.com

私はTwitterdeつぶやいてダウンロードしたのでそのやり方を紹介します。

まず、Downloadページに飛ぶとこのページになりますので「Download」をクリックします。

少し下にスクロールすると「This download link is locked!」このダウンロードリンクはロックされていますと出てくるのでTweetかShareボタンを押して鍵を解除しましょう。

TweetかShareしたら「Download Pure WordPress Theme」が出てくるのでそれをクリックするとダウンロードされます。

３．Wordpressに「PURE」テーマをインストールする手順

※ダウンロードされた「Pure_Main.zip」を直接Wordpressにインストールできないので注意！

「Pure_Main.zip」と言う名前でダウンロードされるのでこれをダブルクリックします。

「Pure_Main→Theme_v.1.3→Pure.zip」この「pure.zip」をWordpressにインストールします。

WordPressの管理画面で「外観→テーマ新規追加」

テーマのアップロード　＞　ファイルを選択　＞　pure.zipをドラック　＞　今すぐインストール　＞　有効化

これでインストール完了です。

４．「PURE」のカスタマイズのやり方

[Poertfolio]・・・緑色のアイコンをクリック＆編集するだけで、簡単に機能が実装できる
[Team]・・・制作チームの情報をアイコン付きで表示できる
[Gallery]・・・インストールしている画像全てをギャラリー形式で表示できる
[Testimonials]・・・ユーザー（お客様）の反応を紹介できる
[Partners]・・・パートナーの情報をリンクで表示できる

（引用：http://theme-box.com/pure/）

「PURE」を有効化しただけではDemoサイトのようなデザインにはなりません。

公式サイトは全て英語だしマニュアルみたいなものも出てこないし、一度投げ出してしまいましたがどうしてもこのデザインが気に入ってしまったので試行錯誤して何とかそれっぽくは実装できましたので共有したいと思います。

１．Poertfolioを新規作成

Poertfolio　＞　新規追加　＞ Categoryとアイキャッチ画像は必ず設定しましょう。本文は空白でもOK！

これを５つくらい量産します。

２．トップページを作成する

固定ページ　→　新規作成　→

１．タイトル：HOME

２．Portfolioボタンをクリックすると下に「Portfolio」ボックスが出てきます。

４．最初1/4となっているので→を何度かクリックして1/1まで広げましょう

５．編集をクリック　＞　お好みで設定。Categoriesは「All」にしましょう。＞　Done

６．HOMEにタイトルは載せないようTitle：Hideにしましょう。　＞　公開

これでトップページが出来ました。

３．トップページにHOMEが表示されるように設定する

今作成したHOMEがトップページに表示されるように設定します。

設定　＞　固定ページのフロントページ：HOMEを選択　＞　変更を保存

４．完成！

こんな感じでトップページに作成できました！

５．Galleryの作成

Gallery　＞　新規追加　＞　タイトル：Gallery、下部の画像をクリックすると上に画像が現れるのでGallery表示したい画像を選択　＞　公開

先程「HOME」に設定した「Portfolio」を固定ページで作成した時と同じように、「Gallery」も固定ページで作成します。

Images in a rowでギャラリー画像を横に何枚並べるか設定できます。

Done　＞　公開

メニューにGalleryを追加する

外観　→　メニュー　→　固定ページにGalleryが追加されているのでチェック　→　メニューに追加　→　メニューの位置：「Main menu」をチェック（※）　→　メニューを保存

※これによって上部にメニューが現れる。

ギャラリーが作成されました。

その他の設定

今回こちらのサイトを参考に作成しました。

詳しく説明が載っているので後はこちらを見ながら設定すると分かりやすいと思います！

http://theme-box.com/pure/

theme-box.com