
內容簡介
這個外掛可以透過簡短代碼新增透明圖片,讓內容可以在圖片的左或右方側邊排列,不再是盒子形狀,讓內容以圖片為基礎呈現。
想要獲取更多資訊或看範例,請參照說明文件、範例。
值得一提的是,這是第一個基於CSS Shapes的WordPress外掛。
注意事項
這個外掛是基於CSS Shapes所建立的,而CSS Shapes是一個新的CSS功能,目前有80%的瀏覽器支援,另外一些瀏覽器正在開發中,期望很快就能推出。
如果瀏覽器支援這個功能,內容就會顯示相對應的形狀,否則就會呈現盒子形狀。
啟用SVG圖片
預設情況下,WordPress並不支援上傳SVG圖片,但在外掛設置頁面,我們可以啟用上傳SVG圖片的功能。
說明文件
這個WP-Shapes外掛相當容易上手。
步驟一:上傳圖片並取得圖片ID
從Dashboard上傳圖片。
媒體 -> 新增 -> 上傳圖片。
圖片上傳後,WordPress會為每張圖片新增一個ID。
取得圖片ID的方法如下:
媒體 -> 媒體庫
將圖片視為列表(而非網格狀)
當滑鼠游標停留在圖片上,就會在左下角看到一個URL
在那裡可以看到post=這個參數。
詳細步驟可參照這裡。
步驟二:新增簡短代碼及其屬性
在WordPress文章編輯中加入簡短代碼並附加屬性
[shape id=40]
其中id=40代表圖片ID。
更多詳細資訊,請參照這裡。
新增SVG圖片
預設情況下,WordPress並不支援上傳SVG圖片,但您可以在wp管理後台中的菜單選擇「wp css shapes」,然後勾選「啟用SVG圖像」後儲存變更,即可上傳SVG圖片。
詳細說明請參照這裡。
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
Add transparent image using this plugin shortcode makes the inline content wrap around the images on one side left or right.
Instead of content looks like a box shape, now content looks in a shape based on image
for more information and to get an idea please check the demo.
Documentation, Demo, Examples
Happy to say that, This is the first WordPress plugin released in public, based on CSS Shapes
note
This plugin is build based on CSS Shapes
It a new css feature. Currently 80% of the usage browsers supports this feature.
And some other browsers are in development. Expect to launch soon.
If browser supports then content shape will appear.
If browser not supports then content appear in normal way. like box shape
Enable SVG Images
By default WordPress not supports uploading SVG images.
At plugin setting page, We can enable upload SVG Images.
Documentation
Its easy to get started with WP-Shapes plugin
step-1 : upload image and get image id
Upload images from Dashboard
Media -> add New – and upload images
after uploading images, WordPress adds an ID for each image.
to get ID of images
Media -> Media Library
set the image to view as list instead of grid view
then at image when hover the mouse
can notice at bottom left corner with an url
at there we can notice post=
more info
step-2: Add shortcode and its attributes
Add shortcode in WordPress post edit with a attribute
[shape id=40]
id=40, 40 is the image id.
more info
Adding svg images
WordPress defaults to not support uploading SVG images
If you like to add svg images, at wp admin
go to menu – wp css shapes – and then checkmark – enable svg images
and save changes
more info
