Penci Portfolio
こんにちはchessinuです！
今回はWordPressで人気の海外製テーマ「Soledad」に付属している「Penci Portfolio」というプラグインの使い方に関して解説します。
Penci Portfolioって何？
Penci Portfolioプラグインは簡潔に言うと
ポートフォリオサイトを作る
というそのままの意味のプラグインです。しかし言葉だけでは分かりにくいと思いますのでこちらの
を参考に閲覧してみてください。
使用手順
Penci Portfolioを使用して、サイトに反映させるまでの大まかな流れです。
プラグインをインストール＆有効化
「Soledad」テーマを最初にインストールした時に、テーマ付属のプラグインのインストール作業も同時に行ったかと思います。
まだプラグインをインストールしていない方は以下の様にインストールしておいてください。
「外観」→「Install Plugins」→「Install」
次にインストールしたプラグインを有効化します。
「プラグイン」→「インストール済みプラグイン」→「有効化」
以上でここでの作業は終了です。
実際にポートフォリオサイトを作成する
実際にポートフォリオサイトを作成する手順です。
ポートフォリオページを作る
Penci Portfolioプラグインを有効化するとPortfolioという項目ができるので
[Portfolio]->[Add New]
に進みます。
それではまず始めにAdd New Project画面で、適当にポートフォリオページを作ります。
次に[Portfolio Categories]から、このページのポートフォリオカテゴリーを選択します。
カテゴリーが無い場合は[+Add New Portfolio Category]で作成してください。
ここではこのポートフォリオページを適当に「料理」というポートフォリオカテゴリーにしました。
日本語でポートフォリオカテゴリーを作る場合は、必ずスラッグを小文字の半角英数字に設定します。
設定の仕方は[Portfolio Category]から変更します。
一通りポートフォリオページが作成できたら[公開]ボタンをクリックします。
固定ページにショートコードを挿入する
では[固定ページ]->[新規追加]に進み新規投稿を作成します。
ここではタイトルを適当に「My Portfolio」とします。
そして[Penci Shortcodes]から[Portfolio]を選択します。
するとポートフォリオの詳細設定画面が出ます。
少し設定が分かりにくいと思うので、それぞれの項目について解説していきます。
Portfolio Style
[Mansory]と[Grid]の2つのStyleから選択します。
画像の配置の仕方が違います。
Masonry
Grid
Portfolio Categories Slug To Display
ここには表示させたいポートフォリオカテゴリーのスラッグを書きます。
ここでは先程作成したページを表示させたいので「cook」とします。
なお何もスラッグを記入しないと全てのポートフォリオカテゴリーが表示されます。
Numbers Post to Show?
ここには表示させたい数を設定します。
各カテゴリーの全てを一度に表示させたいのであれば[-1]と記入します。
<例>
Numbers Post to Show? : 6
Page Navigation Type
ここには以下の3つの選択肢があります。
Numberic Navigation
Load More Button
Infinite Load More
下にスクロールしていくと延々と表示されていきます。
How Much Posts to Show Each Time Load More?
Load More Buttonを押した時にいくつの投稿数が表示されるのかを設定します。
Images Type ( Apply for Grid Style only )
ここには以下の3つの選択肢があります。
Grid Styleを選択した場合に表示されるサムネイル画像の大きさが違います。
Landscape
square
Vertical
Display Filter?
ポートフォリオカテゴリーを表示する/しないを選択します。
Yes(表示)
No(非表示)
Number Columns?
2カラム表示にするか3カラム表示にするか選択します。
2 Columns
3 Columns
All text
ポートフォリオカテゴリーの「All」表示を自由に変えられます。
例えば「All」→「最近の投稿」に変更してみます。
変更前
変更後
Enable Click on Thumbnails to Open Lightbox?
Lightboxを適用する/しないを選択します。
ライトボックスというのはサムネイルをクリックした時に画像が浮かび上がる様に表示されます。
この卵のサムネイルをクリックすると…
この様に画像が浮かび上がります。
設定終了
全ての項目を設定し終えたらショートコードを挿入して[公開]をクリックします。
メニューを設定する
[外観]->[メニュー]に行きPrimary Menuを選択します。
[固定ページ]を開き、先ほど作成した[My Portfolio]を選択して
[メニューに追加]をクリックします。
[メニューに追加]をクリックします。
そして追加した[料理]を
[Portfolio Categories]の一つ下の階層に設定します。
そして[メニューを保存する]をクリックしてここでの作業は終了です。
完成したポートフォリオ
そして完成したポートフォリオがこちらになります。
トップページのメニューに[My Portfolio]が追加されました。
そして[My Portfolio]をクリックするとポートフォリオが表示されます。
卵のサムネイルをクリックすると先程作成したページが表示されました。
ちなみに今回は一つしか作りませんでしたが
この様な手順でどんどんとポートフォリオを増やしていってください。
補足事項
{カスタマイズ}->{Portfolio Options}からも色々な設定ができますのでぜひやってみてください。
Penci Design公式動画
Penci Design公式動画にもポートフォリオの作成方法がありますので参考までにどうぞ。(少し古いですが)
動画(2016年ver.)
動画(2017年ver.)
終わりに
ポートフォリオを作成するとそれだけでとてもお洒落なサイトになりますね。
プラグイン自体も凄く使いやすく簡単に作成できたので良かったです。
以上でこの記事は終わりとなります。
また別の記事でお会いしましょう！
この記事が気に入りましたら、下のアイコンをクリックしてSNSシェアの方をお願いします！