雖然現在最新的佈景主題，已進入區塊編輯器的方式與 Gutenberg 編輯器，真的可以防呆的方式建立頁面，使用預先製作的不同區塊樣式載入，拼湊出不同的頁面，這篇教學沒這麼高級，不然會寫不完😏。
這篇會用 Hook 來添加外觀內的”自訂”功能，來設定頁面某個區塊內的內容，例如圖片、標題、內文欄位，圖片當然是從媒體庫上傳與載入，方便改變在自訂主題版面區塊作圖片與內容變動，這部分的內容是存在 _options 資料表中，所以就不需特別寫分類或類型把資料存在 _post 資料表，這麼說應該還不知道”自訂”是什麼，看下圖吧。
在主題頁面添加自訂區塊
在主題自訂中增加一個自訂選項，選項內可以設定區塊的標題、內文、圖片欄位，添加 Hook 如下
PHP
function homeimag_theme_customizer($wp_customize) {
// 添加區塊選擇
$wp_customize->add_section('homeimag_section', array(
'title' => __('首頁圖片或文字', 'text-domain'),
'priority' => 30,
));
//標題欄位
$wp_customize->add_setting('home_title', array(
'default' => '',
'transport' => 'refresh',
));
$wp_customize->add_control('home_title', array(
'label' => __('標題', 'text-domain'),
'section' => 'homeimag_section',
'settings' => 'home_title',
'type' => 'text',
));
//內文欄位
$wp_customize->add_setting('home_text', array(
'default' => '',
'transport' => 'refresh',
));
$wp_customize->add_control('home_text', array(
'label' => __('內文', 'text-domain'),
'section' => 'homeimag_section',
'settings' => 'home_text',
'type' => 'textarea',
));
// 添加圖片上傳設定
$wp_customize->add_setting('home_image', array(
'default' => '',
'transport' => 'refresh',
));
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'home_image', array(
'label' => __('左側圖片', 'text-domain'),
'section' => 'homeimag_section',
'settings' => 'home_image',
)));
}
add_action('customize_register', 'homeimag_theme_customizer');上面程式碼 Hook 掛上後，在主題自訂裡就可以看到如下圖的選項。
下面是放在前台的程式碼，注意上面的 hook 的欄位名稱，與要取得的欄位一致，不然會撈不到值，另外我的主題是使用 Bootstrap 所以 HTML 結構也是使用 Bootstrap 結構，可以自行修改 HTML 結構。
PHP
<div class="container">
<div class="row">
<div class="col-6">
<?php
// 在主題模板中顯示自訂圖片
$homeimage_url = get_theme_mod('home_image');
if ($homeimage_url) {
echo '<img src="' . esc_url($homeimage_url) . '" alt="https://dafatime.idv.tw">';
}
?>
</div>
<div class="col-6">
<div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
<div class="my-3 p-3">
<?php
// 在主題模板中顯示自訂圖片
$home_title = get_theme_mod('home_title');
if ($home_title) {
echo '<h2 class="display-5">' . esc_attr($home_title) . '</h2>';
}
$home_text = get_theme_mod('home_text');
if ($home_text) {
echo '<p class="lead">' . esc_attr($home_text) . '</p>';
}
?>
</div>
</div>
</div>
</div>點開選項後，就可以看到在 Hook 添加的欄位標題、內文、圖片，只要在欄位或圖片修改，右半邊就會變化。
在主題上添加自訂多圖片區塊
以迴圈的方式來增加欄位，如果要大量上傳選擇圖片，例如最常看到頁面上會有像合作廠商、合作夥伴的 Logo 跑馬燈輪播，可以使用下面方式；
PHP
//迴圈多張圖
function partner_theme_customizer($wp_customize) {
// 添加區塊選擇
$wp_customize->add_section('partner_section', array(
'title' => __('合作廠商圖', 'text-domain'),
'priority' => 30,
));
// 添加多張圖片上傳設定
for ($i = 1; $i <= 10; $i++) { // 假設您最多需要10張圖片
$wp_customize->add_setting('partner_image_' . $i, array(
'default' => '',
'transport' => 'refresh',
));
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'partner_image_' . $i, array(
'label' => __('合作廠商圖 ' . $i, 'text-domain'),
'section' => 'partner_section',
'settings' => 'partner_image_' . $i,
)));
}
}
add_action('customize_register', 'partner_theme_customizer');
//打發時間 https://dafatime.idv.tw
上面 Hook 掛上後再自訂選單就會出現合作廠商的選項，點開後就可以看到迴圈出來的十個圖片欄位，如下圖：
下面是前台需要顯示 Logo 的輪播跑馬燈的 CSS、JS、html、PHP，這下面程式碼可以注意一下取得迴圈的欄位的資料也是用迴圈取得，下圖就是上傳圖片的結果，是不是很方便。
CSS
<style>
.logo-slider-container {
width: 100%;
overflow: hidden;
position: relative;
}
.logo-slider {
display: flex;
transition: transform 0.5s linear;
will-change: transform;
}
.logo-slider img {
max-height: 100px;
margin: 0 15px;
}
</style>PHP
<div class="container my-5">
<div class="logo-slider-container">
<div class="logo-slider">
<?php
// 在主題模板中顯示多張自訂圖片
for ($i = 1; $i <= 10; $i++) {
$partner_image_url = get_theme_mod('partner_image_' . $i);
if ($partner_image_url) {
echo '<img src="' . esc_url($partner_image_url) . '" alt="歷屆合作廠商 ' . $i . '">';
}
}
?>
</div>
</div>
</div>JavaScript
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.logo-slider');
const sliderItems = Array.from(slider.children);
// 克隆所有的 logo 並附加到 slider 末尾
sliderItems.forEach(item => {
const clone = item.cloneNode(true);
slider.appendChild(clone);
});
let scrollAmount = 0;
const speed = 1; // 滾動速度
function scrollSlider() {
scrollAmount += speed;
slider.style.transform = `translateX(-${scrollAmount}px)`;
if (scrollAmount >= slider.scrollWidth / 2) {
scrollAmount = 0;
slider.style.transform = 'translateX(0)';
}
requestAnimationFrame(scrollSlider);
}
scrollSlider();
});
</script>
總結
這篇文章演示使用 WP 的主題自訂功能，可以即時改變頁面，由於自訂這功能是將參數值存在 _options 資料表中，如果版面資料不需要保留舊的，就可以不需要使用 Post type 來儲存欄位資料，是不是很方便，教學就到這裡，掰~!
留言