WPZOOMポートフォリオプラグインを使う

InspiroテーマでWPZOOM Portfolio pluginを使ってポートフォリオページを作ってみるテストー!

プラグインのインストールと有効化

管理画面の「プラグイン」でWPZOOM Portfolio pluginのインストールと有効化をしておきます。(超はしょり)

素材の用意

サムネイル(キャッチコピー画像)用の画像を用意します。いくつか並べた状態で確認したいので、6種類ほど用意します。あえてサイズも統一しないで用意しましたよ。

失敗したやつ削除

「記事の削除」をしてみましょう。Portfolioで前回ちゃんと表示されなかった記事を削除します。記事にカーソルをのせて、「ゴミ箱へ移動」でさっぱりお別れします。

アイキャッチ画像を登録

ポートフォリオ用投稿(Portfolio Item)のアイキャッチ画像(サムネイル)を登録していきます。Add Newをクリックします。

編集画面になったら、右のパネルからアイキャッチ画像にする画像を登録します。記事のタイトルもつけます。もしも編集画面で右パネルが表示されていない場合は、右上の設定アイコンをクリックしてください。右パネルが表示されます。

「アイキャッチ画像を設定」という灰色の四角をクリックすると、メディアを選択するウインドウが表示されます。サイトにアップロードする場合は「ファイルをアップロード」を選択してアップロードします。既にアップロード済の画像を使う場合はメディアライブラリの中から選択してください。

タイトルとアイキャッチ画像を設定したら、今はその他には何も書かずに公開します。(本当は制作中は下書き保存の方がいいとは思いますけどね)

すると、Portfolio itemsにはタイトルと画像が表示されます。用意した画像それぞれについて同様に記事を作っていきます。

デカイ

ポートフォリオ用のページを作る

メールお問い合わせページを作った時と同じような感覚でポートフォリオ用のページを用意します。今回も固定ページで作ってみましょう。

管理画面の「固定ページ」で「新規固定ページを追加」を選びます。

編集画面になったら、タイトルにページのタイトルをつけます。(「私のポートフォリオ」とか「ギャラリー」などお好みで)

本文のあたりをクリックしてカーソルが点滅したら、左上の青い+アイコンをクリックします。挿入できるブロックの一覧が表示されます。下の方までスクロールすると、WPZOOMのプラグインによって追加されたブロックのグループが出てきます。このPortfolioにマウスカーソルを乗せると、サムネイルに登録した画像の一覧がポップアップします。いい感じになりそうですね。

ではそのブロックをクリックしましょう。右側の本文部分に画像が表示されました。やったね!では右上の「公開」ボタンで公開しましょう。

うまくいきそうな予感

挙動確認

管理画面の「固定ページ」から今作ったポートフォリオページにマウスカーソルをのせ、「表示」を選択して確認しましょう。

ポートフォリオ投稿に登録した画像が配置され、マウスカーソルを乗せるとタイトル文字が表示されます。画像の右上の拡大アイコンをクリックすれば拡大表示されます。ただし、タイトル文字をクリックしてもページがないと表示されてしまいます。本文を書いていませんからね……。また、カテゴリ分けをしていないので、画像の上に表示されるカテゴリ一覧が「Uncategorized」になっています。

まだまだ設定が必要ですね。

全幅表示にする

それでは、ポートフォリオページの編集画面を開きます。一覧画像のあたりをクリックすると青い枠が表示されます。Portfolioブロックが選択された状態です。画面のどこかにこのブロックのオプションメニューが表示されます。

この真ん中のアイコンをクリックして「全幅」を選びます。これでページ幅いっぱいにこのブロックが表示されるようになりました。(好みの問題なので、別の選択肢にしてもかまわないです)

カテゴリを設定する

管理画面のPortfolio→Categoriesからも詳細に設定できますが、今回はより簡易に設定してみます。管理画面のPortfolio Itemsに作ったサムネイル記事があります。どれか一つの編集画面を開いてください。

右パネルにCategoriesというセクションがあります。Uncategorizedにチェックが入ってる状態です。

