WordPress

【WordPress】多列レイアウト/レスポンシブ/スライドとフェードホバーアニメーションなどを備えたJDs Portfolio

December 3, 2017

JDs Portfolioは、多列レイアウト、レスポンシブ、5つの異なる色のデザイン、スライドとフェードホバーアニメーション、イメージの高さ/幅指定、カテゴリナビゲーション、カスタムポートフォリオリダイレクトリンクなどを兼ね揃えたポートフォリオプラグイン。

JDs Portfolioプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> JDs Portfolioを検索
有効化にするとJDs Portfolio、エディタにJDs Portfolio Shortcodes、ウィジェットにJDs – Recent Portfolioが追加されます。

JDs Portfolio – Settings

Enable Bootstrap ブートストラップを有効にする
Portfolio Columns ポートフォリオの列
Image Height/Width 画像の高さ/幅
Portfolio Animatiom ポートフォリオアニメーション
Hover Background Color ホバーの背景色

Portfolio Category


カテゴリーを登録します。名前が表示されるフィルタリングボタン名になります。

Add New Portfolio


Add Newをクリックし、カテゴリーを選択します。
画像はアイキャッチ画像で表示させたい画像を選択し、リンクはPortfolio Linkに入力します。

エディタ


ビジュアルに切り替え、JDs Portfolio Shortcodesをクリックします。


Select a ShortcodeでJDs Portfolioを選択します。


上記のようにOrder By、Orderが表示されるようになるので、並び順を指定。
Insert Shortcodeをクリックするとショートコードが挿入されます。

ポートフォリオが表示されます。


フィルタリング機能。

ウィジェット


ウィジェットを移動させます。


Number of Portfoliosでは表示させるポートフォリオの数を指定します。

新しいものが表示されます。