內容簡介
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'] . "<br>" .
"說明文字: " . $my_image_meta['caption'] . "<br>".
"敘述: ". $my_image_meta['description'] .
"</{$captiontag}></{$itemtag}>";
}
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'] . "<br>" .
"說明文字: " . $my_image_meta['caption'] . "<br>".
"敘述: ". $my_image_meta['description'] . "<br>".
"特別感謝: ". $my_image_meta['credit_text']. " (". $my_image_meta['credit_link'].")".
"</{$captiontag}></{$itemtag}>";
}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
外掛標籤
開發者團隊
② 後台搜尋「Gallery Image Captions (GIC)」→ 直接安裝（推薦）
原文外掛簡介
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 "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
"Title: " . $my_image_meta['title'] . "
" .
"Caption: " . $my_image_meta['caption'] . "
".
"Description: ". $my_image_meta['description'] .
"";
}
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 "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
"Caption: " . $my_image_meta['caption'] . "
" .
$credit .
"";
}
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;
}
}
