[WordPress] 外掛分享: Image Links

首頁外掛目錄 › Image Links
WordPress 外掛 Image Links 的封面圖片
10+
安裝啟用
尚無評分
1363 天前
最後更新
問題解決
WordPress 3.0.1+ PHP 5.3+ v1.4 上架:2018-09-03

內容簡介

此外掛會輸出浮動標題與切換圖片的圖片連結。
你可以輕鬆地停用樣式(或腳本)以便於編寫自己的樣式。

注意,此外掛不會在你的儀表板中添加任何屏幕-所有的設置/資訊
都在此自述檔案中。

範例

以下是一堆包裹在圖片連結格中的圖片連結範例。可以使用此格,讓圖片連結排列在欄中,而非始終橫跨整個寬度。

請留心使用image_link_grid時請不要包含其他標記-請注意文字編輯器換行符號是否被轉換為段落或斷行標記。最好在而非Visual視圖中編輯簡碼數據。

[mha_image_link_grid columns_xs=2 columns_md=2]
[mha_image_link attachment=100 link="/contact-us" text="聯絡我們!" subtext="現在就聯繫我們!"]
[mha_image_link attachment=101 link="https://www.example.com" text="查看範例"]
[mha_image_link attachment=102 link="/some-page" text="這是某個頁面"]
[mha_image_link attachment=102 link="/some-page" text="這是某個頁面" style="full"]
[mha_image_link image="/path-to/image.png" link="/another_page" text="這是另一個頁面"]
[mha_image_link image="https://www.example.com/remote-image.png" link="/another_page"]
[/mha_image_link_grid]

文檔

此外掛不會在你的儀表板中添加任何屏幕或選項。所有定制需在你的主題 CSS 文件中完成。

圖片連結Javascript

javascript 可以啟用每個圖片連結的多個圖片。如果你不使用該功能,或者想要自己實現它-可以停止包括 JavaScript 文件:

<?php
add_filter( 'mha_image_link_include_scripts', '__return_false' );
?>

腳本處理為 mha-image-links。

圖片連結CSS

停用外掛各自的預設 CSS 文件可以使用此篩選器:

<?php
add_filter( 'mha_image_link_include_styles', '__return_false' );
?>

CSS 處理為 mha-image-links

[mha_image_link_grid] 簡碼設置

columns_xs 默認 : 2
特定顯示在extra small設備上的欄數。 默認值為任何高達768px。有效值為 1、2、3 或 4,除非您基於 image-links.scss 中的源添加了更多代碼。

columns_sm 默認 : none
與columns_xs相同,但用於小尺寸屏幕(>768px)。如果未設置,則默認值為columns_xs的值。

columns_md 默認 : none
與columns_sm相同,但用於中尺寸屏幕(>992px)。如果未設置那將默認為columns_sm的值。

columns_lg 默認 : none
與columns_md相同,但用於大尺寸屏幕(>1200px)。如果未設置那將默認為columns_md的值。

[mha_image_link] 簡碼設置

image *默認: ”**
指定圖片URL。如果可以,請使用attachment。

text *默認: ”**
顯示於圖片上的大文字。

subtext *默認: false**
顯示於圖片連結上的較小文字。

link *默認: ”**
此圖片應指向的連結。可以是任何 href=””。

開發者團隊

⬇ 下載最新版 (v1.4) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Image Links」→ 直接安裝(推薦)

原文外掛簡介

Outputs links which are images, with floting-over captions and changing images.
Easily lets you disable the styles (and Scripts) so you can write your own styles.
Note there are no screens added to your dashboard – all the settings/information
is in this readme.txt file.
Example
Here’s an example of a bunch of image links wrapped in an image link grid. The grid is optional and just makes the image links sit in columns instead of always being full width.
Be careful when using image_link_grid that there is no other markup included – watch out for text-editor line breaks being turned into paragraph or line-break tags. You’re probably best editing the shortcode data in Text and not Visual view.
[mha_image_link_grid columns_xs=2 columns_md=2]
[mha_image_link attachment=100 link="/contact-us" text="Contact Us!" subtext="Get in touch now!"]
[mha_image_link attachment=101 link="https://www.example.com" text="Checkout Example"]
[mha_image_link attachment=102 link="/some-page" text="This is some page"]
[mha_image_link attachment=102 link="/some-page" text="This is some page" style="full"]
[mha_image_link image="/path-to/image.png" link="/another_page" text="This is another page"]
[mha_image_link image="https://www.example.com/remote-image.png" link="/another_page"]
[/mha_image_link_grid]

Documentation
No screens or options are added to your Dashboard. All customising needs to be done in your theme’s CSS file.
Image links Javascript
The JavaScript enables multiple images on each image link. If you’re not using that functionlaity, or want to implement it yourself – you can stop the JavaScript file being included with:

The handle of the script is mha-image-links.
Image links CSS
To stop the plugin including it’s default CSS file use this filter:

The handle of the styles is mha-image-links
[mha_image_link_grid] shortcode settings

columns_xs Default: 2
Specify hwo many columns should display on extra small devices. By default that’s anything up to 768px. Valid values are 1, 2, 3 or 4 unless you add more code based on the source in image-links.scss

columns_sm Default: none
The same as columns_xs but for small screens (above 768px). If not set then this will default to the value of columns_xs

columns_md Default: none
The same as columns_sm but for small screens (above 992px). If not set then this will default to the value of columns_sm

columns_lg Default: none
The same as columns_md but for large screens (above 1200px). If not set then this will default to the value of columns_md.

[mha_image_link] shortcode settings

image *Default: ”**
Specify the URL to an image. It’s better to use attachment if you can.

text *Default: ”**
The big text to display on the image

subtext *Default: false**
The smaller text to show on the image link

link *Default: ”**
The link this image should direct to. Can be anything href=”” takes.

attachment *Default: false**
The attachment ID of the image you want to use or the image. If you specify this instead of image then you’ll get a properly sized image and everything will be excellent.
To get the attachment ID find the attachment in your Dashbaord -> media screen, click the one you want and look in your browsers address bar for the Item number. For example in this address upload.php?item=400 the attachment ID is 400.

style *Default: half**
By default the caption covers half the image – you can set style to full to make it cover the whole image. You can also enter anything you like here and the .mha-image-link element will be given it as an extra class. See the bottom of image-link.scss for an example of styling it.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon