前言介紹
- 這款 WordPress 外掛「Gallery Image Captions (GIC)」是 2020-03-05 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2022-12-18，距離現在已有 868 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.3.2 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
mlchaves |
外掛標籤
css | html | filter | gallery | shortcode |
內容簡介
GIC 可以顯示圖片的標題、標題下的文字描述和敘述屬性。此外，你也可以自訂篩選 HTML 的輸出方式。
安裝啓動 GIC 後，在頁面上加入 WordPress 畫廊簡碼，再異動篩選器。
如果你一直想寫個篩選器來自訂圖片的說明文字，那這個外掛就是為你量身打造。
點此到實際展示頁面。
動機
預設的 WordPress 畫廊簡碼只會顯示來源附件的說明文字。有時候，你可能希望呈現更多內容，如標題、敘述等等。
GIC 外掛會覆蓋 WordPress 畫廊簡碼功能，並創建 鈎取器。藉由此鈎取器，你可以做更多操作而呈現的範圍不僅限於說明文字。
有些高級佈景主題完全不顯示說明文字。對我這樣的攝影愛好者來說，這讓我頭痛不已，花費寶貴的時間鑽研怎麼製作欄位。
使用方法
自訂篩選器以呈現說明文字
此外掛的核心是可以篩選畫廊的說明文字。藉由 galimgcaps_gallery_image_caption 鈎取器便可以達成此效果。
以下是用於使用範例的篩選器。你可以在啓動 GIC 外掛後，在子佈景主題的 functions.php 檔案中加入此代碼。你也可以改變命名和調整回傳字串，使其符合你的需求。
/**
* 自訂篩選器用於畫廊圖片的說明文字
*
* 注意：請勿更改 captiontag、selector 和 itemtag 屬性
*/
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {
$id = $attachment_id;
// 在 GIC 外掛中取得 meta
$my_image_meta = galimgcaps_get_image_meta($id);
/**
* 自訂說明文字內容的範例
*
* 此範例包含 meta 標題、說明文字、敘述等等。
*
* 你可以選擇自訂 $my_image_meta 陣列中的任意值，也可以加入自己的 HTML。
*/
return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
"標題: " . $my_image_meta['title'] . "
" .
"說明文字: " . $my_image_meta['caption'] . "
".
"敘述: ". $my_image_meta['description'] .
"";
}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
你可以將此篩選器程式當成起始範本，自由調整回傳內容。當啓動 GIC 外掛後，加入上方代碼至子佈景主題的 functions.php 檔案中即可。
建立新的篩選器取得自訂欄位
/**
* GIC 1.4.0 新增的自訂篩選器
*/
function gic_add_custom_fields( $image_meta, $attachment ) {
// 新增欄位至陣列中，藉此外掛以呈現說明文字
$image_meta['credit_text'] = $attachment->credit_text;
$image_meta['credit_link'] = $attachment->credit_link;
return $image_meta;
}
add_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 );
如果要使用以上兩個自訂欄位，galimgcaps_gallery_image_caption 篩選器就需要做出以下調整：
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {
$id = $attachment_id;
$my_image_meta = galimgcaps_get_image_meta($id);
return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
"標題: " . $my_image_meta['title'] . "
" .
"說明文字: " . $my_image_meta['caption'] . "
".
"敘述: ". $my_image_meta['description'] . "
".
"特別感謝: ". $my_image_meta['credit_text']. " (". $my_image_meta['credit_link'].")".
"";
}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
原文外掛簡介
With GIC, you can display the title, caption, and description image attributes. You can also change/filter the rendering HTML to whatever you want.
After installing and activating GIC, write your filter and add the WordPress Gallery shortcode to your page.
If you’ve been dreaming of writing a filter to customise the gallery image captions, then this plugin is for you.
Visit the live demo page.
Motivation
The default WordPress gallery shortcode will only display the caption from the media’s attachment metadata. Sometimes it’s nice to display more like the title—even the description.
The GIC plugin overrides the WordPress gallery shortcode function to create a hook. With this hook you can do a little bit more than just displaying the caption.
Some premium themes hide the caption completely. This leaves photography lovers like me scratching their head and spending precious time cobbling together makeshift caption blocks.
Usage
Custom Filter For Displaying Captions
The crux of this plugin is the ability to filter the gallery image caption. The galimgcaps_gallery_image_caption hook makes this possible.
For the usage examples below, this is the filter used.
/**
* Custom Filter for Gallery Image Captions
*
* Note: Avoid altering captiontag, selector, and itemtag.
*/
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {
$id = $attachment_id;
// Grab the meta from the GIC plugin.
$my_image_meta = galimgcaps_get_image_meta($id);
/**
* Here's where to customise the caption content.
*
* This example uses the meta title, caption, and description.
*
* You can display any value from the $my_image_meta array.
* You can add your own HTML too.
*/
return "" .
"Title: " . $my_image_meta['title'] . "
" .
"Caption: " . $my_image_meta['caption'] . "
".
"Description: ". $my_image_meta['description'] .
"{$captiontag}>{$itemtag}>";
}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
Feel free to use this filter code as a starter template. After activating the GIC plugin, add the code above to your child theme’s functions.php file. Rename the function and tweak the return string to suit your needs.
New Filter To Get Custom Fields
/**
* New GIC 1.4.0 filter for custom meta fields.
*/
function gic_add_custom_fields( $image_meta, $attachment ) {
// This is how you add a custom fields to the array that
// GIC uses to display captions.
$image_meta['credit_text'] = $attachment->credit_text;
$image_meta['credit_link'] = $attachment->credit_link;
return $image_meta;
}
add_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 );
To use these two custom fields, your galimgcaps_gallery_image_caption would look something like this.
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {
$id = $attachment_id;
// Grab the meta from the GIC plugin.
$my_image_meta = galimgcaps_get_image_meta($id);
// If there's credit, give it where it's due complete with link.
$credit = $my_image_meta['description'] ?
"
Credit: " . $my_image_meta['credit_text'] . "" . "
" :
'';
/**
* With GIC 1.4.0 you can also add custom media attachment fields
* to your captions.
*/
return "" .
"Caption: " . $my_image_meta['caption'] . "
" .
$credit .
"{$captiontag}>{$itemtag}>";
}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
Since v1.2.0, GIC automatically adds an Image ID column to your WordPress Media Library. This is to help you add the image IDs to your GIC shortcodes.
See where GIC automatically adds an Image ID column to your WordPress Media Library.
New in v1.4.0, GIC support custom media attachment fields.
Usage Example 1
Shortcode
For starters, let’s use a
tag for the caption tag.
Styling
Let’s override the generated styles with our own style for one particular image.
/* Targeting a Specific Image */
/* Add some padding all around. */
#gallery-1 .gallery-item,
#gallery-1 .gallery-item p {
padding: 1%;
}
/* Add some moody background with typewriter font. */
#gallery-1 .gallery-item {
color: whitesmoke;
background-color: black;
font-size: 1.25rem;
font-family: Courier, monospace;
text-align: left !important;
}
Usage Example 2
Shortcode
A 2 column x 1 row gallery with large size images using an H4 for the caption.
A 3 column x 1 row gallery with medium size images using a blockquote for the caption.
Did you notice that we are using
in the second shortcode? Let’s give it try just for kicks.
Styling
/* 1. Style the H4 Used in the Caption Example */
h4 {
color: #777777 !important;
font-size: 1.2rem !important;
font-family: Helvetica, Arial, sans-serif !important;
}
/* 2. Help Align the Blockquote */
#gallery-3 .gallery-caption {
margin-left: 40px !important;
}
Responsive CSS Example
I recommend adding the following media queries if you use galleries with more than one image. The two media queries below will stack 2×1 and 3×1 galleries into a 1 column x n rows or 2 column x n rows as needed.
/* Media Queries for Responsive Galleries */
/**
* Styling based on article "How To: Style Your WordPress Gallery"
* by Par Nicolas.
*
* https://theme.fm/how-to-style-your-wordpress-gallery/
*/
/* Mobile Portrait Breakpoint - 1 column */
@media only screen and (max-width: 719.998px) {
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item {
width: 100% !important;
}
}
/* Mobile Landscape and Tablet Breakpoints - 2 columns */
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.gallery-columns-3 .gallery-item {
width: 50% !important;
}
}
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Gallery Image Captions (GIC)」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.0.1 | 1.1.0 | 1.2.0 | 1.3.0 | 1.4.0 | trunk |
延伸相關外掛（你可能也想知道）
HUSKY – Products Filter Professional for WooCommerce 》HUSKY – Products Filter Professional for WooCommerce（前名為WOOF）是一款針對WooCommerce的產品搜尋外掛程式，它允許你的網站客戶通過類別、屬性、...。
Search & Filter 》Search & Filter 是一款簡單的 WordPress 搜尋和篩選外掛程式，是 WordPress 搜尋框的進階版。, 您可以透過類別、標籤、自訂分類、文章類型、發佈日期或...。
Allow HTML in Category Descriptions 》當您在類別描述文本區添加文字並保存類別時，WordPress會運行內容過濾器，剝除除最基本格式標籤以外的所有內容。, 這個外掛程式可以禁用具有必要權限的角色的...。
Category Ajax Filter 》支援 Elementor Builder, 不用重新載入網頁，即可按類別篩選文章/自訂文章類型中的文章。在前端選擇特定的分類和分類名詞。使用預置的多種版面和 Ajax 請求來...。
Jetpack Search 》Jetpack Search 是一款功能強大且可自定義的外掛，可幫助訪問者在需要時立即找到正確的內容。, Jetpack Search 是一款易於使用的 WordPress 搜尋外掛，可增強...。
WooCommerce Filter Orders by Product 》曾經想要按特定產品篩選訂單頁面結果嗎？現在有了這個外掛，就能做到！, 安裝此外掛後，在 WooCommerce 訂單畫面中會出現一個新的篩選下拉式清單。此下拉式清...。
Advanced Post Manager 》這是一個針對開發者所設計的工具，可以透過添加 metadata、taxonomy 等資訊來協助加強自訂文章類型的列表功能。此外，也提供直觀的介面讓您可以添加及儲存複...。
WP Ultimate Post Grid 》使用 WP Ultimate Post Grid 可以建立帖子、頁面或任何自訂文章類型的回應式網格。可以選擇性為與這些文章相關聯的任何分類，添加等離子過濾器。, , , 查看這...。
WordPress Meta Data and Taxonomies Filter (MDTF) 》WordPress Meta Data Filter & Taxonomies Filter（MDTF）是一個 WordPress 的篩選外掛程式，可以讓您的網站內容通過資料的元欄位和稅務分類項進行篩選和...。
Simply Show Hooks 》迄今為止，主題和外掛開發人員尋找用於 add_action() 和 add_filter() 函式的接口位置方法是搜尋WordPress代碼庫或在Codex中找到接口的參考。, Simply Show H...。
Random Post Plugin – Redirect URL to Post 》重定向您的訪客到：, , 隨機文章, 您最新的文章, 您最舊的文章, 前一篇或下一篇文章, 或一組條件的組合，例如最新的10篇文章中的隨機文章，至少3個月前的最新...。
Filter & Grids 》使用 AJAX 篩選自定義分類 / 分類標籤來篩選文章或自定義文章類型，無需重新載入頁面，並支持不同的分頁類型。這款外掛允許解決顯示網站頁面上的文章的各種任...。
Filter Page by Template 》如果您的WordPress網站有數百個頁面，並且主題有多個頁面模板，有時您想查看使用特定模板的頁面。但是，在WordPress管理員中，預設沒有搜索帖子或頁面與模板...。
Beautiful taxonomy filters 》Beautiful Taxonomy Filters 是一款易於使用且外觀優美的 WordPress 外掛程式，可讓您為文章類型提供過濾功能，同時能根據自訂分類、標籤等加入過濾。此外，...。
WOOF by Category 》WOOF by Category 是一個 WooCommerce 商品篩選器（WOOF）擴充外掛，允許使用者在不同的商品分類中設置不同的 WOOF 篩選器。, 外掛具有後台選項頁面，可設置...。