博客

在 WordPress 中使用 Options Framework 创建一个自定义相册功能，可以通过以下步骤实现：

1. 集成 Options Framework

首先，确保你已经在你的主题中集成了 Options Framework。如果尚未集成，可以按照以下步骤操作：

下载 Options Framework。

将 options.php 文件和 inc/ 文件夹复制到你的主题根目录中。

在主题的 functions.php 文件中添加以下代码：

define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/');
require_once dirname(__FILE__) . '/inc/options-framework.php';

2. 创建自定义相册选项

在 options.php 文件中，定义一个自定义选项用于上传图片。可以使用 upload 类型的字段来实现：

$options[] = array(
    'name' => __('相册图片', 'theme_textdomain'),
    'desc' => __('上传相册图片', 'theme_textdomain'),
    'id' => 'gallery_images',
    'type' => 'upload',
    'std' => '',
    'class' => 'gallery',
    'multiple' => true // 允许上传多张图片
);

3. 添加 JavaScript 以支持多图片上传

Options Framework 默认支持单图片上传，但需要额外的 JavaScript 代码来支持多图片上传。在主题的 functions.php 文件中添加以下代码：

function my_theme_custom_scripts() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.gallery-upload-button').click(function() {
            var uploadButton = $(this);
            var customUploader = wp.media({
                title: '<?php _e("选择图片", "theme_textdomain"); ?>',
                button: {
                    text: '<?php _e("选择图片", "theme_textdomain"); ?>'
                },
                multiple: true // 允许选择多张图片
            }).on('select', function() {
                var attachments = customUploader.state().get('selection').toJSON();
                var galleryContainer = uploadButton.prev('.gallery-container');
                galleryContainer.empty();
                $.each(attachments, function(index, attachment) {
                    galleryContainer.append('<div class="gallery-item"><img src="' + attachment.url + '" alt="' + attachment.title + '"/><input type="hidden" name="gallery_images[]" value="' + attachment.id + '"/></div>');
                });
            }).open();
        });
    });
    </script>
    <?php
}
add_action('admin_enqueue_scripts', 'my_theme_custom_scripts');

4. 修改 Options Framework 的 HTML 结构

在 options.php 文件中，为相册图片字段添加自定义的 HTML 结构：

function my_theme_render_gallery_field($args) {
    $options = get_option('of_options');
    ?>
    <div class="gallery-container">
        <?php
        if (!empty($options[$args['id']])) {
            foreach ($options[$args['id']] as $image_id) {
                echo '<div class="gallery-item">' . wp_get_attachment_image($image_id, 'thumbnail') . '<input type="hidden" name="' . $args['id'] . '[]" value="' . $image_id . '"/></div>';
            }
        }
        ?>
    </div>
    <input type="button" class="button gallery-upload-button" value="<?php _e('添加图片', 'theme_textdomain'); ?>" />
    <?php
}

5. 保存和显示相册

在主题的适当位置(如 header.php 或 footer.php)，使用保存的图片 ID 来显示相册：

$gallery_images = get_option('gallery_images');
if ($gallery_images) {
    echo '<div class="custom-gallery">';
    foreach ($gallery_images as $image_id) {
        echo '<img src="' . wp_get_attachment_url($image_id) . '" alt="' . get_post_field('post_title', $image_id) . '">';
    }
    echo '</div>';
}

6. 样式调整

根据需要在主题的 style.css 文件中添加样式，以美化相册的显示效果。