雖然現在最新的佈景主題,已進入區塊編輯器的方式與 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 來儲存欄位資料,是不是很方便,教學就到這裡,掰~!

最後修改日期: 2024 年 7 月 8 日

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。