內容簡介
使用簡碼
使用沒有任何可選屬性的簡碼 [image-placeholder] 將生成一個 300 像素寬、200 像素高的圖像,使用 Holder 的“social”主題,該主題默認為純藍色背景和白色文本,顯示圖像大小(“300 × 200”)。
設置寬度和高度
您可以設置佔位符圖像的寬度和高度(以像素為單位):
[image-placeholder width="500" height="100"]
更改顏色
您可以更改背景和文本顏色:
[image-placeholder colors="#000:#fff"]
這將創建一個黑色背景和白色文本的圖像。
更改文本
默認情況下,Holder.js 使用圖像大小進行文本顯示。您可以更改此內容:
[image-placeholder text="Foo bar"]
刪除高度和寬度樣式
默認情況下,Holder.js 將添加內聯樣式來指定圖像的高度和寬度。您可以刪除這些內聯樣式:
[image-placeholder auto="true"]
僅返回 URL
如果您想在自己的 <img> 標記中使用佔位符,或者作為背景風格,例如:
[image-placeholder url="true"]
添加類別
如果您希望在生成的 <img> 標記中添加一個類別:
[image-placeholder class="my-class"]
更改主題
Holder 目前提供三種內置主題:gray、industrial 和 social。您可以在簡碼中使用這些主題,例如:
[image-placeholder theme="industrial"]
您也可以創建自己的主題。每個主題定義了前景色、背景色、字體大小和字體家族。最簡單的方法就是包含一個腳本標記:
<script>Holder.add_theme("my-theme", { background: "#000", foreground: "#fff", size: 14 })</script>
有許多 自定義主題的其他選項。
學分
此外掛僅是 Holder.js 庫的 WordPress 簡碼封裝,該庫由 Ivan Malopinsky 構建。
外掛標籤
開發者團隊
原文外掛簡介
Using the Shortcode
Using the short code [image-placeholder] without any of the optional attributes will generate a 300px wide by 200px high image using Holder’s ‘social’ theme which defaults to a solid blue background with white text showing the size of the image (‘300×200’).
Set the width and height
You can set the width and height (in pixels) of your placeholder image:
[image-placeholder width="500" height="100"]
Change the colors
You can change the background and text colors:
[image-placeholder colors="#000:#fff"]
This will create an image with a black background and white text.
Change the text
By default holder.js uses the size of the image for the text. You can change this:
[image-placeholder text="Foo bar"]
Remove the height and width styles
By default, holder.js will add inline styles to specify the height and width of the image. You can remove these:
[image-placeholder auto="true"]
Only return the URL
If you want to use the placeholder in your own tag or as a background style, for example:
[image-placeholder url="true"]
Add a class
If you want to add a class to the tag that it generated:
[image-placeholder class="my-class"]
Change the theme
Holder currently provides three built-in themes: gray, industrial, and social. You can use these in the short code like this:
[image-placeholder theme="industrial"]
You can also create your own theme. Each theme defines the foreground color, the background color, the font size and the font family. The easiest approach is to simply include a script tag:
There are a lot of other options for customizing themes.
Credits
This plugin is merely a WordPress shortcode wrapper for the holder.js library built by Ivan Malopinsky.