Uncategorizedのチェックを外し、Add New Category(カテゴリを追加)をクリックします。すると新しいカテゴリ登録用の項目が表示されるので、NEW CATEGORY NAMEに新しく作るカテゴリ名を記入し、Add New Categoryボタンで登録します。すると、新しくカテゴリが作成され、それが選択された状態になります。

右上の「更新」ボタンでサムネイル記事を更新しましょう。

固定ページのポートフォリオページを開いて確認してみましょう。やったね!作ったカテゴリができています。

それでは、他のサムネイル記事もUncategorizedを外して適切なカテゴリを選択していきましょう。すべて設定が終わったら、固定ページのポートフォリオページを表示して確認します。

私は「CG」と「写真」のカテゴリを作りました。すべてのサムネイル記事でUncategorizedを外したので、カテゴリの選択肢に表示されなくなっています。

これでカテゴリ問題は解決しました。

ポートフォリオ記事の本文を作る

アイキャッチ画像とタイトルしか作っていないポートフォリオ記事それぞれに本文を作りましょう。

管理画面から「Portfolio」のポートフォリオ用投稿それぞれの記事に本文を作っていきます。編集画面に入り、本文のあたりをクリックしてから左上の青い+アイコンでブロック一覧を表示させます。上部の「パターン」を選び、テンプレートの中から好みのものを選んで設定してください。

イラストや画像を見せるのがメインですから、あまり文章量は多くないものがいいと思います。就職やお仕事受注のためのポートフォリオでしたら、制作に使用したツール(どんなツールを使える人かが判る)、制作時間などが含まれると良いと思います。

各記事で同じパターンを使った方が統一感が出てよいと思いますが、そこらへんはお好みで。

本文を設定したら、固定ページのポートフォリオページを表示させ、各画像のタイトル文字をクリックして本文が表示されることを確認してください。

パターンは複数のブロックを組み合わせてできています。編集したい部分をクリックするとその部分のブロックが選択されるので、編集や画像の差し替えなどを行ってください。例えば上の画像は、写真部分をクリックして画像ブロックを選択し、「置換」で画像を変更している様子です。

不要なブロックを削除することもできます。例えば、ABOUT USページへのリンクボタンが不要ならば、そのボタンをクリックして編集メニューを出し、右端の三点アイコンから「削除」を選べば削除できます。ただし、ブロックの削除によってレイアウトが崩れる場合もあるので注意してください。また、ボタンを選択しているのかボタン内のテキストを選択しているのかで削除対象が変わってきますので、何を選択しているのか注意するようにしてください。

すべて制作したら、固定ページのポートフォリオページを表示させ、各画像をクリックして正しく本文が表示されることを確認してください。

これでポートフォリオページは基本的に完成です。ただ、これだけではまだサイトからポートフォリオページに移動できませんね。サイト内の移動のためにメニューを作る必要があります。でも今はここまで。

おまけ:ポートフォリオブロックのさらなるカスタマイズ

固定ページのポートフォリオブロックは、実は様々なオプションがあってカスタマイズできます。ちょっとだけ書いておきますので興味があったらいじってみてください。

ポートフォリオの固定ページの編集画面に入ります。

ポートフォリオ部分をクリックして選択し、右パネル上部の「ブロック」をクリックします。すると現在選択中のブロックに関する設定画面が表示されます。

ここで色々な設定ができます。例えばLayoutの項目ではサムネイルの並べ方や並べる数などをカスタマイズできます。

おまけ2:並び順の変更

上で紹介した設定の「Filtering」にある「ORDER BY」で並び順を変更できますが、ポートフォリオとしてはなるべく目を引く作品を左上にもっていきたいですよね。その場合は「ORDER BY」はデフォルトのままにして、別の方法で並べ替えます。

管理画面の「Portfolio」から「Re-Order」を選びます。各項目の上下矢印アイコンで順番を変更できます。変更したあとはSave Orderボタンで保存してください。

以上、ポートフォリオページの作成でした。