【WordPress】ショートコードを使った美しいエフェクトWP Photo Effects

wp_photo_effects_s
WP Photo Effectsはショートコードを使用して画像に美しいカスタムエフェクトを適用することができるプラグイン。設定はなく、ショートコードでエフェクトをカスタマイズすることができます。

WP Photo Effectsプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> WP Photo Effectsを検索
有効化にします。設定はありません。

ショートコード

[wppe_effect]
上記のショートコードが基本になります。

  1. URL 画像URLを使用。 [wppe_effect url=”http://example.com/example.jpg”]
  2. grayscale 画像をグレースケールにする。 [wppe_effect grayscale=”yes”] (Default is “no”)
  3. move_x x軸上に画像を移動する範囲 [wppe_effect move_x=”-15″] (Default is “-15”)
  4. move_y y軸上に画像を移動する範囲 [wppe_effect move_y=”-15″] (Default is “-15”)
  5. move_z z軸上に画像を移動する範囲 [wppe_effect move_z=”20″] (Default is “20”)
  6. rotate_x x軸上の画像の回転の範囲 [wppe_effect rotate_x=”15″] (Default is “15”)
  7. rotate_y y軸上の画像の回転の範囲 [wppe_effect rotate_y=”15″] (Default is “15”)
  8. rotate_z z軸上の画像の回転の範囲 [wppe_effect rotate_z=”15″] (Default is “15”)
  9. opacity 不透明度 [wppe_effect opacity=”0.5″] (Default is “0.5”)
  10. extra_imgs 画像の層(デフォルト4、最小1、最大5) [wppe_effect extra_imgs=”4″] (Default is “4”, minimum value is “1” and maximim value is “5”)
  11. overflow マウスホバー時に画像境界からはみ出した部分を表示するか非表示にするか [wppe_effect overflow=”visible”] [wppe_effect overflow=”hidden”] (Default is “visible”)
  12. 幅 [wppe_effect width=”300px”] (Default is “300px”)
  13. 高さ [wppe_effect height=”300px”] (Default is “300px”)
  14. fitscreen 画像をボックスにフィットさせるか [wppe_effect fitscreen=”yes”] (Default is “no”)
  15. link 画像リンク [wppe_effect link=”#”] (Default is “#”)
  16. border 画像の境界線 [wppe_effect border=”1px”] (Default is “1px”)
  17. リンクターゲット [wppe_effect target=”_self”] link open in new tab [wppe_effect target=”_blank”] (Default is “_self”)
  18. radius 半径(pxまたは%で指定) [wppe_effect radius=”100%”]

wp_photo_effects_1
画像をホバーするとこんな感じです。

 
WP Photo Effects

【WordPress】ショートコードを使った美しいエフェクトWP Photo Effects

  • LATEST
  • RELATED
  • POPULAR