gpt4 book ai didi

wordpress-theming - 同时添加自定义图像字段和其他字段

转载 作者:行者123 更新时间:2023-12-03 07:15:17 24 4
gpt4 key购买 nike

我基本上想要一个自定义 CMS 页面,其中包含成对的图像和其中定义的图像的标签。我打算使用这些项目对来填充我的新 WordPress 主题的自定义页面上的内容。

感谢 Handling Plugins Options in WordPress 2.8 with register_setting(),我已成功在 CMS 中创建了一个新的设置页面,并在其中填充了任意数量的文本框。 .

我现在需要为每个文本框添加字段,让用户打开媒体浏览器,然后选择上传到 WordPress 的现有图像或上传新图像以供选择。

我在网上找不到任何简单干净的例子。即使是我在 Stack Overflow 上发现的与此相关的问题似乎也没有关于此工作的清晰优雅的示例。

仅供记录;我最初计划使用我已经安装的插件( Developers Custom Fields )来执行此操作,认为使用此插件添加自定义图像字段会非常容易,因为使用它添加文本框非常简单。然而我似乎错了,没有明确的例子来指定这种字段。

如果您知道任何说明添加自定义图像字段(与同时添加其他字段无关)的示例,无论是使用 native WordPress API 代码还是与开发人员自定义字段插件集成。

最佳答案

您没有确切提及它,但您似乎正在处理可重复字段

两个感兴趣的插件:Advanced Custom FieldsCustom Content Type Manager .

今天,我在 WordPress communities at G+ 之一中看到了这篇文章:
Using the WordPress 3.5 Media Uploader within plugins .

此解决方案最初发布在 SO Question 中,此后已被删除。它被重写、修改和测试:

<?php
/**
* Plugin Name: (SO) Repeatable fields demo
* Plugin URI: http://stackoverflow.com/a/14452453/1287812
* Description: How to make repeatable fields in a meta box
* Author: brasofilo
* License: GPLv3
*/

add_action( 'admin_init', 'add_post_gallery_so_14445904' );
add_action( 'admin_head-post.php', 'print_scripts_so_14445904' );
add_action( 'admin_head-post-new.php', 'print_scripts_so_14445904' );
add_action( 'save_post', 'update_post_gallery_so_14445904', 10, 2 );

/**
* Add custom Meta Box to Posts post type
*/
function add_post_gallery_so_14445904()
{
add_meta_box(
'post_gallery',
'Custom Uploader',
'post_gallery_options_so_14445904',
'post',
'normal',
'core'
);
}

/**
* Print the Meta Box content
*/
function post_gallery_options_so_14445904()
{
global $post;
$gallery_data = get_post_meta( $post->ID, 'gallery_data', true );

// Use nonce for verification
wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_so_14445904' );
?>

<div id="dynamic_form">

<div id="field_wrap">
<?php
if ( isset( $gallery_data['image_url'] ) )
{
for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )
{
?>

<div class="field_row">

<div class="field_left">
<div class="form_field">
<label>Image URL</label>
<input type="text"
class="meta_image_url"
name="gallery[image_url][]"
value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
/>
</div>
<div class="form_field">
<label>Description</label>
<input type="text"
class="meta_image_desc"
name="gallery[image_desc][]"
value="<?php esc_html_e( $gallery_data['image_desc'][$i] ); ?>"
/>
</div>
</div>

<div class="field_right image_wrap">
<img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="48" width="48" />
</div>

<div class="field_right">
<input class="button" type="button" value="Choose File" onclick="add_image(this)" /><br />
<input class="button" type="button" value="Remove" onclick="remove_field(this)" />
</div>

<div class="clear" /></div>
</div>
<?php
} // endif
} // endforeach
?>
</div>

<div style="display:none" id="master-row">
<div class="field_row">
<div class="field_left">
<div class="form_field">
<label>Image URL</label>
<input class="meta_image_url" value="" type="text" name="gallery[image_url][]" />
</div>
<div class="form_field">
<label>Image Link</label>
<input class="meta_image_desc" value="" type="text" name="gallery[image_desc][]" />
</div>
</div>
<div class="field_right image_wrap">
</div>
<div class="field_right">
<input type="button" class="button" value="Choose File" onclick="add_image(this)" />
<br />
<input class="button" type="button" value="Remove" onclick="remove_field(this)" />
</div>
<div class="clear"></div>
</div>
</div>

<div id="add_field_row">
<input class="button" type="button" value="Add Field" onclick="add_field_row();" />
</div>

</div>

<?php
}

/**
* Print styles and scripts
*/
function print_scripts_so_14445904()
{
// Check for correct post_type
global $post;
if( 'post' != $post->post_type )
return;
?>
<style type="text/css">
.field_left {
float:left;
}

.field_right {
float:left;
margin-left:10px;
}

.clear {
clear:both;
}

#dynamic_form {
width:580px;
}

#dynamic_form input[type=text] {
width:300px;
}

#dynamic_form .field_row {
border:1px solid #999;
margin-bottom:10px;
padding:10px;
}

#dynamic_form label {
padding:0 6px;
}
</style>

<script type="text/javascript">
function add_image(obj) {
var parent=jQuery(obj).parent().parent('div.field_row');
var inputField = jQuery(parent).find("input.meta_image_url");

tb_show('', 'media-upload.php?TB_iframe=true');

window.send_to_editor = function(html) {
var url = jQuery(html).find('img').attr('src');
inputField.val(url);
jQuery(parent)
.find("div.image_wrap")
.html('<img src="'+url+'" height="48" width="48" />');

// inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>');

tb_remove();
};

return false;
}

function remove_field(obj) {
var parent=jQuery(obj).parent().parent();
//console.log(parent)
parent.remove();
}

function add_field_row() {
var row = jQuery('#master-row').html();
jQuery(row).appendTo('#field_wrap');
}
</script>
<?php
}

/**
* Save post action, process fields
*/
function update_post_gallery_so_14445904( $post_id, $post_object )
{
// Doing revision, exit earlier **can be removed**
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;

// Doing revision, exit earlier
if ( 'revision' == $post_object->post_type )
return;

// Verify authenticity
if ( !wp_verify_nonce( $_POST['noncename_so_14445904'], plugin_basename( __FILE__ ) ) )
return;

// Correct post type
if ( 'post' != $_POST['post_type'] )
return;

if ( $_POST['gallery'] )
{
// Build array for saving post meta
$gallery_data = array();
for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ )
{
if ( '' != $_POST['gallery']['image_url'][ $i ] )
{
$gallery_data['image_url'][] = $_POST['gallery']['image_url'][ $i ];
$gallery_data['image_desc'][] = $_POST['gallery']['image_desc'][ $i ];
}
}

if ( $gallery_data )
update_post_meta( $post_id, 'gallery_data', $gallery_data );
else
delete_post_meta( $post_id, 'gallery_data' );
}
// Nothing received, all fields are empty, delete option
else
{
delete_post_meta( $post_id, 'gallery_data' );
}
}

结果:
repeatable uploader

关于wordpress-theming - 同时添加自定义图像字段和其他字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14445904/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com