Responsive Filterable Portfolio：簡単なポートフォリオが作れる
ポートフォリオというと業界によって意味が違ってきます。
Web デザインでのポートフォリオというと「作品集」という意味になります。
自分の実績などを見てもらうには欠かせませんよね。
そのポートフォリオを公開しておくと便利かもしれません。
そのような時に便利な WordPress 用プラグインがあります。
それは「Responsive Filterable Portfolio」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
Responsive Filterable Portfolio
Responsive Filterable Portfolio は、
ライトボックスとフィルター機能付きの簡単なポートフォリオが作れます。
ポートフォリオで表示できるコンテンツは、画像・YouTube 動画・サイトリンクがあります。
ポートフォリオには、画像・YouTube 動画・サイトリンクを混ぜることができます。
サムネイルの高さと幅の変更が可能。
作成したポートフォリオは、ショートコードを使用して任意の場所で表示可能です。
プレビュー機能も用意されていて、公開前に内容を確認することもできます。
Free 版は 1 個のポートフォリオが作成できます。
記事を作成もしくは更新時点でのバージョン：v 1.0.6
マルチサイトでの利用:可
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Responsive Filterable Portfolio – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Responsive Filterable Portfolio」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Responsive Filterable Portfolio を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト（テーマ・プラグイン）用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用テーブル
下記のテーブルを Responsive Filterable Portfolio 専用のテーブルとして作成し利用します。
テーブル作成時に $wpdb->prefix も使用しているので、マルチサイトにも対応。
wp-best-portfolio.php から CREATE TABLE 文を抜粋（記事用に一部修正）。
CREATE TABLE e_portfolio(
`id` int(11) NOT NULL AUTO_INCREMENT,
`media_type` varchar(10) NOT NULL,
`image_name` varchar(500) NOT NULL,
`title` varchar(500) NOT NULL,
`murl` varchar(2000) DEFAULT NULL,
`mtag` varchar(5000) DEFAULT NULL,
`open_link_in` tinyint(1) NOT NULL DEFAULT '0',
`vtype` varchar(50) DEFAULT NULL,
`vid` varchar(300) DEFAULT NULL,
`videourl` varchar(1000) DEFAULT NULL,
`embed_url` varchar(300) DEFAULT NULL,
`HdnMediaSelection` varchar(300) NOT NULL,
`createdon` datetime NOT NULL,
PRIMARY KEY (`id`)
);
専用メニュー
ダッシュボードの「設定」メニューの下に追加されています。
使い方
Portfolio Settings メニューからポートフォリオ全体の設定を行ってから、
Manage Media メニューでポートフォリオで表示するコンテンツを登録します。
Portfolio Settings
- Grid Background color
ポートフォリオ自体の背景色を指定します。 - Thumbnail Height
サムネイル画像の高さを px 単位で指定します。 - Thumbnail Width
サムネイル画像の幅を px 単位で指定します。 - Thumbnail Margin
サムネイル画像間のマージンを px 単位で指定します。 - All Keyword Translate
フィルターボタン「ALL」の表示ラベルを入力します。 - Show Filter ?
フィルター機能を表示するかどうか。
Manage Media
まずは「Add New」ボタンをクリックします。
メディアタイプを選択します。
Image
- Image Infomation
表示する画像をメディアライブラリーから登録します。 - Image Title
画像のタイトルを入力できます。（上で選択した画像のタイトルが自動で設定されます） - Image Title Url
タイトルをクリックしたらリダイレクトさせたい URL があれば入力します。 - Media Tags
フィルター機能で使用するタグを設定します。複数のタグを設定したい場合にはカンマで区切ります。 - Show Image In Lightbox?
画像をライトボックスで表示するかどうか。
Video
- Video Information
動画サイトを選択します。 - Video Url
動画の URL を入力します。 - Video Thumbnail Information
Click Here to get video information and thumbnail From リンクをクリックすると、サムネイル画像と下のタイトルと動画 URL が設定されます。
- Video Title
動画のタイトルを入力します。 - Video Title Url
タイトルをクリックしたらリダイレクトさせたい URL があれば入力します。 - Media Tags
フィルター機能で使用するタグを設定します。複数のタグを設定したい場合にはカンマで区切ります。 - Show Video In Lightbox?
動画をライトボックスで表示するかどうか。
Link
- Image Information
グリッドで表示したい画像を選択します。 - Link Title
リンクのタイトルを入力します。 - Link Url
画像をクリックしたらリダイレクトさせたい URL があれば入力します。 - Media Tags
フィルター機能で使用するタグを設定します。複数のタグを設定したい場合にはカンマで区切ります。
ポートフォリオ表示例
上のショートコードもしくはテンプレートタグをポートフォリオを表示させたい場所に貼り付けます。
ポートフォリオを表示させると上のよう感じになります。
ポートフォリオの列数は、端末の画面サイズに応じて自動で調整されます。
プレビュー表示
Preview Portfolio メニューを開くとショートコードを貼り付ける前に内容を確認できます。
ショートコード
下記のショートコードを使用すると任意の箇所でポートフォリオを表示できます。
[print_responsive_portfolio_plus_lightbox]
Gutenberg エディターでの挿入手順
Gutenberg エディターでのショートコードの挿入手順については、
下記の記事にて詳しく解説していますので、御覧ください。
https://www.hiskip.com/wp/notes/9402.html
テンプレートタグ
使用中のテーマの PHP ファイルで、
下記のコードを使用するとテーマの任意の場所でポートフォリオを表示できます。
<?php echo do_shortcode("[print_responsive_portfolio_plus_lightbox]"); ?>
代替プラグイン
Responsive Filterable Portfolio にほしい機能が無かった場合には、
Responsive Filterable Portfolio 以外にもギャラリーを作成できるプラグインを記事にしています。
以下では、Responsive Filterable Portfolio を含めて 20 個を簡単に紹介しています。